@charset "utf-8";
/* CSS Document 320-560*/
.kijiBox{margin: 0}

/* 動画を囲むコンテナのスタイル */
.video-header {
  position: relative;
  width: 100%;
  height: auto; /* 画面の高さに合わせる場合。任意の高さ（例: 60vh や 500px）に変更可能です */
  overflow: hidden;
}

/* 動画本体のスタイル */
.header-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに広げ、はみ出た部分をトリミング */
  display: block; /* 余白ができるのを防ぐ */
}
/*--------------------------------------------------------------------

first

--------------------------------------------------------------------*/
.first{background: url("../img/bg.png") repeat; color: #fff; padding: 30px 0 0px 0}
.first h2.ft18{margin-left: 8%; margin-bottom: 30px ; line-height: 1.4; margin-right: 2%; font-size:clamp(1.625rem, 1.292rem + 1.67vw, 1.875rem)}/*26-30*/
.first h2 span{font-size: clamp(1rem, 0.333rem + 3.33vw, 1.5rem)}/*16-24*/
.first .hea{position: relative}
.first .texr{letter-spacing: -1px; position: absolute; top: -15px; left: 3%; text-align: left; font-size: clamp(1.5rem, 1rem + 2.5vw, 1.875rem)}/*24-30*/
.first .texr p{display: inline-block; background: #fff; line-height: 1.4; color:#749070; padding: 0px 0 20px; margin-left: 5px }
.first .texr p:last-child{padding-top: 15px}
.first .texr p span{letter-spacing: -5px}
.first .text0{padding: 30px 0 10px; text-align: center; font-size:clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/



.menusuv{position: relative; background:url("../img/lesson/les.png") no-repeat right bottom; background-size:307px  86px; margin-left: 8%}

.menusuv .pagemenu{position: absolute; left: 0%; top: 32px; width:11px }
.menusuv ul{padding: 25px 5% 40px 7% }
.menusuv ul li{line-height: 1.2; margin-bottom: 8px; position: relative; padding-left: 20px}
.menusuv ul li::before{
content: "+";
display: blockactive;
left: 0;
top: 0; position: absolute;
}
.menusuv ul a{letter-spacing: 1px; color: #fff; padding-bottom: 5px ; font-size: clamp(0.688rem, 0.521rem + 0.83vw, 0.813rem)}/*11-13*/


/*--------------------------------------------------------------------

.what

--------------------------------------------------------------------*/
.what{text-align: center; margin: 60px 0 120px; position: relative}
.what .text{font-weight: 400; font-size:clamp(1.75rem, 1.417rem + 1.67vw, 2rem)}/*28-32*/
.what h2{letter-spacing: -2px; margin-bottom: 10px}
.what .text01{margin-bottom: 20px ; letter-spacing: -1px }
.what .text01 img{max-width:373px }
.what .text01 span{letter-spacing: -4px}
.what .text02{text-align: left; margin: 40px 8%}

.poi{display: flex; justify-content: space-between; background:#f5f8f4; border-radius: 10px;
padding: 20px 0px 20px 20px !important; margin: 0 6% 60px!important; align-items: center}
.poi dt{width: 20% !important}
.poi dt img{width: 100% !important}
.poi dd{width: 77% !important; text-align: left; color:#4a6a45; font-size:clamp(0.875rem, 0.542rem + 1.67vw, 1.125rem) }/*14-18*/

.what dl{display: flex; justify-content: space-between; margin-right: 1%}
.what dt{width: 73%; margin-left: -3%;}
.what dd{width: 30%}
.what dd p{margin: 0px auto 0;  width: fit-content; position: relative; line-height: 1.4; text-align: left; color: #749070; font-size:clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem) }/*20-26*/

/*--------------------------------------------------------------------

.less2

--------------------------------------------------------------------*/
.less2{position: relative; justify-content: space-between; display: flex; flex-direction: row-reverse; margin-bottom: 110px}
.less2 dt{width: 90%; position: relative}
.less2 dt .ho{position: absolute; width: 25%; max-width:98px; top: -60px; left: 25% }
.less2 dd{width: 25%; position: absolute; top: -15px; left: 5%}
.less2 dd .tate{height: 380px}
.less2 dd p{display: inline-block; color: #fff; font-weight: 300; padding: 10px 0; background: url("../img/bg.png") repeat; background-size: 150px; margin: 0px 5px 0 0;  width: fit-content; position: relative; line-height: 1.4; text-align: left; font-size:clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem) }/*20-26*/


.less2 .hosi1{position: absolute; right: 10%; top: 80px ; width:10px }
.less2 .hosi2{position: absolute; right: 7%; top: 110px; width:15px }
.less2 .hosi3{position: absolute; left: 25%; top: 120px; width:23px }

/*--------------------------------------------------------------------

.less3

--------------------------------------------------------------------*/
dl.less3 {display: flex; justify-content: space-between; margin-right: 1%; margin-bottom: 50px}
.less3 dt{width: 71%; margin-left: -3%; position: relative; }
.less3 dt .video-header{border-radius: 0 10px 10px 0}
.less3 dt img{position: absolute; left: 12%; top: -60px; max-width:116px; width: 33% }
.less3 dd{width: 30%; margin-top: -50px}
.less3 dd p{margin: 0px auto 0;  width: fit-content; position: relative; line-height: 1.4; text-align: left; color: #749070; font-size:clamp(1.063rem, 0.729rem + 1.67vw, 1.313rem) }/*17-21*/


/*--------------------------------------------------------------------

.less4

--------------------------------------------------------------------*/
.less4{position: relative; justify-content: space-between; display: flex; flex-direction: row-reverse; margin-bottom: 70px}
.less4 dt{width: 60%; position: relative}
.less4 dl .insta-video {
  width: 100%;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc2c4;
  box-sizing: border-box; 
}

.lessmov .insta-video {
  width: 72%;
  margin: 0;
  padding: 3px;
  border: 1px solid #ccc2c4;
  box-sizing: border-box;
}

.insta-video video {border-radius: 10px 0 0 0 ;
  width: 100%;
  height: auto; 
  display: block; 
  background-image: url('assets/img/lesson/thumbnail.jpg');
  background-size: cover;
  background-position: center;
}

.lessmov .insta-video video {
  background-image: url('assets/img/lesson/thumbnail.jpg');
}
.less4 dd{position: relative ;width: 35%; }    
.less4 dd p {position: absolute; bottom: 0; right: 0%; width: 83%; max-width:145px }
    
    
/*--------------------------------------------------------------------

.less5

--------------------------------------------------------------------*/
dl.less5 {display: flex; justify-content: space-between; margin-right: 1%; margin-bottom: 30px}
.less5 dt{width: 50%; }
.less5 dd{width: 50%; }
.less5 dd p{margin: 0px auto 0;  width: fit-content; position: relative; line-height: 1.4; text-align: left; color: #749070; font-size:clamp(1.063rem, 0.729rem + 1.67vw, 1.313rem) }/*17-21*/

/*--------------------------------------------------------------------

.price

--------------------------------------------------------------------*/
.price{padding:50px 5% ; border-radius: 20px}
.price .text img.waka{vertical-align: middle; width:17px; position: relative; top: -2px; margin: 0 5px}
.price .pribox{border-radius: 10px; padding: 40px 5%; background: url("../img/trial/price.png") no-repeat left top #fff; background-size:63px auto}
.price .pribox h2{margin-bottom: 20px}
.price .pribox .kagi{line-height: 1.4; padding: 8px 50px; font-size:clamp(1.625rem, 1.458rem + 0.83vw, 1.75rem) }/*26-28*/
.price .pribox .wach{position: relative; margin-bottom: 01px}
.price .pribox .wach img{width:171px }
.price .pribox .wach .ri{display: inline-block; text-align: right; position: absolute; bottom: 0; right: 0}
.price table{width: 100%; border-collapse: collapse;}
.price table tr{
  border-bottom: solid 2px white;
}
.price table tr:last-child{
  border-bottom: none;
}
.price table th{vertical-align:middle;
  position: relative;
  text-align: center;
  width:45%;
  background: url("../img/bg.png") repeat;
  color: white;
  padding: 10px 0px ;
}
.price table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #829a7f;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.price table td span{font-size: 10px; display: inline-block; padding-left: 8px;letter-spacing:normal}
.price table td{
  text-align: right;
  width: 55%;
  background-color: #f5f8f4;
  padding: 10px 20px 10px 0px;
}
.price table th img{width:30px; margin-bottom: 5px }
.price .nyu{ border:solid #e9e9e9 1px; padding: 10px; text-align: center}
.price .pea{text-align: right; margin: 10px 0}


/*--------------------------------------------------------------------

#a02

--------------------------------------------------------------------*/
#a02{ text-align: center; padding-top: 60px}
#a02 dl {margin-top: 40px; display: flex; justify-content: space-between; margin-bottom: 20px; flex-direction: row-reverse; }
#a02 dt{width: 55%; margin-left: -3%; position: relative; }
#a02 dt .video-header{border-radius: 10px 0 0 10%}
#a02 dt img{position: absolute; left: 12%; top: -60px; max-width:116px; width: 33% }
#a02 dd{width: 45%; }
#a02 dd p{margin: 0px auto 0;  width: fit-content; position: relative; line-height: 1.4; text-align: left; color: #749070; font-size:clamp(1.063rem, 0.729rem + 1.67vw, 1.313rem) }/*17-21*/
#a02 .price{padding-top: 40px; padding-bottom: 100px}
#a02 .red a{font-weight: bold; text-decoration: underline;}
/*--------------------------------------------------------------------

#a03

--------------------------------------------------------------------*/
#a03{text-align: center}
#a03 .goshi{
    font-size: 15px;
    border: 1px solid #3a3b3b;
    display: inline-block;
    border-radius: 5px;
    padding: 0 30px;
}
#a03 h2{letter-spacing: -1px}
#a03 .text{margin: 20px 0 0;letter-spacing: -1px; display: inline-block; position: relative; z-index: 5}
#a03 .text img{width: 90%}
#a03 dl{margin: -10px 8% 0}
#a03 dt{position: relative}
#a03 dt img.min{ position: absolute;
    left: -7%;
    bottom: 5%;
    width: 40%;
    max-width: 175px; }
#a03 dd{text-align: left}
#a03 dd .tex{margin-top: 20px; margin-bottom: 50px}
/*--------------------------------------------------------------------

baggeer

--------------------------------------------------------------------*/
.baggeer{padding: 40px 0; text-align: center; color: #fff; background: url("../img/lesson/bg.jpg") no-repeat; background-size: 100% }
.baggeer .min{width:295px; margin-bottom: 30px }
.baggeer .text02{text-align: left; padding: 0 8%; font-size: clamp(0.813rem, 0.563rem + 1.25vw, 1rem)}/*13-16*/
.baggeer .text02 span{display: block; margin: 20px 0}
.baggeer .text03{text-align: center; padding: 30px 0 80px; width: 100%; font-size: clamp(1rem, 0.833rem + 0.83vw, 1.125rem)}/*16-18*/

@media screen and (min-width: 500px) {
.baggeer{padding-top: 80px}
}