@charset "utf-8";
/* CSS Document 320-640 */

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

first

--------------------------------------------------------------------*/
.firstTitle{text-align: center; position: relative; z-index: 55; padding-top: 80px }
.firstTitle h2{line-height: 1.5; width: 100%; position: absolute; top: 5%; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.first{width: 100%; text-align: center; position: absolute; top: 0; left: 0 ; }
.first img{max-width:398px; width: 70% }
.first p{line-height: 2;  margin: 40px 0; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/

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

.pagemenu

--------------------------------------------------------------------*/
.pagemenu{background: #fff; padding: 50px 6% 20px; margin-top: -10px}
.pagemenu ol{font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.pagemenu ol li{list-style-type: decimal; margin-left: 20px; }
.pagemenu ol li a{display:block;}
.pagemenu ol li a span{font-size:11px }
/*--------------------------------------------------------------------

buy

--------------------------------------------------------------------*/
.bgfffb{ padding: 60px 8% 80px; background: #fff}
.buy{ position: relative; border: 1px solid #ccc; padding: 30px 5% 20px; text-align: center; border-radius: 5px}
.buy .text01{text-align: left; font-size: clamp(0.813rem, 0.75rem + 0.31vw, 0.875rem)}/*13-14*/
.buy h2{ white-space: nowrap; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 0px;  background: #fff; display: inline-block}
.buy .hoge{text-align: right; font-size: 11px; display: block}
.bgfffb .text02{ margin-top: 50px; letter-spacing: normal; text-align: center; font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1rem)}/*14-16*/

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

.team

--------------------------------------------------------------------*/
.team{background: #fff; position: relative}
.team .tatea{writing-mode: vertical-rl; position: absolute; top: -60px; right: 5%; z-index: 2 ; line-height: 1.6; font-size: 18px}
.team .tatea span{transform: rotate(90deg);}
.team .text{text-align: center; padding:30px 0 50px }
/*--------------------------------------------------------------------

.tokten

--------------------------------------------------------------------*/
.tokten{padding: 0 5%; background: #fff}
.tokten h2{margin-bottom: 20px; font-size:clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem)}/*20-30*/
.tokubox{border-left: 1px solid #ccc; padding-left: 5%}
.tokubox .tit img{max-width:22px; width: 5%; margin-right: 8px; vertical-align: middle}
.tbox{border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px}
.tokubox .tbox:last-child{margin-bottom: 0; border: none}

.tbox .goshi{font-size:clamp(0.813rem, 0.75rem + 0.31vw, 0.875rem)}/*13-14*/
.tbox ul{margin-top: 10px}
.tbox li{list-style: disc; margin-left: 20px; line-height: 1.4; margin-bottom: 8px}
.tbox .text{margin-top: 10px}
.tbox dl{display: flex; justify-content: space-between; margin-right: -5%; flex-direction: row-reverse }
.tbox dt{width: 45%}
.tbox dt img{border-radius: 10px 0 0 10px}
.tbox dd{width: 55%}
.tbox dd .tit img{max-width:22px; width: 9%;}
/*--------------------------------------------------------------------

.botbox

--------------------------------------------------------------------*/
.botbox{background: #fff; padding: 50px 8% 0 ; text-align: center}
.botbox p{margin-bottom: 20px; line-height: 1.6}
.botbox a{box-shadow: 0 0 8px #ccc; display: block; border-radius: 10px}
.botbox a:hover{box-shadow: none}
.botbox a img{border-radius: 10px}
/*--------------------------------------------------------------------

#a1

--------------------------------------------------------------------*/
#a1{background: #fff; padding: 80px 8% 0; text-align: center; position: relative}
#a1 .how{max-width:90%; width:340px }
#a1 .kai{position:relative; }
#a1 .kai .kait {position: absolute ; top: 70px; left: 50%; transform: translate(-50%, -50%);} 
#a1 .kai h2{white-space: nowrap; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
#a1 .kai h2 img{width: 20px}
#a1 .kai .sub{font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
#a1 .img{margin: 30px 0 20px}
#a1 .att{text-align: right; font-size: 11px; margin-bottom: 30px}
#a1 .point{background: url("../img/bg.png") repeat; background-size:25px 25px; border-radius: 10px; padding:30px 30px }
#a1 .point img{width:30%; max-width: 100px; margin-bottom: 20px }
#a1 .point li{text-align: left; margin-bottom: 20px}
#a1 .point li:last-child{margin-bottom: 0}
#a1 .point li .po{font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/
#a1 .point li .fuki{ justify-content: left;}
#a1 .point li .line{background: linear-gradient(transparent 50%, #fff 50%);}
#a1 .point li .goshi{font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/

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

#a2

--------------------------------------------------------------------*/
#a2{background: #fff; padding: 100px 0 40px;text-align: center; position: relative}
#a2 .tit{position: relative; margin-top: -30px}
#a2 .tit .pic{width:476px; max-width: 90% }
#a2 .tit h2{position: absolute; top: 40px; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/ 
#a2 .tit h2 img{width: 20px}
#a2 .sub{font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
#a2 .fream1{padding: 0 5%}
#a2 .fream2{padding: 0 5% 30px; margin-top: -20px}
#a2 .h3{margin-bottom: 20px; font-size:clamp(1.5rem, 0.875rem + 3.13vw, 2.125rem)}/*24-34*/
#a2 .text{text-align: left; margin: 0 8%}


.wel{background: #fff; padding:0 0 80px 3%; }
/* テキストと矢印をきれいに横並びにするための設定 */
.yaji {padding: 10px 0 0 30px;
  display: flex;
  align-items: center;
}

/* 左向きの矢印をCSSで作る */
.yaji::before {
  content: '';
  display: inline-block;
  width: 10px;                 /* 矢印のサイズ */
  height: 10px;                /* 矢印のサイズ */
  border-top: 2px solid #333;  /* 矢印の線の太さと色 */
  border-left: 2px solid #333; /* 矢印の線の太さと色 */
  margin-right: 12px;          /* テキストとの余白 */
  
  /* くの字を左向き（-45度）に回転 */
  transform: rotate(-45deg);
  
  /* アニメーションの設定（1.5秒かけて無限に繰り返す） */
  animation: yuraYuraLeft 1.5s infinite ease-in-out;
}

/* 左右にゆらゆら移動するアニメーションの動き */
@keyframes yuraYuraLeft {
  0%, 100% {
    /* 元の位置 */
    transform: translateX(0) rotate(-45deg);
  }
  50% {
    /* 左に6px移動（ここの数値を変えると移動幅が変わります） */
    transform: translateX(-6px) rotate(-45deg);
  }
}

/* 画像を囲むコンテナのスタイル */
.scroll-containera {padding-bottom: 20px;
  width: 100%;             /* 親要素に対して幅いっぱいに広げる */
  overflow-x: auto;        /* はみ出た場合に横スクロールバーを表示 */
  white-space: nowrap;     /* 中身の折り返しを防ぐ */
  -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする（iOS向け） */
}

/* 画像自体のスタイル */
.scroll-image {
  width: 600px;            /* 画像の幅を707pxに固定 */
  max-width: none;         /* スマホ対応でよくある max-width: 100%; を打ち消す（重要） */
  display: block;          /* 画像の下にできる不要な余白を消す */
}


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

.lesson

--------------------------------------------------------------------*/
.lesson{ background: url("../img/bg.png") repeat; background-size:25px 25px; text-align: center; padding: 40px 0 0}
.lesson .tet{padding-bottom: 30px; font-size:clamp(1.5rem, 0.875rem + 3.13vw, 2.125rem)}/*24-34*/

.lesson dl{display: flex; justify-content: space-between ;margin: 0 8%}
.lesson .me02 dl , .lesson .me04 dl{flex-direction: row-reverse;}
.lesson dt{width: 65%; padding-bottom: 40px}
.lesson dt img{border-radius: 10px;}
.lesson dd{width: 30%; line-height: 1.5; margin-right: -2%}
.lesson .me02 dd{margin: 0 0 0 -3%}
.lesson dd .tate{letter-spacing: normal; text-align: left; font-size:clamp(1.313rem, 1rem + 1.56vw, 1.625rem) }/*21-26*/
.lesson dd .tate span{padding: 10px 0; border: 1px solid #ccc; display:inline-block; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/
.lesson .text{margin-bottom: 20px ; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.lesson .text00{ padding: 0 8% 80px; text-align: left; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/

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

.other

--------------------------------------------------------------------*/
.other{background: url("../img/bg.png") repeat; background-size:25px 25px; padding: 0 3% 80px}
.otherin{background: url("../img/bg2.png") repeat; background-size:25px 25px; padding: 50px 0 80px; border-radius: 10px}
.otherin .me01 a.sqya{width: 200px; display: inline-block}
.otherin .me01 a{position: relative}
.otherin .me01 a img{position: absolute; right: 0; top: 10px}

.otherin dl{display: flex; justify-content: space-between ;}
.otherin .me02{padding-top: 60px}
.otherin .me01 dl{flex-direction: row-reverse;}
.otherin dt{width: 72%; padding-bottom: 20px}
.otherin dt img{border-radius:0 0 0 10px;}
.otherin .me02 dt img{border-radius:0 0 10px 0;}
.otherin dd{width: 25%; line-height: 1.5; margin-right: -2%}
.otherin .me01 dd{margin: 0 0 0 5%}
.otherin dd .tate{letter-spacing: normal; text-align: left; font-size:clamp(1.313rem, 1rem + 1.56vw, 1.625rem) }/*21-26*/
.otherin .li{padding: 0 8%}

.otherin .me02 .li img{width: 20px}
.otherin .me02 .li a:first-child{margin-right: 8%}
.asbgfff{display: none}


@media screen and (min-width: 640px) {
.team .tatea{font-size: 22px}
.team .text{font-size: 20px}
}

@media screen and (min-width: 1100px) {
.first{ padding-top: 40px}
.firstTitle h2{top: 15%;}
.first p{margin-top: 30px; line-height: 2}


}