/* blocks.css : ページをブロック（WordPress のブロックエディタ）にしたことで生じる差を合わせる。
   base.css / sub.css / add.css（静的HTMLの見本と同じ）は書き換えず、差だけをここに書く。 */

/* ブロックの外側の余白を、見本（余白なし）に合わせる */
.wp-block-table,.wp-block-group,.wp-block-details,.wp-block-list,.wp-block-heading,.wp-block-spacer{margin-top:0;margin-bottom:0}
:where(.wp-block-group.is-layout-flow)>*{margin-block-start:0;margin-block-end:0}
.wp-block-table{overflow-x:auto}
.wp-block-table table{border-collapse:collapse}

/* 管理バーがあるとき、固定ヘッダーと下の固定バーが重ならないように */
.admin-bar .hd{top:32px}
@media(max-width:782px){.admin-bar .hd{top:46px}}

/* よくあるご質問：詳細ブロック（wp:details）。見本の「details > summary + div.a」に合わせる。答えは summary の次の段落 */
.faq .wp-block-details{margin:0;padding:0;border:0;border-bottom:1px solid var(--line)}
.faq .wp-block-details>p{margin:0;padding:0 30px 24px calc(2.2em + 4px);font-size:var(--fs-body);color:var(--deep);line-height:1.9}
@media(max-width:900px){.faq .wp-block-details>p{padding-right:6px}}

/* 見出しブロックの h2.rule など：見本の見た目のまま（ブロック側の余白・太さを消す） */
.wp-block-heading{font-weight:400}

/* リスト：見本の .gl / .common の見た目（ブロックの list-style を消す） */
.wp-block-list.gl,.wp-block-list.common{list-style:none;padding-left:0}

/* 表ブロック（見本の table.rt を figure.wp-block-table.rt の中に置いた形）。下は sub.css の .rt の規則を写したもの */
.wp-block-table.rt{margin-top:10px}
.wp-block-table.rt td,.wp-block-table.rt th{border-left:0;border-right:0;border-top:0}

.wp-block-table.rt table{width:100%;border-collapse:collapse;margin-top:10px;font-size:var(--fs-body)}
.wp-block-table.rt th, .wp-block-table.rt td{padding:15px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.95}
.wp-block-table.rt thead th{font-weight:400;font-size:13px;letter-spacing:.16em;color:#4d6676;border-bottom:1px solid var(--sea)}
.wp-block-table.rt tbody th{font-family:var(--serif);font-weight:400;color:var(--sea-t);letter-spacing:.12em;white-space:nowrap;width:9em}
.wp-block-table.rt td.n{font-family:var(--serif);white-space:nowrap;width:8em;color:var(--deep)}
@media(max-width:900px){
  .wp-block-table.rt thead{display:none}
  .wp-block-table.rt table, .wp-block-table.rt tbody, .wp-block-table.rt tr, .wp-block-table.rt th, .wp-block-table.rt td{display:block;width:auto}
  .wp-block-table.rt tr{padding:12px 2px;border-bottom:1px solid var(--line)}
  .wp-block-table.rt th, .wp-block-table.rt td{border:0;padding:2px 0}
  .wp-block-table.rt tbody th{width:auto}
  .wp-block-table.rt td.n{width:auto;white-space:normal}
}

/* ---- 親テーマ Arkhe の既定の見た目を打ち消す（2026-10-19、テスト用サイトで確認） ---- */
/* 表：Arkhe は thead の th に背景色・白文字・!important の余白を付ける。見本（sub.css の .cmpt / .rt）に戻す */
main :where(thead) :is(td,th){background-color:transparent}
main .cmpt th,main .cmpt td{padding:16px 12px!important}
main .wp-block-table.rt th,main .wp-block-table.rt td{padding:15px 10px!important}
@media(max-width:900px){main .wp-block-table.rt th,main .wp-block-table.rt td{padding:2px 0!important}}

/* 余白：Arkhe は wp-block-group などの直下の2つ目以降に margin-top（--ark-mt--inner）を付ける（詳細度 0,2,0）。
   見本の base.css / sub.css / add.css の margin の規則だけを、詳細度を同じだけ上げて写したもの（下）。
   見本の CSS を直したら、この下を作り直す（:not(.zz) は詳細度を上げるための印で、class zz は使わない） */
/* base.css */
h1:not(.zz):not(.zz),h2:not(.zz):not(.zz),h3:not(.zz):not(.zz){margin:0}
p:not(.zz):not(.zz){margin:0}
.inner:not(.zz):not(.zz){margin:0 auto}
.wave:not(.zz):not(.zz){margin:22px auto 0}
.tate:not(.zz):not(.zz){margin:0}
.bk input:not(.zz):not(.zz),.bk select:not(.zz):not(.zz){margin-top:2px}
.direct:not(.zz):not(.zz){margin:64px auto 0}
.direct ul:not(.zz):not(.zz){margin:0}
.direct small:not(.zz):not(.zz){margin-top:6px}
.ttl:not(.zz):not(.zz){margin:110px 0 46px}
.ttl em:not(.zz):not(.zz){margin-top:6px}
.card p:not(.zz):not(.zz){margin-top:10px}
.rule:not(.zz):not(.zz){margin:124px 0 0}
.ov:not(.zz):not(.zz){margin-top:34px}
.ov .box .wave:not(.zz):not(.zz){margin:16px 0 0}
.ov .box p:not(.zz):not(.zz){margin-top:20px}
.dream:not(.zz):not(.zz){margin-top:34px}
.dream .t .box:not(.zz):not(.zz){margin:56px -60px 0 0}
.dream .t .box a:not(.zz):not(.zz){margin-top:18px}
.rooms:not(.zz):not(.zz){margin-top:84px}
.rooms .head:not(.zz):not(.zz){margin-bottom:28px}
.room h3:not(.zz):not(.zz){margin-top:20px}
.room p:not(.zz):not(.zz){margin-top:6px}
.sun:not(.zz):not(.zz){margin:130px 10px 0}
.stay h3:not(.zz):not(.zz){margin-top:22px}
.stay p:not(.zz):not(.zz){margin-top:6px}
.cta:not(.zz):not(.zz){margin-top:130px}
.cta a:not(.zz):not(.zz){margin-top:30px}
footer ul:not(.zz):not(.zz){margin:0}
footer .info img:not(.zz):not(.zz){margin-bottom:16px}
@media(max-width:900px){.direct:not(.zz):not(.zz){margin:44px 20px 0}.ov .box:not(.zz):not(.zz){margin:0 18px}.dream .t .box:not(.zz):not(.zz){margin:24px 0}.sun:not(.zz):not(.zz){margin:84px 0 0}.cta:not(.zz):not(.zz){margin-top:84px}.ttl:not(.zz):not(.zz){margin:76px 0 32px}.rule:not(.zz):not(.zz){margin-top:86px}}
/* sub.css */
.ph-hero h1:not(.zz):not(.zz){margin-top:4px}
.ph-hero h1 small:not(.zz):not(.zz){margin-top:10px}
.crumb:not(.zz):not(.zz){margin:0 auto}
.crumb ol:not(.zz):not(.zz){margin:0}
.lead:not(.zz):not(.zz){margin:92px auto 0}
.lead p:not(.zz):not(.zz){margin-top:22px}
.keys:not(.zz):not(.zz){margin:40px auto 0}
.tbc:not(.zz):not(.zz){margin:0 4px}
.box .wave:not(.zz):not(.zz),.tx .wave:not(.zz):not(.zz),.rrow .wave:not(.zz):not(.zz){margin:16px 0 0}
.pair:not(.zz):not(.zz){margin-top:34px}
.pair p:not(.zz):not(.zz){margin-top:18px}
.gal:not(.zz):not(.zz){margin-top:34px}
.gal figure:not(.zz):not(.zz){margin:0}
.rinfo:not(.zz):not(.zz){margin-top:10px}
.dl:not(.zz):not(.zz){margin:0}
.dl dd:not(.zz):not(.zz){margin:0}
.lst h3:not(.zz):not(.zz){margin-bottom:10px}
.lst+.lst:not(.zz):not(.zz){margin-top:34px}
.bkb:not(.zz):not(.zz){margin:120px auto 0}
.bkb p:not(.zz):not(.zz){margin-top:16px}
.bkb .bk:not(.zz):not(.zz){margin:30px 0 0}
.bkb .fine:not(.zz):not(.zz){margin-top:14px}
.faq:not(.zz):not(.zz){margin:34px auto 0}
.ctr:not(.zz):not(.zz){margin-top:44px}
.tw:not(.zz):not(.zz){margin-top:10px}
.rrow:not(.zz):not(.zz){margin-top:96px}
.rrow h3:not(.zz):not(.zz){margin-top:2px}
.rrow .s2:not(.zz):not(.zz){margin-top:14px}
.rrow p:not(.zz):not(.zz){margin-top:14px}
.go:not(.zz):not(.zz){margin-top:22px}
.common:not(.zz):not(.zz){margin:10px auto 0}
.choose:not(.zz):not(.zz){margin:10px auto 0}
.choose dd:not(.zz):not(.zz){margin:0}
.full:not(.zz):not(.zz){margin:120px 10px 0}
.night:not(.zz):not(.zz){margin-top:130px}
.night .ttl:not(.zz):not(.zz){margin-top:0}
.night .sub:not(.zz):not(.zz){margin-top:-18px}
.ski:not(.zz):not(.zz){margin:44px auto 0}
.night .fine:not(.zz):not(.zz){margin:18px auto 0}
.tools:not(.zz):not(.zz){margin:56px auto 0}
.tools b:not(.zz):not(.zz){margin-bottom:6px}
.day4:not(.zz):not(.zz){margin:10px 0 0}
.day4 p:not(.zz):not(.zz){margin-top:12px}
.pend:not(.zz):not(.zz){margin:34px auto 0}
.pend b:not(.zz):not(.zz){margin-bottom:4px}
.two:not(.zz):not(.zz){margin-top:10px}
.two p:not(.zz):not(.zz){margin-top:14px}
.two ul:not(.zz):not(.zz){margin:14px 0 0}
.status:not(.zz):not(.zz){margin:0 auto}
.status .in:not(.zz):not(.zz){margin-top:-38px}
.spick:not(.zz):not(.zz){margin-top:10px}
.three:not(.zz):not(.zz){margin-top:10px}
.three h3:not(.zz):not(.zz){margin-top:22px}
.three p:not(.zz):not(.zz){margin-top:8px}
.plans:not(.zz):not(.zz){margin-top:10px}
.plan .pr:not(.zz):not(.zz){margin-top:18px}
.plan p:not(.zz):not(.zz){margin-top:14px}
.sets:not(.zz):not(.zz){margin-top:56px}
.set ul:not(.zz):not(.zz){margin:12px 0 0}
.small:not(.zz):not(.zz){margin-top:16px}
.incl:not(.zz):not(.zz){margin:56px auto 0}
.incl b:not(.zz):not(.zz){margin-bottom:4px}
.addr:not(.zz):not(.zz){margin-top:10px}
.addr .tel:not(.zz):not(.zz){margin-top:14px}
.apps:not(.zz):not(.zz){margin-top:26px}
.addr .fine:not(.zz):not(.zz){margin-top:12px}
.rt:not(.zz):not(.zz){margin-top:10px}
.blk:not(.zz):not(.zz){margin-top:96px}
.blk p:not(.zz):not(.zz){margin-top:14px}
.dist:not(.zz):not(.zz){margin-top:24px}
.fnav:not(.zz):not(.zz){margin:44px auto 0}
.ask:not(.zz):not(.zz){margin:96px auto 0}
.ask p:not(.zz):not(.zz){margin-top:6px}
.ask .tel:not(.zz):not(.zz){margin-top:8px}
@media(max-width:900px){.lead:not(.zz):not(.zz){margin-top:64px}.bkb:not(.zz):not(.zz){margin-top:84px}.rrow:not(.zz):not(.zz){margin-top:64px}.full:not(.zz):not(.zz){margin:84px 0 0}.night:not(.zz):not(.zz){margin-top:84px}.ski .bar:not(.zz):not(.zz){margin:6px 0 2px}.status .in:not(.zz):not(.zz){margin-top:-28px}.ask:not(.zz):not(.zz){margin:70px 20px 0}.blk:not(.zz):not(.zz){margin-top:70px}}
/* add.css */
.tbc:not(.zz):not(.zz){margin:0 4px}
.gb:not(.zz):not(.zz){margin:0 auto}
.gb>p:not(.zz):not(.zz){margin-top:16px}
.gb>h3:not(.zz):not(.zz){margin-top:44px}
.gb .dl:not(.zz):not(.zz),.gb .tw:not(.zz):not(.zz),.gb .gl:not(.zz):not(.zz),.gb .faq:not(.zz):not(.zz),.gb .ctr:not(.zz):not(.zz){margin-top:22px}
.gb>h3+.dl:not(.zz):not(.zz),.gb>h3+.tw:not(.zz):not(.zz),.gb>h3+.gl:not(.zz):not(.zz){margin-top:14px}
.gl:not(.zz):not(.zz){margin:14px 0 0}
.blk .go:not(.zz):not(.zz){margin-top:18px}
.night h3.th:not(.zz):not(.zz){margin-top:56px}
.night h3.th+.tools:not(.zz):not(.zz){margin-top:18px}
.cf:not(.zz):not(.zz){margin-top:28px}
.cf .f:not(.zz):not(.zz){margin:0}
@media(max-width:900px){.mnav nav a.mbk:not(.zz):not(.zz){margin-top:28px}}
.lead .catch:not(.zz):not(.zz){margin:0}
.dream .t .catch:not(.zz):not(.zz){margin:0}
.lst h2:not(.zz):not(.zz){margin-bottom:10px}
.three h2:not(.zz):not(.zz){margin-top:22px}
.bkb .bkt:not(.zz):not(.zz){margin:0}

/* ---- BBQ・Dining Dome：本番のページの内容を、この見た目で（2026-10-19） ----
   中身はブロック（見出し・段落・リスト・画像・カラム）なので、編集画面で直せる。
   :not(.zz) は Arkhe の余白の規則より強くするための印（上と同じ） */
.tc:not(.zz):not(.zz){text-align:center;margin-top:18px;font-size:var(--fs-body);color:var(--deep);line-height:2}
.ttl .sub:not(.zz):not(.zz){margin:0 0 6px;font-size:15px;letter-spacing:.16em;color:var(--gold-t)}
/* ヒーローの下の4つの印 */
.badges:not(.zz):not(.zz){max-width:1120px;margin:64px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badges p:not(.zz):not(.zz){margin:0;border:1px solid var(--sea);color:var(--sea-t);font-family:var(--serif);letter-spacing:.14em;text-align:center;padding:14px 8px;font-size:16px;line-height:1.6}
/* 3つ特徴 */
.wp-block-columns.feat:not(.zz):not(.zz){display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:40px 0 0}
.feat .wp-block-column:not(.zz):not(.zz){margin:0}
.feat .wp-block-image:not(.zz):not(.zz){margin:0;aspect-ratio:16/9;overflow:hidden}
.feat .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
.feat h3:not(.zz):not(.zz){margin-top:20px;font-size:17px;letter-spacing:.12em;text-align:center;line-height:1.7}
.feat p:not(.zz):not(.zz){margin-top:10px;font-size:var(--fs-body);color:var(--deep);line-height:1.9}
.feat ul:not(.zz):not(.zz){margin:12px 0 0;padding-left:1.3em;font-size:var(--fs-body);color:var(--deep);line-height:1.9}
/* 料金・コースのカード */
.wp-block-columns.price:not(.zz):not(.zz){display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:34px 0 0}
.wp-block-columns.price.base:not(.zz):not(.zz){grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
.price .wp-block-column:not(.zz):not(.zz){margin:0;border-top:1px solid var(--sea);border-bottom:1px solid var(--line);padding:26px 4px 28px}
.price h3:not(.zz):not(.zz){font-size:19px;letter-spacing:.14em;text-align:center;line-height:1.7}
.price .wp-block-image:not(.zz):not(.zz){margin:18px 0 0;aspect-ratio:3/2;overflow:hidden}
.price .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
.price .yen:not(.zz):not(.zz){margin-top:16px;text-align:center;font-family:var(--serif);font-size:21px;letter-spacing:.06em;color:var(--deep);line-height:1.6}
.price .seat:not(.zz):not(.zz){margin-top:2px;text-align:center;font-size:14px;letter-spacing:.14em;color:var(--sea-t)}
.price .grp:not(.zz):not(.zz){margin-top:20px;font-family:var(--serif);color:var(--sea-t);letter-spacing:.1em;font-size:16px}
.price p:not(.zz):not(.zz){margin-top:14px;font-size:var(--fs-body);color:var(--deep);line-height:1.9}
.price ul:not(.zz):not(.zz){margin:6px 0 0;padding-left:1.3em;font-size:15px;color:var(--deep);line-height:1.85}
.price .note:not(.zz):not(.zz){margin-top:14px;font-size:14px;color:#4d6676;line-height:1.8}
.price .tc:not(.zz):not(.zz){margin-top:16px}
.price .ctr:not(.zz):not(.zz){margin-top:24px}
/* キャンペーンの枠（Dining Dome） */
.camp:not(.zz):not(.zz){margin:18px auto 0;border:1px solid var(--gold-t);padding:16px 18px 18px;text-align:center}
.camp .t:not(.zz):not(.zz){margin:0;font-family:var(--serif);color:var(--gold-t);letter-spacing:.16em}
.camp .yen:not(.zz):not(.zz){margin-top:6px}
.camp p:not(.zz):not(.zz){margin-top:8px;font-size:15px;line-height:1.85}
/* 料金に含まれるもの（段落にしたもの） */
p.incl:not(.zz):not(.zz){margin:44px auto 0}
/* キャンセル料・注意事項 */
.notes:not(.zz):not(.zz){max-width:860px;margin:0 auto;padding-left:1.4em;font-size:var(--fs-body);color:var(--deep);line-height:1.9}
.notes li+li{margin-top:8px}
/* 写真を1枚大きく（Dining Dome） */
.wp-block-image.wide:not(.zz):not(.zz){margin:0;aspect-ratio:16/7;overflow:hidden}
.wp-block-image.wide img{width:100%;height:100%;object-fit:cover;display:block}
/* 決済方法の画像 */
.wp-block-columns.pay:not(.zz):not(.zz){display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:26px auto 0}
.pay .wp-block-column:not(.zz):not(.zz),.pay .wp-block-image:not(.zz):not(.zz){margin:0}
.pay img{width:100%;height:auto;display:block}
/* 地図・予約フォーム */
.map:not(.zz):not(.zz){margin-top:30px}
.map iframe{display:block;width:100%;height:420px;border:0}
.rsv:not(.zz):not(.zz){max-width:960px;margin:30px auto 0}
.btnx.o{background:none}
@media(max-width:900px){
  .badges:not(.zz):not(.zz){grid-template-columns:1fr 1fr;margin-top:48px;padding:0 20px}
  .wp-block-columns.feat:not(.zz):not(.zz),.wp-block-columns.price:not(.zz):not(.zz),.wp-block-columns.pay:not(.zz):not(.zz){grid-template-columns:1fr;gap:34px}
  .wp-block-image.wide:not(.zz):not(.zz){aspect-ratio:4/3}
  .map iframe{height:320px}
}

/* ==== 2026-10-20 TOMO の指示（見た目だけ。ページの本文は変えない） ==== */

/* 間に合わせの印（見本の .note）が、本文の注記（BBQ の「※仕入状況により…」など）で画面の右下に固定されていたのを、ふつうの段落に戻す */
main .note:not(.zz){position:static;max-width:none;background:none;border:0;padding:0;z-index:auto;color:#4d6676}

/* 一日の例（冬の滞在・余市積丹ニセコ）：4つの箱の横並びをやめ、時間の流れを縦の線と点で見せる */
.day4:not(.zz):not(.zz){display:block;max-width:640px;margin:30px auto 0;padding:0;border-top:0;list-style:none}
.day4 li:not(.zz){position:relative;display:grid;grid-template-columns:6.5em minmax(0,1fr);column-gap:58px;align-items:start;margin:0;padding:0 0 30px;border:0}
.day4 li:last-child:not(.zz){padding-bottom:0}
.day4 li::before{content:"";position:absolute;left:calc(6.5em + 29px - 5px);top:11px;width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid var(--sand);z-index:1}
.day4 li::after{content:"";position:absolute;left:calc(6.5em + 29px - .5px);top:16px;bottom:-16px;width:1px;background:var(--line)}
.day4 li:last-child::after{display:none}
.day4 b:not(.zz){grid-column:1;grid-row:1;text-align:right;font-size:19px;letter-spacing:.3em;margin-right:-.3em;line-height:1.6}
.day4 span:not(.zz){grid-column:1;grid-row:2;text-align:right;line-height:1.5}
.day4 p:not(.zz):not(.zz){grid-column:2;grid-row:1/span 2;margin:0;padding-top:1px}
/* 余市・積丹・ニセコ：見出し（夏・冬）と線を同じ幅にそろえる */
.gb:has(>.day4){max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:900px){
  .day4 li:not(.zz){grid-template-columns:4.2em minmax(0,1fr);column-gap:40px;padding:0 0 26px;border-bottom:0}
  .day4 li::before{left:calc(4.2em + 20px - 5px)}
  .day4 li::after{left:calc(4.2em + 20px - .5px)}
  .day4 b:not(.zz){font-size:17px;letter-spacing:.2em;margin-right:-.2em}
  .day4 span:not(.zz){font-size:13px}
}

/* 周辺への距離（アクセス）：冬の滞在のスキー場の欄と同じ並び（名前・距離・線・時間）を、白い地の色で（貼る HTML は docs/17 の2） */
.ski.lt:not(.zz):not(.zz){max-width:none;margin:24px 0 0;border-top:1px solid var(--line)}
.ski.lt li{border-bottom:1px solid var(--line);grid-template-columns:minmax(7em,.7fr) 7em 1.8fr 7em}
.ski.lt .nm{color:var(--sea-t)}
.ski.lt .km{color:#4d6676}
.ski.lt .bar{background:var(--line)}
.ski.lt .bar i{background:linear-gradient(90deg,rgba(179,161,122,.25),var(--sand))}
.ski.lt .bar i::after{background:var(--deep)}
.ski.lt .tm{color:var(--deep)}
@media(max-width:900px){.ski.lt li{grid-template-columns:1fr auto}}

/* 新千歳空港からの経路の図（アクセス。貼る HTML は docs/17 の3）。パソコンは横の図、スマホは縦の並び */
.route:not(.zz):not(.zz){margin:26px 0 0}
.route-pc{display:grid;grid-template-columns:64px minmax(0,1.25fr) 84px minmax(0,1fr) 84px minmax(0,.95fr) 64px;grid-template-areas:"a jr1 otr jr2 shi wk1 g" "a . otr bus kai wk2 g" "a . otr tx tx tx g" "a car car car car car g";row-gap:6px;padding:14px 0}
.route-pc .rp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 0}
.route-pc .rp span{writing-mode:vertical-rl;font-family:var(--serif);font-size:16px;letter-spacing:.3em;line-height:1}
.route-pc .rp svg{width:22px;height:22px;flex:none}
.route-pc .rp.a{grid-area:a;background:linear-gradient(180deg,#e3edf2,#b9cfdb);color:var(--deep)}
.route-pc .rp.g{grid-area:g;background:var(--deep);color:#fff}
.route-pc .rs{display:flex;align-items:center;justify-content:center;margin:8px 0;border:1px solid var(--line);background:#fff;font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:var(--deep);text-align:center;line-height:1.5}
.route-pc .rl{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:76px;text-align:center}
.route-pc .rl b{font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--deep);line-height:1.5;padding:0 8px}
.route-pc .rl span{font-size:13px;letter-spacing:.06em;color:#4d6676;line-height:1.5;padding:0 8px}
.route-pc .rl i{display:block;height:6px}
.route-pc .jr i{height:8px;border:1px solid var(--deep);background:repeating-linear-gradient(90deg,var(--deep) 0 16px,#fff 16px 32px)}
.route-pc .bus i{height:5px;background:var(--sea)}
.route-pc .wk i{height:3px;background:repeating-linear-gradient(90deg,var(--deep) 0 8px,transparent 8px 14px)}
.route-pc .tx i{height:5px;background:#9fb3c2}
.route-pc .car i{height:5px;background:var(--sand)}
.route-pc .x1{grid-area:jr1}.route-pc .x2{grid-area:otr}.route-pc .x3{grid-area:jr2}.route-pc .x4{grid-area:shi}.route-pc .x5{grid-area:wk1}
.route-pc .x6{grid-area:bus}.route-pc .x7{grid-area:kai}.route-pc .x8{grid-area:wk2}.route-pc .x9{grid-area:tx}.route-pc .x10{grid-area:car}
/* スマホ用の並びは、パソコンでは画面に出さず読み上げにだけ使う */
.route-sp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.route-sp ol,.route-sp ul{list-style:none;margin:0;padding:0}
.route-sp>ol>li{padding:18px 2px 20px;border-bottom:1px solid var(--line)}
.route-sp>ol>li:first-child{border-top:1px solid var(--line)}
.route-sp .rh:not(.zz){font-family:var(--serif);font-size:15px;letter-spacing:.16em;color:var(--sea-t);margin:0 0 10px}
.route-sp .s{position:relative;padding-left:28px;font-family:var(--serif);font-size:15px;letter-spacing:.1em;color:var(--deep);line-height:1.6}
.route-sp .s::before{content:"";position:absolute;left:3px;top:6px;width:11px;height:11px;border-radius:50%;border:1px solid var(--deep);background:#fff;box-sizing:border-box}
.route-sp .s.g::before{background:var(--deep)}
.route-sp .l{position:relative;padding:9px 0 9px 28px;font-size:13px;letter-spacing:.04em;color:#4d6676;line-height:1.6}
.route-sp .l b{font-weight:400;color:var(--deep);margin-right:.6em}
.route-sp .l::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:5px}
.route-sp .jr::before{border:1px solid var(--deep);background:repeating-linear-gradient(180deg,var(--deep) 0 9px,#fff 9px 18px)}
.route-sp .bus::before{left:7px;width:3px;background:var(--sea)}
.route-sp .wk::before{left:7px;width:3px;background:repeating-linear-gradient(180deg,var(--deep) 0 5px,transparent 5px 9px)}
.route-sp .tx::before{left:7px;width:3px;background:#9fb3c2}
.route-sp .car::before{left:7px;width:3px;background:var(--sand)}
@media(max-width:900px){
  .route-pc{display:none}
  .route-sp{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}

/* 客室の一覧の表：列が増えたので最小幅を広げる。スマホは部屋の名前の列を左に止めて、右へスクロール（右端の影でスクロールできることを見せる） */
.cmpt{min-width:900px}
.cmpt thead th{white-space:nowrap}
main .cmpt th,main .cmpt td{word-break:normal}
.cmpt td{white-space:nowrap}
.cmpt td:last-child{white-space:normal}
@media(min-width:901px){.cmpt wbr{display:none}}
@media(max-width:900px){
  .tw{background:linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgba(43,67,84,.18),rgba(43,67,84,0)) right center/14px 100% no-repeat scroll}
  .cmpt{min-width:860px;border-collapse:separate!important;border-spacing:0}
  .cmpt thead th:first-child,.cmpt tbody th{position:sticky;left:0;z-index:2;box-shadow:inset -1px 0 0 var(--line)}
  .cmpt td:last-child{min-width:15em}
  .cmpt thead th:first-child{background:#fff}
  .cmpt tbody th{background:#f7f7f7}
  main .cmpt tbody th{padding:14px 10px!important;font-size:14px;letter-spacing:.04em;white-space:normal;word-break:keep-all;line-height:1.6}
}

/* 間取り（TOMO が客室のページに足した「見出し＋Floor plan＋波線＋画像」）を、ほかの見出し（.ttl）と同じ見た目に */
main h2.wp-block-heading:not(.ttl *):has(+em){text-align:center;font-size:24px}
main h2.wp-block-heading:not(.ttl *):has(+em):not([class*="u-mt-"]){margin-top:110px}
main h2.wp-block-heading:not(.ttl *)+em{display:block;text-align:center;font-family:var(--latin);font-style:italic;color:var(--gold-t);font-size:15px;letter-spacing:.06em;margin-top:6px}
main h2.wp-block-heading:not(.ttl *)+em+svg.wave+.wp-block-image:not(.zz):not(.zz),
.wp-block-group:has(>.wp-block-group__inner-container>h2+em+svg.wave:last-child)+.wp-block-image:not(.zz):not(.zz){margin-top:40px}
@media(max-width:900px){main h2.wp-block-heading:not(.ttl *):has(+em):not([class*="u-mt-"]){margin-top:76px}}
/* 間取りの画像：TOMO が付けた幅400pxだと、縦長の図は高すぎ（ジュニアスイートは約800px）、横長の図（スイート）は小さすぎる。
   縦長は高さ640pxまで、横長は幅560pxまでにそろえ、中央に置く（スマホは画面の幅まで、高さ520pxまで） */
.pg-room main h2.wp-block-heading+em+svg.wave+.wp-block-image figure,
.pg-room .wp-block-group:has(>.wp-block-group__inner-container>h2+em+svg.wave:last-child)+.wp-block-image figure{display:block;margin-left:auto;margin-right:auto}
.pg-room main h2.wp-block-heading+em+svg.wave+.wp-block-image img,
.pg-room .wp-block-group:has(>.wp-block-group__inner-container>h2+em+svg.wave:last-child)+.wp-block-image img{width:auto!important;height:auto!important;max-width:min(100%,560px);max-height:640px;margin:0 auto}
@media(max-width:900px){.pg-room main h2.wp-block-heading+em+svg.wave+.wp-block-image img,.pg-room .wp-block-group:has(>.wp-block-group__inner-container>h2+em+svg.wave:last-child)+.wp-block-image img{max-height:520px}}

/* BBQ・Dining Dome のヒーロー（写真）の高さ（パソコン）と、Dome の写真の見せる位置 */
@media(min-width:901px){
  .pg-dining-dome .ph-hero{height:90vh}
  .pg-bbq-barbecue .ph-hero{height:85vh}
}
.pg-dining-dome .ph-hero>img{object-position:50% 70%!important}

/* Dining Dome「持込プラン」：見出しの欄（.ttl）の中に入ったため中央寄せになったリストと注記を、ほかの料金の欄と同じ左寄せに戻す（料金・見出しは中央のまま） */
.ttl .wp-block-columns.price:not(.zz){text-align:left}

/* BBQ の4つの印：グループの内側の箱（wp-block-group__inner-container）に並びを付ける（1列に縦に並んでいた） */
.badges:not(.zz):not(.zz){display:block}
.badges>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.badges>.wp-block-group__inner-container{grid-template-columns:1fr 1fr}.badges p:not(.zz):not(.zz){font-size:14px;letter-spacing:.06em;padding:12px 6px}}

/* BBQ の3つの特徴：本番のように、白い地に影と細い枠のカードにして目立たせる */
.feat .wp-block-column:not(.zz):not(.zz){background:#fff;padding:22px 22px 28px;box-shadow:0 14px 34px rgba(43,67,84,.10),0 0 0 1px #e6edf0}
@media(max-width:900px){.feat .wp-block-column:not(.zz):not(.zz){padding:18px 18px 24px}}

/* ==== 2026-10-20（2回目）TOMO の指示 ==== */

/* 空室検索（全ページの下・トップの写真の上）：スマホで日付の欄が縮まず、欄が画面より約36px広くなってページが横に動いていた */
@media(max-width:900px){
  .bkb:not(.zz){min-width:0}
  .bk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk label{min-width:0;padding:12px 16px;letter-spacing:.08em}
  .bk input,.bk select{display:block;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
}

/* BBQ の4つの印を、ファーストビュー（写真の上、題の下）に。宿泊予約のボタンと同じ形で、白い地にして目立たせる。
   ブロックの場所は変えずに（TOMO の編集はそのまま）、見た目だけ写真の上に置く。写真の高さ（パソコン85vh・スマホ68vh）から位置を決めている */
.pg-bbq-barbecue main{position:relative}
.pg-bbq-barbecue .badges:not(.zz):not(.zz){position:absolute;z-index:4;left:0;right:0;top:calc(max(85vh,520px) - 132px);margin:0 auto;max-width:1120px;padding:0 28px}
.pg-bbq-barbecue .badges>.wp-block-group__inner-container{display:flex;flex-wrap:wrap;gap:10px}
.pg-bbq-barbecue .badges p:not(.zz):not(.zz){margin:0;background:#fff;border:0;color:var(--deep);font-family:var(--sans);font-size:13px;letter-spacing:.2em;line-height:1.6;padding:11px 24px;box-shadow:0 8px 22px rgba(15,35,50,.22)}
.pg-bbq-barbecue .ph-hero .ttlb{bottom:150px}
@media(max-width:900px){
  .pg-bbq-barbecue .badges:not(.zz):not(.zz){top:calc(max(68vh,460px) - 128px);padding:0 20px}
  .pg-bbq-barbecue .badges>.wp-block-group__inner-container{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pg-bbq-barbecue .badges p:not(.zz):not(.zz){font-size:13px;letter-spacing:.08em;padding:9px 6px;text-align:center}
  .pg-bbq-barbecue .ph-hero .ttlb{bottom:146px}
}

/* ==== 2026-10-20（3回目） ==== */

/* お知らせの一覧（お知らせのページのリスト .news-list と、トップの [geihinkan_news]）。日付と文を2列に。リンクは無し */
.news-list:not(.zz):not(.zz){list-style:none;max-width:860px;margin:24px auto 0;padding:0;border-top:1px solid var(--line)}
.news-list li:not(.zz){display:grid;grid-template-columns:10em minmax(0,1fr);gap:16px;margin:0;padding:15px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:1.8;color:var(--deep)}
.news-list li:not(:has(time)){display:block}
.news-list time{font-family:var(--serif);color:var(--sea-t);letter-spacing:.06em;white-space:nowrap}
@media(max-width:900px){.news-list li:not(.zz){grid-template-columns:1fr;gap:2px}.news-list time{font-size:14px}}

/* ==== 2026-10-20（4回目）文の直しに合わせた見た目 ==== */

/* 本文の中の「〜のページへ」のリンク（.go）。トップは sub.css を読まないので、ここにも同じ見た目を置く */
.go{display:inline-block;font-size:13px;letter-spacing:.2em;color:var(--sea-t);border-bottom:1px solid var(--line);padding-bottom:3px}
.go:hover{border-bottom-color:var(--sea)}

/* トップ「宿の基本情報」（施設のご案内の値から）。パソコンは2列、スマホは1列 */
.kf:not(.zz):not(.zz){margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--line)}
.kf>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:1.8}
.kf dt{font-family:var(--serif);font-weight:400;color:var(--sea-t);letter-spacing:.12em}
.kf dd:not(.zz):not(.zz){margin:0;color:var(--deep)}
.kf-links:not(.zz):not(.zz){margin:22px 0 0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 28px}
.kf-links .go:not(.zz){margin:0}
@media(max-width:900px){.kf:not(.zz):not(.zz){grid-template-columns:1fr}.kf>div{grid-template-columns:7.5em minmax(0,1fr)}.kf-links:not(.zz):not(.zz){justify-content:flex-start}}

/* メディア掲載：画像と文の2列（スマホは1列） */
.wp-block-columns.mitem:not(.zz):not(.zz){display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;align-items:start;max-width:960px;margin:64px auto 0}
.inner>.wp-block-group__inner-container>.wp-block-columns.mitem:first-child:not(.zz){margin-top:0}
.mitem .wp-block-column:not(.zz):not(.zz){margin:0}
.mitem .wp-block-image:not(.zz):not(.zz){margin:0}
.mitem .wp-block-image img{width:100%;height:auto;object-fit:contain;box-shadow:0 0 0 1px #edf2f4}
.mitem h3:not(.zz):not(.zz){margin:0;font-size:18px;letter-spacing:.12em;line-height:1.7}
.mitem p:not(.zz):not(.zz){margin-top:12px;font-size:var(--fs-body);line-height:1.9;color:var(--deep)}
@media(max-width:900px){.wp-block-columns.mitem:not(.zz):not(.zz){grid-template-columns:1fr;gap:16px;margin-top:48px}}

/* プライバシーポリシーなどの規約の文 */
.legal h2:not(.zz):not(.zz){margin-top:52px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:19px;letter-spacing:.16em;line-height:1.7}
.legal>h2:first-child:not(.zz){margin-top:0}
.legal h3:not(.zz):not(.zz){margin-top:30px;font-size:16px;letter-spacing:.16em;line-height:1.7}
.legal p:not(.zz):not(.zz){margin-top:12px;font-size:var(--fs-body);line-height:1.9;color:var(--deep)}
.legal ul:not(.zz):not(.zz){margin:10px 0 0;padding-left:1.4em;font-size:var(--fs-body);line-height:1.9;color:var(--deep)}

/* 宿の基本情報：見出し（チェックアウト・インターネット・新千歳空港から）を1行に（2026-10-21） */
.kf:not(.zz):not(.zz){column-gap:40px}
.kf>div:not(.zz){grid-template-columns:8em minmax(0,1fr)}
.kf dt:not(.zz){white-space:nowrap}

/* お問い合わせのフォーム（Contact Form 7。2026-10-21）：サイトの色・書体に合わせる。入力欄は幅いっぱい、送信ボタンはサイトのボタンと同じ */
.gb .wpcf7{max-width:640px;margin:0 auto}
.gb .wpcf7 form>p:not(.zz),.gb .wpcf7 form>fieldset:not(.hidden-fields-container){margin:0 0 24px}
.gb .wpcf7 label:not(.zz),.gb .wpcf7 legend{display:block;padding:0;font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:var(--sea-t);line-height:1.8}
.gb .wpcf7 label>br{display:none}
.gb .wpcf7 label>.wpcf7-form-control-wrap{display:block;margin-top:8px}
.gb .wpcf7 input[type=text],.gb .wpcf7 input[type=email],.gb .wpcf7 input[type=tel],.gb .wpcf7 select,.gb .wpcf7 textarea{display:block;width:100%;box-sizing:border-box;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:#fff;font-family:inherit;font-size:16px;letter-spacing:.04em;color:var(--deep);line-height:1.6}
.gb .wpcf7 textarea{height:220px;resize:vertical}
.gb .wpcf7 input:focus,.gb .wpcf7 select:focus,.gb .wpcf7 textarea:focus{outline:2px solid var(--sea);outline-offset:-1px;border-color:var(--sea)}
.gb .wpcf7 fieldset:not(.hidden-fields-container){border:0;padding:0;min-width:0}
.gb .wpcf7 legend{margin-bottom:8px}
.gb .wpcf7-checkbox,.gb .wpcf7-radio,.gb .wpcf7-acceptance{display:flex;flex-wrap:wrap;gap:10px 28px}
.gb .wpcf7-list-item:not(.zz){margin:0}
.gb .wpcf7-list-item label:not(.zz){display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:16px;letter-spacing:.04em;color:var(--deep)}
.gb .wpcf7 input[type=checkbox],.gb .wpcf7 input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--deep)}
.gb .wpcf7 [hidden]{display:none!important}
.gb .wpcf7 form>p:has(input[type=submit]){margin-top:36px;text-align:center}
.gb .wpcf7 input[type=submit]{display:inline-block;margin:0;padding:15px 54px;border:0;border-radius:0;background:var(--deep);color:#fff;font-family:inherit;font-size:13px;letter-spacing:.24em;cursor:pointer}
.gb .wpcf7 input[type=submit]:hover{background:var(--night)}
.gb .wpcf7-not-valid-tip{margin-top:6px;font-size:14px}
.gb .wpcf7 form .wpcf7-response-output{margin:24px 0 0;padding:12px 16px;font-size:15px;line-height:1.8}

/* ご予約とキャンセル：支払方法のロゴ（2026-10-21）。パソコンはクレジットカード・電子マネーとQRコード決済を横に、交通系電子マネーは文字だけ。スマホは縦に */
.paylogos{margin-top:40px;display:grid;grid-template-columns:404fr 689fr;gap:32px 40px;align-items:start}
.paylogos .pl-text{grid-column:1/-1}
.paylogos .pl-h:not(.zz):not(.zz){margin:0 0 12px;font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:var(--sea-t);line-height:1.8}
.paylogos img{display:block;width:100%;height:auto;object-fit:contain}
.paylogos .pl-text p:not(.pl-h){margin:0;font-size:var(--fs-body);line-height:1.9;color:var(--deep)}
@media(max-width:900px){.paylogos{grid-template-columns:1fr}.paylogos .pl:not(.pl-text) img{max-width:min(100%,520px)}}
.paylogos{max-width:860px;margin-left:auto;margin-right:auto}

/* トップの「ご案内」（2026-10-21）：BBQ と Dining Dome を分けて5枚。パソコン5列、幅1100px以下は3枚＋2枚、スマホは「お部屋」を横いっぱいにして2列 */
.cards.c5{grid-template-columns:repeat(5,1fr);gap:18px}
.cards.c5 .card .tx{padding:20px 18px 0}
.cards.c5 .card h3{letter-spacing:.16em}
.cards.c5 .card .more{padding:14px 18px 16px}
@media(min-width:901px) and (max-width:1100px){.cards.c5{grid-template-columns:repeat(6,1fr)}.cards.c5>.card{grid-column:span 2}.cards.c5>.card:nth-child(n+4){grid-column:span 3}}
@media(max-width:900px){.cards.c5{grid-template-columns:1fr 1fr;gap:14px}.cards.c5>.card:first-child{grid-column:1/-1}.cards.c5>.card:first-child .ph{aspect-ratio:16/9}}
.cards.c5>.card{display:flex;flex-direction:column}
.cards.c5>.card .more{margin-top:auto}