/* =====================================================================
   milkworkfresh.jp  トップページ v2 スタイル（2026-09 新構造）
   命名: BEM風（.block__elem / .block--mod）。色・文字・余白は :root の変数が元栓。
   触ってよい場所: :root の値、各「===== 節名 =====」ブロック内。
   ===================================================================== */

:root {
  /* 色: 3色＋グレー。brandは飾り専用（線・薄い地）。文字とボタンは accent を使う */
  --c-bg: #F7FAF8;
  --c-surface: #FFFFFF;
  --c-pale: #E6F3EE;
  --c-ink: #1F2A26;
  --c-sub: #5A6461;
  --c-line: #DCE8E2;
  --c-brand: #22B184;
  --c-accent: #137758;
  --c-accent-dark: #0F664B;

  /* 文字（360→1240px 線形補間） */
  --fs-hero: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;   /* 14px 補足 */
  --fs-xs: 0.8125rem;     /* 13px ラベルの下限 */

  /* 余白 */
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem; --sp-8: 4rem;
  --sec-pad: clamp(3.25rem, 2.25rem + 4vw, 6.5rem);
  --container: 1120px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);

  /* 動き */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --dur-ui: .25s;
  --dur-reveal: .7s;

  /* 形（3種のみ） */
  --r-card: 14px;
  --r-pill: 999px;
  --shadow-card: 0 8px 24px rgba(31, 42, 38, .07);

  --header-h: 64px;
  --bar-h: 58px;
}

/* ===== ベース ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { line-height: 1.4; margin: 0; text-wrap: balance; letter-spacing: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dark); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--c-ink); color: #fff; padding: .5rem 1rem; border-radius: var(--r-pill); }
.skip:focus { left: 8px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--sec-pad) 0; }
.section--pale { background: var(--c-pale); }
.section--white { background: var(--c-surface); }

/* 節の見出し: 日本語見出し＋一行の補足 */
.sec-head { margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 700; }
.sec-head h2::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--c-brand); border-radius: 2px; margin-bottom: .9rem; }
.sec-head p { margin-top: .75rem; color: var(--c-sub); max-width: 40em; }
.sec-head--center { text-align: center; }
.sec-head--center h2::before { margin-left: auto; margin-right: auto; }
.sec-head--center p { margin-left: auto; margin-right: auto; }

/* ボタン: 塗り／枠／LINE の3種。角丸はpillで統一 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.6rem;
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-body);
  background: var(--c-accent); color: #fff; border: 2px solid var(--c-accent);
  transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.btn:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--c-accent); }
.btn--ghost:hover { background: var(--c-pale); color: var(--c-accent-dark); }
.btn--white { background: #fff; color: var(--c-accent); border-color: #fff; }
.btn--white:hover { background: var(--c-pale); border-color: var(--c-pale); color: var(--c-accent-dark); }
.btn svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.more::after { content: "→"; transition: transform var(--dur-ui) var(--ease-out); }
.more:hover::after { transform: translateX(4px); }

/* 出現アニメ（判定はJS・見た目はCSS） */
[data-reveal] { opacity: 0; translate: 0 16px; transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { translate: 0 0; transition: opacity .3s ease; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ===== ヘッダー ===== */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.header__in { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header__logo img { height: 34px; width: auto; }
.gnav { display: flex; align-items: center; gap: 1.5rem; }
.gnav a { color: var(--c-ink); font-weight: 700; font-size: var(--fs-small); white-space: nowrap; padding: .5rem 0; }
.gnav a:hover { color: var(--c-accent); }
.gnav .btn { min-height: 40px; padding: .4rem 1.1rem; font-size: var(--fs-small); }
.menu-btn { display: none; width: 48px; height: 48px; border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; margin-right: -8px; }
.menu-btn span { position: absolute; left: 12px; width: 24px; height: 2px; background: var(--c-ink); transition: transform var(--dur-ui) var(--ease-out), top var(--dur-ui) var(--ease-out), opacity var(--dur-ui); }
.menu-btn span:nth-child(1) { top: 16px; } .menu-btn span:nth-child(2) { top: 23px; } .menu-btn span:nth-child(3) { top: 30px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

/* スマホメニュー: 不透明の全画面パネル */
.mnav { display: none; position: fixed; inset: var(--header-h) 0 0; z-index: 99; background: var(--c-surface); overflow-y: auto; padding: 1.5rem var(--pad-x) 2rem; }
.mnav[aria-hidden="false"] { display: block; }
.mnav ul { display: grid; gap: .25rem; }
.mnav a { display: block; padding: .85rem .25rem; font-size: 1.125rem; font-weight: 700; color: var(--c-ink); border-bottom: 1px solid var(--c-line); }
.mnav__cta { display: grid; gap: .75rem; margin-top: 1.5rem; }
.mnav__cta a.btn { width: 100%; display: inline-flex; justify-content: center; border-bottom: 2px solid var(--c-accent); font-size: var(--fs-body); padding: .7rem 1.6rem; }
.mnav__cta a.btn--ghost { color: var(--c-accent); }
.mnav__sub { margin-top: 1.5rem; color: var(--c-sub); font-size: var(--fs-small); }
.mnav__sub a { display: inline-block; padding: .3rem .2rem; border: 0; font-size: inherit; font-weight: 700; color: var(--c-accent); }
body.is-menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .gnav { display: none; }
  .menu-btn { display: block; }
}

/* ===== ヒーロー ===== */
.hero { position: relative; margin-top: var(--header-h); min-height: min(78svh, 720px); display: grid; align-items: end; color: #fff; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 40, 32, .05) 30%, rgba(20, 40, 32, .72) 100%); }
.hero__in { width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(6rem, 12vw, 9rem) var(--pad-x) clamp(2rem, 4vw, 3.5rem); }
.hero__eyebrow { font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; margin-bottom: .75rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hero__title { font-size: var(--fs-hero); font-weight: 700; line-height: 1.35; letter-spacing: .02em; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hero__lead { margin-top: 1rem; max-width: 34em; font-size: var(--fs-body); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.hero__cta { margin-top: 1.5rem; }
@media (max-width: 600px) {
  .hero { min-height: min(74svh, 620px); }
  .hero__in { padding-top: 5rem; }
}

/* ===== 基本情報バンド（営業時間・料金・アクセス） ===== */
.facts { background: var(--c-pale); border-bottom: 1px solid var(--c-line); }
.facts__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; }
.facts__list > div { padding: 1.1rem 1rem; border-left: 1px solid var(--c-line); }
.facts__list > div:first-child { border-left: 0; padding-left: 0; }
.facts__list dt { font-size: var(--fs-xs); color: var(--c-sub); font-weight: 700; letter-spacing: .06em; }
.facts__list dd { margin: .15rem 0 0; font-weight: 700; }
.facts__list dd small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--c-sub); }
@media (max-width: 700px) {
  .facts__list { grid-template-columns: 1fr; }
  .facts__list > div { border-left: 0; border-top: 1px solid var(--c-line); padding: .8rem 0; }
  .facts__list > div:first-child { border-top: 0; }
}

/* ===== 利用シーン ===== */
.scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.scene { text-align: center; }
.scene img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; box-shadow: var(--shadow-card); }
.scene h3 { font-size: var(--fs-h3); }
.scene p { color: var(--c-sub); font-size: var(--fs-small); margin-top: .35rem; }
@media (max-width: 760px) {
  .scenes { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .scene img { width: 92px; height: 92px; }
}

/* ===== 場所（3スペース） ===== */
.spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.space { background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.space img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.space__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.space h3 { font-size: var(--fs-h3); }
.space p { color: var(--c-sub); font-size: var(--fs-small); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent); background: var(--c-pale); border-radius: var(--r-pill); padding: .2rem .7rem; }
.about__lead { max-width: 40em; margin-bottom: 2rem; }
.about__lead strong { color: var(--c-accent); }
.about__foot { margin-top: 1.75rem; }
@media (max-width: 900px) { .spaces { grid-template-columns: 1fr; } .space img { aspect-ratio: 16 / 9; } }

/* ===== 設備 ===== */
.facility { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.facility li { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 1rem .5rem .9rem; text-align: center; font-size: var(--fs-small); font-weight: 700; line-height: 1.45; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.facility img { width: 44px; height: 44px; border-radius: 50%; }
.facility small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); }
@media (max-width: 900px) { .facility { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .facility { grid-template-columns: repeat(3, 1fr); gap: .5rem; } .facility li { padding: .8rem .35rem; } }

/* ===== 料金 ===== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.plan { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .75rem; }
.plan--hi { outline: 2px solid var(--c-brand); }
.plan__name { font-size: var(--fs-h3); }
.plan__for { color: var(--c-sub); font-size: var(--fs-small); }
.plan__price { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: var(--fs-small); font-weight: 400; color: var(--c-sub); margin-left: .25rem; }
.plan dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; font-size: var(--fs-small); border-top: 1px solid var(--c-line); padding-top: .75rem; }
.plan dt { color: var(--c-sub); } .plan dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.plan__note { font-size: var(--fs-xs); color: var(--c-sub); margin-top: auto; }
.howto { margin-top: 2.5rem; background: var(--c-surface); border-radius: var(--r-card); padding: clamp(1.25rem, 3vw, 2rem); }
.howto__head h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.howto__head p { font-size: var(--fs-small); color: var(--c-sub); max-width: 44em; }
.steps__label { margin: 1.5rem 0 .75rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.steps__label small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); }
.steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: .75rem; counter-reset: st; }
.steps--out { grid-template-columns: repeat(8, 1fr); }
.steps li { counter-increment: st; display: flex; flex-direction: column; gap: .5rem; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-ink); }
.steps li::before { content: "STEP " counter(st); font-weight: 700; color: var(--c-accent); font-size: var(--fs-xs); letter-spacing: .04em; }
.steps img { width: 100%; aspect-ratio: 282 / 573; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; }
.steps a { text-decoration: underline; text-underline-offset: .15em; }
.steps__note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--c-sub); }
.howto .btn-row { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: .75rem; padding: 0 0 .75rem; margin: 0 calc(-1 * var(--pad-x)); padding-left: var(--pad-x); padding-right: var(--pad-x); scrollbar-width: thin; }
  .steps li { flex: 0 0 150px; scroll-snap-align: start; }
  .steps__label::after { content: "→ 横にスワイプ"; font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); margin-left: auto; }
}

/* ===== 動画 ===== */
.movies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.movie { background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.movie__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.movie__frame img, .movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.movie__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, .18); cursor: pointer; display: grid; place-items: center; padding: 0; }
.movie__play::before { content: ""; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.movie__play::after { content: ""; position: absolute; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--c-accent); margin-left: 4px; }
.movie__play:hover::before { background: #fff; }
.movie__body { padding: 1rem 1.1rem 1.15rem; }
.movie h3 { font-size: 1rem; line-height: 1.5; }
.movie p { font-size: var(--fs-xs); color: var(--c-sub); margin-top: .3rem; }
@media (max-width: 900px) {
  .movies { grid-template-columns: 1fr; gap: .75rem; }
  .movie { display: flex; align-items: stretch; }
  .movie__frame { width: 42%; max-width: 200px; aspect-ratio: auto; flex: none; }
  .movie__play::before { width: 44px; height: 44px; }
  .movie__play::after { border-width: 8px 0 8px 14px; }
  .movie__body { padding: .8rem .9rem; display: flex; flex-direction: column; justify-content: center; }
  .movie h3 { font-size: var(--fs-small); }
}

/* ===== イベント ===== */
.event-box { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--c-accent); background: var(--c-pale); border-radius: var(--r-pill); padding: .25rem .8rem; }
.event-box h3 { font-size: var(--fs-h3); margin-top: .75rem; }
.event-box p { color: var(--c-sub); margin-top: .6rem; font-size: var(--fs-small); }
.event-box .btn { margin-top: 1.1rem; }
.past { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0; }
.past figure { margin: 0; }
.past img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; width: 100%; }
.past figcaption { font-size: var(--fs-xs); color: var(--c-sub); margin-top: .35rem; }
.past__label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-sub); margin-bottom: .5rem; }
@media (max-width: 800px) { .event-box { grid-template-columns: 1fr; } }

/* ===== ブログ（note） ===== */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.posts.few { grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); justify-content: center; }
.post { background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); color: var(--c-ink); display: flex; flex-direction: column; }
.post img { aspect-ratio: 1.91 / 1; width: 100%; object-fit: cover; }
.post__body { padding: 1rem 1.1rem 1.2rem; }
.post h3 { font-size: 1rem; line-height: 1.55; }
.post time { display: block; font-size: var(--fs-xs); color: var(--c-sub); margin-top: .4rem; }
.post:hover h3 { color: var(--c-accent); }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }

/* ===== 相談 ===== */
.consults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.consult { background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); color: var(--c-ink); display: flex; flex-direction: column; }
.consult img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.consult__body { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.consult h3 { font-size: 1.0625rem; line-height: 1.5; }
.consult p { font-size: var(--fs-small); color: var(--c-sub); }
.consult__to { font-size: var(--fs-xs); color: var(--c-accent); font-weight: 700; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--c-line); }
@media (max-width: 900px) { .consults { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .consults { grid-template-columns: 1fr; gap: .75rem; }
  .consult { flex-direction: row; align-items: stretch; }
  .consult img { width: 34%; max-width: 140px; aspect-ratio: auto; }
  .consult__body { padding: .9rem 1rem; gap: .3rem; }
  .consult h3 { font-size: 1rem; }
  .consult p { display: none; }
}
.flow { margin-top: 2rem; background: var(--c-surface); border-radius: var(--r-card); padding: 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; }
.flow ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: f; }
.flow li { counter-increment: f; display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small); }
.flow li::before { content: counter(f); width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; font-size: var(--fs-xs); }
.flow b { display: block; }
.flow span { color: var(--c-sub); font-size: var(--fs-xs); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow ol { grid-template-columns: 1fr; gap: .75rem; } }

.diary { margin-top: 3rem; }
.diary h3 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.diary__list { display: grid; gap: .75rem; }
.diary__item { background: var(--c-surface); border-radius: var(--r-card); padding: 1.1rem 1.25rem; border-left: 4px solid var(--c-brand); }
.diary__item .badge { margin-bottom: .4rem; }
.diary__item h4, .diary__item h3 { font-size: 1rem; line-height: 1.55; }
.diary__item p { font-size: var(--fs-small); color: var(--c-sub); margin-top: .4rem; }
.diary__item p.to { color: var(--c-accent); font-weight: 700; margin-top: .5rem; }
.diary__more { margin-top: 1rem; }

/* ===== お知らせ ===== */
.news { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.news li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--c-line); }
.news time { font-size: var(--fs-small); color: var(--c-sub); font-variant-numeric: tabular-nums; }
.news p { font-size: var(--fs-body); }
.news .badge { margin-left: .5rem; }
@media (max-width: 560px) { .news li { grid-template-columns: 1fr; gap: .25rem; } }

/* ===== アクセス ===== */
.access { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.access__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--c-pale); }
.access__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.access__info dl { margin: 0; display: grid; grid-template-columns: 6rem 1fr; gap: .6rem 1rem; }
.access__info dt { color: var(--c-sub); font-size: var(--fs-small); font-weight: 700; padding-top: .1rem; }
.access__info dd { margin: 0; }
.access__info dd a { display: inline-block; padding: .2rem 0; font-weight: 700; }
.access__info dd small { display: block; color: var(--c-sub); font-size: var(--fs-small); }
.access__info .btn-row { margin-top: 1.25rem; }
.access__sub { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.access__sub figure { margin: 0; background: var(--c-surface); border-radius: var(--r-card); padding: 1.1rem; }
.access__sub figcaption { font-size: var(--fs-small); margin-bottom: .6rem; font-weight: 700; }
.access__sub figcaption small { display: block; font-weight: 400; color: var(--c-sub); font-size: var(--fs-xs); }
.access__sub img { border-radius: 8px; width: 100%; }
@media (max-width: 800px) { .access { grid-template-columns: 1fr; } .access__sub { grid-template-columns: 1fr; } }

/* ===== 問い合わせCTA ===== */
.cta { background: linear-gradient(160deg, var(--c-accent), var(--c-accent-dark)); color: #fff; text-align: center; }
.cta h2 { font-size: var(--fs-h2); }
.cta p { margin: .75rem auto 0; max-width: 34em; }
.cta .btn-row { justify-content: center; margin-top: 1.75rem; }
.cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .8); }
.cta .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cta__tel { margin-top: 1.25rem; font-size: var(--fs-small); }
.cta__tel a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; display: inline-block; padding: .3rem .2rem; }

/* ===== フッター ===== */
.footer { background: var(--c-surface); border-top: 1px solid var(--c-line); padding: 3rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
.footer__brand img { height: 40px; width: auto; }
.footer__brand p { font-size: var(--fs-small); color: var(--c-sub); margin-top: .9rem; }
.footer h3 { font-size: var(--fs-xs); color: var(--c-sub); letter-spacing: .06em; margin-bottom: .6rem; }
.footer ul { display: grid; gap: .35rem; }
.footer li a { color: var(--c-ink); font-size: var(--fs-small); display: inline-block; padding: .3rem 0; }
.footer li a:hover { color: var(--c-accent); }
.footer__sns { display: flex; gap: .6rem; margin-top: .75rem; }
.footer__sns a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-ink); }
.footer__sns a:hover { background: var(--c-pale); color: var(--c-accent); }
.footer__sns svg { width: 20px; height: 20px; fill: currentColor; }
.footer__op { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--fs-small); color: var(--c-sub); }
.footer__op a.op { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-ink); font-weight: 700; }
.footer__op a.op img { height: 22px; width: auto; filter: brightness(.35); }
.footer__legal a { color: var(--c-sub); margin-right: 1rem; display: inline-block; padding: .3rem 0; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ===== スマホ下部固定バー（浮くCTAはこれ1つだけ） ===== */
.bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--c-surface); border-top: 1px solid var(--c-line); padding: .5rem var(--pad-x) calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem; }
.bar a { flex: 1; min-height: 48px; }
@media (max-width: 900px) {
  .bar { display: flex; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .mnav { padding-bottom: calc(var(--bar-h) + 2rem); }
}

/* ===== 補助 ===== */
.sp-only { display: none; }
@media (max-width: 600px) { .sp-only { display: inline; } }
.access__note { font-size: var(--fs-small); color: var(--c-sub); }

/* ===== v2.1（2026-09-07 久保さんFB: 短く・図で・月額を主役に） ===== */
:root { --sec-pad: clamp(2.75rem, 2rem + 3vw, 5.5rem); }
.sec-head { margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.space__plan { width: 100%; aspect-ratio: 982 / 302; object-fit: cover; border-top: 1px solid var(--c-line); background: #fff; }
.fac { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; margin-top: 1.5rem; }
.fac li { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 700; text-align: center; padding: .6rem .25rem; background: var(--c-bg); border-radius: var(--r-card); }
.fac img { width: 40px; height: 40px; border-radius: 50%; }
@media (max-width: 900px) { .fac { grid-template-columns: repeat(4, 1fr); } }

/* 月額会員: 時間帯バー */
.mplans { background: var(--c-surface); border: 2px solid var(--c-brand); border-radius: var(--r-card); padding: clamp(1.1rem, 3vw, 2rem); }
.mplans__head h3 { font-size: var(--fs-h3); }
.mplans__head p { font-size: var(--fs-small); color: var(--c-sub); margin-top: .25rem; }
.mp { display: grid; grid-template-columns: 1.3fr 1.2fr 1.2fr auto; gap: .5rem 1.25rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--c-line); }
.mp--legend { border-top: 0; padding: 1rem 0 .25rem; }
.mp--legend .mp__day span { visibility: hidden; }
.mp--hi { background: var(--c-pale); margin: 0 calc(-1 * clamp(1.1rem, 3vw, 2rem)); padding-left: clamp(1.1rem, 3vw, 2rem); padding-right: clamp(1.1rem, 3vw, 2rem); }
.mp__name { font-weight: 700; line-height: 1.4; }
.mp__name small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-sub); }
.mp__day { display: grid; grid-template-columns: 3.2em 1fr; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; }
.mp__day span { grid-row: 1 / 3; font-size: var(--fs-xs); color: var(--c-sub); font-weight: 700; }
.mp__day em { font-style: normal; font-size: var(--fs-xs); color: var(--c-sub); line-height: 1.2; margin-top: .2rem; }
.tb { position: relative; height: 10px; background: var(--c-line); border-radius: var(--r-pill); }
.tb i { position: absolute; top: 0; bottom: 0; left: calc((var(--s) - 6) / 16 * 100%); width: calc((var(--e) - var(--s)) / 16 * 100%); background: var(--c-brand); border-radius: var(--r-pill); }
.tb--scale { background: transparent; height: auto; display: flex; justify-content: space-between; }
.tb--scale b { font-size: var(--fs-xs); color: var(--c-sub); font-weight: 400; }
.mp__price { font-weight: 700; font-size: 1.25rem; white-space: nowrap; text-align: right; }
.mp__price small { font-size: var(--fs-xs); color: var(--c-sub); font-weight: 400; }
.mplans__note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--c-sub); }
.mplans .btn-row { margin-top: 1rem; }
@media (max-width: 900px) {
  .mp { grid-template-columns: 1fr auto; gap: .5rem .75rem; }
  .mp__name { grid-column: 1; }
  .mp__price { grid-column: 2; grid-row: 1; }
  .mp__day { grid-column: 1 / -1; grid-template-columns: 3.2em 1fr auto; grid-template-rows: auto; }
  .mp__day span { grid-row: auto; }
  .mp__day em { margin: 0; min-width: 6.5em; text-align: right; }
  .mp--legend { display: none; }
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.duo .plan { padding: 1.25rem 1.25rem 1rem; }
.duo .plan dl { margin-top: .5rem; }
.duo .plan dt small { display: block; font-size: var(--fs-xs); color: var(--c-sub); font-weight: 400; }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } }

/* 相談: 写真チップ */
.cchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cchips li { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; display: flex; align-items: flex-end; }
.cchips img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cchips span { position: relative; z-index: 1; width: 100%; padding: 1.4rem .75rem .6rem; color: #fff; font-weight: 700; font-size: var(--fs-small); background: linear-gradient(to top, rgba(20, 40, 32, .82), rgba(20, 40, 32, 0)); }
@media (max-width: 600px) { .cchips { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }
.flow--line { margin-top: 1.25rem; padding: 1rem 1.25rem; }
.flow--line ol { gap: .75rem 1.5rem; }
.diary--one { margin-top: 1.25rem; }
.diary--one .diary__item { margin: 0; }
.diary--one .diary__more { margin-top: .75rem; }

/* 最近のこと */
.recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rc { background: var(--c-bg); border-radius: var(--r-card); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.rc h3 { font-size: var(--fs-small); color: var(--c-accent); }
.rc p { font-size: var(--fs-small); }
.rc time { font-size: var(--fs-xs); color: var(--c-sub); }
.rc .posts { display: block; margin: 0; }
.rc .post { display: block; box-shadow: none; background: transparent; border-radius: 0; }
.rc .post img { display: none; }
.rc .post__body { padding: 0; }
.rc .post h4, .rc .post h3 { font-size: var(--fs-small); font-weight: 700; }
.rc .more { margin-top: auto; font-size: var(--fs-small); }
@media (max-width: 900px) { .recent { grid-template-columns: 1fr; } }

/* 使い方の動画1本 */
.movie--single { margin-top: 1rem; display: flex; align-items: stretch; background: var(--c-bg); }
.movie--single .movie__frame { width: 42%; max-width: 280px; flex: none; aspect-ratio: auto; }
.movie--single .movie__body { display: flex; flex-direction: column; justify-content: center; gap: .4rem; }
.movie--single h3 { font-size: var(--fs-small); }
.access__parking { margin: 1rem 0 0; }
.access__parking img { border-radius: var(--r-card); border: 1px solid var(--c-line); background: #fff; }
.steps a { display: inline-block; padding: .35rem 0; }
.space img.space__plan { aspect-ratio: 982 / 302; object-fit: contain; }
/* v2.2: ドロップイン先頭・月額は後ろ */
.plan--drop { padding: clamp(1.25rem, 3vw, 2rem); }
.plan--drop .plan__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.plan--drop .plan__for { margin: 0; }
.drop { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1rem; }
.drop li { background: var(--c-pale); border-radius: var(--r-card); padding: .9rem .75rem; text-align: center; }
.drop b { display: block; font-size: var(--fs-xs); color: var(--c-sub); font-weight: 700; }
.drop span { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; }
.plan--drop .plan__note { margin-top: .9rem; }
@media (max-width: 700px) { .drop { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .drop span { font-size: 1.35rem; } }
.sec-head--sub { margin-top: 2.5rem; }
.sec-head--sub h2::before { display: none; }
.sec-head--sub h2 { font-size: var(--fs-h3); }
.plan--corp { margin-top: 1rem; padding: 1.25rem 1.25rem 1rem; }
.plan--corp dl { margin-top: .5rem; }
.plan--corp dt small { display: block; font-size: var(--fs-xs); color: var(--c-sub); font-weight: 400; }
.howto { margin-top: 1rem; }