@charset "UTF-8";

/* ============================================================
   粛海風 HP— トップページ index.css
   Design: Figma「海風HP」/ TOP (1920 canvas, content 1816 + rail 104)
   Font : Shippori Mincho B1
============================================================ */

/* ============================================================
   トリプラjs　遅延表示
============================================================ */
#tripla-chat-circle-icon,#tripla-icon-message {
  opacity: 0;
  pointer-events: none;
}
#tripla-chat-circle-icon.tripla_open,#tripla-icon-message.tripla_open{
  animation: tripla-fadeIn-opa .8s forwards;
  animation-delay: 1s;
}
@keyframes tripla-fadeIn-opa {
  to {
    opacity: 1;
    pointer-events: visible;
  }
}

/* ============================================================
   ファーストビュー
============================================================ */
.fv-bg{
  position:fixed;top:0;left:0;
  width:calc(100% - var(--rail));height:100%;
  overflow:hidden;
  z-index:0;
}
.fv-slide{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;
  transition:opacity 2s ease;
  will-change:opacity;
}
.fv-slide.is-active{
  opacity:1;
}
body.is-loading .fv-slide{opacity:0 !important;}
.fv{
  position:relative;z-index:1;
  height:100vh;min-height:640px;
}
.fv__box{
  position:absolute;
  left:7.2vw;
  top:30vh;
  max-width: 332px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.fv__logo{width: 329px;height:auto;aspect-ratio:262.6/84.635;filter:drop-shadow(0 0 6px rgba(0,0,0,.3));}
.fv__catch{
  color:#fff;
  padding-left: 13px;
  font-size: 23px;
  line-height: 25px;
  letter-spacing:.11em;
  text-shadow:0 0 3.8px rgba(0,0,0,.27);
}

/* ============================================================
   イントロ（縦書き・ヒーローの上をスクロール）
============================================================ */
.intro {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 123px;
    flex-direction: row-reverse;
    padding: 70px 0px 130px;
    color: rgb(255, 255, 255);
    background-image: linear-gradient(rgba(17, 17, 17, 0), #111111c2);
}
.intro__text{
  display:flex;gap:12px;justify-content:flex-end;padding-top:258px;
}
.intro__text p{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:16px;font-weight:500;line-height:2;
}
.intro__title{display:flex;gap:20px;}
.intro__title p{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:30px;font-weight:600;line-height:1.3;
}

/* ============================================================
   コンテンツ共通（テクスチャ背景）
============================================================ */
.content{position:relative;z-index:2;}
.content--tex1 {
    /* background: var(--white) url(../images/bg-texture.png) top left / 20% auto; */
    background-image: linear-gradient(180deg, #111111e6, #11111194, #111111, #111111bf, #111111);
    color: #fff;
    
}
.content--tex1 {
    /* background: var(--white) url(../images/bg-texture.png) top left / 20% auto; */
    background-image: linear-gradient(180deg, #111111c2, #11111194, #11111130, #111111bf, #111111);
    color: #fff;
}
.content--tex2 {
    /* background: var(--white) url(../images/bg-texture2.png) top left / 20% auto; */
    color: #fff;
    background-image: linear-gradient(180deg, #111111d6, #1111116b, #0000005e, #111111);
}

/* ---- 縦書きセクションタイトル（サイド罫線 260px 固定） ---- */
.vtitle{position:relative;flex-shrink:0;align-self:flex-start;}
.vtitle__text{
  writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
  display:inline-block;text-align:left;line-height:1.05;letter-spacing:.3em;
}
.vtitle__lg{font-size:45px;}
.vtitle__sm{font-size:28px;}
.vtitle--left{padding-left:23px;}
.vtitle--right{padding-right:23px;}
.vtitle::before {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 400px;
    background: #ffffff;
}
.vtitle--left::before{left:0;}
.vtitle--right::before{right:0;}
.vtitle--white{color:#fff;}
.vtitle--white::before{background:#fff;}

/* ---- 横書きセクションタイトル（上に罫線） ---- */
.htitle{display:flex;flex-direction:column;align-items:center;gap:26px;}
.htitle__line{width:79px;height:1px;background:var(--text);background:var(--white);}
.htitle__txt{font-size:45px;line-height:1.2;margin-top:8px;}
.htitle__sub{font-size:16px;text-align:center;}
.htitle--left{align-items:flex-start;}

/* ---- テキストリンクボタン（矢印下線） ---- */
.tbtn{display:inline-flex;flex-direction:column;gap:6px;width:210px;}
.tbtn__label{font-size:16px;font-weight:500;line-height:21px;}
.tbtn__line{
  height:10px;width:206px;position:relative;
  background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;
}
/* 右端に上向きの斜線（矢印の上側だけ出っ張る） */
.tbtn__line::after{
  content:"";position:absolute;left:100%;bottom:0;
  width:15px;height:1px;background:currentColor;
  transform-origin:left bottom;transform:rotate(-135deg);
  transition:transform .4s var(--ease);
}
.tbtn__line::after{bottom: 1px;}
.tbtn--white{color:#fff;}

/* ============================================================
   海風について
============================================================ */
.about{display:flex;gap:57px;padding:150px 60px 150px 135px;}
.about__cards{
  display:flex;justify-content:space-between;gap:24px;
  width:1376px;max-width:calc(100% - 90px);
  padding-top: 10px;
}
.acard{position:relative;flex:1;display:flex;flex-direction:column;gap:15px;}
.acard__img {
    max-height: 541px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    background-color: #000;
}
.acard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
    opacity: 0.85;
}
.acard:hover .acard__img img{transform:scale(1.05);opacity: 1;}
.acard__cap {
    font-size: 15px;
    line-height: 1.5;
    position: absolute;
    bottom: 14px;
    left: 16px;
}
.acard__tab {
    position: absolute;
    top: -26px;
    right: 28px;
    width: 53px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* background: #fff; */
    /* border-top: 3px solid var(--navy); */
    /* padding: 18px 16px; */
    font-size: 30px;
    line-height: 34px;
    box-shadow: 0 13px 15px rgba(0, 0, 0, .06);
    color: #fff;
    letter-spacing: 7px !important;
}

/* ============================================================
   客室
============================================================ */
.room{padding-bottom:0;padding-top:50px;display:flex;flex-direction:column;}
/* DOM順は hero→bath→grid。PC(1901px〜)ではorderで hero→grid→bath の見た目を維持 */
.room__hero{order:1;}
.room__grid{order:2;}
.room__bath{order:3;}
.room__hero{display:flex;gap:90px;align-items:flex-start;padding-right:135px;}
.room__hero-img{flex:1;max-height:788px;aspect-ratio: 16 / 9;overflow:hidden;}
.room__hero-img img{width:100%;height:100%;object-fit:cover;}
.room__hero .vtitle{margin-top:0;}

.room__grid{
  display:flex;gap:154px;align-items:flex-start;
  padding:0 40px;margin-top:1px;justify-content: center;
}
.room__col--left{width:585px;padding-top:398px;display:flex;flex-direction:column;gap:15px;}
.room__col--center{width:210px;padding-top:144px;display:flex;flex-direction:column;align-items:center;gap:30px;}
.room__col--right{flex:1;max-width:714px;padding-top:264px;display:flex;flex-direction:column;align-items:center;gap:114px;}
.room__img{width:100%;overflow:hidden;}
.room__img img{width:100%;object-fit:cover;}
.room__col--left .room__img{height:318px;}
.room__col--left .room__img img{height:100%;}
.room__col--right>.room__img{height:387px;}
.room__col--right>.room__img img{height:100%;}
.room__cap{display:flex;flex-direction:column;gap:8px;width:100%;}
.room__cap--right{text-align:right;align-items:flex-end;}
.room__cap-ttl{font-size:15px;}
.room__cap-sub{font-size:10px;color:var(--text2);}
.room__vtxt{display:flex;gap:24px;justify-content:center;padding-right:20px;align-items: flex-start;}
.room__vtxt p{writing-mode:vertical-rl;text-orientation:mixed;font-size:33px;line-height:36px;text-align:left;padding-bottom: 69px;text-shadow: 1px 1px 70px rgb(0 0 0);}
.room__vtxt-a{padding-top:76px;}
.room__subbox{width:383px;display:flex;flex-direction:column;gap:15px;}
.room__subbox .room__img{height:218px;}
.room__subbox .room__img img{height:100%;}

.room__bath{position:relative;padding: 150px 130px 0 135px;margin-top:0;display:flex;flex-wrap:wrap}
.room__bath-img {
    width: 100%;
    max-width: 100%;
    /* height: 542px; */
    overflow: hidden;
    position: relative;
    z-index: 1;
    aspect-ratio: 20 / 9;
}
.room__bath-img img{width:100%;height:100%;object-fit:cover;}
.room__bath-txt {
    /* width: calc(40% + 100px); */
    /* margin-top: 20px; */
    /* margin-left: -100px; */
    /* background: rgb(253 253 253); */
    padding: 83px 72px 77px 72px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    width: 100%;
}
.room__bath-head{display:flex;flex-direction:column;gap:8px;margin-bottom:33px;}
.room__bath-ttl {
    font-size: 33px;
    letter-spacing: 2px;
}
.room__bath-sub{font-size:10px;color:var(--text2);}
.room__bath-desc {
    font-size: 17px;
    line-height: 2;
    letter-spacing: 2px;
    margin-bottom: 63px;
}

.room .tbtn{
  text-align: center;
    display: contents;
}
.room .tbtn__line{
  margin: auto;
}

/* ============================================================
   料理
============================================================ */
.food{display:flex;gap:90px;padding:150px 0 115px 135px;}
.food__box{flex:1;max-width:100%;display:flex;flex-direction:column;gap:29px;overflow:hidden;}
.food__slider{overflow:hidden;}
.food__track{display:flex;gap:12px;transition:transform .7s var(--ease);opacity: ;}
/* .food__slide{flex:0 0 1055px;max-width:90%;height:611px;overflow:hidden;} */
.food__slide {
    flex: 0 0 896px;
    /* max-width: 90%; */
    height: 509px;
    overflow: hidden;
    position: relative;
}
.food__slide img{width:100%;height:100%;object-fit:cover;}
.food__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  left: 0;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,.15) 70%,
    rgba(0,0,0,.45) 100%
  );
}

.food__foot{display:flex;gap:50px;align-items:flex-start;padding:0 61px 20px 16px;}
.food__txt{flex:1;display:flex;flex-direction:column;gap:57px;}
.food__ttl{font-size:40px;line-height:1.35;}
.food__desc{font-size:15px;line-height:2;}
.food__nav{display:flex;align-items:center;flex-shrink:0;}
.food__arrow{
  width:76px;height:76px;padding:0;border:0;background:none;cursor:pointer;
  transition:opacity .3s,transform .3s;
}
.food__arrow img{width:100%;height:100%;}
.food__arrow:hover{opacity:.7;}

/* ============================================================
   固定背景（パララックス）
============================================================ */
.bgfixed {
    height: 35vw;
    background-size: cover;
    background-position: top center;
    /* background-attachment: fixed; */
    position: relative;
    z-index: 2;
}

/* ============================================================
   温泉
============================================================ */
.onsen {
    position: relative;
    z-index: 2;
    /* background: var(--navy); */
    color: rgb(255, 255, 255);
    display: flex;
    gap: 62px;
    align-items: flex-start;
    padding: 66px 0px 100px;
    background-image: linear-gradient(#111111 40%, #111111 80%, #111111d6);
}
.onsen__inner{display:flex;align-items:center;flex:1;min-width:0;}
.onsen__photos{position:relative;width:977px;flex-shrink:0;}
.onsen__ph{margin:0;position:relative;}
.onsen__ph img{width:100%;object-fit:cover;}
.onsen__ph--01{width:764px;}
.onsen__ph--01 img{height:849px;}
.onsen__inset{
  margin-left: calc(100% - 214px);
  margin-top: -140px;
  width: 296px !important;
  height: 373px !important;
}
.onsen__ph--03{width:819px;margin-top:60px;margin-left:158px;}
.onsen__ph--03 img{height:262px;}
.onsen__ph--02{
  position:absolute;right:-671px;top:53px;width:671px;z-index:2;
}
.onsen__ph--02 img{height:397px;}
.onsen__cap{position:absolute;width:auto !important;z-index:4;}
.onsen__cap--01{top:-43px;right:113px;height:169px !important;width:41px !important;}
.onsen__cap--02{left: 63px;
    bottom: -89px;
    height: 173px !important;
    width: 83px !important;}
.onsen__cap--03{left:97px;bottom:-46px;height:136px !important;width:36px !important;}

.onsen__body {
    max-width: 671px;
    width: 32vw;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 60px;
    padding-left: 3.5%;
    padding-top: 26vw;
    display: flex;
    flex-direction: column;
    gap: 114px;
    z-index: 2;
}
.onsen__lead{display:flex;gap:105px;padding-left:60px;}
.onsen__lead-txt{display:flex;gap:10px;justify-content:flex-end;padding-top:222px;}
.onsen__lead-txt p{writing-mode:vertical-rl;text-orientation:mixed;font-size:16px;font-weight:500;line-height:1.7;}
.onsen__lead-ttl{display:flex;gap:12px;padding-top: 123px;}
.onsen__lead-ttl p{writing-mode:vertical-rl;text-orientation:mixed;font-size:40px;line-height:50px;}
.onsen__btns{display:flex;flex-direction:column;gap:28px;padding-left:60px;}
.onsen__title{margin-left:auto;flex-shrink:0;margin-right:94px;z-index: 2;}

/* ------------ 調整 ------------ */
.onsen__ph--02 {
    right: -74%;
    top: 79px;
    width: 33vw;
}
.onsen__ph--02 img {
    height: 19vw;
}
.onsen__lead {
    padding-left: 10%;
    gap: 20%;
}

.onsen__photos {
    width: 46vw;
    max-width: 977px;
}
.onsen__ph--01 {
    width: 764px;
    width: 40vw;
}
.onsen__ph--03 {
    width: 819px;
    width: 36.8vw;
    margin-top: 60px;
    margin-left: 158px;
    margin-left: 7.4vw;
}
.onsen__inset {
    margin-left: calc(100% - 214px);
    margin-top: -140px;
    max-width: 296px !important;
    width: 30vw !important;
    height: 373px !important;
}


/* ============================================================
   おもてなし
============================================================ */
.omotenashi{
  display:flex;flex-direction:column;align-items:center;gap:77px;
  padding:150px 133px 36px;
}
.omotenashi .htitle{width:100%;}
.omotenashi__cards{display:flex;gap:50px;width:1300px;max-width:100%;}
.ocard{
  flex:1;
  /* background:#fff; */
  /* box-shadow:0 13px 15px rgba(0,0,0,.06); */
  padding:15px 15px 35px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.ocard__img{width:100%;max-height:334px;overflow:hidden;aspect-ratio: 16 / 9;}
.ocard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.ocard:hover .ocard__img img{transform:scale(1.05);}
.ocard__ttl{font-size:30px;text-align:center;}
.ocard__desc{font-size:15px;text-align:center;line-height:1.7;}

/* ============================================================
   過ごし方
============================================================ */
.stay{
  display:flex;flex-direction:column;align-items:center;gap:77px;
  padding:50px 133px 150px;
}

/* ============================================================
   アクセス
============================================================ */
.access{display:flex;justify-content:center;padding:150px 133px 200px;}
.access__inner{display:flex;gap:65px;align-items:center;width:1550px;max-width:100%;}
.access__img{flex:1;max-height:508px;aspect-ratio: 13 / 9;overflow:hidden;}
.access__img img{width:100%;height:100%;object-fit:cover;}
.access__box{width:533px;flex-shrink:0;display:flex;flex-direction:column;gap:75px;}
.access__list{margin:0;display:flex;flex-direction:column;}
.access__row{display:flex;gap:15px;align-items:flex-start;}
.access__row dt{width:112px;flex-shrink:0;padding:10px;font-size:16px;margin:0;}
.access__row dd{flex:1;padding:10px;font-size:16px;margin:0;line-height:1.6;}
.access_more{margin-top: 30px;padding-left: 10px;}

/* ============================================================
   マップ
============================================================ */
.map{
  position:relative;z-index:2;
  height:399px;background:#e6e4df;
}
.map iframe{display:block;width:100%;height:100%;border:0;}

/* ============================================================
   フッター
============================================================ */
.footer{
  position:relative;z-index:2;
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;align-items:center;
  padding:0 0 20px;
}
.footer__pagetop{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding-top:0;width:118px;
}
.footer__pagetop-line{
  width:1px;height:118px;background:#fff;
  transition:transform .3s;
  transform-origin: top
}
.footer__pagetop:hover .footer__pagetop-line{transform: scaleY(0.9)}
.footer__pagetop-txt{font-size:15px;margin-top:3px;}
.footer__logo-box{display:flex;flex-direction:column;align-items:center;gap:25px;margin-top:50px;}
.footer__logo{width:200px;height:65px;object-fit:contain;}
.footer__info{font-size:15px;text-align:center;line-height:1.7;}
.footer__nav{margin-top:57px;max-width:calc(100% - 80px);display:flex;flex-direction:column;align-items:center;gap:26px;}
.footer__menu{
  display:flex;gap:33px;justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid #fff;padding-bottom:50px;width:100%;
}
.footer__menu a{writing-mode:vertical-rl;text-orientation:mixed;font-size:20px;line-height:26px;padding:5px;transition:opacity .3s;}
.footer__menu a:hover{opacity:.6;}
.footer__sub{display:flex;gap:35px;justify-content:center;flex-wrap:wrap;padding:5px 20px;}
.footer__sub a{font-size:15px;transition:opacity .3s;}
.footer__sub a:hover{opacity:.6;}
.footer__copy{font-size:15px;text-align:center;margin-top:50px;width:100%;}

/* ============================================================
   スクロールイン アニメーション（akagi-futokoro 参考）
   テキスト/ブロック：フェード＋スライドアップ
   画像：マスク（カーテン）リビール＋インナーのズームアウト
============================================================ */
:root{--reveal-ease:cubic-bezier(.22,.61,.36,1);}

/* ゆっくり・柔らかいフェード＋スライドアップ */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 2s var(--reveal-ease),transform 2s var(--reveal-ease);
}
.reveal.is-in{opacity:1;transform:none;}

/* 画像マスクリビール（フェード付き） */
.reveal-img{opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path 3s var(--reveal-ease),opacity 3s var(--reveal-ease);}
.reveal-img img{transform:scale(1.12);transition:transform 1.8s var(--reveal-ease);}
.reveal-img.is-in{opacity:1;clip-path:inset(0 0 0 0);}
.reveal-img.is-in img{transform:scale(1);}

/* 連続要素のディレイ（カード等） */
.reveal[data-delay="1"]{transition-delay:.12s;}
.reveal[data-delay="2"]{transition-delay:.24s;}
.reveal[data-delay="3"]{transition-delay:.36s;}
.reveal-img[data-delay="1"]{transition-delay:.12s;}
.reveal-img[data-delay="2"]{transition-delay:.24s;}
.reveal-img[data-delay="3"]{transition-delay:.36s;}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img,.reveal-img img{transition:none !important;opacity:1 !important;transform:none !important;clip-path:none !important;}
  .fv-slide.is-active{animation:none;}
}

/* ============================================================
   縦書きの文字間（letter-spacing 0.3em）
============================================================ */
.vtitle__lg,.vtitle__sm,
.intro__text p,.intro__title p,
.gnav__menu a,.gnav__reserve,
.acard__tab,.scard__tab,
.room__vtxt p,
.onsen__lead-txt p,.onsen__lead-ttl p,
.footer__menu a,
.menu-overlay__menu a{
  letter-spacing:.3em;
}

/* ============================================================
   ローディング画面
============================================================ */
.loader{
  position:fixed;inset:0;z-index:1000;
  background:#ece7dd url('../images/bg-texture2.png') top left/800px auto;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1s ease,visibility 1s ease;
}
.loader__logo{
  width:280px;height:auto;aspect-ratio:262.6/84.635;
  opacity:0;transform:translateY(10px);
  animation:loaderLogo 1.4s var(--reveal-ease) .2s forwards;
}
@keyframes loaderLogo{to{opacity:1;transform:none;}}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}

/* ============================================================
   フルスクリーンメニュー
============================================================ */
.menu-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s ease,visibility .6s ease;
}
.menu-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;}

.menu-overlay__photo{
  width:37.4%;height:100%;overflow:hidden;flex-shrink:0;
}
.menu-overlay__photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);transition:transform 1.4s var(--reveal-ease);
}
.menu-overlay.is-open .menu-overlay__photo img{transform:scale(1);}

.menu-overlay__panel{
  flex:1;height:100%;position:relative;
  background:#ece7dd url('../images/bg-texture2.png') top left/800px auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 40px;
}
/* 閉じるボタンはハンバーガー(X変形)が兼ねるため非表示 */
.menu-overlay__close{display:none;
  position:absolute;top:27px;right:36px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;gap:3px;
  color:var(--text);
}
.menu-overlay__close-icon{width:36px;height:36px;display:block;transition:transform .5s var(--ease);}
.menu-overlay__close-icon img{width:100%;height:100%;}
.menu-overlay__close:hover .menu-overlay__close-icon{transform:rotate(90deg);}
.menu-overlay__close-txt{font-size:10px;}
/* 言語切替はグローバルの .lang-btn 一つのみ（メニュー開時は色だけ変える） */

.menu-overlay__body{
  display:flex;flex-direction:column;align-items:center;
  max-width:100%;
}
.menu-overlay__logo{width:233px;height:auto;aspect-ratio:233/75;}
.menu-overlay__menu{
  display:flex;gap:22px;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  margin-top:90px;
}
.menu-overlay__menu a{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:20px;line-height:26px;color:var(--text);padding:5px;
  transition:opacity .3s;
}
.menu-overlay__menu a:hover{opacity:.5;}
.menu-overlay__reserve{
  margin-top:122px;
  width:441px;max-width:100%;height:68px;
  border:1px solid var(--text);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:.35s var(--ease);
}
.menu-overlay__reserve:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.menu-overlay__tel{margin-top:23px;font-size:26px;letter-spacing:.11em;}
.menu-overlay__tel span{font-size:15px;letter-spacing:0;}
.menu-overlay__sub{
  display:flex;gap:35px;justify-content:center;flex-wrap:wrap;margin-top:60px;
}
.menu-overlay__sub a{font-size:15px;transition:opacity .3s;}
.menu-overlay__sub a:hover{opacity:.5;}

/* メニュー内要素のステガー表示 */
.menu-overlay__logo,.menu-overlay__menu,.menu-overlay__reserve,.menu-overlay__tel,.menu-overlay__sub{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--reveal-ease),transform .8s var(--reveal-ease);
}
.menu-overlay.is-open .menu-overlay__logo{opacity:1;transform:none;transition-delay:.25s;}
.menu-overlay.is-open .menu-overlay__menu{opacity:1;transform:none;transition-delay:.38s;}
.menu-overlay.is-open .menu-overlay__reserve{opacity:1;transform:none;transition-delay:.5s;}
.menu-overlay.is-open .menu-overlay__tel{opacity:1;transform:none;transition-delay:.6s;}
.menu-overlay.is-open .menu-overlay__sub{opacity:1;transform:none;transition-delay:.7s;}
body.menu-open{overflow:hidden;}

/* ============================================================
   レスポンシブ
============================================================ */
/* ===== ~1900px：非対称レイアウト（客室グリッド・温泉コラージュ）を積み上げ ===== */
/* デザイン基準幅1816px未満では絶対配置のコラージュがはみ出すため縦積みに */
@media (max-width:1900px){
  /* PC未満はDOM順（hero→bath→grid）＝テキストを画像で挟む並びに */
  .room__hero,.room__bath,.room__grid{order:0;}
  .room__bath{padding-top: 200px}
}

/* ===== ~1400px：余白と幅の緩和 ===== */
@media (max-width:1400px){
  .about{padding-left:80px;}
  .about__cards{width:100%;}
  .room__hero{padding-right:80px;}
  .room__grid{padding:60px 40px 0;}
  .room__bath{padding:100px 40px 0;}
  .room__bath-img{width:100%;height:auto;aspect-ratio:973/465;}

  /* 風呂：画像の下にテキスト（背景透過・余白を詰める） */
  .room__bath-txt{position:static;width:100%;max-width:none;background:transparent;padding:32px 0 0;margin:0;gap:24px;}
  .room__bath-head{margin-bottom:0;}
  .food{padding-left:80px;}
  .food__box{max-width:100%;}
  .omotenashi__cards,.access__inner{width:100%;}
}

/* ===== ~1280px：客室調整 ===== */
@media (max-width:1280px){
.room__grid{flex-direction:column;gap:64px;padding:64px 60px 0;align-items:stretch;}
  .room__col--left,.room__col--center,.room__col--right{width:100%;max-width:none;padding-top:0;align-items:flex-start;gap:16px;}
  .room__col--center{align-items:center;gap:32px;text-align:center;order: 1;}
  .room__vtxt{padding-right:0;justify-content:center;gap:24px;}
  .room__vtxt-a{padding-top:0;}
  .room__cap--right{text-align:left;align-items:flex-start;}
  .room__subbox{width:100%;max-width:none;gap:16px;}
  .room__grid {flex-wrap: wrap;gap: 40px;}/*flex-direction: row;*/
  .room__col--left{width: 75%;padding-top: 0;}
  .room__col--right{width: 100%;}
  .room__subbox{width: 57%;}
  .room__subbox .room__img{height: 249px;}
  .room__col--right>.room__img {height: 185px;width: 54%;margin-left: auto;}
  .acard__tab{font-size: 21px;}
}

/* ===== ~1080px：タブレット（横） ===== */
@media (max-width:1080px){
  :root{--rail:72px;}
  /* ハンバーガーを72pxレールの中央に */
  .menu-toggle{right:calc((72px - 18px) / 2);}
  .fv__box{left:6vw;}
  .about{padding:100px 40px;gap:30px;}
  .about__cards{flex-wrap:wrap;gap:56px 24px;}
  .acard{flex:0 0 calc(50% - 12px);max-width:none;}
  .acard__tab{font-size: 27px;}
  .room{padding-top:40px;padding-bottom:100px;}
  .room__hero{padding-right:40px;gap:40px;}
  .room__hero-img{height:520px;}
  .food{gap:30px;}
  .food__slide{flex-basis:82%;height:auto;aspect-ratio:1055/611;}
  .food__foot{padding:0;}
  .food__ttl{font-size:32px;}
  .omotenashi,.stay,.access{padding:100px 40px;}
  .htitle__txt{font-size:40px;}
}

/* ===== ~900px：ナビを上部バーに切替 ===== */
@media (max-width:900px){
  :root{--rail:0px;}
  .site{width:100%;}
  .fv-bg{width:100%;height: 100%;}
  .gnav{
    width:100%;height:60px;flex-direction:row;justify-content:flex-start;
    padding:0 20px;align-items:center;
    background:transparent;box-shadow:none;z-index:210;
  }
  /* ご予約はタブレット以下でも常時表示：縦書きのまま画面右端・上下中央に固定 */
  .gnav__body{display:contents;}
  .gnav__menu{display:none;}
  .gnav__reserve{
    position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:210;
    writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.2em;
    background:var(--navy);color:#fff;border-color:var(--navy);
    padding:24px 6px;font-size:15px;border-radius:5px 0 0 5px;
  }
  .gnav__reserve:hover{background:#000;border-color:#000;color:#fff;}
  /* タブレット以下：横長の線を縦に並べた通常のハンバーガー */
  .menu-toggle{
    top:20px;right:20px;width:28px;height:20px;gap:0;
    flex-direction:column;justify-content:space-between;
  }
  .menu-toggle span{width:100%;height:1px;flex:0 0 1px;}
  body.menu-open .menu-toggle span:nth-child(1){transform:translateY(9.5px) rotate(45deg);}
  body.menu-open .menu-toggle span:nth-child(2){opacity:0;}
  body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg);}

  /* .fv__box{left:24px;top:auto;bottom:64px;} */
  /* .fv__box .fv__logo{display: none;} */

  /* フルスクリーンメニュー（モバイル） */
  .menu-overlay__photo{display:none;}
  .menu-overlay__panel{width:100%;padding:88px 24px 40px;justify-content:flex-start;overflow-y:auto;}
  .menu-overlay__logo{width:190px;}
  /* ナビは横書き・縦並び */
  .menu-overlay__menu{flex-direction:column;align-items:center;margin-top:40px;gap:4px;max-width:none;}
  .menu-overlay__menu a{writing-mode:horizontal-tb;font-size:18px;letter-spacing:.15em;padding:8px;}
  .menu-overlay__reserve{margin-top:40px;height:60px;}
  .menu-overlay__tel{font-size:22px;}
  .menu-overlay__sub{margin-top:36px;gap:20px;}
  /* フッター：縦書きナビは非表示、サブリンク（お問い合わせ等）は残す */
  .footer__menu{display:none;}
  .footer__nav{margin-top:0;gap:0;}

  .acard__img{height: 421px;}
  .onsen__cap--02 {
    left: 63px;
    bottom: -89px;
    height: 149px !important;
    width: 70px !important;
}
  .onsen__lead-ttl{padding-top: 0;}
  .onsen__ph--02 img {height: 26vw;}
  .onsen__body {gap: 63px;}
  .onsen__btns{padding-left: 20px;}
}

/* ===== ~840px：タブレット（縦）・大型スマホ ===== */
@media (max-width:840px){
  .fv__catch{font-size:22px;}
  .intro{flex-direction:column;align-items:center;gap:48px;padding:60px 24px 90px;}
  .intro__text{padding-top:0;}
  .acard{flex-basis:100%;}
  .omotenashi__cards{flex-direction:column;gap:56px;}
  .access__inner{flex-direction:column;gap:40px;}
  .access__img{width:100%;height:auto;aspect-ratio:950/508;}
  .access__box{width:100%;}
  .room__hero-img{height:auto;aspect-ratio:1524/788;}
  .food__slide{flex-basis:100%;aspect-ratio:16/10;}
  .food__ttl{font-size:28px;}
  /* テキストの下にナビを縦積み（前へ/次へが見切れないように） */
  .food__foot{flex-direction:column;gap:0;align-items:flex-start;flex-direction: column-reverse;}
  .food__nav{align-self:flex-start;}
  .htitle__txt{font-size:32px;}
  .bgfixed{background-attachment:scroll;height:360px;}

  /* ------------ 調整 ------------ */
  .acard {flex-basis: 46%;}

  /* 客室 ------ */

  /* 料理 ------ */
  .food {padding-left: 40px;}
  .food__nav{align-self: end;}
  .food__box{gap: 0;}
  
  /* 温泉 ------ */
  .onsen{
    gap: 10%;
    padding: 50px 0 100px;
  }
  .onsen__inner{
    padding-top: 167px;
    align-items: flex-start;
  }
  .onsen__body{
    padding-top: 48%;
  }
  .onsen__title {
    margin-right: 40px;
  }
  .onsen__lead-txt{
    padding-top: 77px;
  }
  .onsen__ph--01{
    width: 44vw;
  }
  .onsen__ph--01 img {
    height: 58vw;
  }
  .onsen__inset{
    margin-top: -79px;
    height: 29vw !important;
    width: 23vw !important;
  }
  .onsen__ph--02 {
    right: -42vw;
    top: -39px;
    width: 36vw;
  }

  /* おもてなし ------ */
  .omotenashi{gap: 40px;}
}

/* ===== ~600px：スマホ ===== */
@media (max-width:670px){
  .acard {  
    flex-basis: 100%;
  }
  .acard__img {
    height: auto;
    aspect-ratio: 9 / 16;
  }
}
@media (max-width:600px){
  .loader__logo{width: 230px;margin: auto;}
  .fv__logo{width:200px;}
  .fv__catch{font-size:18px;}
  .about,.food,.omotenashi,.stay,.access{padding:64px 20px;}
  .stay{padding-top: 30px;}
  .room__grid{padding:48px 20px 0;gap: 46px;}
  .room__bath{padding:70px 20px 0;}
  .room__hero{padding-right:20px;gap:24px;}
  .room__bath-txt{padding:32px 0;}
  .room__bath-ttl{font-size:24px;}
  .room__hero-img{aspect-ratio: 5 / 4;}
  .onsen{padding:64px 20px 90px;}
  .onsen__lead{gap:40px;}
  .htitle__txt{font-size:26px;}
  .htitle__line{width:60px;}
  .food__ttl{font-size:24px;}
  .vtitle__lg{font-size:40px;}
  .vtitle__sm{font-size:22px;}
  .vtitle::before{height:200px;}
  .bgfixed{height:280px;}
  .map{height:320px;}
  .footer__nav{max-width:calc(100% - 40px);}
  /* サブリンク（お問い合わせ・周辺情報・プライバシーポリシー）を縦並びに */
  .footer__sub{flex-direction:column;gap:16px;align-items:center;}
  .menu-overlay__menu{gap:6px;max-width:300px;}
  .menu-overlay__reserve{width:100%;}

  /* ------------ 調整 ------------ */
 .{writing-mode: horizontal-tb;}

  /* 縦枠文字 ------ */
 .acard__tab,.scard__tab {
    width: 37px;
    padding: 8px 5px;
    font-size: 18px;
    line-height: 29px;
    box-shadow: 0 13px 15px rgba(0, 0, 0, .06);
  }
  .acard__tab {
    width: 37px;
    padding: 8px 5px;
    font-size: 22px;
    line-height: 29px;
    letter-spacing: 5px !important;
    box-shadow: 0 13px 15px rgba(0, 0, 0, .06);
    top: -24px;
    right: 18px;
    text-shadow: 1px 1px 13px rgb(0 0 0 / 65%);
}
  .scard__tab{right: 20px;}

  
  /* 縦タイトル ------ */
  .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: #ffffff;
  }
  .vtitle--white .vtitle__text::before{
    background: var(--white);
  }

  /* fv --- */
.site{background-color: #000;}
.fv-bg{opacity: 0.9;}

  /* 海風について --- */
  .about{flex-wrap: wrap;justify-content: center;gap: 87px;}
  .about__cards{max-width: 90%;gap: 60px 24px;}
  .acard {flex-basis: 100%;}
  .acard__img{height: 372px;}
  .acard__img img{opacity: 0.9;}

  /* 客室 --- */
  .room__hero{display: block;padding-right: 0;}
  .room__hero .vtitle{text-align: center;padding-right: 0;padding-top: 59px;margin-bottom: 51px;}
  .room__col--left .room__img {height: 163px;}
  .room__col--right>.room__img {height: 136px;width: 71%;}
  .room__subbox .room__img {height: 126px;margin-top: 20px;}
  .room__vtxt{gap: 9px;}
  .room__bath-desc{padding-bottom: 20px;margin-bottom: 29px;padding-top: 15px;}
  .room__bath-img {aspect-ratio: 16 / 10;}
  .room__vtxt p{font-size: 20px!important;padding-bottom: 35px;writing-mode: horizontal-tb;}
  .room__col--center{gap: 11px;}
  .room__bath-txt{gap: 11px;}

  /* 料理 --- */
  .food{flex-wrap: wrap;gap: 96px;}
  .food__box{gap: 0;}
  .food__slide{max-width: 100%;}
  .food__nav{align-self: end;}
  .food__arrow{width: 53px;height: 53px;}
  .food__txt{gap :30px;}
  .food__desc{padding-bottom: 20px;}

  /* 温泉 --- */
  .onsen{flex-direction:column;gap:0;padding: 50px 0;}
  .onsen__inner{flex-direction:column;padding-top:0;width:100%;align-items:center;}
  .onsen__photos{width:100%;max-width:764px;padding-top:0;margin:0 auto 90px;}
  .onsen__ph{width:85% !important;}
    .onsen__ph img {
      height: auto !important;
      right: auto;
      left: 30px;
    }
  .onsen__ph--02{position:relative;max-width:100%;margin:15% 0 0;right:auto;top:0;margin-left: auto;}
  .onsen__inset {
      width: 48% !important;
      height: auto !important;
      aspect-ratio: 296 / 373;
      margin-left: calc(85% - 15%);
      margin-top: -80px;
    }
  .onsen__ph--03{margin-left:0;margin-top:28px;} 
  /* キャプション画像は写真の外に飛び出さないよう内側の角へ */
  .onsen__cap--01{width: 27px !important;top: auto;margin-top: -64px;left: 32px;}
.onsen__cap--02 {
        width: 52px !important;
        top: auto;
        left: auto;
        right: 37px;
        bottom: -46px;
    }
  .onsen__cap--03{width: 27px !important;left:37px;}
  .onsen__body{width:100%;max-width:764px;margin:0 auto;padding:0;gap:60px;}
  .onsen__lead{padding-left:0;justify-content:center;gap:10%;padding: 0 20px;}
  .onsen__btns{padding-left:0;align-items:center;}
  /* タイトルなので縦積み時は最上部に。ダングリングする縦罫線は消して中央配置 */
  .onsen__title{order:-1;margin:0 auto 44px;padding:0;}
  .onsen__title::before{display:none;}


  /* おもてなし --- */
  .omotenashi{gap: 25px;margin-top: -1px;}

  /* 過ごし方 --- */
  .stay{gap: 50px;}
  .scard.reveal{gap: 20px;}
  .scard__cap{margin-bottom: 45px;}

  /* アクセス --- */
  .access__box{gap: 30px;}
  .access__row{flex-direction:column;gap: 0;border-bottom: 1px solid rgba(51, 51, 51, .2);padding: 10px 0;}
  .access__row dt{padding: 0 10px;opacity: 0.8;}
}

/* ===== 画面の縦幅が狭い時：ヘッダーのナビを隠す（ご予約は残す） ===== */
@media (max-height:850px){
  .gnav__menu{display:none;}
}