/* 2026-06-14 claude-opus-4-8[1m] — 小田原めだか テーマCSS（案A「和モダン×水族」）。
   partials/header.html・footer.html・templates/front-page.html のクラスに整合。
   実写差替前は画像コンテナの地色でグレースフル表示。陳腐なグラデ不使用・角丸6px。 */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Maru+Gothic:wght@500;700&display=swap");

:root{
  --ai:#15303b; --asagi:#3f8a8b; --asagi-deep:#2c6566;
  --kinari:#f4eee1; --kinari-2:#ece3d1; --sumi:#241f1d;
  --shu:#d65b3f; --shu-soft:#e9a489; --moss:#7c925a;
  --line:rgba(36,31,29,.16); --r:6px;
  --shadow:0 1px 0 rgba(36,31,29,.04), 0 10px 30px -18px rgba(21,48,59,.45);
  --mincho:"Shippori Mincho B1", serif;
  --gothic:"Zen Kaku Gothic New", system-ui, sans-serif;
  --maru:"Zen Maru Gothic", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--sumi);background:var(--kinari);font-family:var(--gothic);line-height:1.85;font-size:16px;letter-spacing:.02em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.inner{max-width:1140px;margin:0 auto;padding:0 24px}

/* ── ヘッダー ── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,238,225,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;height:74px}
.site-header .brand .logo{height:44px;width:auto;display:block}
.gnav{margin-left:auto}
.gnav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-size:14px;font-weight:500}
.gnav a{position:relative;padding:4px 0;color:var(--ai)}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--shu);transition:right .25s ease}
.gnav a:hover::after{right:0}
.tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--mincho);font-weight:600;color:var(--ai);border:1px solid var(--ai);border-radius:var(--r);padding:8px 14px;font-size:14px;transition:.2s}
.tel:hover{background:var(--ai);color:var(--kinari)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn span{width:22px;height:2px;background:var(--ai);display:block}
.drawer{display:none}

/* ── ヒーロー ── */
.hero{position:relative;padding:64px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{font-family:var(--maru);font-weight:700;color:var(--shu);letter-spacing:.22em;font-size:12.5px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--shu)}
h1.lead{font-family:var(--mincho);font-weight:800;color:var(--ai);font-size:clamp(38px,5.4vw,64px);line-height:1.28;letter-spacing:.04em;margin:0 0 22px}
h1.lead .shu{color:var(--shu)}
/* 2026-06-15 ruby を inline-block;width:100% に（見た目=block と同一・atomic inline で親 data-knit-edit span を分断せず編集枠が ruby も覆う・設計 14p）*/
h1.lead .ruby{font-size:.42em;display:inline-block;width:100%;letter-spacing:.3em;color:var(--asagi-deep);font-weight:600;margin-bottom:6px}
.hero .sub{max-width:30em;font-size:15.5px;color:#4a423d;margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:var(--r);border:1px solid transparent;transition:.2s;font-family:var(--gothic);cursor:pointer}
.btn-primary{background:var(--shu);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:#bd4630;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--ai);color:var(--ai)}
.btn-ghost:hover{background:var(--ai);color:var(--kinari)}
.tank{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:repeating-linear-gradient(180deg, transparent 0 46px, rgba(255,255,255,.04) 46px 47px), var(--asagi-deep);box-shadow:var(--shadow)}
/* 2026-06-15 hero 写真スロット（設計 14p）: 空=ライブは隠す（SVG水槽＝デザイン不変）/ エディタは破線枠でクリック追加可 / 写真あり=泳ぐメダカ装飾を隠す */
.tank-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tank-photo:not([data-knit-img])[src=""]{display:none}
.tank-photo[data-knit-img][src=""]{background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.45)}
.tank:has(.tank-photo[src]:not([src=""])) .swim{display:none}
.tank-label{position:absolute;left:16px;top:14px;color:rgba(255,255,255,.85);font-family:var(--mincho);font-size:13px;letter-spacing:.2em;writing-mode:vertical-rl}
.swim{position:absolute;animation:swim 9s linear infinite}
.swim.b{top:38%;animation-duration:13s;animation-delay:-3s;transform:scale(.8)}
.swim.c{top:64%;animation-duration:11s;animation-delay:-6s;transform:scale(1.15)}
@keyframes swim{0%{left:-12%}100%{left:108%}}
@media (prefers-reduced-motion:reduce){.swim{animation:none;left:30%}}
.seasonchip{position:absolute;right:14px;bottom:14px;background:var(--kinari);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-size:12px;font-family:var(--maru);font-weight:700;color:var(--ai);box-shadow:var(--shadow)}
.seasonchip b{color:var(--shu)}
.ripple{display:block;height:18px;width:100%;max-width:1140px;margin:0 auto;color:var(--asagi);opacity:.5}

/* ── コンセプト ── */
.concept{padding:72px 0;background:var(--ai);color:var(--kinari);position:relative;overflow:hidden}
.concept .inner{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.concept .vtext{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--mincho);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.9;letter-spacing:.18em;margin:0;color:var(--kinari)}
.concept .vtext .shu{color:var(--shu-soft)}
.concept-body{max-width:34em}
.concept-body p{color:rgba(244,238,225,.86);font-size:15.5px;margin:0 0 16px}
.concept-body .sign{font-family:var(--mincho);color:var(--shu-soft);letter-spacing:.1em;margin-top:8px}
.concept .bigfish{position:absolute;right:-40px;bottom:-30px;width:280px;opacity:.10;color:#fff}

/* ── セクション共通 ── */
.section{padding:84px 0}
.section--alt{background:var(--kinari-2)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;border-bottom:1px solid var(--line);padding-bottom:16px}
.sec-head .ja{font-family:var(--mincho);font-weight:700;color:var(--ai);font-size:clamp(24px,3vw,34px);letter-spacing:.08em}
.sec-head .en{font-family:var(--maru);font-weight:700;color:var(--asagi);letter-spacing:.28em;font-size:12px;text-transform:uppercase}
.sec-head .more{font-size:13px;color:var(--shu);font-weight:700;white-space:nowrap}

/* 下層ページ共通ヘッダ */
.page-head{padding:56px 0 8px}
.page-head .en{font-family:var(--maru);font-weight:700;color:var(--asagi);letter-spacing:.28em;font-size:12px;text-transform:uppercase;margin-bottom:6px}
.page-head .ja{font-family:var(--mincho);font-weight:800;color:var(--ai);font-size:clamp(30px,4.4vw,48px);letter-spacing:.06em;margin:0}
.page-head .page-lead{max-width:40em;color:#4a423d;font-size:15.5px;margin:16px 0 0}
.info--wide dl{grid-template-columns:140px 1fr}
/* prose（PP等の本文） */
.prose{max-width:46em;color:#3f3a35;font-size:15px;line-height:2}
.prose h2,.prose h3{font-family:var(--mincho);color:var(--ai);margin:1.6em 0 .5em}
.prose p{margin:0 0 1em}
.prose a{color:var(--asagi-deep);text-decoration:underline}
/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.contact-side{background:var(--kinari-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.contact-tel{display:block;font-family:var(--mincho);font-weight:800;color:var(--ai);font-size:26px;margin:6px 0;letter-spacing:.02em}
.contact-note{font-size:13px;color:#6a615b;margin:0}
.form-ph{border:1px dashed var(--line);border-radius:var(--r);background:#fff;padding:48px 20px;text-align:center;color:#9a8f86;font-family:var(--maru)}
/* 在庫の注記 */
.stock-note{margin:28px auto 0;max-width:46em;text-align:center;color:#6a615b;font-size:13.5px;background:var(--kinari-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
/* 空状態 */
.empty-state{text-align:center;color:#9a8f86;font-family:var(--maru);padding:28px 0}
.news:not(:empty)+.empty-state,.lineup:not(:empty)+.empty-state{display:none}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:24px}}

/* めだかカード */
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.22s;box-shadow:0 1px 0 rgba(36,31,29,.03)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .pic{aspect-ratio:1/1;background:var(--kinari-2)}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card .meta{padding:14px 14px 16px}
.card .name{font-family:var(--mincho);font-weight:700;color:var(--ai);font-size:17px;letter-spacing:.04em}
.card .desc{font-size:12.5px;color:#6a615b;margin-top:4px;min-height:2.6em}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.tag{font-family:var(--maru);font-weight:700;font-size:11px;color:var(--moss);border:1px solid rgba(124,146,90,.5);border-radius:4px;padding:3px 8px}
.price{font-family:var(--mincho);color:var(--shu);font-weight:700;font-size:15px}

/* 取扱い */
.goods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.goods .g{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;display:flex;align-items:flex-end;background:var(--asagi-deep)}
.goods .g .gp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.goods .g .gl{position:relative;z-index:1;margin:14px;background:var(--kinari);border-radius:4px;padding:7px 12px;font-family:var(--mincho);font-weight:700;color:var(--ai);font-size:14px;border:1px solid var(--line)}

/* はたらく */
.work .work-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.work-photo{aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;background:var(--kinari-2);border:1px solid var(--line)}
.work-photo img{width:100%;height:100%;object-fit:cover}
.work h3{font-family:var(--mincho);font-weight:800;color:var(--ai);font-size:clamp(22px,2.6vw,30px);line-height:1.6;margin:0 0 18px;letter-spacing:.04em}
.work p{color:#4a423d;font-size:15px;margin:0 0 14px;max-width:32em}
.steps{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.step{flex:1;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
.step .no{font-family:var(--maru);color:var(--shu);font-weight:700;font-size:12px}
.step .t{font-family:var(--mincho);font-weight:700;color:var(--ai);margin-top:4px;font-size:15px}
.step .d{font-size:12px;color:#6a615b;margin-top:4px}

/* お知らせ */
.news{display:grid;gap:0}
.news a{display:grid;grid-template-columns:120px 90px 1fr auto;gap:16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);transition:.2s}
.news a:hover{background:#fff;padding-left:12px}
.news .date{font-family:var(--maru);font-weight:700;color:var(--asagi-deep);font-size:13px;letter-spacing:.06em}
.news .cat{justify-self:start;font-family:var(--maru);font-weight:700;font-size:11px;color:#fff;background:var(--asagi);border-radius:4px;padding:3px 9px}
.news .ttl{font-size:15px;color:var(--sumi)}
.news .arw{color:var(--asagi)}

/* アクセス */
.access-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px}
.access .map{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:#dfe6e2;border:1px solid var(--line)}
.access .map iframe{width:100%;height:100%;border:0;display:block}
.access .info dl{display:grid;grid-template-columns:90px 1fr;gap:0 16px;margin:0}
.access .info dt{font-family:var(--mincho);color:var(--ai);font-weight:700;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.access .info dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:#4a423d}
.access .sns{display:flex;gap:12px;margin-top:18px;align-items:center}
.access .sns a:not(.tel){width:42px;height:42px;border:1px solid var(--ai);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--ai);transition:.2s}
.access .sns a:not(.tel):hover{background:var(--ai);color:var(--kinari)}

/* CTA帯 */
.cta-band{background:var(--shu);color:#fff;padding:54px 0}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{font-family:var(--mincho);font-weight:800;font-size:clamp(22px,3vw,32px);margin:0;letter-spacing:.06em}
.cta-band p{margin:6px 0 0;opacity:.9;font-size:14px}
.cta-band .btn-primary{background:#fff;color:var(--shu)}
.cta-band .btn-primary:hover{background:var(--ai);color:#fff}

/* フッター */
.site-footer{background:var(--ai);color:rgba(244,238,225,.8);padding:48px 0 28px;font-size:13px}
.site-footer .inner{max-width:1140px;margin:0 auto;padding:0 24px}
.site-footer .ft-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;border-bottom:1px solid rgba(244,238,225,.16);padding-bottom:24px;margin-bottom:18px}
.site-footer .brand .logo{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.ft-brand p{max-width:24em;margin:14px 0 0;opacity:.8}
.ft-cols{display:flex;gap:48px;flex-wrap:wrap}
.ft-col a{display:block;color:rgba(244,238,225,.8);padding:4px 0}
.ft-col a:hover{color:#fff}
.ft-h{font-family:var(--maru);font-weight:700;color:var(--shu-soft);font-size:11px;letter-spacing:.2em;margin-bottom:6px}
.ft-copy{opacity:.6;font-size:12px}

@media(max-width:880px){
  .gnav,.site-header .tel{display:none}
  .menu-btn{display:flex;margin-left:auto}
  .hero-grid,.concept .inner,.work .work-grid,.access-grid{grid-template-columns:1fr;gap:30px}
  .concept .inner{gap:24px}
  .concept .vtext{writing-mode:horizontal-tb}
  .lineup{grid-template-columns:repeat(2,1fr)}
  .goods{grid-template-columns:1fr}
  .news a{grid-template-columns:90px 1fr;row-gap:4px}
  .news .cat,.news .arw{display:none}
}