html{
font-size: 62.5%;
background:#d9ede5;
}
body { 
text-align:center;
padding:0;
margin:0 auto;
font-size:1.6rem;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",'Noto Sans Japanese',"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
background:#d9ede5;
color: #222;
}
a{
color: #3abfdd;
text-decoration: underline;
font-weight: bold;
}

#header{
width:100%;
text-align:center;
margin:0 auto;
background:url('../img2/title_bg.png') no-repeat center top;
background-size:100% auto;
}

#header h1 {
color:#222;
font-size: 4.2vw;
font-weight: 600;
line-height: 150%;
text-align: center;
margin: 0 auto;
padding: 17% 0 14% 0;
}
#header h1 strong{
font-size: 6.3vw;
line-height: 130%;
}
#header h1 span,
#header h1 sup{
color: #ff0468;
font-weight: 600;
}

#main{
padding:0 4% 8% 4% ;
margin:0 2% 6% 2%;
clear: both;
background: #fff;
}
#main div.pr{
display: block;
width: 60%x;
font-size: 3vw;
line-height:130%;
text-align: right;
padding: 0;
}

#main p{
font-size:3.8vw;
line-height:200%;
text-align:left;
padding:3% 0 4% 0;
}



#main h3 {
margin:10% auto 2% auto;
color: #ff00ff;
font-size: 5vw;
line-height: 150%;
font-weight: 600;
padding: 3% 1% 3% 1%;
text-align: center;
border-top:4px solid #2c2c2c;
border-bottom:4px solid #2c2c2c;
}

/*====================================
文字の装飾・配置
=====================================*/
strong{
font-weight:bold;
}
sup{
font-size: 3vw;
line-height: 130%;
color: #555;
}
#main .bold{
font-weight: bold;
}
#main .center{
text-align: center;
}
#header .left,
#main .left{
text-align: left;
}
#header .right,
#main .right{
text-align: right;
}
#main .red{
color:#ff0000;
}
#main .blue{
color: #0000ff;
}
#main .yellow{
color: #ffce00;
}

#main .deeppink{
color: #fd497c;
}
.white{
color: #fff;
}
#main .larger{
font-size: 5vw;
}
#main .smaller{
font-size: 3.7vw;
line-height: 120%;
}
#header .smallest,
#main .smallest{
font-size: 3vw;
line-height: 130%;
color: #555;
}

#main .marker2{
background: -webkit-linear-gradient(transparent 0%, #ffbbcb 0%, #ffbbcb 100%, transparent 100%);
background: -o-linear-gradient(transparent 0%, #ffbbcb 0%, #ffbbcb 100%, transparent 100%);
background: linear-gradient(transparent 0%, #ffbbcb 0%, #ffbbcb 100%, transparent 100%);
font-weight: bold;
display:inline;
}
#main .underline{
text-decoration: underline;
}

.cta,
.cta2{
padding:5% 0;
position: relative;
}

/*マーカーアニメーション*/
.c-marker {
background: -webkit-linear-gradient(left, #ffff33 50%, transparent 50%);
background: -moz-linear-gradient(left, #ffff33 50%, transparent 50%);
background: linear-gradient(left, #ffff33 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% 1em; 
background-position: 100% .7em;
transition: 1.5s;
}
.c-marker.is-active{
background-position: 0% .3em;
}

#footer{
text-align:center;
margin:3% auto 0 auto;
font-size:10pt;
line-height: 180%;
}
#footer p{
padding: 3% 0;
text-align: center;
}


/*====================================
スマホオンリー
=====================================*/
@media screen and (max-width: 767px){
#main img{
width:100%;
height:auto;
}
#main video{
width:100%;
height:auto;
}
#main img.thin{
width:60%;
height:auto;
}

br.pc{
display:none;
}
}


/*====================================
ボタンキラリ
=====================================*/

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}

.reflection:after {
content:””;
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*====================================
YESNOボタン
=====================================*/
#kijilp .main .yesno h3{
    margin:6% auto 0 auto;
    }
    
    section.s-section {
    padding-bottom: 10px;
    margin-bottom: 10px;
    }
    section.s-section:last-child {
    border: none;
    }
    
    .radio-container {
    display: flex;
    justify-content: center;
    }
    
    input{
    display:none;
    }
    
    input[type="radio"]+label {
    background:#fcfcfc;
    color: #222;
    }
    
    input:checked  +.f-label1 {
    box-sizing: border-box;
    background: #ffc0cb;
    color: #fff;
    border: 1px solid #ffc0cb;
    box-shadow: 0 4px 0px #dda8b0;
    width: 50%;
    font-size: 1.5rem;
    }
    
    input:checked  +.f-label2 {
    box-sizing: border-box;
    background: #AFDBDB;
    color: #fff;
    border: 1px solid #BFE0E2;
    box-shadow: 0 4px 0px #93C6C6;
    width: 50%;
    font-size:1.5rem;
    }
    
    label {
    text-align: center;
    padding: 1.5rem 2rem;
    margin: 1rem  .7rem;
    border-radius: 28px;
    border: 1px solid #e1e1e1;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.6rem;
    box-sizing: border-box;
    box-shadow: 0 4px 0px #6c6c6c75;
    }
    
    label.f-label1 {
    width: 50%;
    font-size: 1.5rem;
    }
    
    label.f-label2 {
    width: 50%;
    font-size: 1.5rem;
    }

    label.f-label0 {
        width: 100%;
        font-size: 1.5rem;
        }