/* add.css : モックアップの base.css / sub.css に無い見た目だけを足す。既存のクラスの見た目は変えない。 */

/* top 用：sub.css にある .tbc と .mbook（下の固定バー）を、base.css だけを読むトップでも使えるように同じ値で複写 */
.tbc{display:inline-block;margin:0 4px;padding:0 8px;border:1px dashed #c9b27c;color:var(--gold-t);font-family:var(--sans);font-size:13px;letter-spacing:.06em;line-height:1.8;vertical-align:1px;white-space:nowrap;font-style:normal;font-weight:400}
.mbook{display:none}
@media(max-width:900px){
  .mbook{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:1fr 1.6fr;background:#fff;box-shadow:0 -1px 0 var(--line)}
  .mbook a{display:flex;align-items:center;justify-content:center;height:54px;font-size:13px;letter-spacing:.16em;color:var(--sea-t)}
  .mbook a.p{background:var(--deep);color:#fff}
  body{padding-bottom:54px}
}

/* 写真が無いところの枠（点線の枠と同じ色。.ph の中に入れる） */
.noph{display:grid;place-items:center;width:100%;height:100%;min-height:140px;border:1px dashed #c9b27c;background:#fffbf2;color:var(--gold-t);font-size:13px;letter-spacing:.12em}

/* 文だけの段（.ttl の下に置く本文の列） */
.gb{max-width:860px;margin:0 auto}
.gb>p{font-size:var(--fs-body);color:var(--deep);margin-top:16px;line-height:1.9}
.gb>h3{font-size:16px;letter-spacing:.2em;margin-top:44px}
.gb .dl,.gb .tw,.gb .gl,.gb .faq,.gb .ctr{margin-top:22px}
.gb>h3+.dl,.gb>h3+.tw,.gb>h3+.gl{margin-top:14px}
.gl{list-style:none;margin:14px 0 0;padding:0;font-size:var(--fs-body);color:var(--deep);border-top:1px solid var(--line);line-height:1.9}
.gl li{padding:11px 2px;border-bottom:1px solid var(--line)}
.gl b{font-weight:400;font-family:var(--serif);color:var(--sea-t);letter-spacing:.1em;margin-right:.5em}

/* 本文の中のページへのリンク */
.tl{border-bottom:1px solid var(--line);color:var(--sea-t)}
.tl:hover{border-bottom-color:var(--sea)}

/* .blk の小見出し（h3） */
.blk h3{font-size:16px;letter-spacing:.2em;display:flex;align-items:center;gap:18px}
.blk h3::after{content:"";flex:1;height:1px;background:var(--line)}
.blk .go{margin-top:18px}

/* 冬の滞在：スキー場の欄の小見出し */
.night h3.th{text-align:center;font-size:16px;letter-spacing:.22em;margin-top:56px}
.night h3.th+.tools{margin-top:18px}

/* 写真を用意中の4枚並び */
.stay.np .ph{aspect-ratio:3/4;overflow:hidden}

/* お問い合わせの見本フォーム（送信しない） */
.cf{margin-top:28px;border-top:1px solid var(--line)}
.cf .f{display:grid;grid-template-columns:11em 1fr;gap:16px;align-items:start;padding:16px 4px;border-bottom:1px solid var(--line);border-left:0;border-right:0;border-top:0;margin:0}
.cf label,.cf legend{font-family:var(--serif);color:var(--sea-t);letter-spacing:.14em;font-size:13px;padding:0}
.cf .rq,.cf .op{margin-left:8px;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--gold-t)}
.cf input[type=text],.cf input[type=email],.cf input[type=tel],.cf select,.cf textarea{width:100%;font:inherit;font-size:var(--fs-body);color:var(--deep);padding:10px 12px;border:1px solid var(--line);background:#fff;border-radius:0}
.cf .ck{display:block;font-family:var(--sans);font-size:var(--fs-body);letter-spacing:.04em;color:var(--deep);padding:2px 0}
.cf .agree{padding:20px 4px;text-align:center}
.cf button.btnx{border:0;cursor:pointer;font-family:inherit}
.tel2{font-family:var(--serif);font-size:20px;letter-spacing:.1em;color:var(--sea-t)}
@media(max-width:900px){.cf .f{grid-template-columns:1fr;gap:8px}}

/* スマートフォンのメニュー（900px以下だけ効く） */
.mnav{display:none}
@media(max-width:900px){
  .mnav{position:fixed;inset:0;z-index:50;background:var(--white);color:var(--deep);overflow-y:auto;padding:84px 28px 40px}
  .mnav[hidden]{display:none}
  .mnav:not([hidden]){display:block}
  .mnav nav{display:flex;flex-direction:column}
  .mnav nav a{font-family:var(--serif);font-size:17px;letter-spacing:.2em;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--sea-t)}
  .mnav nav a.mbk{margin-top:28px;border:0;background:var(--sea);color:#fff;text-align:center;padding:16px}
  .mclose{all:unset;cursor:pointer;position:absolute;top:22px;right:20px;display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.12em;color:var(--sea-t)}
  .mclose i{display:block;width:20px;height:20px;position:relative}
  .mclose i::before,.mclose i::after{content:"";position:absolute;left:0;top:9px;width:20px;height:1px;background:currentColor;transform:rotate(45deg)}
  .mclose i::after{transform:rotate(-45deg)}
  body.menu-open{overflow:hidden}
}

/* 3回目：リードの1文は見出しにせず p.catch にした。見た目は .lead h2 / .dream .t h2 と同じ */
.lead .catch{font-family:var(--serif);font-weight:400;letter-spacing:.16em;color:var(--sea-t);font-size:22px;line-height:2;margin:0}
.dream .t .catch{font-family:var(--serif);font-weight:400;letter-spacing:.16em;color:var(--sea-t);font-size:22px;line-height:2;margin:0}
/* ほかのお部屋の見出し（h2）。.rooms .head p と同じ見た目 */
.rooms .head h2{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.12em;color:var(--sea-t)}
/* 小さい見出しの帯（h3.rule） */
h3.rule{font-size:17px}
@media(max-width:900px){
  .lead .catch{font-size:19px}
  .dream .t .catch{font-size:19px}
}

/* 3回目：原稿の ## を h2、### を h3 にそろえたための見出しの見た目（もとの h3 / h2 と同じ値） */
.ov .box h3{font-size:20px;letter-spacing:.1em;line-height:1.7}
.dream .t h3{font-size:22px;line-height:2}
.lst h2{font-size:22px;letter-spacing:.22em;margin-bottom:10px}
.two h2{font-size:22px;letter-spacing:.2em}
.three h2{font-size:22px;letter-spacing:.2em;margin-top:22px;text-align:center}
.faq h2{font-size:22px;letter-spacing:.24em;padding:46px 4px 12px;border-bottom:1px solid var(--line);color:var(--sea-t)}
.faq h2:first-child{padding-top:10px}
/* 空室検索の見出しは原稿の見出しではないので p.bkt にした（.bkb h2 と同じ見た目） */
.bkb .bkt{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.16em;line-height:1.7;margin:0;color:var(--sea-t)}

/* 言語の切り替え（プルダウン）。JavaScript が動かない間（html に .has-js が無い）は、ボタンを隠して一覧を並べる */
.lang-sw{position:relative;display:inline-block}
.lang-sw .lang-ico{width:16px;height:16px;flex:none}
.lang-sw .lang-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang-sw .lang-btn{display:none;align-items:center;gap:6px;margin:0;padding:5px 13px 5px 11px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;letter-spacing:.08em;line-height:1.3;cursor:pointer;white-space:nowrap}
.lang-sw .lang-btn:hover{background:rgba(255,255,255,.14)}
.lang-sw .lang-menu{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:13px}
.lang-sw .lang-menu li{margin:0;padding:0}
.has-js .lang-sw .lang-btn{display:inline-flex}
.has-js .lang-sw .lang-menu{display:none;position:absolute;z-index:70;top:calc(100% + 8px);right:0;min-width:152px;flex-direction:column;gap:0;padding:6px;border-radius:12px;background:#fff;color:var(--deep);box-shadow:0 14px 36px rgba(15,35,50,.22);text-align:left}
.has-js .lang-sw.is-open .lang-menu{display:flex}
.lang-sw .lang-menu a{display:block;padding:9px 14px;border:0;border-radius:8px;color:var(--deep);font-size:14px;letter-spacing:.06em;white-space:nowrap}
.lang-sw .lang-menu a:hover{background:#eef4f6}
.lang-sw .lang-menu a[aria-current="true"]{color:var(--sea);background:#e6f0f4;font-weight:700}
.hd .row1 .lang-sw{margin-left:clamp(10px,1.2vw,22px)}
.hd .row1 .lang-sw .lang-menu a{padding:9px 14px;border-bottom:0}
.mnav .lang-sw{display:block;margin-top:24px}
.mnav .lang-sw .lang-btn{width:100%;justify-content:center;padding:12px;border-color:var(--line);color:var(--sea-t);font-size:15px}
.mnav .lang-sw .lang-btn:hover{background:#eef4f6}
.has-js .mnav .lang-sw .lang-menu{position:static;top:auto;min-width:0;margin-top:8px;box-shadow:none;border:1px solid var(--line)}
.mnav nav .lang-sw .lang-menu a{padding:12px 14px;border-bottom:0;font-family:inherit;font-size:15px;letter-spacing:.06em}