@charset "utf-8";
/* MIROCANA 公式サイト — DESIGN.md v0.6 の実装
   §2 色 / §3 文字 / §5 余白 / §6 部品 / §9 レスポンシブ / §10 アクセシビリティ */

/* ========== §12 トークン ========== */
:root{
  --color-brand:#1D6B52; --color-brand-hover:#155641; --color-tint:#E4F0EC;
  --color-mark:#DCD050; --color-bg:#F3F1EA; --color-surface:#FFFDF8;
  --color-ink:#232A27; --color-ink-muted:#505955; --color-line:#D9DCD6;
  --color-field-line:#7C8580; --color-on-brand:#FFFDF8; --color-error:#B42318;
  --color-focus:#232A27;

  --font-head:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;

  --fs-h1-top:clamp(1.375rem, 7.2vw - 0.0625rem, 1.75rem);
  --fs-h1-sub:1.625rem; --fs-h2:1.5rem; --fs-h3:1.25rem; --fs-lead:1.125rem;
  --fs-body:1.0625rem; --fs-note:1rem;

  --gutter:20px; --header-h:64px; --radius-s:8px; --radius-m:16px; --radius-l:16px;
  --grid-gap:24px; --sec-s:48px; --sec-m:64px; --sec-l:96px;
  --z-menu:90; --z-header:100; --z-skip:110;
}
@media (min-width:640px){ :root{ --gutter:32px; --radius-l:24px;
  --sec-s:64px; --sec-m:96px; --sec-l:128px; --grid-gap:24px;
  --fs-h1-top:2.25rem; --fs-h1-sub:2rem; --fs-h2:1.875rem; --fs-h3:1.375rem; --fs-lead:1.125rem; } }
@media (min-width:1024px){ :root{ --gutter:40px; --header-h:80px; --grid-gap:32px;
  --sec-s:96px; --sec-m:128px; --sec-l:160px;
  --fs-h1-top:2.625rem; --fs-h1-sub:2.5rem; --fs-h2:2.25rem; --fs-h3:1.625rem; --fs-lead:1.1875rem; } }
@media (min-width:1280px){ :root{ --fs-h1-top:2.75rem; } }
@media (max-width:359px){ :root{ --gutter:16px; } }

/* ========== 土台 ========== */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--color-bg); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.9;
  font-weight:400; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--color-brand); }
a:hover{ color:var(--color-brand-hover); }
:focus-visible{ outline:3px solid var(--color-focus); outline-offset:3px; }
h1,h2,h3{ font-family:var(--font-head); font-weight:700; line-height:1.5;
  letter-spacing:.02em; font-feature-settings:"palt"; margin:0;
  word-break:auto-phrase; text-wrap:balance; line-break:strict; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
.ph{ display:inline-block; }
.line{ display:block; }

.container{ max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }
.col-read{ max-width:720px; } .col-wide{ max-width:880px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; z-index:var(--z-skip); }
.skip:focus{ left:var(--gutter); top:8px; background:var(--color-surface);
  color:var(--color-ink); font-size:1rem; min-height:44px; padding:12px 16px;
  border-radius:var(--radius-s); display:inline-flex; align-items:center; }

/* ========== §6-0 部品 ========== */
.label{ font-size:var(--fs-note); font-weight:700; letter-spacing:.04em;
  color:var(--color-brand); line-height:1.6; }
.label::before{ content:""; display:inline-block; width:24px; height:4px;
  background:var(--color-mark); vertical-align:middle; margin-right:8px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:1.125rem; font-weight:700; letter-spacing:.02em;
  line-height:1.4; min-height:60px; padding:12px 32px; border-radius:var(--radius-s);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out; }
.btn-primary{ background:var(--color-brand); color:var(--color-on-brand); }
.btn-primary:hover{ background:var(--color-brand-hover); color:var(--color-on-brand); }
.btn-secondary{ background:transparent; color:var(--color-brand); border-color:var(--color-brand); }
.btn-secondary:hover{ background:var(--color-tint); color:var(--color-brand-hover); }
.btn-onband{ background:var(--color-surface); color:var(--color-brand); }
.btn-onband:hover{ background:var(--color-tint); }
@media (max-width:639px){ .btn{ width:100%; white-space:normal; min-width:0; padding:12px 20px; } }
@media (min-width:1024px){ .btn{ white-space:nowrap; min-width:240px; } }

.note{ font-size:var(--fs-note); line-height:1.8; color:var(--color-ink-muted); }
.tag{ display:inline-flex; align-items:center; height:32px; padding:4px 12px;
  background:var(--color-tint); color:var(--color-brand); border-radius:var(--radius-s);
  font-size:var(--fs-note); font-weight:700; line-height:1.5; }

/* ========== §6-1 ヘッダー ========== */
.site-header{ position:sticky; top:0; z-index:var(--z-header); background:var(--color-bg);
  height:var(--header-h); display:flex; align-items:center;
  transition:background-color 150ms ease-out,border-color 150ms ease-out;
  border-bottom:1px solid transparent; }
.site-header[data-scrolled="true"]{ background:var(--color-surface); border-bottom-color:var(--color-line); }
.site-header .container{ display:flex; align-items:center; gap:16px; width:100%; }
.brand{ display:inline-flex; align-items:center; gap:8px; min-height:44px;
  text-decoration:none; color:var(--color-ink); margin-right:auto; }
.brand img{ width:32px; height:32px; }
.brand span{ font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:.06em; }
@media (min-width:640px){ .brand img{ width:40px; height:40px; } .brand span{ font-size:1.25rem; } }
.nav{ display:none; }
@media (min-width:1024px){
  .nav{ display:flex; gap:32px; margin-right:32px; }
  .nav a{ font-size:var(--fs-note); font-weight:500; color:var(--color-ink);
    text-decoration:none; display:inline-flex; align-items:center; min-height:44px;
    border-bottom:2px solid transparent; }
  .nav a:hover{ color:var(--color-ink); border-bottom-color:var(--color-brand); }
}
.header-cta{ min-height:44px; height:44px; font-size:1rem; padding:0 12px;
  white-space:nowrap; min-width:0; width:auto; }
@media (min-width:1024px){ .header-cta{ height:48px; padding:0 20px; } }
.menu-btn{ width:44px; height:44px; flex:none; margin-left:8px; display:inline-flex;
  align-items:center; justify-content:center; background:var(--color-surface);
  border:1px solid var(--color-line); border-radius:var(--radius-s); cursor:pointer; }
.menu-btn svg{ width:24px; height:24px; stroke:var(--color-ink); fill:none;
  stroke-width:2; stroke-linecap:round; }
@media (min-width:1024px){ .menu-btn{ display:none; } }
.menu{ position:fixed; inset:var(--header-h) 0 0; background:var(--color-bg);
  z-index:var(--z-menu); overflow-y:auto; overscroll-behavior:contain;
  padding:24px var(--gutter); display:none; }
.menu[data-open="true"]{ display:block; }
.menu a.menu-item{ display:flex; align-items:center; justify-content:space-between;
  min-height:56px; font-size:1.125rem; font-weight:700; color:var(--color-ink);
  text-decoration:none; border-bottom:1px solid var(--color-line); }
.menu .btn{ margin-top:32px; }

/* ========== §6-2 HERO ========== */
.hero{ background:var(--color-bg); position:relative; }
.hero-media{ position:relative; }
.hero-media img{ width:calc(100% + 2 * var(--gutter));
  margin-inline:calc(-1 * var(--gutter)); height:auto; }
.hero-text{ position:absolute; top:24px; left:0; right:0; }
.hero-text .label{ margin-bottom:12px; }
.hero h1{ font-size:var(--fs-h1-top); }
.hero-below{ padding-top:32px; padding-bottom:var(--sec-s); }
.hero-lead{ font-size:var(--fs-lead); line-height:1.8; font-weight:500; max-width:30em; }
.hero-actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.hero-actions + .note{ margin-top:16px; }
/* 359px以下は重ねない（§9・壁の余りが3pxしかないため） */
@media (max-width:359px){
  .hero-text{ position:static; margin-top:32px; }
  .hero-media img{ margin-bottom:0; }
}
@media (min-width:640px) and (max-width:1023px){
  /* タブレット縦は絵を全幅＋cover、横向きは文字の下に絵（§9） */
  .hero-media img{ height:calc(100dvh - var(--header-h)); object-fit:cover;
    object-position:50% 50%; }
}
@media (min-width:640px) and (max-width:1023px) and (orientation:landscape){
  .hero-media img{ height:auto; object-fit:initial; }
  .hero-text{ position:static; margin-top:0; margin-bottom:32px; }
  .hero-inner{ padding-top:48px; }
}
@media (min-width:1024px){
  .hero-inner{ position:relative; }
  .hero-media img{ width:100vw; margin-inline:calc(50% - 50vw);
    height:max(820px, calc(100dvh - var(--header-h)), 60vw);
    object-fit:cover; object-position:35% 50%; }
  .hero-text{ position:absolute; top:64px; left:0; right:0; }
  .hero-text .container{ padding-inline:var(--gutter); }
  .hero-col{ max-width:544px; }
  .hero h1{ font-size:var(--fs-h1-top); margin-top:16px; }
  .hero-lead{ margin-top:24px; }
  .hero-actions{ flex-direction:row; gap:16px; margin-top:40px; }
  .hero-below{ display:none; }
}
/* 1024〜1279px は壁が足りないので1列（§6-2） */
@media (min-width:1024px) and (max-width:1279px){
  .hero-media img{ height:auto; object-fit:initial; width:calc(100% + 2 * var(--gutter));
    margin-inline:calc(-1 * var(--gutter)); }
  .hero-text{ position:static; }
  .hero-inner{ padding-top:48px; }
  .hero-media{ margin-top:32px; }
  .hero-below{ display:none; }
}

/* ========== 節の共通 ========== */
.section{ padding-block:var(--sec-m); }
.section-sm{ padding-block:var(--sec-s); }
.section-head .label{ margin-bottom:12px; }
.section-head h2{ font-size:var(--fs-h2); }
.section-head p{ margin-top:16px; }
@media (min-width:640px){ .section-head p{ margin-top:24px; } }
.section-body{ margin-top:32px; }
@media (min-width:640px){ .section-body{ margin-top:48px; } }
@media (min-width:1024px){ .section-body{ margin-top:64px; } }

/* ========== §6-3 困りごと（紙の面） ========== */
.paper{ background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-m); padding:24px; }
@media (min-width:640px){ .paper{ border-radius:24px; padding:48px; } }
@media (min-width:1024px){ .paper{ padding:64px; } }
.pain-list li{ display:flex; gap:12px; padding-block:20px; border-top:1px solid var(--color-line); }
.pain-list li:last-child{ border-bottom:1px solid var(--color-line); }
.pain-num{ font-family:var(--font-head); font-weight:700; font-size:1.125rem;
  letter-spacing:.04em; color:var(--color-brand); flex:none; width:40px; line-height:1.8; }
.pain-list p{ font-size:1.125rem; line-height:1.8; font-weight:500; }
@media (min-width:1024px){ .pain-num{ width:56px; font-size:1.25rem; } .pain-list li{ padding-block:24px; } }
.pain-note{ margin-top:24px; border-left:4px solid var(--color-mark); padding-left:16px;
  font-size:var(--fs-body); font-weight:500; color:var(--color-ink); line-height:1.9; }
.pain-figure{ margin:24px 0 0; display:flex; justify-content:flex-end; }
.pain-figure img{ width:140px; }
@media (min-width:640px){ .pain-figure img{ width:240px; } }
@media (min-width:1024px){
  .pain-grid{ display:grid; grid-template-columns:5fr 7fr; gap:var(--grid-gap); align-items:start; }
}

/* ========== §6-4 手元に残るもの ========== */
.scene-list{ display:grid; gap:24px; }
@media (min-width:640px){ .scene-list{ gap:48px; } }
.scene-card{ border-radius:var(--radius-m); overflow:hidden; }
.scene-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-m); }
.scene-card-02 img,.scene-card-03 img{ aspect-ratio:16/9; }
.scene-body{ padding-top:16px; }
.scene-meta{ display:flex; align-items:center; gap:12px; }
.scene-num{ font-family:var(--font-head); font-weight:700; font-size:1.125rem;
  letter-spacing:.04em; color:var(--color-brand); position:relative; padding-bottom:6px; }
.scene-num::after{ content:""; position:absolute; left:0; bottom:0; width:20px; height:3px;
  background:var(--color-mark); }
.scene-card h3{ font-size:var(--fs-h3); margin-top:16px; }
.scene-card p{ margin-top:16px; }
@media (min-width:640px){
  .scene-list{ grid-template-columns:1fr 1fr; }
  .scene-card-01{ grid-column:1 / -1; display:grid; grid-template-columns:58fr 42fr; gap:var(--grid-gap); align-items:center; }
  .scene-card-01 .scene-body{ padding-top:0; }
  .scene-card-02 img,.scene-card-03 img{ aspect-ratio:3/2; }
  .scene-num{ font-size:1.25rem; }
}
.scene-actions{ margin-top:48px; }
.scene-actions .note{ margin-top:16px; }

/* ========== §6-5 考え方の帯 ========== */
.approach{ background:var(--color-tint); padding-block:var(--sec-s); }
.approach h2{ font-size:var(--fs-h2); }
.approach p{ margin-top:24px; }

/* ========== §6-6 よくあるご質問 ========== */
.faq-item{ background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-m); margin-bottom:12px; }
.faq-item summary{ display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  padding:16px; min-height:64px; font-size:1.125rem; font-weight:700; line-height:1.7;
  list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q,.faq-a{ font-family:var(--font-head); font-weight:700; color:var(--color-brand);
  flex:none; width:32px; font-size:1.125rem; line-height:1.7; }
.faq-item[open] summary .faq-chevron{ transform:rotate(180deg); }
.faq-chevron{ margin-left:auto; flex:none; width:20px; height:20px; stroke:var(--color-brand);
  fill:none; stroke-width:2; stroke-linecap:round; transition:transform 200ms ease-out; }
.faq-body{ display:flex; gap:12px; padding:0 16px 20px; }
@media (min-width:640px){ .faq-item summary{ padding:20px 24px; } .faq-body{ padding:0 24px 24px; } }

/* ========== §6-7 MIROCANAについて ========== */
.info-table{ width:100%; border-collapse:collapse; }
.info-table th,.info-table td{ text-align:left; vertical-align:top; }
.info-table th{ font-size:var(--fs-note); font-weight:700; color:var(--color-ink-muted); }
.info-table td{ font-size:var(--fs-body); }
@media (max-width:639px){
  .info-table,.info-table tbody,.info-table tr,.info-table th,.info-table td{ display:block; }
  .info-table tr{ padding:16px 20px; border-bottom:1px solid var(--color-line); }
  .info-table th{ padding-bottom:4px; }
}
@media (min-width:640px){
  .info-table tr{ border-bottom:1px solid var(--color-line); }
  .info-table th{ width:200px; padding:16px 16px 16px 0; }
  .info-table td{ padding:16px 0; }
}
.closing{ margin-top:48px; position:relative; padding-top:20px; font-family:var(--font-head);
  font-weight:700; font-size:1.25rem; line-height:1.7; letter-spacing:.02em; }
.closing::before{ content:""; position:absolute; top:0; left:0; width:32px; height:3px;
  background:var(--color-mark); }
@media (min-width:1024px){ .closing{ font-size:1.75rem; } }

/* ========== §6-8 相談の帯 ========== */
.cta-band-outer{ background:var(--color-bg); padding-block:var(--sec-s); }
.cta-band{ background:var(--color-brand); color:var(--color-on-brand);
  border-radius:var(--radius-m); padding:48px 20px; --color-focus:#FFFDF8; }
.cta-band .label{ color:var(--color-tint); }
.cta-band .label::before{ background:var(--color-mark); }
.cta-band h2{ font-size:var(--fs-h2); margin-top:12px; }
.cta-band .btn{ margin-top:24px; }
.cta-band .note{ color:var(--color-tint); margin-top:16px; }
@media (min-width:640px){ .cta-band{ padding:64px 48px; border-radius:24px; } }
@media (min-width:1024px){ .cta-band{ padding:80px; } }

/* ========== §6-9 フッター ========== */
.site-footer{ background:var(--color-tint); padding-top:64px; padding-bottom:32px; }
.site-footer .brand{ margin-right:0; }
.footer-tag{ margin-top:16px; font-size:var(--fs-note); color:var(--color-ink-muted); }
.footer-legal{ margin-top:40px; display:flex; flex-direction:column; }
.footer-legal a{ min-height:44px; display:inline-flex; align-items:center;
  font-size:var(--fs-note); color:var(--color-ink); text-decoration:none; }
.footer-legal a:hover{ text-decoration:underline; }
.copyright{ margin-top:24px; font-size:var(--fs-note); color:var(--color-ink-muted); }
@media (min-width:640px){
  .footer-legal{ flex-direction:row; gap:32px; }
  .site-footer{ padding-top:64px; padding-bottom:40px; }
}

/* ========== §6-13 フォーム ========== */
.form-panel{ background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-m); padding:32px 20px; }
@media (min-width:640px){ .form-panel{ padding:48px 40px; border-radius:24px; } }
.field{ margin-bottom:32px; }
.field > label,.field > legend{ display:block; font-size:1.125rem; font-weight:700;
  line-height:1.7; margin-bottom:8px; padding:0; }
.req,.opt{ font-size:var(--fs-note); font-weight:700; margin-left:8px; }
.req{ color:var(--color-error); } .opt{ color:var(--color-ink-muted); }
.field input[type="text"],.field input[type="email"],.field textarea{
  width:100%; font-family:var(--font-body); font-size:1.125rem; color:var(--color-ink);
  background:var(--color-surface); border:1px solid var(--color-field-line);
  border-radius:var(--radius-s); padding:0 16px; height:56px; }
.field textarea{ min-height:200px; padding:12px 16px; line-height:1.8; resize:vertical; }
.field input:focus-visible,.field textarea:focus-visible{ border:2px solid var(--color-brand); }
.field .hint{ margin-top:8px; font-size:var(--fs-note); color:var(--color-ink-muted); line-height:1.8; }
fieldset{ border:0; margin:0; padding:0; }
.radio-row{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px;
  border:1px solid var(--color-line); border-radius:var(--radius-s); padding:8px 16px;
  margin-bottom:8px; cursor:pointer; line-height:1.6; }
.radio-row input{ position:absolute; opacity:0; width:0; height:0; }
.radio-dot{ width:24px; height:24px; flex:none; border:2px solid var(--color-field-line);
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.radio-row:has(input:checked){ border:2px solid var(--color-brand); background:var(--color-tint); }
.radio-row:has(input:checked) .radio-dot{ border-color:var(--color-brand); }
.radio-row:has(input:checked) .radio-dot::after{ content:""; width:12px; height:12px;
  border-radius:50%; background:var(--color-brand); }
.radio-row:has(input:focus-visible){ outline:3px solid var(--color-focus); outline-offset:3px; }
.legal-box{ background:var(--color-tint); border-radius:var(--radius-m); padding:24px 20px;
  margin-bottom:16px; }
.legal-box p{ font-size:1.125rem; font-weight:700; line-height:1.8; }
.legal-box p + p{ margin-top:12px; }
.form-error{ color:var(--color-error); font-weight:700; margin-bottom:16px; }
.form-submit{ width:100%; max-width:400px; }
@media (min-width:640px){ .form-panel .legal-box{ padding:24px 32px; } }

/* ========== §8 動き ========== */
.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity 400ms cubic-bezier(.2,.7,.2,1),transform 400ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}
@media print{ .reveal{ opacity:1; transform:none; } }

/* ========== 幅ごとの出し分け ========== */
.sp-only{ display:inline; } .pc-only{ display:none; }
@media (min-width:1024px){ .sp-only{ display:none; } .pc-only{ display:inline; } }
.hero-pc-only{ display:none; }
@media (min-width:1024px){ .hero-pc-only{ display:block; } }

/* 絵の上に置くブランド色の文字は濃い緑（§2・§6-2。#1D6B52 は絵の壁の上で3.8:1しか出ない） */
.hero-text .label{ color:var(--color-brand-hover); }

/* HEROの絵は全幅に敷く（img の max-width:100% を解除する） */
.hero-media img{ max-width:none; }
@media (max-width:1023px){ .hero-media img{ max-width:calc(100% + 2 * var(--gutter)); } }
@media (min-width:1024px) and (max-width:1279px){
  .hero-media img{ max-width:calc(100% + 2 * var(--gutter)); }
}

/* 1023px以下は .hero-inner（container）が余白を持つので、中の container は余白ゼロ */
@media (max-width:1023px){
  .hero-text .container{ padding-inline:0; max-width:none; }
}