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

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

first

--------------------------------------------------------------------*/
.firstTitle{text-align: center; position: relative; z-index: 55; }
.firstTitle h2{margin: 0 15%; max-width: 320px; position: relative; z-index: 5}
.firstTitle h2 img{margin-left: 8%}
.firstTitle ul{margin-top: -50px}


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

.pagemenu

--------------------------------------------------------------------*/
.pagemenu{background: #fff; padding: 30px 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 }


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

.puro

--------------------------------------------------------------------*/
.puro{background: #fff; padding: 0 0 100px  8%}
.puro h2{margin-bottom: 60px; margin-right: 8%; position: relative; text-align: right; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.puro h2 img{position: absolute; right: -10px; bottom: -20px; width: 50%; max-width:230px }
.puro dl{margin-bottom: 20px; display: flex; justify-content: space-between;}
.puro dt{width: 16%}
.puro dt img{width: 100%; }
.puro dd{width: 82% ; font-size:clamp(0.938rem, 0.813rem + 0.63vw, 1.063rem) }/*15-17*/
.puro dd .mini{font-size:12px; line-height: 1.3 }

.puro dl:last-of-type{margin-bottom: 40px}
.puro dl:last-of-type dd{margin-top: -8px}

.puro .kata span{font-size: 13px; display: block}
.puro .kata{margin-bottom: 20px; font-size:clamp(0.938rem, 0.813rem + 0.63vw, 1.063rem) }/*15-17*/

.puro .kata2{border-left: 1px solid #ccc; padding-left: 20px; line-height: 1.2; padding-right: 5%}
.puro .kata2 li{font-size: 12px; margin-bottom: 8px}
.puro .kata2 li:before {content: "-";}


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

well

--------------------------------------------------------------------*/
.well{text-align: center; padding: 70px 0 140px; background: transparent;}
.well h2 img{max-width:267px; width: 50%; margin: 10px }
.well .text01{line-height: 1.5;  margin:20px 0; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.well .text01 span{letter-spacing: -8px}
.well .text0{margin-bottom: 10px; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.well .text0 span{border:1px solid #ccc; padding: 0 10px; margin-right: 5px}
.well .text0 span:last-child{margin: 0 0 0 5px}

.well .text02{margin-bottom: 30px; outline-color: 2; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.well .text03{margin-bottom: 30px; line-height: 1.9; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
ruby{letter-spacing: -3px}
rt{letter-spacing: -13px}

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

.st

--------------------------------------------------------------------*/
.st{text-align: center; padding: 100px 0 10px; background: #fff; position: relative}
.st .sizu{position: absolute; top: -20px; width:42px; left: 50%; margin-left: -21px }
.st .stbox{position: relative}
.st .img{padding: 0 3%} 
.st .stbox h2{    position: absolute;
    left: 8%;
    top: 10%;
    z-index: 10;
    width: 46%;
    max-width: 250px; }
.st .text{text-align: left; margin: 30px 8%; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.st dl{display: flex; justify-content: space-between; margin: 30px 8%}
.st dt{width:8%; max-width: 30px }
.st dd{width:87%; text-align: left ; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.st dd img{width: 12px; vertical-align: middle}

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

.deai

--------------------------------------------------------------------*/
.deai{text-align: center; padding: 30px 0 100px; background: #fff; position: relative}
.deai .stbox{position: relative ; text-align: left; padding-left: 3%}
.deai .stbox img{width: 80%; max-width: 403px; margin-bottom: 10px}
.deai .stbox h2{position: absolute; text-align: right;line-height: 1.6; top: 20%; right: 8%; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.deai .stbox h2 img{width:21px }
.deai .stbox .text0{text-align: right; position:absolute; bottom: 20%; right: 8%}
.deai .text{text-align: left; margin: 30px 8%; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.deai .linka{text-align: left; margin-left: 8%}
.deai a{ display: inline-block}

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

.normal-section

--------------------------------------------------------------------*/
/* --- パララックス実装 --- */
/* 1. 親要素：通常のブロックに戻します */
.parallax-wrapper {
  position: relative;
  z-index: 1;
}

/* 2. 背景要素：fixed（画面固定）をやめて、sticky（枠内固定）にする */
.parallax-bg {
  position: sticky;
  top: 0; /* 画面の上端に触れたらくっつく */
  left: 0;
  width: 100%;
  height: 100vh; /* 背景の高さを画面いっぱいに */
  z-index: -1;
}

/* 背景画像の指定 */
.bg-image {
  background-image: url('../img/profire/yahagihara.jpg');
  background-position: center top; /* 中央上部を基準に配置 */
  background-repeat: no-repeat;
  background-size: 100% auto; /* スマホでは横幅いっぱい */
}

/* 3. コンテンツ要素：背景がとった高さ（100vh）分だけ上に引き上げる */
.parallax-content {
  margin-top: -100vh; /* ★ここが最大のポイントです */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  width: 100%;
}
.parallax-content h2{text-align: left;
  padding-top: 280px;
  width: 199px; 
  margin: 0 auto 30px 8%; /* 中央揃えを維持しつつ下の余白を確保 */
  max-width: 30%;
}
.parallax-content p{letter-spacing: normal; padding: 0px 8% 80px; text-align: left; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/




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

books

--------------------------------------------------------------------*/
.books{position: relative; background: #fff; padding: 150px 6% 0 }
.books h2{max-width:265px; width: 50% ; margin-bottom: 30px}
.books .tate{position: absolute;
    right: 5%;
    top: 80px;
    text-align: left;
    line-height: 1.6;
    z-index: 3; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/

.books li{padding-bottom: 30px}
.books dl{display: flex; justify-content: space-between; letter-spacing: normal}
.books dt{width: 25%}
.books dd{width: 70%; margin-top: -5px}
.books dd h3{margin-bottom: 20px; line-height: 1.4; letter-spacing: -1px; color: #5d5d5d ; font-size: clamp(1.063rem, 0.563rem + 2.5vw, 1.563rem)}/*17-25*/
.books dd .syu{margin-bottom: 10px; text-align: right; font-size: clamp(0.688rem, 0.563rem + 0.63vw, 0.813rem)}/*11-13*/
.books dd .text{line-height: 1.6; letter-spacing: 1px; font-size:clamp(0.813rem, 0.625rem + 0.94vw, 1rem)}/*13-16*/
.books a dd{color:#5d5d5d; transition: .3s }
.books a:hover dd{color:#e6a6a5;}


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

off

--------------------------------------------------------------------*/
.off{background: #fff; padding: 40px 0 80px; text-align: center}
.off h2{font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.off .img img{max-width:349px; width: 50%; margin-bottom: 20px }
.off .text{margin-bottom: 30px; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.off .text01{letter-spacing: normal; text-align: left; padding: 30px 0 30px 5% ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.off .text01 img{vertical-align: middle; width:12px ; margin-right: 5px }
.off iframe {
  width: 100%;
  height: auto;
  max-width: 640px; /* PC版などでこれ以上大きくならないようにする */
  aspect-ratio: 4 / 3;
}




@media (min-width: 560px){
  .bg-image {
    /* コンテンツ幅に合わせて画像の最大幅を560pxに固定し、枠内で中央揃えをキープ */
    background-size: 560px auto; 
  }

.off .img img{width: 100%}

}


@media (min-width: 640px){
.first .img{padding: 0}

}



@media (min-width: 1100px){



}