/* マルシンスパ 共通CSS（ヘッダー・フッター・PC/SP切替）— export.py で生成 */

.v-sp{display:none}

/* TOPヒーロー：動画→写真5枚を15秒ごとにフェード切替 */
.hero-slides{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background:#262626 center/cover no-repeat;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-slide.is-active{opacity:1}
.hero-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.5)}

/* お知らせ：クリックで本文を開閉 */
.news-body{padding:8px 0 28px;border-bottom:1px solid #333333;color:#CFCFCF;line-height:2;font-size:14px}
.news-body img{display:block;max-width:100%;height:auto;margin:0 0 16px}
.news-body p{margin:0 0 1em}
a[aria-expanded] > :last-child::after{content:"＋";margin-left:10px;color:#7AA4D1}
a[aria-expanded="true"] > :last-child::after{content:"－"}

/* ページ上部へ戻るボタン（PC・SP共通） */
.to-top{position:fixed;right:24px;bottom:102px;z-index:30;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#1B1B1B;border:1px solid #2267B2;border-radius:0;cursor:pointer;padding:0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s,background-color .15s}
.to-top.is-show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover,.to-top:focus-visible{background:#2267B2}
.to-top img{display:block;width:30px;height:16px}
@media (max-width: 767px){.to-top{right:10px;bottom:84px;width:44px;height:44px}}

/* 緊急のお知らせバー：microCMS emergency に公開記事がある時だけ表示 */
[role="alert"]:not(.is-visible){display:none!important}

@media (max-width: 767px){.v-pc{display:none}.v-sp{display:block}.v-sp > div{width:auto!important;max-width:100%}}

/* お問い合わせフォーム */
.cf{max-width:760px}
.cf-form{display:flex;flex-direction:column;gap:22px}
.cf-form label{display:block;font-size:13px;font-weight:700}
.cf-form label>input,.cf-form label>select,.cf-form label>textarea{display:block;margin-top:8px}
.cf-form label em,.cf-form label i{font-style:normal;font-weight:400;font-size:12px;margin-left:8px;color:#C67CAD}
.cf-form label i{color:#A0A0A0}
.cf-form input,.cf-form select,.cf-form textarea{width:100%;box-sizing:border-box;min-height:50px;padding:0 14px;background:#000;border:1px solid #777576;border-radius:0;color:#FFF;font:inherit;font-weight:400}
.cf-form textarea{padding:12px 14px;resize:vertical;line-height:1.8}
.cf-form input:focus,.cf-form select:focus,.cf-form textarea:focus{outline:none;border-color:#2267B2}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-note{margin:0;font-size:12px;color:#A0A0A0}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 40px;background:transparent;border:1px solid #2267B2;border-radius:0;color:#FFF;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.cf-btn.is-main{background:#2267B2}
.cf-btn:hover{background:#2267B2;color:#FFF}
.cf-error{margin:0 0 20px;padding:14px 16px;border:1px solid #A02576;color:#F2C6DE;font-size:13px;line-height:1.8}
.cf-lead{margin:0 0 20px;color:#CFCFCF}
.cf-confirm{margin:0;border-top:1px solid #333}
.cf-confirm>div{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid #333}
.cf-confirm dt{color:#A0A0A0;font-size:13px}.cf-confirm dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.cf-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cf-done h3{margin:0 0 12px;font-size:20px}.cf-done p{margin:0 0 24px;color:#CFCFCF}
@media (max-width:767px){.cf-row{grid-template-columns:1fr}.cf-confirm>div{grid-template-columns:1fr;gap:4px}}
/* 予約フォーム埋め込み：横幅いっぱいに */
.reserve-embed-wrap{width:100%;align-self:stretch}


/* ===== タブレット幅（768〜1259px）：PCレイアウトを崩さず収める ===== */
.v-pc{overflow-x:clip}
@media (min-width:768px) and (max-width:1259px){
  /* ヘッダー：メニューを詰め、SNSアイコンは隠して電話だけ残す */
  header[data-site-header] > div{gap:12px!important;padding-left:16px!important;padding-right:16px!important}
  header[data-site-header] nav[aria-label="メインメニュー"] > a{padding:10px 6px!important;font-size:13px!important}
  header[data-site-header] > div > div[style*="width: 179px"]{width:auto!important}
  header[data-site-header] > div > div[style*="width: 179px"] > a[aria-label]:not([href^="tel"]){display:none!important}
  /* 下層ページのサブメニュー：固定幅1240px → 画面幅に合わせて折り返し */
  .v-pc nav[style*="width: 1240px"]{width:auto!important;max-width:100%;padding:0 16px;box-sizing:border-box;row-gap:4px}
  .v-pc nav[style*="width: 1240px"] > a{width:auto!important;margin-right:16px!important;font-size:15px!important}
  /* フッター：7列 → 4列、ロゴ行の高さ固定を解除 */
  footer nav[aria-label="サイトマップ"]{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:32px!important}
  footer div[style*="height: 201px"]{height:auto!important;padding-bottom:24px}
  footer div[style*="height: 201px"] span[style*="width: 388px"]{width:auto!important;max-width:100%}
  footer div[style*="height: 201px"] img{max-width:100%;object-fit:contain!important}
  /* TOPヒーローの状況板：幅を30%縮小・背景をより透明に */
  .v-pc #top aside[aria-label="本日の状況"]{max-width:294px!important;flex-basis:252px!important}
  .v-pc #top aside[aria-label="本日の状況"] > [style*="rgba(20,20,20,0.43)"]{background:rgba(20,20,20,0.43)!important}
  .v-pc #top aside[aria-label="本日の状況"] [style*="repeat(2, minmax(0, 1fr))"]{grid-template-columns:1fr!important;gap:2px!important}
  .v-pc #top aside[aria-label="本日の状況"] b{white-space:nowrap}
  /* TOPのショップバナー・特別な体験：タブレットでも2列で横並び */
  .v-pc [style*="repeat(auto-fit, minmax(420px, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* 4列・5列のグリッドは2〜3列に */
  .v-pc main [style*="repeat(5, minmax(0, 1fr))"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:768px) and (max-width:1023px){
  header[data-site-header] img[alt="天空のアジト マルシンスパ"]{height:30px!important}
  header[data-site-header] nav[aria-label="メインメニュー"] > a{padding:10px 4px!important;font-size:12px!important}
  .v-pc main [style*="repeat(4, minmax(0, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v-pc main [style*="repeat(5, minmax(0, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  footer nav[aria-label="サイトマップ"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* ===== ヘッダー：最初は透明で写真に重ね、スクロールしたら半透明の黒に ===== */
header[data-site-header]{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0)) border-box no-repeat!important;border-bottom-color:transparent!important;transition:background-color .3s,border-color .3s;margin-bottom:-71px}
.v-sp header[data-site-header]{margin-bottom:-65px}
header[data-site-header].is-stuck{background:rgba(0,0,0,.82)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom-color:#333333!important}
/* 見出し帯のパンくずはヘッダーの下に */
.v-pc section[style*="height: 200px"] nav[aria-label="パンくず"]{top:76px!important}
.v-sp section[style*="height: 200px"] nav[aria-label="パンくず"]{top:70px!important}
/* 見出し帯：ヘッダーが重なるぶん、中身を下げて残りの高さで上下中央に */
.v-pc section[style*="height: 200px"] > div[style*="justify-content: center"]{padding-top:70px!important}
.v-sp section[style*="height: 200px"] > div[style*="justify-content: center"]{padding-top:65px!important}


/* ===== PCフッター：端末幅に合わせて中央寄せで折り返す（キャンバスの固定幅を解除） ===== */
.v-pc footer > div{width:100%;box-sizing:border-box}
.v-pc footer > div > div[style*="height: 132px"]{height:auto!important;width:100%;flex-wrap:nowrap!important;align-items:center!important;padding-bottom:16px}
@media (max-width:1259px){
  .v-pc footer > div > div[style*="height: 132px"]{flex-wrap:wrap!important;justify-content:center!important;column-gap:32px!important;row-gap:8px!important}
  .v-pc footer > div > div[style*="height: 132px"] > span{text-align:center!important;padding:0!important}
}
.v-pc footer > div > div[style*="height: 132px"] img[style*="width: 351px"]{max-width:calc(100vw - 80px)}
.v-pc footer a[style*="width: 120px"]{width:auto!important;min-width:152px;white-space:nowrap;box-sizing:border-box}
.v-pc footer nav[aria-label="サイトマップ"]{width:100%!important;max-width:1179px;box-sizing:border-box;column-gap:16px!important}
.v-pc footer nav[aria-label="サイトマップ"] a{white-space:nowrap}
.v-pc footer > div > div[style*="height: 115px"]{width:100%;height:auto!important;padding:16px 0}
.v-pc footer .pmq:not(.is-scroll) .pmq-track{margin:0 auto}
/* フローティング：上に「いまの状況」、下に「↑」を中央揃えで縦に */
@media (min-width:768px){
  /* 余白ルール：画面の右端・下端から24px／バナー内の左右16px・上下12px／バナーと「↑」の間12px */
  .v-pc .pc-float{right:24px!important;width:max-content!important;min-width:133px;max-width:280px;bottom:84px!important;box-sizing:border-box}
  .v-pc .pc-float > a{padding:12px 16px!important;min-height:0!important;box-sizing:border-box}
  .v-pc .pc-float > a > *{white-space:nowrap}
  .v-pc .pc-float b{font-size:15px!important;white-space:nowrap}
  body:has(.v-pc .pc-float) .to-top{right:84.5px!important;bottom:24px!important}
}
/* 見出し下線（キャンバスで width:1240px 指定）を本文幅に合わせる */
.v-pc main h2[style*="width: 1240px"]{width:min(1192px,calc(100vw - 48px))!important;box-sizing:border-box}
.v-pc main p[style*="width: 1240px"]{width:auto!important;max-width:100%;height:auto!important}
/* YouTube動画：横幅は最大1000px・中央寄せ（CMS本文に貼った動画も） */
div[style*="aspect-ratio: 16 / 9"]:has(> iframe[src*="youtu"]){max-width:1000px;margin-left:auto!important;margin-right:auto!important;align-self:center;width:100%}
.news-body iframe[src*="youtu"]{display:block;width:100%;max-width:1000px;height:auto;aspect-ratio:16/9;margin:0 auto 16px;border:0}
/* 見出しブロックの固定高さ（キャンバスで指定）：中身が増えても下と重ならないように */
main section > div[style*="height: 154px"]{height:auto!important;min-height:154px;box-sizing:border-box}
@media (max-width:767px){main section > div[style*="height: 154px"]{min-height:0}}
/* お知らせ本文の画像：横幅は最大800px・中央寄せ（画面いっぱいに広がらないように） */
.news-body img{display:block;width:auto!important;max-width:min(800px,100%)!important;height:auto!important;margin:0 auto 16px!important}
.news-body figure{margin:0 auto 16px;max-width:800px}


/* ===== スマホ調整（2026-10-20） ===== */
/* お知らせ一覧：日付の下に「タグ＋タイトル」を1行で。長いタイトルは … で省略 */
.v-sp main a[style*="grid-template-columns: 120px 120px 1fr"]{grid-template-columns:auto minmax(0,1fr)!important;column-gap:10px!important;row-gap:6px!important;padding:14px 0!important;align-items:center!important}
.v-sp main a[style*="grid-template-columns: 120px 120px 1fr"] > :first-child{grid-column:1/-1;font-size:12px!important}
.v-sp main a[style*="grid-template-columns: 120px 120px 1fr"] > img{width:64px!important;height:24px!important}
.v-sp main a[style*="grid-template-columns: 120px 120px 1fr"] > :last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* SNSバナー：細長い4本に */
.v-sp #sp-sns div[style*="repeat(4"]{grid-template-columns:1fr!important;gap:8px!important}
.v-sp #sp-sns a{padding:10px 14px!important;gap:12px!important}
.v-sp #sp-sns a > img,.v-sp #sp-sns a > span[aria-hidden]:first-child{width:32px!important;height:32px!important;font-size:10px!important}
.v-sp #sp-sns a > span:not([aria-hidden]) > span{display:none}
/* 全体の縦の余白を詰める */
.v-sp main{gap:56px!important;padding-top:40px!important;padding-bottom:80px!important}
.v-sp main section{gap:20px!important}
.v-sp div[aria-hidden="true"][style*="height: 72px"]{height:44px!important}
/* ボタン：横幅100%（並んでいるものは等分）— js/site.js の btnLayout と対 */
.v-sp .btn-full{width:100%!important;max-width:none!important;box-sizing:border-box!important;justify-content:center!important;text-align:center!important;align-self:stretch!important}
.v-sp .btn-row{display:flex!important;flex-wrap:nowrap!important;width:100%!important;gap:8px!important;align-self:stretch!important}
.v-sp .btn-row > .btn-full{flex:1 1 0!important;min-width:0!important;width:auto!important;padding-left:8px!important;padding-right:8px!important}
/* 表：画面幅に収める */
.v-sp main table{width:100%!important;min-width:0!important;table-layout:auto}
.v-sp main table th,.v-sp main table td{padding:12px 6px!important;width:auto!important;height:auto!important}
.v-sp main table th:first-child{white-space:normal!important}
.v-sp main img{max-width:100%!important}
.v-sp nav[aria-label="いまの状況"] b{font-size:12px!important;white-space:nowrap;letter-spacing:0!important}
.v-sp nav[aria-label="いまの状況"] > a{padding:8px 6px!important;box-sizing:border-box;min-width:0}


body{margin:0;background:#000000}
h1,h2,h3,b{font-feature-settings:"palt";letter-spacing:.04em}
body{line-break:strict;word-break:normal;overflow-wrap:anywhere}
a{color:#7FB2EA}a:hover{color:#A9CCF2}
details summary{list-style:none;cursor:pointer}details summary::-webkit-details-marker{display:none}
details[open] .fq-mark{transform:rotate(45deg)}
@media (max-width: 760px){.pc-float{display:none !important}}


/* ===== 共通：ボタン・リンク（本番CSSにそのまま移植可） ===== */
a[style*="border-radius: 99px"],button,button[style*="border-radius"],span[style*="min-height: 40px"][style*="border-radius: 99px"]{border-radius:0!important}
a[style*="border: 1px solid #777576"]{border-color:#2267B2!important;transition:background-color .15s,color .15s}
a[style*="border: 1px solid #777576"]:hover,a[style*="border: 1px solid #777576"]:focus-visible{background:#2267B2!important;color:#FFFFFF!important}
nav[aria-label="いまの状況"]{border-radius:0!important}
a.tl,span.tl,nav[aria-label="パンくず"] a,nav[aria-label="サイトマップ"] a,a[style*="border-top: 1px solid #777576"]{font-family:'DotGothic16',monospace!important;letter-spacing:.02em}
/* ===== /共通 ===== */
/* ===== 協力社バナー自動スクロール（はみ出した時だけ） ===== */
.pmq{overflow:hidden;width:100%;min-width:0;contain:inline-size}
:has(> .pmq){align-self:stretch;min-width:0;max-width:100%}
.pmq-track{display:flex;gap:var(--g,12px);width:max-content}
.pmq-track a{flex:0 0 var(--w,180px);width:var(--w,180px)}
.pmq-dup{display:contents}
.pmq:not(.is-scroll) .pmq-dup{display:none}
.pmq.is-scroll .pmq-track{padding-right:var(--g,12px);animation:pmq 30s linear infinite}
.pmq.is-scroll:hover .pmq-track{animation-play-state:paused}
@keyframes pmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pmq{overflow-x:auto}.pmq.is-scroll .pmq-track{animation:none;padding-right:0}.pmq.is-scroll .pmq-dup{display:none}}
/* ===== /協力社バナー ===== */

/* ===== ヘッダー：マウスオン／現在ページ＝青文字＋下線1px ===== */
header[data-site-header] nav a{border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
header[data-site-header] nav a:hover,header[data-site-header] nav a:focus-visible,
header[data-cur="Facility"] a[href="about_facility.html"],
header[data-cur="Price"] a[href="price.html"],
header[data-cur="Private"] a[href="private.html"],
header[data-cur="Whisking"] a[href="whisking.html"],
header[data-cur="Food"] a[href="about_food.html"],
header[data-cur="Access"] a[href="access.html"],
header[data-cur="FAQ"] a[href="faq.html"]{color:#2267B2!important;border-bottom-color:#2267B2}

body{margin:0;background:#000000}
h1,h2,h3,b{font-feature-settings:"palt";letter-spacing:.04em}
body{line-break:strict;word-break:normal;overflow-wrap:anywhere}
a{color:#7FB2EA}a:hover{color:#A9CCF2}
details summary{list-style:none;cursor:pointer}details summary::-webkit-details-marker{display:none}
details[open] .fq-mark{transform:rotate(45deg)}
@media (max-width: 760px){.pc-float{display:none !important}}


/* ===== 共通：ボタン・リンク（本番CSSにそのまま移植可） ===== */
a[style*="border-radius: 99px"],button,button[style*="border-radius"],span[style*="min-height: 40px"][style*="border-radius: 99px"]{border-radius:0!important}
a[style*="border: 1px solid #777576"]{border-color:#2267B2!important;transition:background-color .15s,color .15s}
a[style*="border: 1px solid #777576"]:hover,a[style*="border: 1px solid #777576"]:focus-visible{background:#2267B2!important;color:#FFFFFF!important}
nav[aria-label="いまの状況"]{border-radius:0!important}
a.tl,span.tl,nav[aria-label="パンくず"] a,nav[aria-label="サイトマップ"] a,a[style*="border-top: 1px solid #777576"]{font-family:'DotGothic16',monospace!important;letter-spacing:.02em}
/* ===== /共通 ===== */
/* ===== 協力社バナー自動スクロール（はみ出した時だけ） ===== */
.pmq{overflow:hidden;width:100%;min-width:0;contain:inline-size}
:has(> .pmq){align-self:stretch;min-width:0;max-width:100%}
.pmq-track{display:flex;gap:var(--g,12px);width:max-content}
.pmq-track a{flex:0 0 var(--w,180px);width:var(--w,180px)}
.pmq-dup{display:contents}
.pmq:not(.is-scroll) .pmq-dup{display:none}
.pmq.is-scroll .pmq-track{padding-right:var(--g,12px);animation:pmq 30s linear infinite}
.pmq.is-scroll:hover .pmq-track{animation-play-state:paused}
@keyframes pmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pmq{overflow-x:auto}.pmq.is-scroll .pmq-track{animation:none;padding-right:0}.pmq.is-scroll .pmq-dup{display:none}}
/* ===== /協力社バナー ===== */

body{margin:0;background:#000000}
h1,h2,h3,b{font-feature-settings:"palt";letter-spacing:.04em}
body{line-break:strict;word-break:normal;overflow-wrap:anywhere}
a{color:#7FB2EA}
details summary::-webkit-details-marker{display:none}


/* ===== 共通：ボタン・リンク（本番CSSにそのまま移植可） ===== */
a[style*="border-radius: 99px"],button,button[style*="border-radius"],span[style*="min-height: 40px"][style*="border-radius: 99px"]{border-radius:0!important}
a[style*="border: 1px solid #777576"]{border-color:#2267B2!important;transition:background-color .15s,color .15s}
a[style*="border: 1px solid #777576"]:hover,a[style*="border: 1px solid #777576"]:focus-visible{background:#2267B2!important;color:#FFFFFF!important}
nav[aria-label="いまの状況"]{border-radius:0!important}
a.tl,span.tl,nav[aria-label="パンくず"] a,nav[aria-label="サイトマップ"] a,a[style*="border-top: 1px solid #777576"]{font-family:'DotGothic16',monospace!important;letter-spacing:.02em}
/* ===== /共通 ===== */
/* ===== 協力社バナー自動スクロール（はみ出した時だけ） ===== */
.pmq{overflow:hidden;width:100%;min-width:0;contain:inline-size}
:has(> .pmq){align-self:stretch;min-width:0;max-width:100%}
.pmq-track{display:flex;gap:var(--g,12px);width:max-content}
.pmq-track a{flex:0 0 var(--w,180px);width:var(--w,180px)}
.pmq-dup{display:contents}
.pmq:not(.is-scroll) .pmq-dup{display:none}
.pmq.is-scroll .pmq-track{padding-right:var(--g,12px);animation:pmq 30s linear infinite}
.pmq.is-scroll:hover .pmq-track{animation-play-state:paused}
@keyframes pmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pmq{overflow-x:auto}.pmq.is-scroll .pmq-track{animation:none;padding-right:0}.pmq.is-scroll .pmq-dup{display:none}}
/* ===== /協力社バナー ===== */

/* スマホ：料金表を横スクロールなしで収める */
.m table[style*="min-width: 480px"]{min-width:0!important;font-size:14px!important}
.m table[style*="min-width: 480px"] th,.m table[style*="min-width: 480px"] td{padding:12px 8px!important;white-space:nowrap}