@charset "utf-8";
/* 湾うち水産（架空）スタンダード（5ページ）版＝スポット版の見た目をそのまま引き継ぐ（2026-10-01）。元： ＝ 最初の画面 案A（鉄色の実務型）をページ全体へ展開（2026-09-30）
   鉄色 #1f4a4f ／ 白 #f6f7f5 ／ 朱 #c0432f（旬の印など小さな点だけ）
   見出し Noto Serif JP ／ 本文 Zen Kaku Gothic New ／ 定番型（design-rules §2.9）
   ① 骨組み（fv-base.css から）② 最初の画面（fv-a/style.css から）③ 本文セクション */

/* ===== ① 骨組み ===== */
:root{
  --bar-h:36px; --header-h:64px; --dock-h:0px; --hero-min:480px;
  --hero-h:calc(100svh - var(--bar-h) - var(--header-h) - var(--dock-h));
  --line-green:#06C755;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}
body{overflow-x:hidden} /* html には付けない（sticky ヘッダーが効かなくなる） */
body{font-family:var(--gothic);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
br.sp{display:none}

/* サンプル明示バー（追従させない） */
.sample-banner{background:var(--main);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);text-align:center;padding:8px 16px;
  font-size:.88rem;font-weight:800;letter-spacing:.04em;line-height:20px;font-family:"Noto Sans JP",system-ui,sans-serif}

/* ヘッダー（sticky） */
header.site{position:sticky;top:0;z-index:200;height:64px;display:flex;align-items:center;gap:24px;
  padding:0 clamp(16px,3vw,40px);background:var(--head-bg,var(--paper));border-bottom:1px solid transparent;transition:border-color .2s}
header.site.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;flex-direction:column;justify-content:center;text-decoration:none;min-height:44px;flex-shrink:0;color:var(--ink)}
.brand ruby{font-family:var(--brand-font,var(--mincho));font-size:1.35rem;font-weight:700;letter-spacing:.14em;line-height:1.1}
.brand rt{font-size:.5em;font-weight:500;letter-spacing:.22em;font-family:var(--gothic)}
.brand small{font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.gnav{display:flex;gap:clamp(14px,1.8vw,26px);margin-left:auto;align-items:center}
.gnav a{text-decoration:none;color:var(--ink-soft);font-size:.86rem;padding:10px 2px;white-space:nowrap;border-bottom:1px solid transparent}
.gnav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav-toggle{display:none}
.head-tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;margin-left:8px;flex-shrink:0}
.head-tel .num{font-family:var(--num-font,var(--gothic));font-weight:700;font-size:1.05rem;letter-spacing:.06em;color:var(--ink);cursor:default}
.head-tel small{font-size:.68rem;color:var(--ink-soft)}

/* 共通ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:10px 22px;text-decoration:none;
  font-weight:700;font-size:.95rem;letter-spacing:.06em;border-radius:var(--radius,6px);line-height:1.4;transition:filter .2s, background .2s}
.btn:hover{filter:brightness(1.06)}
.btn-line{background:var(--line-green);color:#fff}
.btn-line .ico{width:20px;height:20px;flex-shrink:0}
.tel-demo{cursor:default;user-select:text}

/* スマホ下の固定ボタン（PCでは出さない） */
.sp-dock{display:none}

/* FV比較用：続きの構成（予定）＝ページ内リンクの行き先 */
.site-foot{background:var(--foot-bg,var(--main));color:#fff;padding:28px 24px calc(28px + var(--dock-h) + env(safe-area-inset-bottom));text-align:center;font-size:.76rem;line-height:1.9}
.site-foot p + p{margin-top:.4rem}

/* トースト */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--dock-h) + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:400;
  width:min(560px,calc(100% - 32px));padding:14px 18px;border-radius:10px;background:rgba(34,34,34,.92);color:#fff;
  font-family:"Noto Sans JP",system-ui,sans-serif;font-size:.86rem;line-height:1.7;letter-spacing:.03em;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){
  .head-tel{display:none}
}
@media (max-width:800px){
  :root{--header-h:56px}
  br.sp{display:inline}
  br.pc{display:none}
  body{font-size:15.5px}
  header.site{height:56px;background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .brand ruby{font-size:1.2rem}
  .brand small{display:none}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto;
    width:44px;height:44px;background:none;border:0;cursor:pointer}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .gnav{position:fixed;left:0;right:0;top:var(--menu-top,56px);bottom:0;margin:0;z-index:190;
    display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 32px;background:var(--paper);overflow-y:auto;
    visibility:hidden;opacity:0}
  .gnav.open{visibility:visible;opacity:1}
  .gnav a{font-size:1rem;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}

  .sp-dock{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:180;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--dock-bg,rgba(255,255,255,.97));border-top:1px solid var(--line)}
  .sp-dock > *{min-height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:.45em;
    font-weight:700;font-size:.92rem;letter-spacing:.03em;text-decoration:none;line-height:1.25;text-align:center}
  .sp-dock .dock-line{background:var(--line-green);color:#fff}
  .sp-dock .dock-line .ico{width:20px;height:20px}
  .sp-dock .dock-tel{background:var(--dock-tel-bg,var(--main));color:#fff;flex-direction:column;gap:0}
  .sp-dock .dock-tel small{font-size:.7rem;font-weight:500;opacity:.92;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ===== ② 最初の画面 ===== */
:root{
  --main:#1f4a4f;
  --main-dark:#163a3e;
  --paper:#f6f7f5;
  --ink:#1c2627;
  --ink-soft:#4f5d5e;
  --line:#d5dbd9;
  --accent:#c0432f;
  --mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif;
  --line-green:#06C755; /* LINE公式色（fv-base.css と同じ値） */
  --radius:4px;
  --hero-min:560px;
}

/* 最初の画面＝全面3枚スライド（ゆっくりズーム・7秒ずつ・1周21秒）2026-10-01 鈴木さん決定（見比べ案1・ぼかし薄め）
   ①氷に並ぶ魚の大写し ②場内で仕分けする手元 ③配達の車への積み込み
   文字は白＋ごく薄いぼかし（PC＝左端から／スマホ＝上端と下端から）。文字は左側。箱には入れない */
.hero{position:relative;height:var(--hero-h);min-height:var(--hero-min);background:#dfe5e4;overflow:hidden}
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-photo .s{position:absolute;inset:0}
.hero-photo picture,.hero-photo img{position:absolute;inset:0;width:100%;height:100%}
.hero-photo img{object-fit:cover}
.hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,32,35,.30) 0%,rgba(14,32,35,.18) 28%,rgba(14,32,35,.05) 46%,rgba(14,32,35,0) 58%)}
.hero-copy{position:absolute;z-index:2;left:clamp(28px,5vw,80px);top:50%;transform:translateY(-50%);max-width:min(560px,46vw);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.25)}
.hero-catch{font-family:var(--mincho);font-weight:700;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.45;letter-spacing:.08em}
.hero-name{margin-top:clamp(12px,2vh,20px);display:flex;flex-direction:column;gap:4px}
.hero-name ruby{font-family:var(--mincho);font-size:1.35rem;font-weight:700;letter-spacing:.16em;line-height:1.2}
.hero-name rt{font-family:var(--gothic);font-size:.5em;font-weight:500;letter-spacing:.2em}
.hero-name .what{font-size:.86rem;font-weight:700;letter-spacing:.04em;line-height:1.6;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35)}
.hero-doors{display:flex;gap:clamp(18px,2.4vw,34px);margin-top:clamp(18px,3vh,30px);flex-wrap:wrap}
.hero-door{display:flex;flex-direction:column;justify-content:flex-end;min-height:48px;color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;
  letter-spacing:.06em;line-height:1.4;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35)} /* 白い長靴・氷の上でも読めるよう影だけ強め（箱にはしない） */
.hero-door small{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.3)}
.hero-door .arr{margin-left:.6em;font-weight:500}
.hero-door:hover{border-bottom-color:#fff}
.hero-dots{position:absolute;z-index:2;right:clamp(16px,3vw,40px);bottom:18px;display:flex;gap:8px}
.hero-dots i{width:22px;height:2px;background:rgba(255,255,255,.55)}

.hero-photo .s{opacity:0;animation:heroFade 21s linear infinite both}
.hero-photo .s img{animation:heroZoom 21s linear infinite both;transform-origin:50% 50%}
.hero-photo .s1{opacity:1;animation-name:heroFadeFirst}
.hero-photo .s2,.hero-photo .s2 img{animation-delay:7s}
.hero-photo .s3,.hero-photo .s3 img{animation-delay:14s}
@keyframes heroFadeFirst{0%{opacity:1}33%{opacity:1}40%{opacity:0}100%{opacity:0}}
@keyframes heroFade{0%{opacity:0}5%{opacity:1}33%{opacity:1}40%{opacity:0}100%{opacity:0}}
@keyframes heroZoom{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){
  .hero-photo .s,.hero-photo .s img{animation:none}
  .hero-photo .s2,.hero-photo .s3{display:none}
}

/* 写真のすぐ下の実務帯（電話受付・締め・休市日） */
.hero-facts{background:#fff;border-bottom:1px solid var(--line)}
.hero-facts dl{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;padding:14px clamp(16px,4vw,48px)}
.hero-facts div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.hero-facts dt{font-size:.76rem;font-weight:700;color:var(--main);letter-spacing:.06em;position:relative;padding-left:12px}
.hero-facts dt::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--accent);border-radius:50%}
.hero-facts dd{font-size:.95rem;font-weight:700}
.hero-facts dd small{font-size:.72rem;font-weight:500;color:var(--ink-soft)}

/* スマホ：見出しと社名は上・入口は下。ぼかしは上端と下端から薄く */
@media (max-width:800px){
  :root{--hero-min:520px}
  .hero-shade{background:
    linear-gradient(180deg,rgba(14,32,35,.28) 0%,rgba(14,32,35,.16) 20%,rgba(14,32,35,.04) 36%,rgba(14,32,35,0) 46%),
    linear-gradient(0deg,rgba(14,32,35,.30) 0%,rgba(14,32,35,.16) 18%,rgba(14,32,35,.04) 32%,rgba(14,32,35,0) 42%)}
  .hero-copy{inset:0;transform:none;max-width:none;padding:22px 18px 18px;display:flex;flex-direction:column}
  .hero-catch{font-size:1.75rem;line-height:1.5}
  .hero-name{margin-top:8px}
  .hero-name ruby{font-size:1.1rem}
  .hero-name .what{font-size:.8rem}
  .hero-doors{margin-top:auto;gap:12px;display:grid;grid-template-columns:1fr 1fr}
  .hero-door{font-size:.95rem}
  .hero-door small{font-size:.72rem}
  .hero-dots{display:none}
  .hero-facts dl{grid-template-columns:1fr 1fr;gap:4px 14px;padding:12px 16px}
  .hero-facts div:nth-child(3){grid-column:1 / -1}
  .hero-photo .s3 picture{transform:scale(1.22);transform-origin:100% 45%} /* スマホ③は右基準で少し寄せ、左端の作業員の袖を見出しの下から外す */
  .hero-photo .s2{transform:scale(1.3);transform-origin:0% 30%}
  .hero-photo .s2 picture{transform:scaleX(-1)} /* スマホ②は左右反転＝作業員の胴を右へ逃がし、左上の見出しにかけない（写真内に文字なし） */
}

/* ===== ③ 本文セクション ===== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec{padding:5rem clamp(16px,4vw,48px)}
.sec .inner{max-width:1080px;margin:0 auto}
.sec-head{margin-bottom:2.2rem;max-width:760px}
.sec-ttl{font-family:var(--mincho);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:.1em;line-height:1.5;color:var(--main);
  position:relative;padding-left:18px}
.sec-ttl::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:4px;background:var(--main);border-radius:2px}
.sec-lead{margin-top:.8rem;color:var(--ink-soft);font-size:.96rem}
.btn-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);color:#fff}
.btn-ig .ico{width:20px;height:20px}
.btn-line:hover{background:#05B34C;filter:none}

/* 最近の入荷（Instagramより）：投稿が自動で並ぶ欄の見本（静止格子） */
.sec-arrival{background:#fff;border-top:1px solid var(--line)}
.arrival-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.arrival-grid li{position:relative;overflow:hidden;border-radius:2px}
.arrival-grid img{width:100%;aspect-ratio:1/1;object-fit:cover}
.arrival-grid p{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 9px;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.06em;line-height:1.4;
  background:linear-gradient(to top,rgba(10,24,26,.62),rgba(10,24,26,0));text-shadow:0 1px 3px rgba(0,0,0,.4)}
.arrival-more{margin-top:1.6rem;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sec-ttl .ttl-sub{font-size:.62em;letter-spacing:.06em}
.sec-note{margin-top:.4rem;font-size:.82rem;color:var(--ink-soft)}

/* 扱う魚介 */
.fish-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.fish-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.fish-txt{padding-top:14px}
.fish-txt h3{font-family:var(--mincho);font-size:1.25rem;letter-spacing:.12em;color:var(--ink);line-height:1.4}
.season{display:flex;align-items:center;gap:8px;margin:.35rem 0 .45rem;font-weight:700;font-size:.9rem;color:var(--ink)}
.season span{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:1px 7px;line-height:1.6}
.fish-txt p:last-child{font-size:.9rem;color:var(--ink-soft);line-height:1.8}
.fish-note{margin-top:1.6rem;font-size:.82rem;color:var(--ink-soft)}
.kinds{list-style:none;margin-top:2.4rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kinds li{display:flex;align-items:center;gap:12px;padding:18px 14px}
.kinds li + li{border-left:1px solid var(--line)}
.kinds img{width:40px;height:40px;flex-shrink:0}
.kinds span{display:flex;flex-direction:column;font-size:.8rem;color:var(--ink-soft);line-height:1.5}
.kinds b{font-size:1rem;color:var(--main);letter-spacing:.08em}

/* 飲食店・宿の方へ */
.sec-trade{background:#e9eeec}
.trade-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:start}
.trade-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.terms{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.terms th,.terms td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.terms tr:last-child th,.terms tr:last-child td{border-bottom:0}
.terms th{width:11.5em;background:#f3f6f5;font-size:.9rem;font-weight:700;color:var(--main);letter-spacing:.06em;white-space:nowrap}
.terms th img{display:inline-block;vertical-align:-8px;margin-right:8px;width:28px;height:28px}
.terms td b{display:block;font-size:1.02rem;letter-spacing:.04em;line-height:1.6}
.terms td small{display:block;font-size:.8rem;color:var(--ink-soft);line-height:1.6;margin-top:2px}
.start{margin-top:3.2rem}
.start-ttl{display:flex;align-items:center;gap:10px;font-family:var(--mincho);font-size:1.25rem;letter-spacing:.1em;color:var(--main)}
.steps{list-style:none;margin-top:1.2rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:none}
.steps li{position:relative;background:#fff;border-radius:var(--radius);padding:18px 16px 16px;box-shadow:0 0 0 1px var(--line)}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:8px;height:8px;border-top:2px solid var(--main);border-right:2px solid var(--main);transform:translateY(-50%) rotate(45deg);z-index:1}
.steps .no{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--main);color:#fff;font-weight:700;font-size:.86rem;margin-bottom:8px}
.steps b{display:block;font-size:.98rem;letter-spacing:.04em;line-height:1.5}
.steps p{font-size:.84rem;color:var(--ink-soft);line-height:1.7;margin-top:4px}
.cta-row{margin-top:2.6rem;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  padding:20px 24px;background:var(--main);border-radius:var(--radius);color:#fff}
.cta-row > p{font-weight:700;letter-spacing:.06em}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-tel{background:#fff;color:var(--main);cursor:default}
.btn-tel .ico-w{width:22px;height:22px}
.btn-tel small{font-size:.74rem;font-weight:500;color:var(--ink-soft);margin-left:4px}

/* ご家庭・贈り物・イベント */
.sec-home{background:var(--paper)}
.home-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.home-grid > li > img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.home-grid h3{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mincho);font-size:1.15rem;letter-spacing:.1em;color:var(--main)}
.home-grid h3 img{width:26px;height:26px}
.home-grid p{margin-top:.3rem;font-size:.9rem;color:var(--ink-soft);line-height:1.8}
.home-cta{margin-top:2rem;text-align:center}

/* 会社案内・よくある質問 */
.sec-about{background:#fff;border-top:1px solid var(--line)}
.about-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center}
.about-photos{position:relative;padding-bottom:18%}
.about-photos .p1{width:88%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.about-photos .p2{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);border:6px solid #fff}
.about-msg{font-family:var(--mincho);font-weight:700;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.6;letter-spacing:.08em;color:var(--main);margin-bottom:1rem}
.about-txt > p:not(.about-msg){font-size:.95rem}
.company{margin-top:1.4rem;border-top:1px solid var(--line)}
.company div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:.9rem}
.company dt{font-weight:700;color:var(--main)}
.faq{margin-top:4rem;max-width:820px}
.faq-ttl{font-family:var(--mincho);font-size:1.25rem;letter-spacing:.1em;color:var(--main);margin-bottom:.8rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:16px 40px 16px 2.2em;font-weight:700;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:2px;top:16px;font-family:var(--mincho);color:var(--main);font-weight:700}
.faq summary::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:400;color:var(--main)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 10px 18px 2.2em;font-size:.92rem;color:var(--ink-soft)}

/* お問い合わせ */
.sec-contact{background:#e9eeec}
.contact-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.way{background:#fff;border-radius:var(--radius);padding:24px 24px 26px;box-shadow:0 0 0 1px var(--line)}
.way h3{font-family:var(--mincho);font-size:1.15rem;letter-spacing:.1em;color:var(--main);margin-bottom:.4rem}
.way p{font-size:.9rem;color:var(--ink-soft)}
.way .btn{margin-top:1rem}
.way-line{box-shadow:inset 0 3px 0 var(--line-green),0 0 0 1px var(--line)}
.tel-big{display:flex;align-items:center;gap:10px;margin:.4rem 0 .2rem}
.tel-big img{width:30px;height:30px}
.tel-big .tel-demo{font-size:1.7rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.contact-fic{margin-top:1.6rem;font-size:.84rem;color:var(--ink-soft);text-align:center}
.swap{margin-top:2.4rem;border-top:1px dashed #a9b6b4;padding-top:1.4rem}
.swap p{font-size:.88rem;color:var(--ink-soft);line-height:1.9}
.swap b{color:var(--main);margin-right:.4em}
.foot-name{font-weight:700;font-size:.9rem;letter-spacing:.1em}

@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(2)::after{display:none}
  .kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kinds li:nth-child(3){border-left:0}
  .kinds li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:800px){
  .sec{padding:3.5rem 16px}
  .sec-head{margin-bottom:1.6rem}
  .sec-ttl{font-size:1.4rem}
  .sec-ttl .ttl-sub{display:block;font-size:.66em;margin-left:-.4em}
  .sec-lead{font-size:.9rem}
  .arrival-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .arrival-grid p{font-size:.82rem;padding:22px 10px 8px}
  .fish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .fish-txt h3{font-size:1.08rem}
  .season{flex-wrap:wrap;gap:4px 6px;font-size:.84rem}
  .fish-txt p:last-child{font-size:.84rem;line-height:1.7}
  .kinds li{padding:14px 8px;gap:8px}
  .kinds img{width:32px;height:32px}
  .kinds b{font-size:.92rem}
  .kinds span{font-size:.74rem}
  .trade-wrap{grid-template-columns:1fr;gap:20px}
  .trade-photo img{aspect-ratio:3/2}
  .terms th,.terms td{padding:12px 12px}
  .terms th{width:auto;font-size:.82rem}
  .terms th img{width:22px;height:22px;vertical-align:-6px;margin-right:5px}
  .terms td b{font-size:.94rem}
  .steps{grid-template-columns:1fr;gap:10px}
  .steps li{display:grid;grid-template-columns:36px 1fr;column-gap:10px;padding:14px}
  .steps li::after{display:none}
  .steps .no{grid-row:span 2;margin:0}
  .steps p{grid-column:2}
  .cta-row{padding:18px 16px}
  .cta-btns{width:100%}
  .cta-btns .btn{flex:1 1 100%}
  .home-grid{grid-template-columns:1fr;gap:28px}
  .about-wrap{grid-template-columns:1fr;gap:24px}
  .contact-ways{grid-template-columns:1fr}
  .tel-big .tel-demo{font-size:1.45rem}
}

/* ===== ④ スタンダード（5ページ）版で足した部品（2026-10-01） ===== */
.gnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}

/* 下層ページの先頭（左に見出し・右に斜めに切った写真＝トップの分割型と同じ文法） */
.page-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:300px;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
.page-hero .ph-txt{display:flex;flex-direction:column;justify-content:center;padding:36px clamp(16px,4vw,56px)}
.page-hero .crumb{font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em}
.page-hero .crumb a{color:var(--ink-soft)}
.page-hero h1{font-family:var(--mincho);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:.1em;line-height:1.45;color:var(--main);margin-top:.5rem}
.page-hero .ph-lead{margin-top:.7rem;font-size:.95rem;color:var(--ink-soft);max-width:34em}
.page-hero .ph-photo{position:relative;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.page-hero .ph-photo img{width:100%;height:100%;object-fit:cover}

/* 「◯月◯日更新」の印（更新の仕掛け6つに付ける） */
.upd{display:inline-flex;align-items:center;gap:6px;margin-top:.6rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--main);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px 3px 8px;line-height:1.6}
.upd img{width:18px;height:18px}
.sec-head .upd{margin-top:.8rem}

/* お知らせ（トップの最新3件／魚介ページの一覧） */
.news-list{list-style:none;border-top:1px solid var(--line)}
.news-list li{display:grid;grid-template-columns:7.2em 6.4em 1fr;gap:6px 16px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line)}
.news-list time{font-size:.86rem;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.news-list .tag{display:inline-block;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:2px;
  color:var(--main);background:#e6eeec;line-height:1.7}
.news-list .tag.t-rest{color:#fff;background:var(--main)}
.news-list .tag.t-gift{color:var(--accent);background:#f6e7e3}
.news-list b{font-weight:700;letter-spacing:.03em}
.news-list p{grid-column:3;font-size:.88rem;color:var(--ink-soft);line-height:1.8}
.more-link{margin-top:1.2rem;text-align:right}
.more-link a{font-weight:700;color:var(--main);text-decoration:none;border-bottom:1px solid var(--main);padding-bottom:2px}

/* 今月の旬（トップ） */
.now-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.now-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.now-grid h3{margin-top:10px;font-family:var(--mincho);font-size:1.12rem;letter-spacing:.1em}
.now-grid p{font-size:.84rem;color:var(--ink-soft);line-height:1.7}

/* ページへの入口（案内カード＝下端の帯で押せる合図・design-rules §4.2） */
.guide-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.guide-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--radius);overflow:hidden;text-decoration:none;
  box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.guide-card:hover{transform:translateY(-3px)}
.guide-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.guide-card .g-body{padding:14px 16px 16px;flex:1}
.guide-card h3{font-family:var(--mincho);font-size:1.1rem;letter-spacing:.08em;color:var(--main)}
.guide-card p{margin-top:.3rem;font-size:.84rem;color:var(--ink-soft);line-height:1.7}
.guide-card .go{display:flex;align-items:center;justify-content:center;gap:8px;background:#e9eeec;border-top:1px solid var(--line);
  color:var(--main);font-weight:700;font-size:.86rem;padding:12px 10px}
.guide-card .go::after{content:'\25b6';font-size:.7rem}
.guide-card:hover .go{background:var(--main);color:#fff;border-top-color:var(--main)}

/* 旬の入荷カレンダー（表は枠の中だけ横に動かせる） */
.cal-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);background:#fff}
.cal{width:100%;min-width:760px;border-collapse:collapse;font-size:.86rem}
.cal th,.cal td{border-bottom:1px solid var(--line);padding:10px 6px;text-align:center}
.cal thead th{background:#f3f6f5;color:var(--main);font-weight:700;font-size:.8rem}
.cal tbody th{text-align:left;padding-left:14px;white-space:nowrap;font-weight:700;background:#fbfcfb;position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line)}
.cal tbody tr:last-child th,.cal tbody tr:last-child td{border-bottom:0}
.cal td.on::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--main)}
.cal td.peak::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.cal .now{background:#fdf3f0}
.cal-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:.9rem;font-size:.8rem;color:var(--ink-soft)}
.cal-legend span::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--main)}
.cal-legend span.lg-peak::before{background:var(--accent)}
.cal-legend span.lg-now::before{border-radius:2px;background:#fdf3f0;box-shadow:0 0 0 1px #e8c9c1}

/* 休市カレンダー */
.kyushi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.month{background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:18px 18px 14px}
.month h3{font-family:var(--mincho);font-size:1.15rem;letter-spacing:.1em;color:var(--main);margin-bottom:.6rem}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;list-style:none;text-align:center}
.days li{font-size:.9rem;font-weight:700;line-height:2.4;border-radius:3px}
.days li.dow{font-size:.72rem;color:var(--ink-soft);line-height:2}
.days li.off{background:var(--main);color:#fff}
.days li.tmp{background:var(--accent);color:#fff}
.days li.blank{visibility:hidden}
.kyushi-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:1rem;font-size:.84rem;color:var(--ink-soft)}
.kyushi-legend span::before{content:"";display:inline-block;width:13px;height:13px;border-radius:2px;margin-right:6px;vertical-align:-2px;background:var(--main)}
.kyushi-legend span.lg-tmp::before{background:var(--accent)}

/* 注文から配達までの時刻（横の流れ） */
.clock-flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.clock-flow li{padding:20px 18px;position:relative}
.clock-flow li + li{border-left:1px solid var(--line)}
.clock-flow .t{display:block;font-family:var(--mincho);font-size:1.5rem;font-weight:700;color:var(--main);letter-spacing:.04em;line-height:1.3}
.clock-flow .d{display:block;font-size:.74rem;font-weight:700;color:var(--accent);letter-spacing:.08em}
.clock-flow b{display:block;margin-top:.4rem;font-size:.96rem}
.clock-flow p{font-size:.84rem;color:var(--ink-soft);line-height:1.7;margin-top:.2rem}

/* 写真＋文の2段（下処理・配達・受け取りなど） */
.media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.media + .media{margin-top:3rem}
.media.rev .m-photo{order:2}
.media .m-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.media h3{display:flex;align-items:center;gap:10px;font-family:var(--mincho);font-size:1.3rem;letter-spacing:.08em;color:var(--main);line-height:1.5}
.media h3 img{width:32px;height:32px;flex-shrink:0}
.media p{margin-top:.6rem;font-size:.94rem}
.checks{list-style:none;margin-top:1rem;display:grid;gap:6px}
.checks li{position:relative;padding-left:1.5em;font-size:.9rem}
.checks li::before{content:"";position:absolute;left:.2em;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--main)}
.m-note{margin-top:.8rem;font-size:.8rem;color:var(--ink-soft)}

/* 配達の範囲（表） */
.area{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1.4rem}
.area li{background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:16px 16px 14px}
.area b{display:flex;align-items:center;gap:8px;color:var(--main);font-size:1rem;letter-spacing:.06em}
.area b img{width:26px;height:26px}
.area p{margin-top:.3rem;font-size:.86rem;color:var(--ink-soft);line-height:1.7}

/* 年末の贈答案内 */
.notice{background:#fff;border-radius:var(--radius);box-shadow:inset 0 4px 0 var(--accent),0 0 0 1px var(--line);padding:26px 26px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.notice .n-ttl{font-family:var(--mincho);font-size:1.35rem;letter-spacing:.08em;color:var(--main);line-height:1.5}
.notice .status{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--accent);border-radius:2px;padding:2px 10px;margin-bottom:.5rem}
.notice dl{margin-top:1rem;border-top:1px solid var(--line)}
.notice dl div{display:grid;grid-template-columns:6.5em 1fr;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:.9rem}
.notice dt{font-weight:700;color:var(--main)}
.notice img.n-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}

/* 市場の一日 */
.day{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.day img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.day .t{display:inline-block;margin-top:12px;font-family:var(--mincho);font-weight:700;font-size:1.25rem;color:var(--main);letter-spacing:.04em}
.day b{display:block;font-size:1rem;margin-top:.1rem}
.day p{font-size:.86rem;color:var(--ink-soft);line-height:1.75;margin-top:.2rem}

/* 採用（募集中／終了） */
.recruit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:start}
.recruit img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.r-status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;letter-spacing:.08em;border-radius:2px;padding:4px 12px}
.r-status.open{background:var(--accent);color:#fff}
.r-status.closed{background:#d9dedd;color:var(--ink-soft)}
.recruit h3{margin-top:.8rem;font-family:var(--mincho);font-size:1.3rem;letter-spacing:.08em;color:var(--main)}
.recruit .terms{margin-top:1rem}
.recruit .terms th{width:8.5em}

/* お問い合わせの見本の注記・フッターの全ページ案内 */
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:0 auto 1.2rem;max-width:900px;list-style:none}
.foot-nav a{color:#fff;text-decoration:none;font-size:.84rem;letter-spacing:.06em;padding:6px 0;display:inline-block;border-bottom:1px solid rgba(255,255,255,.35)}
.page-cta{margin-top:2.6rem}

@media (max-width:1100px){
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clock-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clock-flow li:nth-child(3){border-left:0}
  .clock-flow li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:800px){
  .page-hero{grid-template-columns:1fr;min-height:0}
  .page-hero .ph-photo{order:-1;height:180px;clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
  .page-hero .ph-txt{padding:10px 16px 24px}
  .page-hero h1{font-size:1.6rem}
  .page-hero .ph-lead{font-size:.88rem}
  .news-list li{grid-template-columns:auto 1fr;gap:4px 10px;padding:14px 2px}
  .news-list b,.news-list p{grid-column:1 / -1}
  .news-list .tag{justify-self:start}
  .now-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .now-grid h3{font-size:1.02rem}
  .guide-grid{grid-template-columns:1fr;gap:14px}
  .guide-card{display:grid;grid-template-columns:40% 1fr;grid-template-rows:1fr auto}
  .guide-card img{height:100%;aspect-ratio:auto;grid-row:1}
  .guide-card .g-body{padding:12px 14px}
  .guide-card .go{grid-column:1 / -1}
  .kyushi{grid-template-columns:1fr;gap:16px}
  .month{padding:14px 12px 10px}
  .clock-flow{grid-template-columns:1fr}
  .clock-flow li + li{border-left:0;border-top:1px solid var(--line)}
  .clock-flow li{display:grid;grid-template-columns:5.2em 1fr;column-gap:12px;padding:14px 14px}
  .clock-flow .d{grid-column:1;grid-row:1}
  .clock-flow .t{grid-column:1;grid-row:2 / span 2;font-size:1.25rem}
  .clock-flow b{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .clock-flow p{grid-column:2}
  .media{grid-template-columns:1fr;gap:16px}
  .media.rev .m-photo{order:0}
  .media h3{font-size:1.15rem}
  .area{grid-template-columns:1fr}
  .notice{grid-template-columns:1fr;padding:20px 16px;gap:16px}
  .notice .n-ttl{font-size:1.18rem}
  .day{grid-template-columns:1fr;gap:22px}
  .recruit{grid-template-columns:1fr;gap:18px}
  .recruit img{aspect-ratio:3/2}
  .recruit .terms th{width:auto}
  .foot-nav{gap:0 16px}
}

/* セクションの地色（同じ色が続かないように） */
.sec-news{background:#fff;border-top:1px solid var(--line)}
.sec-now,.sec-guide,.sec-day,.sec-order{background:var(--paper)}
.sec-cal,.sec-gift{background:#e9eeec}
.sec-kyushi,.sec-recruit{background:#fff;border-top:1px solid var(--line)}
.more-link{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.more-link .ml-ico{width:26px;height:26px}
.day .t{display:inline-flex;align-items:center;gap:8px}
.day .t img{width:30px;height:30px}
.recruit h3{display:flex;align-items:center;gap:10px}
.recruit h3 img{width:32px;height:32px}
.fn-ico{display:flex;align-items:center;gap:8px}
.fn-ico img{width:28px;height:28px;flex-shrink:0}
.cal-hint{display:none}
@media (max-width:800px){.cal-hint{display:block;margin-top:.6rem;font-size:.78rem;color:var(--ink-soft);text-align:center}}
.days li{position:relative}
.cal thead th:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line)}