@charset "UTF-8";
/* ============================================================
   温泉ページ (onsen.css) — Figma「onsen」フレーム準拠
============================================================ */

.on-content{
  position:relative;z-index:2;
  background:var(--white) url('../images/bg-texture.png') top left/800px auto;
  display:flex;flex-direction:column;
  padding:100px 0 0;
}

/* 温泉　縦文字 */
.vtitle.vtitle--right {
  position: absolute;
    right: 91px;
    top: 0;
}
.vtitle__text {
      padding-top: 55px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    display: inline-block;
    text-align: left;
    line-height: 1.05;
    letter-spacing: .3em;
}
  .vtitle--left{width: 100%;text-align: center;padding: 0;}
  .vtitle::before{display: none;}
  .vtitle__text{position: relative;}
  .vtitle__text::before {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    width: 1px;
    height: 125%;
    min-height: 150px;
    background: var(--text);
  }
  .vtitle--white .vtitle__text::before{
    background: var(--white);
  }
  .vtitle__lg {
    font-size: 50px;
}
/* イントロ */
.on-intro{display:flex;flex-direction:column;align-items:center;gap:96px;padding:0 100px 150px;}
.on-intro__txt{max-width:1550px;text-align:center;display:flex;flex-direction:column;gap:77px;}
.on-intro__txt h2{font-size:40px;font-weight:500;line-height:1.4;}
.on-intro__txt p{font-size:15px;line-height:2;}

/* 濃紺エリア */
.on-navy{background:var(--navy);color:#fff;width:100%;}

/* セクション共通 */
.on-tenjo,.on-kashikiri{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:104px;
  padding:150px 0 0;
}
.on-kashikiri{padding:188px 0 100px;gap:100px;}
.on-vtitle{position:absolute;right:132px;top:50px;}
.on-tenjo__head,.on-kashikiri__head{
  text-align:center;display:flex;flex-direction:column;gap:77px;
  padding:0 40px;max-width:1550px;width: 70%;
}
.on-tenjo__head h2,.on-kashikiri__head h2{font-size:40px;font-weight:500;line-height:1.5;}
.on-tenjo__head p,.on-kashikiri__head p{font-size:15px;line-height:2;}
.on-kashikiri__free{margin-top:-47px;}
.on-tenjo__main{width:764px;max-width:calc(100% - 60px);height:849px;}
.on-tenjo__main img{width:100%;height:100%;object-fit:cover;}

/* スクロールで重なる全幅パネル */
.on-sticky{width:100%;}
.on-sticky__panel {
    position: sticky;
    top: -202px;
    height: 100vh;
    min-height: 127vh;
    overflow: hidden;
    /* width: 95%; */
    margin: auto;
    padding: 30px 0;
}
.on-sticky__panel:last-of-type{
  padding-bottom: 0;
}
.on-sticky__panel img{width:100%;height:100%;object-fit:cover;display:block;}

/* 貸切露天 2×2グリッド */
.on-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:50px;
  width:100%;max-width:1816px;padding:0 100px;
}
.on-block{display:flex;flex-direction:column;gap:30px;}
.on-block__img{height:575px;}
.on-block__img img{width:100%;height:100%;object-fit:cover;}
.on-block__txt{text-align:center;display:flex;flex-direction:column;align-items:center;}
.on-block__no{font-size:30px;line-height:1.3;}
.on-block__txt h3{font-size:40px;font-weight:500;line-height:1.3;margin-top:17px;}
.on-block__tag{color:var(--gold);font-size:15px;line-height:2;margin-top:2px;}
.on-block__desc{font-size:15px;line-height:2;margin-top:22px;}

/* 詳細リンク（白） */
.on-kashikiri .rd-back{color:#fff;}
.rd-back{display:inline-flex;flex-direction:column;gap:10px;font-size:20px;font-weight:500;text-align:center;}
.rd-back .more-btn__line{width:384px;height:10px;}

/* 泉質情報 / 利用案内 カード */
.on-info{
  display:flex;flex-direction:column;align-items:center;gap:100px;
  padding:150px 100px 100px;
}
.on-card{
  width:1300px;max-width:100%;background:transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  display:flex;flex-direction:column;align-items:center;gap:30px;
  padding:70px 100px;
}
.on-card__ttl{
  font-size:40px;font-weight:500;line-height:1.25;letter-spacing:.1em;
}
.on-card .info-list dd{white-space:pre-line;}

/* 予約 */
.on-reserve{display:flex;justify-content:center;padding:6px 40px 100px;}

/* 下部リンク */
.rd-back{
  display:inline-flex;flex-direction:column;gap:10px;
  font-size:20px;font-weight:500;text-align:center;
}
.rd-back .more-btn__line{width:384px;height:10px;}
.more-btn{width:384px;}
.more-btn__line::after {
    left: 97%;
    bottom: 11px;
}

.fblock{display:flex;gap:90px;justify-content:flex-end;align-items:flex-start;width:100%;overflow:hidden;}
.fblock__title{flex-shrink:0;width:72px;border-left:1px solid var(--text);padding-left:23px;padding-bottom:140px;}
.fblock__title span{
  display:block;writing-mode:vertical-rl;text-orientation:mixed;
  font-size:40px;font-weight:500;line-height:1.25;letter-spacing:.3em;
}
.fblock__body{width:calc(100% - 291px);max-width:1524px;display:flex;flex-direction:column;gap:39px;}
.fblock__img{height:100%;max-height: 600px;aspect-ratio: 19 / 9;}
.fblock__img img{width:100%;height:100%;object-fit:cover;}
.fblock__foot{display:flex;gap:97px;align-items:flex-start;max-width:1525px;}
.fblock__txt{width:535px;flex-shrink:0;padding-top:25px;}
.fblock__txt p{font-size:15px;line-height:2;}
.fblock__imgs{flex:1;min-width:0;display:flex;gap:20px;}
.fblock__imgs figure{margin:0;flex:1;min-width:0;max-height:301px;aspect-ratio: 4 / 3;}
.fblock__imgs img{width:100%;height:100%;object-fit:cover;}
.k_b_txt{text-align: center;}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:1500px){
  .on-vtitle{right:60px;}
  .on-grid{padding:0 60px;gap:40px;}
  .on-block__img{height:auto;aspect-ratio:783/575;}

  .fblock{gap:50px;}
  .fblock__body{width:calc(100% - 200px);}
  .fblock__foot {
    flex-wrap: wrap;
    gap: 40px;
    padding-right: 0;
    flex-direction: column-reverse;
    align-items: center;
}
  .fblock__txt{width:100%;padding-top:10px;}
  
}

@media (max-width:900px){
  .on-content{padding-top:0;}
  .on-intro{padding:50px 30px;gap:50px;}
  .on-intro__txt{gap:30px;}
  .on-intro__txt h2{font-size:26px;}
  .on-tenjo{padding:80px 0 0;gap:60px;}
  .on-kashikiri{padding:80px 0 120px;gap:60px;}
  /* タイトルは上部中央（縦罫線なし） */
  .on-vtitle{position:static;order:-1;margin:0 auto;padding:0;}
  .on-vtitle::before{display:none;}
  .on-tenjo{display:flex;}
  .on-tenjo__head,.on-kashikiri__head{gap:30px;padding:0 30px;width: auto;}
  .on-tenjo__head h2,.on-kashikiri__head h2{font-size:26px;}
  .on-kashikiri__free{margin-top:-14px;}
  .on-tenjo__main{width:calc(69% - 60px);height:auto;aspect-ratio:764/849;}
  .on-sticky__panel{height:70vh;min-height:320px;padding: 0}
  .on-grid{grid-template-columns:1fr;padding:0 30px;gap:50px;}
  .on-block__txt h3{font-size:28px;}
  .on-block__no{font-size:22px;}
  .rd-back{font-size:16px;}
  .rd-back .more-btn__line{width:100%;}
  .on-info{padding:80px 30px 40px;gap:50px;}
  .on-card{padding:40px 0;gap:24px;}
  .on-card__ttl{writing-mode:horizontal-tb;font-size:26px;}
  .on-reserve{padding:20px 30px 60px;}

  .vtitle.vtitle--right{position: static;}
  .vtitle__text{padding-top: 0;}

  .fblock{gap:32px;padding:0 30px;}
  .fblock__title{width:41px;padding-left:10px;padding-bottom:50px;}
  .fblock__title span{font-size:25px;font-weight:400;}
  .fblock__body{width:100%;gap:30px;}
  .fblock__foot{gap:30px;padding-right:0;}
  .fblock__txt{padding-top:0;}
  .fblock__imgs{gap:10px;width:100%;}
  .fblock__imgs figure{height:auto;aspect-ratio:4/3;}
  .rblock__body{gap: 10px!important;}
}

@media (max-width:600px){
.more-btn {width: 85%;}
.rd-linkbar{display: flex;}
.on-tenjo__main{width: calc(100% - 60px);}
.on-kashikiri{padding: 80px 0 80px;}

.fblock__img{aspect-ratio: 14 / 9;}
.fblock{flex-direction: column;align-items: center;}
.onsen .rblock__title {width: 100%;padding: 0;border: none;}
.onsen .rblock__title span{text-align: center;writing-mode: horizontal-tb;}
}