@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');
@font-face
{
font-family:"こころ明朝" ;
src: url('https://cdn.leafscape.be/kokoro/Kokoro_web.woff2')
     format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
オリジナルのフォントは以下から取得できます。
http://ipafont.ipa.go.jp/
-------------------------------------------------*/

/* 基本設定 */
:root {
    --color1: #83ede5;
    --color2: #c1ede9;
}
html {
    background: transparent;
    font-size: 62.5%;
}
body {
    min-height: 100vh;
    padding-top: 10px;
    background: #ffffff;
    color: #3b4443;
    font-family: 'こころ明朝', sans-serif;
    font-size: 1.4rem;
    line-height: 2;
}
a {
    color: #60a8c5;
    text-decoration: none;  
}
a:visited {
    color: #2c6c7a;
}

.page p{
font-size:1.1rem;
line-height:150%;
color:#888;
background:#fff;
margin:20px 10px;
padding:10px;
border:solid 1px #ddd;
}

/* 段落、余白 */
.page {
    width: 70%;
     min-width: 700px;
    padding: 10px 0;
    margin: 10vh auto;
}
/* レスポンシブ調整用 */
/* タブレットなど */
@media screen and (max-width:1300px) {
    .box {
        margin: 5vh auto;
    }
    .columns {
        columns: 2;
    }
}
/* スマホなど */
@media screen and (max-width:800px) {
    body {
        font-size: 1.3rem;
    }
    p {
        padding: 0 1rem;
    }
    .page {
        width: 90%;
         min-width: 200px;
         max-width: 500px;
        margin: auto;
    }
}
/* 本文タイトルとリンク */
.title{
font-size:3rem;
margin:4px 0 0 0;
padding:0;
font-family: 'Shippori Mincho', sans-serif;
font-weight:400;
line-height:1.4;
text-shadow:1px 1px 0 #fff,
2px 2px 0 #e5e5e5;
text-align:center;
}
.mainback {
    text-align:center;
}
/* 黒塗り */
input.netabare02_checkbox {
  display: none;
}
label.netabare02_label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
label.netabare02_label:after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  top: -5px;
  left: -5px;
  margin: auto;
  z-index: 2;
  transition: 0.3s;
}
label.netabare02_label:before {
  word-break: keep-all;
  display: block;
  border: 1px solid #c70b0b;
  font-size: 14px;
  background-color: #ffeced;
  color: #c70b0b;
  position: absolute;
  padding: 4px 10px;
  z-index: 3;
  right: 0;
  left: 0;
  bottom: calc(100% + 5px);
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 220px;
  text-align: center;
  border-radius: 4px;
  transition: 0.3s;
  pointer-events: none;
  opacity: 0;
}
label.netabare02_label:hover:before {
  opacity: 1;
}
input.netabare02_checkbox:checked + label.netabare02_label:after {
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
}
input.netabare02_checkbox:checked + label.netabare02_label:hover:before {
  opacity: 0;
}