@charset "utf-8";

.inner{
    max-width:760px;
    padding-right:15px;
    padding-left: 15px;
}
@media only screen and (min-width: 701px){
.inner{
    padding-right:20px;
    padding-left: 20px;
    margin-left: auto;
    margin-right: auto;
}
}
.question p{
    font-size: 16px;
    line-height: 2;
    font-weight: 500;
    letter-spacing:.05em;
}
    @media only screen and (min-width: 701px){
        .question p{
    font-size: 18px;
    line-height: 1.78;
    }

}
.img img{
    width:100%;
}
.lead h1{
    margin-top: 27px;
    text-align: left;
    font-size: 18px;
    color: #D32D26;
    word-break: break-all;
    line-height: 1.625;
}
@media screen and (min-width: 701px){
    .lead h1{
    margin-top: 70px;
    font-size:32px ;
    text-align:center;
    }
 }   

.lead .img{
    margin-top: 29px;
}
    @media only screen and (min-width: 701px){
        .lead .img{
    margin-top: 20px;
    }
}

.lead_text{
    margin-top: 20px;

}

.lead .index{
    margin-top: 58px;
    padding:25px 22px 22px ;
    background-color: #FCDBDE;
}
    @media screen and (min-width: 701px){
        .lead .index{
        margin-top: 80px;
        padding:20px 40px 30px ;
    }
}
.question .lead .index p{
    font-size: 14px;
    font-weight: 700;
    letter-spacing:.05em;
    line-height: 2;
}
    @media only screen and (min-width: 701px){
        .question .lead .index p{
        font-size: 18px;
        font-weight: 500;
        letter-spacing:.05em;
        line-height: 1.78;
    }
}

.lead_br{
    display:none;
}
@media only screen and (min-width: 701px){
    .lead_br{
        display:block;
    }
}
.lead .index p span{
    color:#D32D26

}

.lead .index ul{
    list-style: none;

}
.lead .index a{
    text-decoration:none;
    color:black;
}
.lead .index li{
    font-size: 14px;
    font-weight: 700;
    letter-spacing:.05em;
    line-height: 2;
    position: relative;
    margin-left: 22px;
    padding-left: 30px;
}
    @media only screen and (min-width: 701px){
        .lead .index li{
        font-size: 18px;
        font-weight: 500;
        margin-left: 22px;
        padding-left: 36px;
        line-height: 1.78;
    }
}

.lead .index li::before{
    content:"";
    width:18px;
    height:18px;
    background-image: url('/_var/goo-n/article_01/img/lead-icon01.png');
    background-size:cover;
    position: absolute;
    top:25%;
    left:0;
    transform: translateY(-50%);
}
@media only screen and (min-width: 701px){
    .lead .index li::before{
        top:50%;
    }
}
.lead .index .indexlink{
    position: relative;
    padding-left: 30px;
}

.lead .index .indexlink::before{
    content:"";
    width:18px;
    height:18px;
    background-image: url('/_var/goo-n/article_01/img/lead-icon01.png');
    background-size:cover;
    position: absolute;
    top:25%;
    left:0;
    transform: translateY(-50%);
}
@media only screen and (min-width: 701px){
    .lead .index .indexlink::before{
        top:50%;
    }
}


.lead h3{
    text-align: center;
    margin-top: 45px;
    color: #3B4043;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6875;
    letter-spacing: .05em;
}
@media only screen and (min-width: 701px){
.lead h3{
    margin-top: 80px;
    font-size: 24px;
    line-height: 1.67;
}
}
.supervision{
    margin-top: 18px;
    border:#FCDBDE 5px solid;
    padding:40px 27px  32px;
}
@media only screen and (min-width: 701px){
.supervision{
    padding:40px 156px  32px;
}
}

.supervision .img{
    width:200px;
    height:200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.supervision .name{
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #D32D26;
}
.supervision .text{
font-size: 14px;
}
.main{
    margin-top: 60px;
}
@media only screen and (min-width: 701px){
.main{
    margin-top: 80px;
}
}
.main h2{
    text-align: center;
    font-size:18px ;
    color: #D32D26;
    line-height: 1.61;
}
@media only screen and (min-width: 701px){
.main h2{
    font-size:32px ;
    line-height: 1.625;
}
}
.ttl{
    position: relative;
    text-align: center;
    line-height:47px;
    font-size: 16px;
    letter-spacing: .1em;
    color: #fff;
    margin: 20px;
}
@media only screen and (min-width: 701px){
.ttl{
    line-height:64px;
    font-size: 24px;
}
}

.ttl::before{
    content:"";
    width:100%;
    height:100%;
    background-image: url(/_var/goo-n/article_01/img/ttl.png);
    background-size: contain;
    background-position: center center;
    background-repeat:no-repeat;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:-1;
}


.ttl-long::before{
    background-image: url(/_var/goo-n/article_01/img/ttl-long.png);
}
.ttl-xlong::before{
    background-image: url(/_var/goo-n/article_01/img/ttl-xlong.png);
}
.qa{
    margin-top: 60px;
}
@media only screen and (min-width: 701px){
.qa{
    margin-top: 80px;
}
}

.qa .img:first-of-type{
    margin-top: 5px;
}

.img11{
    margin-top: 10px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 701px){
    .qa .img:first-of-type{
        margin-top: 20px;
    }
 .img11{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    }

.question p span{
    background-color: #FCDBDE;
}
.icon{
    margin-top: 60px;
    width:26px;
    height:47px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 701px){
 .icon{
    margin-top: 100px;
    width:45px;
    height:90px;
}
}
.icon img{
    width: 100%;
}
h2.recommend{
    margin-top: 60px;
    text-align: center;
    font-size:18px ;
    color: #D32D26;
    line-height: 1.61;
    letter-spacing: .05em;
    position: relative;
}
@media screen and (min-width: 701px){
    h2.recommend{
        margin-top: 100px;
        font-size:32px ;
        line-height: 1.75;
    }
 }   
 .recommend::before{
    content:"" ;
    width:58px;
    height:58px;
    background-size: cover;
    background-image: url(/_var/goo-n/article_01/img/main-icon02.png);
    position: absolute;
    top:30%;
    right:calc(50% + 120px);
    transform: translateY(-50%);
}
@media screen and (min-width: 701px){
.recommend::before{
    width:105px;
    height:105px;
    top:50%;
    right:calc(50% + 275px);
}
}

.recommend::after{
    content:"" ;
    width:58px;
    height:58px;
    background-size: cover;
    background-image: url(/_var/goo-n/article_01/img/main-icon03.png);
    position: absolute;
    top:30%;
    left:calc(50% + 120px);
    transform: translateY(-50%);
}
@media screen and (min-width: 701px){
    .recommend::after{
        width:105px;
        height:105px;
        top:50%;
        left:calc(50% + 275px);
    }
}
.recommend_img{
    margin-top:70px ;
    margin-bottom: 40px;
}
.recommend_link{
    color:#D32D26 !important;
}
.point{
    margin-top: 50px;
}
@media only screen and (min-width: 701px){
    .point{
        margin-top: 80px;
    }
}
.point .container{
    display: flex;
    grid-gap: 0 40px;

}
.point .img{
    width: 80px;
    height: 80px;
    flex:none;
}
@media only screen and (min-width: 701px){
.point .img{
    width: 200px;
    height: 200px;
}
}
.balloon{
    padding: 13px 16px;
    background-color: #FCDBDE;
    position: relative;
    margin-top: 0;
}
@media only screen and (min-width: 701px){
.balloon{
    padding: 30px 36px; 
}
}
.balloon::before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(90, 230, 40, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:15px;
    border-right-width:15px;
    margin-top: -7px;
    border-right-color: #FCDBDE;
    right:100%;
    top:6%;
 
}


@media only screen and (min-width: 701px){
    .balloon::before{
        border: solid transparent;
        content:'';
        height:0;
        width:0;
        pointer-events:none;
        position:absolute;
        border-color: rgba(90, 230, 40, 0);
        border-top-width:14px;
        border-bottom-width:14px;
        border-left-width:30px;
        border-right-width:30px;
        margin-top: -14px;
        border-right-color: #FCDBDE;
        right:100%;
        top:50%;
    }
}
.summary{
    margin-top: 27px;
}
@media only screen and (min-width: 701px){
.summary{
    margin-top: 80px;
}
}

@media only screen and (min-width: 701px){
.nopc{
    display:none;
}
}

#sec1, #sec2, #sec3, #sec4, #sec5,#sec6{
margin-top: -60px;
padding-top: 120px;
}
@media only screen and (min-width: 701px){
    #sec1, #sec2, #sec3, #sec4, #sec5,#sec6{
        margin-top: -50px;
        padding-top: 130px;
        }
    }