@charset "utf-8";

html { scroll-behavior: smooth;}
body { background: #b2cad3; }
img { display: block; margin: 0 auto; box-sizing: border-box;}

/* 体験レッスンはこちら */
.BnrCont { max-width: 960px; margin: 0 auto; background: #fff; padding: 50px 10px; box-sizing: border-box;}
.BnrCont a:hover { opacity: .7;}
.BnrCont .BnrDate { font-size: 14px; font-weight: 600; text-align: right; margin: 0 50px 10px 0;}
.BnrCont .BnrTxt { margin-top: 20px; font-size: 23px; font-weight: 700; text-align: center;}
.BnrCont .BnrTxt span { font-weight: 600; color: #bc3d20;}

/* 教材やシステムが評価 */
.Cont03 { max-width: 960px; margin: 0 auto; background: #fff; padding: 60px; box-sizing: border-box;}
.Cont03 .ContInr { margin-top: 40px; display: flex;}
.Cont03 .ContInr dt { width: 50%; padding: 10px;}
.Cont03 .ContInr .MovieInr { position: relative; zoom: 1; width:100%; height:0; padding-top:56.25%; background: #f5f5f5;}
.Cont03 .ContInr .MovieInr iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}
.Cont03 .ContInr .MovieInr > p { background: #f5f5f5; font-size: 14px; line-height: 1.6; padding: 10px;}
.Cont03 .School { margin-top: 100px; line-height: 1.8;}

/* 機能充実なお得な料金プラン */
.Plan { margin-top: -50px; position: relative;}
.Plan .BtnArea { width: 100%; display: flex; justify-content: center; position: absolute; bottom: -18px;}
.Plan .BtnArea a { display: flex; position: relative; width: 190px; height: 40px; font-weight: 600; border-radius: 20px; text-decoration: none; justify-content: center; align-items: center; color: #fff; background: #222;}
.Plan .BtnArea a .arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #ffffff; height: calc(tan(60deg) * 15px / 2); width: 8px; clip-path: polygon(0 0, 100% 50%, 0 100%);}
.Plan .BtnArea a:hover { background: #787878;}

@media screen and (max-width: 500px){

    body { background: #fff;}
    img { width: 100%;}

    /* 体験レッスンはこちら */
    .BnrCont { padding: 80px 10px;}
    .BnrCont .BnrDate { margin: 0 0 10px 0;}
    .BnrCont .BnrTxt { font-size: 14px;}

    /* 機能充実なお得な料金プラン */
    .Plan { margin-top: -30px;}

    /* 教材やシステムが評価 */
    .Cont03 { padding: 50px 10px;}
    .Cont03 .ContInr { display: inline-block; width:100%; margin-top: 30px;}
    .Cont03 .ContInr dt { width: 100%; padding: 0; box-sizing:border-box;}
    .Cont03 .ContInr dt + dt { margin-top: 100px;}
    .Cont03 .School { margin-top: 40px; line-height: 1.6;}
}