@charset "utf-8";
/* 湾うち水産（架空）スポット版 ＝ 最初の画面 案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}
}