html {
  visibility: hidden;
}
html.wf-active, html.wfno-load {
  visibility: visible;
}
.sub {
  margin: 20px 0 5px 0;
  background: url('img/subtitle-.png') no-repeat center top;
  background-size: 264px 120px;
  height: 130px;
  position: relative;
  }

.subtitle {
  color: #FF77A0;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
}

.subtitle:before,
.subtitle:after {
  font-family: 'Material Icons';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #FF77A0;
}

.subtitle:before {
  left: 0;
  content: '\e65f';
}

.subtitle:after {
  right: 0;
  content: '\e65f';
  transform: scale(-1, 1);
}

.subtitle_g {
  color: #FF8C95;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
}

.subtitle_g:before,
.subtitle_g:after {
  font-family: 'Material Icons';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #FF8C95;
}

.subtitle_g:before {
  left: 0;
  content: '\e65f';
}

.subtitle_g:after {
  right: 0;
  content: '\e65f';
  transform: scale(-1, 1);
}

.subtitle_w {
  color: #BF8CFF;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
}

.subtitle_w:before,
.subtitle_w:after {
  font-family: 'Material Icons';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #BF8CFF;
}

.subtitle_w:before {
  left: 0;
  content: '\e65f';
}

.subtitle_w:after {
  right: 0;
  content: '\e65f';
  transform: scale(-1, 1);
}

.subtitle_b {
  color: #8CCAFF;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
}

.subtitle_b:before,
.subtitle_b:after {
  font-family: 'Material Icons';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #8CCAFF;
}

.subtitle_b:before {
  left: 0;
  content: '\e65f';
}

.subtitle_b:after {
  right: 0;
  content: '\e65f';
  transform: scale(-1, 1);
}

.subtitle_ex {
  color: #4DFF55;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
}

.subtitle_ex:before,
.subtitle_ex:after {
  font-family: 'Material Icons';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #4DFF55;
}

.subtitle_ex:before {
  left: 0;
  content: '\e65f';
}

.subtitle_ex:after {
  right: 0;
  content: '\e65f';
  transform: scale(-1, 1);
}


body {
	display:none;
	font-size : 16px;
	color:#808080;
  	font-family: 'Kaisei Opti','Kiwi Maru',"M PLUS Rounded 1c","Meiryo";
}
a {
	color: #FF77A0;
  text-decoration: underline;
}
a:hover{
	color: #FF77A0;
  text-decoration: none;
}

.usu {
	opacity:0.5;
}

.usu_link:hover{
	opacity:0.5;
}
.zoom{
  cursor: zoom-in;
}

.mini {
	font-size : 14px;
}
.under {
  background: radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #ee2 7px, transparent 7px) ,
              radial-gradient(circle at 7px calc(100% - 7px), #ee2 7px, transparent 7px) ,
              linear-gradient(to bottom, #fff calc(100% - 14px), transparent calc(100% - 14px)) ,
              linear-gradient(to right, transparent 7px, #ee2 7px, #ee2 calc(100% - 7px), transparent calc(100% - 7px));
  display:inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.download {
  text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background-color: #FF77A0;
    color: #fff;
	font-size : 16px;
margin-bottom:5px;
    border: dashed 1px #FF77A0;
max-width: 300px
}
.download::after {
font-family: "Font Awesome 5 Free";
  content: '\f1c7';
  transform: scale(-1, 1);
}

.download:hover {
    background-color: #fff;
    color: #FF77A0;
    border: dashed 1px #FF77A0;

}

.contents{
 border: 1px solid #808080;
  padding: 2em;
  border-radius: 15px;
     width: 100%;
     max-width: 650px;
     margin: auto;
     margin-bottom: 10px;
 }

 .flexbox {
  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  list-style: none;
 }
 .box1 {
     text-align: left;
     margin: 0;
 }
 .box1b {
     text-align: right;
     width: 25%;
     margin: 0;
 }
 .box2 {
      width: 50%;
     text-align: left;
     margin: 0 5px 0 5px;

 }
 @media screen and (max-width: 640px) {
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 100%;
     text-align: center;
         margin: 0 auto;
         border-bottom: solid 1px #ccc;
     }
     .flexbox .box2 {
         width: 100%;
     text-align: left;
         margin: 0 auto;
        padding-bottom: 10px;
        margin-bottom: 10px;
         border-bottom: solid 1px #ccc;
     }
 }


table{
  border-collapse: collapse;
}

.up_top {
  vertical-align: top;
}

.th- {
text-align: right;
vertical-align: top;
}

.tb01 th {
 width:140px;
  padding:11px 10px 10px 0px;
}
.tb01 th,
.tb01 td{
  border-bottom: dotted 1px #ccc;
  text-align:left;
  box-sizing:border-box;
}

.tb_link {
  width: auto;
  border-collapse: collapse;
  border-spacing: 0;
    justify-content: center;
  align-items: center;

}

.tb_link td{
 width:200px;
 padding:0px 5px 0px 5px;
 vertical-align: top;
}

@media all and (max-width: 450px) {
.tb_link {
     width:200px;
  }
.tb_link td {
    display: block;
     width:200px;
    border-bottom: none;
  }
.tb_link td:last-child {

  }
}


.bn200{
  width: 200px;
  text-decoration: none;
}
.bn20011{
    background-color: #FF77A0;
    color: #fff;
  height: 11px;
  font-size : 11px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  border-right: 1px solid #FF77A0;
  border-bottom: 1px solid #FF77A0;
  border-left: 1px solid #FF77A0;
  margin-top: -5px;
  margin-bottom: 5px;
}

.no_bn {
  width: 200px;
  height: 51px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #FF77A0;
  text-decoration: none;
  margin-bottom: 6px;

}

.new{
  height: 13px;
  width: 32px;
  margin-bottom: -1px;
}

.up{
  height: 13px;
  width: 23px;
  margin-bottom: -1px;
}


.first-{
display: block;
    width: 100%;
}
.first-:hover{
	opacity:0.5;
}

.first{
  display: inline-block;
	color:#808080;
    width: 100%;
  padding:5px;

     border-radius:30px;
     border: 1px solid #808080;
     }
.first1{
 display: inline-block;
  width: 50px;
  height: 50px;
  text-align:center;
  border-radius: 50%;
 border: 1px solid #808080;
 	font-size : 30px;
  margin-right:5px;
     }
.first1-{
 display: inline-block;
cursor: pointer;
 border-radius: 30px;
   width: 50px;
  height: 50px;
  text-align:center;
  border-radius: 50%;
 	font-size : 30px;
  margin-right:5px;
     }

.first2 {
     text-align: left;
     margin: 0;
 }
.first3{
 display: inline-block;
cursor: pointer;
  text-align:center;
 	font-size : 30px;
  margin-right:5px;
     }
.first4 {
     text-align: left;
     padding-left: 10px;
 }

.girl{
	color:#FFBDC3;
	background: #FFBDC3;
}
.woman{
	color:#F3BDFF;
	background: #F3BDFF;
}
.boy{
	color:#BDE3FF;
	background: #BDE3FF;
}
.ex{
  color:#BDFFC2;
  background:#BDFFC2;
}

.voice{
  color:#808080;
  background:#FFF;
  mix-blend-mode:screen;
}


.ribbon19-wrapper {
    animation-name: fadein;
    animation-duration: 1s;
  display: block;
  box-sizing: border-box;
  	position: relative;
 border: 1px solid #808080;
  padding: 2em;
  border-radius: 15px;
     width: 100%;
     max-width: 650px;
     margin: auto;
     margin-bottom: 10px;
}

.ribbon19-content {
  position: absolute;
  top: 0;
 left: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  }

.ribbon19 {
  display: inline-block;
  position: absolute;
  padding: 5px 0;
  left: -50px;
  top: 20px;
  width: 180px;
  text-align: center;
  font-size: 18px;
  line-height: 16px;
  background: #FF77A0;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-shadow: 0 0 0 2px #FF77A0;
  border-top: dashed 1px #FFC9DB;
  border-bottom: dashed 1px #FFC9DB;
}

.up::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  
}
 
.up::-webkit-scrollbar-thumb {
  background: #FFC9DB;
  border-radius: 5px;
}

@media screen and (max-width: 640px) {
  .tb01 {
    width: 95%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
   padding:10px 10px 10px 0px;
 }
  table.tb01 td {
    margin:-20px 0px 0px 0px;
    border-bottom: solid 1px #ccc;
  }
  .tb01 tr:last-child{
}
}

tb_link td {
    display: block;
    width: 100%;
    border-bottom:none;
  }

.mediPlayer {
	position: relative;
}
.mediPlayer svg {
	width:50px;
	position:absolute;
	left:-1px;
	top:-1px;
	z-index:10;
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.histic {
 font-size : 14px;
  position: relative;
     margin-bottom: 5px;
     margin-left: 14px;
}
.histic::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/histic.png);
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.histic_r {
 background-position:left top;font-size : 14px;
  position: relative;
     margin-bottom: 5px;
     margin-left: 14px;
}
.histic_r::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/histic_r.png);
}

.r18 {
 background-position:left top;
  position: relative;
     margin-bottom: 5px;
     margin-left: 16px;
}
.r18::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 11px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/histic_r.png);
}
.r18_up {
}

.r18_up img {
	width:18px;height:18px;
	vertical-align: bottom;
	margin-bottom:2px;
	margin-right:-1px;
	}

.fem {
 background-position:left top;
  position: relative;
     margin-left: 16px;
}
.fem::before {
  /* 基本的に変更しないプロパティ */  
  color: #FF77A0;
  font-family: "Font Awesome 5 Free";
  content: '\f221';
  font-weight: 900;
  position: absolute;
  top: 11px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
}

.tooltip {
    position: relative;
    z_index: 99999;
}

.tooltip-002 {
    z_index: 99999;
    display: inline-block;
    position: relative;
}

.tooltip-002 > div {
    cursor: pointer;
}

.tooltip-002 > span {
    display: flex;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    padding: .5em 1em;
    border-radius: 15px;
    background-color: #FF77A0;
    color: #ffffff;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity .3s;
}

.tooltip-002 > span::before {
    position: absolute;
    bottom: -6px;
    width: 9px;
    height: 7px;
    background-color: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.tooltip-002:hover > span {
    visibility: visible;
    opacity: 1;
}

.batu{
 font-size : 14px;
  position: relative;
     margin-bottom: 5px;
     margin-left: 14px;
}
.batu::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/ic_batu.png);
}

.sank{
 font-size : 14px;
  position: relative;
     margin-bottom: 5px;
     margin-left: 14px;
}
.sank::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/ic_sank.png);
}

.ten{
 font-size : 14px;
  position: relative;
     margin-bottom: 5px;
     margin-left: 14px;
}
.ten::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/ic_ten.png);
}

.migi{
 font-size : 14px;
  position: relative;
     margin-bottom: px;
     margin-left: 14px;
}
.migi::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/ic_migi.png);
}

.kome{
 font-size : 14px;
  position: relative;
     margin-bottom: px;
     margin-left: 14px;
}
.kome::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 10.5px;
  background-repeat: no-repeat;
  background-size: contain;
background-attachment: fixed;
background-position: center;
  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -14px;
  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);
  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;
  /* 表示させるアイコンのパスを指定 */
  background-image: url(../img/ic_kome.png);
}

.cre
{
    width:100%;
  table-layout: fixed;
}
.cre2
{
     vertical-align: center;
}


.cre_girl {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 26px;
  top: 0px;
    left: 10px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  background: #FFBDC3;
  border-radius: 50%;
  box-sizing: border-box;
}

.cre_girl:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #FFBDC3;
  z-index: -10;
}
.cre_girl_title {
  color: #FF8C95;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
    margin-bottom: 0px;

}
.cre_girl_title2 {
  text-align: left;
}

.cre_woman {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 26px;
  top: 0px;
    left: 10px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  background: #F3BDFF;
  border-radius: 50%;
  box-sizing: border-box;
}

.cre_woman:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #F3BDFF;
  z-index: -10;
}
.cre_woman_title {
  color: #BF8CFF;
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
  margin-top: -8px;
    margin-bottom: 0px;

}
.cre_woman_title2 {
  text-align: left;
}

.radio-2 {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
    margin-top:-1px;
    margin-bottom:-3px;

}

.radio-2 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.radio-2 label::before,
.radio-2 label::after {
    border-radius: 50%;
    content: '';
}

.radio-2 label::before {
    width: 18px;
    height: 18px;
    border: 2px solid #dee5eb;
    box-sizing: border-box;
}

.radio-2 label::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background-color: #dee5eb;
}

.radio-2 label:has(:checked)::after {
    background-color: #ff77a0;
    animation: anim-radio-2 .3s linear;
}

@keyframes anim-radio-2 {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #ff77a033;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

.radio-2 input {
    display: none;
}

.keisanbox {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 5px
}

.keisanbox1 {
	display: block;
	border-radius: 10px 10px 0 0;
	width: 100%;
	background-color:#F2B5BA;color:#ffffff;
	font-weight:bold;
}
.keisanbox2 {
	display: block;
	border-radius: 0 0 10px 10px;
	border:1px solid #F2B5BA;
	padding-top:3px;
}
.keisan_50 {
	width: 190px;
}

.keisan_t {
	font-size : 15px;
	color:#808080;
  	font-family: 'Kaisei Opti','Kiwi Maru',"M PLUS Rounded 1c","Meiryo";
	margin-bottom:10px;
	margin-right:5px;
	border:1px solid #808080;
		width: 150px;

}
.keisan_t1 {
	margin-top:-5px;
}
.keisan_t2 {
	margin-top:10px;
	margin-bottom:2px;
}
.keisan_t3{
	font-size : 14px;
	position: relative;
	padding-top: 2px;
	margin-left: -2px;
}
.keisan_t3b{
	width: 50%;

}
:disabled {
	opacity: 0.3;
}
.float_l {
	float: left;
}
.goukei {
	font-size : 25px;
	display: inline-block;
	width:150px;
	border-bottom:1px solid #808080;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
}
.sample1 {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%; /* table幅を100%に指定 */
    background: #fff;
    border: none;
}
.sample1 th,
.sample1 td {
    display: block; /* セルをブロック要素に指定 */
    width: 100%; /* セルを親要素いっぱいの幅に指定 */
    border: none;
    padding: 10px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
}
.sample1 th {
    font-weight: 700;
    color: #fff;
    background: #F2B5BA; /* thの背景色 */
}

@media screen and (min-width: 768px) {
    .sample1 th,
    .sample1 td {
        display: table-cell; /* デフォルト値に指定 */
        border-bottom: 1px solid #ccc;
        background: #fff;
    }
    .sample1 th {
	    color: #808080;
        background: #fff; /* thの背景色 */
    }
    .sample1 tr th:first-child {
        width: 180px; /* thの固定幅 */
    }
}