#h1_head p{background-image: url("../img/title/tit_lesson.webp");  }

/*お願い*/
#info{ border-bottom: 5px solid #fff; border-top: 5px solid #fff;  margin: 0; padding: 80px 40px; position: relative; background-color: #f4f4ed; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#info h2{width: 120px; padding: 0 40px;}
#info dl{width: calc(100% - 120px); display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
#info dl dt{width: 8em; margin: 5px 0; background-color:var(--brown); border-radius: 5px; color: #fff; text-align: center; position: relative;}
#info dl dt::before{ content: ""; margin: 0; position: absolute; right: -9px; top: calc(50% - 6px); width: 10px; height: 12px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: var(--brown); }
#info dl dd{width: calc(100% - 8em); margin: 5px 0; border-bottom: 1px dotted var(--green); padding-left: 1em;}
#info dl dd span{text-decoration-line: underline; text-decoration-style: wavy; color:var(--red); display: inline-block;}

/*レッスン詳細へ*/
#viewmore{background-color: var(--bg_gray); margin: 0 auto; padding: 0 40px; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 2%; position: relative; z-index: 2; }
#viewmore p.en_tit{margin-top: -0.4em;}
#viewmore p{width: 100%; padding: 0;}
#viewmore article a{display: inline-block; width: 100%; background-color: #fff;}
#viewmore article{width: 32%; max-width: 400px; margin: 40px 0 80px 0;}
#viewmore .btn{background-repeat: no-repeat; background-position: left 14px center; border: 1px solid var(--green); padding: 5px; margin-bottom: 20px;}
#viewmore .btn01{background-size: auto 7vw;  background-image: url("../img/icon_month.webp"); background-image: image-set(url(../img/icon_month.webp) 1x, url(../img/icon_month_sp.webp) 2x); background-image: -webkit-image-set(url(../img/icon_month.webp) 1x, url(../img/icon_month_sp.webp) 2x);  }
#viewmore .btn02{background-size: auto 7vw;  background-image: url("../img/icon_trial.webp"); background-image: image-set(url(../img/icon_trial.webp) 1x, url(../img/icon_trial_sp.webp) 2x); background-image: -webkit-image-set(url(../img/icon_trial.webp) 1x, url(../img/icon_trial_sp.webp) 2x);  }
#viewmore .btn03{background-size: auto 7vw;  background-image: url("../img/icon_basic.webp"); background-image: image-set(url(../img/icon_basic.webp) 1x, url(../img/icon_basic_sp.webp) 2x); background-image: -webkit-image-set(url(../img/icon_basic.webp) 1x, url(../img/icon_basic_sp.webp) 2x);  }
#viewmore .jn { font-family: "Shippori Mincho B1", serif; font-weight: 400; font-style: normal; color:var(--green);  display: block; font-size: 2vw;}
#lesson .en { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-weight: normal; color:#999; position: relative; display: block; font-size: 2vw;}
#viewmore h2{width: 100%; height: 100%; padding: 20px 5px 20px 10vw; border: 1px dotted var(--green); background-image: url("../img/arrow.svg"); background-size: auto 2vw; background-repeat: no-repeat; background-position: right 10px top 10px;}



/*******tablet*******/
@media screen and (orientation: portrait){
#info{padding: 80px 40px; background-color: var(--bg_yellow);}
#info h2{width: 120px; padding: 0 40px;}
#info dl{width: 100% ; display: block;}
#info dl dt{border-bottom:none; border-radius: 5px; margin: 0 auto;}
#info dl dt::before{display: none;}
#info dl dd{width: 100%; margin: 20px 0; padding: 0 0 10px 0; border-bottom: 1px dotted var(--green);}

#viewmore{padding: 0 40px 40px 40px;}
#viewmore article a{width: auto; }
#viewmore article{width: 100%; max-width: 100%; margin: 0; display: flex; justify-content: start; align-items:flex-start; }
#viewmore article p{margin-top:2em; width: calc(100% - 340px); }
#viewmore .btn{margin-right: 20px; margin-top: 20px; width:320px ;}
#viewmore .btn01{background-size: auto 55%; }
#viewmore .btn02{background-size: auto 55%; }
#viewmore .btn03{background-size: auto 55%; }
#viewmore .jn { font-size: 28px;}
#viewmore .en { font-size: 28px;}
#viewmore h2{padding: 20px 5px 20px 90px; background-position: right 10px bottom 10px; background-size: auto 30px; }
}

/*******SP*******/
@media screen and (max-width:600px){
 .fade-slider {position: relative; width: 60vw; height: 75vw; }

#info{padding: 80px 20px;}

#viewmore{ padding: 0 20px 40px 20px;}
#viewmore article{display: block; margin: 20px 0 0 0;}
#viewmore article p{margin:0 auto; width: 80%; text-align: center; }
#viewmore .btn{width:90% ; max-width: 320px; margin: 0 auto; display: block; }
#viewmore .btn01{background-size: 70px auto ; background-position: top 20px center; }
#viewmore .btn02{background-size: 80px auto ;  background-position: top 20px center; }
#viewmore .btn03{background-size: 80px auto ;  background-position: top 20px center; }
#viewmore .jn { font-size: 28px;}
#viewmore .en { font-size: 28px;}
#viewmore h2{padding: 90px 5px 20px 5px; background-position: right 10px bottom 10px; text-align: center;}

}

/*******Wide*******/
@media screen and (min-width:1260px){
#info{ padding: 80px calc(50% - 630px); }
#viewmore p{ padding-left:calc(50% - 630px); padding-right:calc(50% - 630px); }
#viewmore .jn { font-size: 30px;}
#viewmore .en { font-size: 30px;}
#viewmore h2{ background-size: auto 40%; padding: 20px 5px 20px 110px; }
#viewmore .btn01{background-size: auto 66%; }
#viewmore .btn02{background-size: auto 66%; }
#viewmore .btn03{background-size: auto 66%; }
}