#manabi{padding:0 12rem}
#manabi .box{--colorMain:var(--blue500);--colorSub:var(--blue200);position:relative;padding:15rem 0;transition:opacity .3s;opacity:0}
#manabi .box.is-show{opacity:1}
#manabi .box:after{content:'';position:absolute;margin:auto;bottom:0;left:0;background:radial-gradient(circle farthest-side,#656565,#656565 60%,transparent 60%,transparent);background-size:8px;height:8px;width:100%;background:url(../img/manabi_border.svg) repeat-x top left;background-size:auto .3rem}
#manabi .box.tandai{--colorMain:var(--pink500);--colorSub:var(--pink200)}
#manabi .box .wrap{display:flex;align-items:flex-start;width:130rem;margin:0 auto}
#manabi .box .wrap .illust{flex-shrink:0;width:60rem;margin-right:5rem}
#manabi .box .wrap .txtBox{position:relative}
#manabi .box .wrap .txtBox .question{display:flex;align-items:flex-start;margin-bottom:8rem}
#manabi .box .wrap .txtBox .question img{flex-shrink:0;position:relative;top:-.6rem;left:-2.7rem;width:10.3rem}
#manabi .box .wrap .txtBox .question h3{font-size:4.5rem;line-height:1.3}
#manabi .box .wrap .txtBox .question h3 span{background-image:linear-gradient(to right,#f9bf13 0,#f9bf13 100%);background-repeat:no-repeat}
#manabi .box .wrap .txtBox p.lead{font-size:3.6rem;font-weight:var(--fontBold);margin-bottom:1.5rem;color:var(--colorMain)}
#manabi .box .wrap .txtBox .more_box{overflow:hidden;max-height:7.8rem;transition:max-height .9s var(--easeOutCubic)}
#manabi .box .wrap .txtBox .more_box.is-open{max-height:70rem}
#manabi .box .wrap .txtBox .more_box p.txt{font-size:2.5rem;line-height:1.8;text-align:justify;text-justify:inter-ideograph}
#manabi .box .wrap .txtBox .more_box .advice{position:relative;margin-top:5rem;padding:3rem 3.5rem 2.5rem;border-radius:1.5rem;background:var(--colorSub);font-size:2.5rem;line-height:1.8}
#manabi .box .wrap .txtBox .more_box .advice h4{position:absolute;top:-2rem;left:2.5rem;font-family:var(--en);color:var(--yellow600)}
#manabi .box .wrap .txtBox .more_box .advice p{text-align:justify;text-justify:inter-ideograph}
#manabi .box .wrap .txtBox .more_btn{text-align:center;margin-top:3.5rem;transition:opacity .3s;font-size:2.5rem}
#manabi .box .wrap .txtBox .more_btn.is-hide{opacity:0;pointer-events:none}
#manabi .box .wrap .txtBox .more_btn span{display:inline-block;width:26rem;border-radius:9rem;border:1px solid var(--black900);padding:1rem 0 .8rem;cursor:pointer}
@media screen and (max-width:767px){
#manabi{padding:0 4rem}
#manabi .box{padding:6rem 0 10rem}
#manabi .box .wrap{display:block;width:100%}
#manabi .box .wrap .illust{width:100%;margin:0 0 3rem;padding:0 3rem}
#manabi .box .wrap .txtBox .question{margin-bottom:3rem}
#manabi .box .wrap .txtBox .question img{top:-.6rem;left:-1rem;margin-right:2.5rem}
#manabi .box .wrap .txtBox .question h3{font-size:4.2rem;line-height:1.4;text-align:justify;text-justify:inter-ideograph}
#manabi .box .wrap .txtBox p.lead{font-size:4.2rem;margin-bottom:2.8rem;text-align:justify;text-justify:inter-ideograph}
#manabi .box .wrap .txtBox .more_box{max-height:10rem}
#manabi .box .wrap .txtBox .more_box.is-open{max-height:100rem}
#manabi .box .wrap .txtBox .more_box p.txt{font-size:3rem}
#manabi .box .wrap .txtBox .more_box .advice{font-size:3rem;padding:3rem 3.5rem 2.5rem}
#manabi .box .wrap .txtBox .more_box .advice h4{font-size:2.5rem}
#manabi .box .wrap .txtBox .more_btn{position:absolute;bottom:-.4rem;right:0;z-index:10;margin:0;background:var(--white900);font-size:3rem;color:var(--colorMain)}
#manabi .box .wrap .txtBox .more_btn span{width:auto;border-radius:0;border:none;padding:1rem 0 0 0}
#manabi .box .wrap .txtBox .more_btn span:before{content:'';display:inline-block;position:relative;content:'.....';padding:0 .7rem}
}
/*# sourceMappingURL=style.css.map */