@charset "utf-8";
/* =========================================================================
   合同会社バイくる 新サイト v2
   濃い緑の編集面に、明るい商材の図版面を置くコントラスト設計。
   装飾は金の細い罫のみ。1ページ2〜3画面に収める。
   ========================================================================= */

:root{
  /* 地 */
  --ink-green:#0f2e22;      /* 墨緑：主たる地色 */
  --deep-green:#1a4733;     /* 深緑：面の切り替え */
  --green-line:#25553f;
  /* 明るい面 */
  --paper:#f7f4ed;          /* 生成：商材画像の背景と同系 */
  --paper-2:#efe9dd;
  --paper-line:#ddd5c6;
  /* 文字 */
  --ink:#1c1f1b;            /* 明るい面の本文 */
  --ink-2:#4b514a;
  --mute:#8c9089;           /* 緑寄りのニュートラル */
  --on-green:#e7ece7;
  --on-green-2:#a9b8ac;
  /* 標 */
  --gold:#c9a25c;
  --gold-soft:#e0c795;

  --disp:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --body:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;

  --pad:clamp(20px,5vw,44px);
  --w:1160px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px;}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink-green);color:#fff;padding:14px 22px;font-weight:700;}
.skip:focus{left:0;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- 型 ---------- */
h1,h2,h3{text-wrap:balance;margin:0;font-family:var(--disp);font-weight:700;line-height:1.45;letter-spacing:.01em;}
p{margin:0;text-wrap:pretty;}

.eyebrow{
  font-family:var(--disp);font-size:11.5px;letter-spacing:.3em;
  color:var(--gold);margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:1;height:1px;max-width:72px;background:linear-gradient(90deg,var(--gold-soft),transparent);}

.h1{font-size:clamp(30px,5vw,54px);}
.h2{font-size:clamp(23px,3.3vw,36px);}
.h3{font-size:clamp(17px,1.9vw,20px);}
.lead{font-size:clamp(15px,1.6vw,17px);line-height:2;color:var(--ink-2);max-width:32em;}

.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad);}
.narrow{max-width:760px;margin-inline:auto;padding-inline:var(--pad);}

.band{padding-block:clamp(38px,5vw,68px);background:var(--paper);}
.band-2{background:var(--paper-2);}
.band-green{background:var(--ink-green);color:var(--on-green);}
.band-green .h1,.band-green .h2,.band-green .h3{color:#fff;}
.band-green .lead{color:var(--on-green-2);}
.band-green .eyebrow{color:var(--gold-soft);}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border:1px solid transparent;border-radius:1px;
  font-weight:700;font-size:15px;letter-spacing:.04em;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-solid{background:var(--ink-green);color:#fff;}
.btn-solid:hover{background:var(--deep-green);}
.btn-line{border-color:currentColor;}
.btn-line:hover{background:var(--ink-green);color:#fff;border-color:var(--ink-green);}
.band-green .btn-line:hover{background:#fff;color:var(--ink-green);border-color:#fff;}
.btn-paper{background:#fff;color:var(--ink-green);}

/* ---------- 電話 ---------- */
.tel{
  display:inline-flex;flex-direction:column;gap:1px;
  padding:16px 28px;background:#fff;border:1px solid var(--paper-line);
  transition:border-color .2s;
}
.tel:hover{border-color:var(--gold);}
.tel .k{font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:700;}
.tel .n{font-family:var(--disp);font-weight:700;font-size:clamp(27px,4vw,36px);line-height:1.2;color:var(--ink-green);letter-spacing:.02em;white-space:nowrap;}
.tel .t{font-size:12.5px;color:var(--mute);}
.band-green .tel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);}
.band-green .tel .n{color:#fff;}
.band-green .tel .t{color:var(--on-green-2);}

/* ---------- ヘッダー ---------- */
.lic{background:var(--ink-green);color:var(--gold-soft);font-size:11px;letter-spacing:.03em;text-align:center;padding:6px var(--pad);line-height:1.6;}
.lic b{color:#fff;}

.hdr{position:sticky;top:0;z-index:70;background:rgba(247,244,237,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--paper-line);}
.hdr-in{max-width:1260px;margin-inline:auto;padding:10px var(--pad);display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand .mark{width:36px;height:36px;flex:none;}
.brand b{font-family:var(--disp);font-size:18px;color:var(--ink-green);letter-spacing:.07em;white-space:nowrap;font-weight:700;}
.brand span{display:block;font-size:10px;letter-spacing:.18em;color:var(--gold);white-space:nowrap;}

.nav{display:flex;margin-left:auto;gap:2px;}
.nav a{position:relative;padding:8px 12px;font-size:14px;color:var(--ink);white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav a[aria-current="page"]{font-weight:700;color:var(--ink-green);}

.hdr-tel{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;padding:6px 14px;border:1px solid var(--paper-line);background:#fff;}
.hdr-tel .n{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink-green);white-space:nowrap;}
.hdr-tel .t{font-size:10px;color:var(--mute);white-space:nowrap;}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--paper-line);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;}
.burger span{width:19px;height:1.5px;background:var(--ink-green);transition:transform .25s,opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.navm{display:none;border-top:1px solid var(--paper-line);background:var(--paper);padding:6px var(--pad) 18px;}
.navm.open{display:block;}
.navm a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;font-size:16.5px;border-bottom:1px solid var(--paper-line);}
.navm a::after{content:"→";color:var(--gold);font-size:13px;}
.navm .btn{margin-top:16px;width:100%;}
.navm .btn::after{content:none;}

/* ---------- 下部固定バー ---------- */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink-green);padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));}
.dock a{display:flex;align-items:center;justify-content:center;gap:9px;background:#fff;color:var(--ink-green);padding:12px 8px;font-weight:700;font-size:14px;white-space:nowrap;line-height:1.3;}
.dock .n{font-family:var(--disp);font-size:17px;letter-spacing:.02em;}

/* ---------- ヒーロー ---------- */
.hero{background:var(--ink-green);color:var(--on-green);overflow:hidden;position:relative;}

/* ---------- 安心の4点 ---------- */
.assure{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));border-top:1px solid var(--green-line);}
.assure div{padding:22px 18px;text-align:center;border-right:1px solid var(--green-line);border-bottom:1px solid var(--green-line);}
.assure b{display:block;font-family:var(--disp);font-size:clamp(16px,2.1vw,19px);color:#fff;}
.assure span{display:block;font-size:12px;color:var(--on-green-2);margin-top:5px;}

.index-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.index-list button{
  border:1px solid var(--paper-line);background:#fff;padding:9px 15px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s;
}
.index-list button:hover{border-color:var(--gold);color:var(--ink-green);}
.index-list button[aria-selected="true"]{background:var(--ink-green);border-color:var(--ink-green);color:#fff;font-weight:700;}
.band-green .index-list button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:var(--on-green);}
.band-green .index-list button:hover{border-color:var(--gold);color:#fff;}
.band-green .index-list button[aria-selected="true"]{background:#fff;color:var(--ink-green);border-color:#fff;}

/* ---------- 一覧・箇条 ---------- */
.rows{display:grid;gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);}
.rows>div{background:var(--paper);padding:clamp(18px,2.4vw,26px);}
.rows h3{color:var(--ink-green);margin-bottom:7px;}
.rows p{font-size:14px;color:var(--ink-2);line-height:1.9;}
.band-green .rows{background:var(--green-line);border-color:var(--green-line);}
.band-green .rows>div{background:var(--ink-green);}
.band-green .rows p{color:var(--on-green-2);}
.rows .n{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:8px;}

.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr));}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;}
.chips li{font-size:13.5px;border:1px solid var(--paper-line);background:#fff;padding:7px 15px;color:var(--ink-2);}
.chips li.on{background:var(--ink-green);border-color:var(--ink-green);color:#fff;font-weight:700;}

.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--paper-line);}
.tbl th,.tbl td{text-align:left;padding:15px clamp(14px,2vw,22px);border-bottom:1px solid var(--paper-line);font-size:14.5px;line-height:1.85;vertical-align:top;}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0;}
.tbl th{width:clamp(96px,22%,170px);font-weight:700;color:var(--ink-green);background:var(--paper-2);font-size:13.5px;}
.tbl td{color:var(--ink-2);word-break:auto-phrase;}
.tbl a{color:var(--ink-green);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

.qa{border-bottom:1px solid var(--paper-line);}
.qa>summary{cursor:pointer;list-style:none;display:flex;gap:13px;align-items:flex-start;padding:17px 2px;font-weight:700;font-size:15.5px;color:var(--ink-green);}
.qa>summary::-webkit-details-marker{display:none;}
.qa .q{flex:none;font-family:var(--disp);color:#7a5c28;}
.qa .qt{flex:1;}
.qa .s{flex:none;width:14px;height:14px;position:relative;margin-top:6px;}
.qa .s::before,.qa .s::after{content:"";position:absolute;background:var(--mute);transition:transform .25s;}
.qa .s::before{left:0;right:0;top:6.5px;height:1.5px;}
.qa .s::after{top:0;bottom:0;left:6.5px;width:1.5px;}
.qa[open] .s::after{transform:scaleY(0);}
.qa-b{padding:0 2px 18px 29px;font-size:14px;line-height:1.95;color:var(--ink-2);}

.note{font-size:12px;color:var(--mute);line-height:1.8;margin-top:14px;}

/* ---------- 挨拶（キャラクターはここだけ） ---------- */
.greet{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.4vw,44px);align-items:end;}
.greet-fig{width:clamp(110px,15vw,172px);flex:none;}
.greet p{font-size:15.5px;line-height:2.05;color:var(--ink-2);margin-bottom:16px;}
.greet .sign{font-family:var(--disp);color:var(--ink-green);text-align:right;margin-top:20px;}
.greet .sign b{font-size:20px;letter-spacing:.06em;}

/* ---------- 連絡 ---------- */
.contact-in{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,48px);align-items:center;justify-content:space-between;}

/* ---------- フッター ---------- */
.ftr{background:var(--ink-green);color:var(--on-green-2);padding:clamp(36px,5vw,56px) 0 22px;font-size:13.5px;}
.ftr-g{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:30px;}
.ftr h2{font-family:var(--disp);font-size:13px;color:var(--gold-soft);letter-spacing:.12em;margin:0 0 11px;}
.ftr a:hover{color:#fff;}
.ftr-links a{display:block;padding:5px 0;}
.ftr dl{margin:0;line-height:1.8;}
.ftr dl>div{margin-bottom:8px;}
.ftr dt{font-size:11px;color:#8fa398;}
.ftr dd{margin:0;color:#dbe3dc;}
.ftr-legal{max-width:var(--w);margin:26px auto 0;padding:18px var(--pad) 0;border-top:1px solid var(--green-line);font-size:12px;line-height:1.85;color:#a3b5a8;}
.ftr-legal b{color:var(--gold-soft);}
.ftr-btm{max-width:var(--w);margin:14px auto 0;padding-inline:var(--pad);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;font-size:11.5px;color:#8fa398;}

/* ---------- 下層の導入 ---------- */
.phero{background:var(--ink-green);color:var(--on-green);padding-block:clamp(26px,3.4vw,44px);}
.phero .crumb{font-size:12px;color:var(--on-green-2);margin-bottom:12px;}
.phero .crumb a{text-decoration:underline;text-underline-offset:3px;}
.phero h1{color:#fff;}
.phero .lead{color:var(--on-green-2);margin-top:14px;}

/* ---------- レスポンシブ ---------- */
@media (max-width:1060px){
  .nav,.hdr-tel{display:none;}
  .burger{display:flex;}
  .greet{grid-template-columns:1fr;gap:18px;}
  .greet-fig{width:clamp(104px,26vw,150px);}
}
@media (max-width:760px){
  .dock{display:block;}
  body{padding-bottom:74px;}
}
@media (max-width:560px){
  body{font-size:16.5px;}
  .lic{font-size:10px;padding:5px 12px;}
  .hdr-in{padding:9px 14px;gap:10px;}
  .brand .mark{width:30px;height:30px;}
  .brand b{font-size:15.5px;}
  .brand span{font-size:9px;letter-spacing:.12em;}
  .h1{font-size:27px;}
  .h2{font-size:21px;}
    .tel{padding:14px 20px;}
}
@media (max-width:360px){
  .brand span{display:none;}
  .dock a{font-size:13px;}
  .dock .n{font-size:15.5px;}
  .h1{font-size:24px;}
  .h2{font-size:19px;}
  }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

@media print{
  .hdr,.dock,.burger,.navm,.skip{display:none !important;}
  body{background:#fff;padding-bottom:0;font-size:11pt;}
  .band-green,.hero,.ftr,.phero{background:#fff !important;color:#000 !important;}
}

/* =========================================================================
   改訂レイヤー 2026-09-28
   ・商材写真は約8:5の横長。枠も同じ比率にして、帯も見切れも出さない
   ・見出しと本文の折り返しを整え、画像右の空白をなくす
   ========================================================================= */

:root{
  --shot: 1586 / 992;      /* 納品画像の実比率。枠はこれに合わせる */
  --mute:#5f655d;
}

/* 金の小見出しは生成りの地でも読める濃度に */
.eyebrow,.guide-links span,.shot-no,.rows .n{color:#7a5c28;}
.hero .eyebrow,.phero .eyebrow,.band-green .eyebrow{color:var(--gold-soft);}
.brand>span>span{color:#7a5c28;}

/* ---------- 日本語の折り返し ---------- */
h1,h2,h3{word-break:auto-phrase;}
.lead,.note,.shot-note,.rows p,.guide-links p,.qa-b,.greet p{word-break:auto-phrase;}
.lead{max-width:38em;}
.phero .lead{max-width:42em;}

/* ---------- 版面：下層ページも上部と同じ左端にそろえる ---------- */
.narrow{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad);}
.narrow>*{max-width:820px;}
.narrow>.eyebrow{max-width:none;}

/* ---------- 冒頭 ---------- */
.gallery-intro{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,56px);align-items:end;padding-block:clamp(30px,3.6vw,44px) clamp(24px,3vw,34px);
}
.gallery-intro h1{font-size:clamp(32px,4.4vw,56px);line-height:1.42;letter-spacing:.045em;color:#fff;}
.gallery-intro h1 em{font-style:normal;color:var(--gold-soft);}
.gallery-story{justify-self:end;max-width:26em;padding-bottom:6px;}
.gallery-story .lead{font-size:15px;line-height:2;margin:0 0 20px;color:var(--on-green-2);}
.hero .btn-line{color:var(--on-green);border-color:rgba(255,255,255,.4);background:transparent;}

/* 取扱品目の帯：3枚とも同じ比率・同じ高さ。余白も切り落としも出ない */
.collection-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);
  max-width:1440px;margin:0 auto clamp(22px,2.6vw,30px);padding-inline:clamp(16px,2vw,24px);
}
.collection-strip figure{margin:0;min-width:0;}
.collection-strip img{
  display:block;width:100%;height:auto;aspect-ratio:var(--shot);
  object-fit:cover;background:var(--paper-2);
}
.collection-strip figcaption{
  display:flex;align-items:center;gap:14px;padding-top:10px;
  font-size:12px;letter-spacing:.12em;color:var(--gold-soft);white-space:nowrap;
}
.collection-strip figcaption span{font-size:10px;opacity:.7;}
.hero .assure{border-bottom:0;}
.hero .assure div{padding-block:16px;border-bottom:0;}

/* 見出しの右に「一覧へ」を置く */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;}
.sec-head>div{min-width:0;flex:1 1 30em;}
.sec-head .lead{margin-top:12px;}
.sec-head .btn{flex:none;}

/* ---------- 品目：写真は横長のまま、文字は写真の横に置く ---------- */
.picker{margin-top:clamp(22px,3vw,32px);}
.picker-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(18px,2.2vw,26px);}
.picker-tabs button,.index-list button{
  border:1px solid var(--paper-line);background:#fff;padding:9px 16px;border-radius:2px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s;
}
.picker-tabs button:hover{border-color:var(--gold);color:var(--ink-green);}
.picker-tabs button[aria-selected="true"]{background:var(--ink-green);border-color:var(--ink-green);color:#fff;font-weight:700;}

.shot{
  position:relative;margin:0;aspect-ratio:var(--shot);
  background:var(--paper-2);border:1px solid var(--paper-line);overflow:hidden;
}
.shot img{width:100%;height:100%;object-fit:cover;object-position:center;}

.shot-card{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(24px,3.4vw,46px);align-items:center;}
.shot-card[hidden]{display:none;}   /* display:grid が [hidden] を打ち消さないように */
.shot-text{align-self:center;}
.shot-no{
  font-family:var(--disp);font-size:11px;letter-spacing:.2em;
  padding-top:14px;border-top:1px solid var(--gold);display:inline-block;
}
.shot-text .h3{font-size:clamp(20px,2.3vw,26px);color:var(--ink-green);margin:8px 0 12px;}
.shot-note{font-size:14.5px;line-height:1.95;color:var(--ink-2);}

/* 全21品目の一覧 */
.shot-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,38px) clamp(18px,2.4vw,30px);
  list-style:none;margin:0;padding:0;
}
.shot-item .shot-no{padding-top:12px;margin-top:14px;}
.shot-item .h3{font-size:18px;color:var(--ink-green);margin:6px 0 7px;}
.shot-item .shot-note{font-size:13.5px;line-height:1.85;max-width:none;}

/* ---------- 導線カード ---------- */
.guide-links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px);margin-top:24px;}
.guide-links a{position:relative;display:block;border-top:1px solid var(--gold);padding:24px 36px 20px 0;}
.guide-links span{font-size:11px;letter-spacing:.14em;}
.guide-links h3{font-family:var(--disp);font-weight:600;font-size:24px;margin:12px 0;}
.guide-links p{font-size:14px;color:var(--ink-2);}
.guide-links b{position:absolute;right:0;top:36px;}
.guide-links a:hover h3{text-decoration:underline;text-underline-offset:6px;}

/* ---------- ご挨拶 ---------- */
.greet{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:end;}
.greet-fig{width:clamp(112px,13vw,160px);margin:0;flex:none;}
.greet-fig img{width:100%;height:auto;}
.greet p{font-size:15.5px;line-height:2.05;color:var(--ink-2);margin-bottom:16px;}
.greet .sign{font-family:var(--disp);color:var(--ink-green);text-align:right;margin:20px 0 0;}
.greet .sign b{font-size:20px;letter-spacing:.06em;}

/* ---------- お約束の開閉 ---------- */
.promise-disclosures{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,36px);}
.promise-disclosures details{border-top:1px solid var(--green-line);}
.promise-disclosures summary{cursor:pointer;padding:20px 26px 20px 0;font-size:17px;font-weight:600;list-style:none;position:relative;}
.promise-disclosures summary::-webkit-details-marker{display:none;}
.promise-disclosures summary::after{content:'+';position:absolute;right:0;top:20px;color:var(--gold-soft);}
.promise-disclosures details[open] summary::after{content:'−';}
.promise-disclosures summary span{display:block;font-size:10px;color:var(--gold-soft);letter-spacing:.1em;margin-bottom:6px;}
.promise-disclosures p{font-size:14px;color:var(--on-green-2);margin:0 0 20px;}

/* ---------- 左に見出し、右に中身。下層ページの版面をそろえる ---------- */
.split,.faq-cols{
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:start;
}
.split-body,.faq-list{min-width:0;}
.split-label .eyebrow{margin-bottom:10px;}
.split-label .h3{font-size:clamp(17px,1.9vw,20px);color:var(--ink-green);margin:0;}
.split-label .h2{margin:0;font-size:clamp(22px,2.5vw,29px);line-height:1.5;}
.band-green .split-label .h3{color:#fff;}

.faq-cols+.faq-cols{margin-top:clamp(30px,3.6vw,46px);}
.faq-cols>h2{font-size:clamp(18px,2vw,21px);color:#7a5c28;margin:0;padding-top:14px;}
.faq-list .qa:first-child{border-top:1px solid var(--paper-line);}

/* ---------- 表 ---------- */
.tbl{table-layout:fixed;}
.tbl th{width:25%;min-width:90px;}

/* ---------- 列組み ---------- */
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.cols-2,.cols-4{grid-template-columns:1fr;}}

/* ---------- 動きを控える（ボタン操作） ---------- */
.motion-control{font:inherit;background:transparent;color:inherit;border:0;border-bottom:1px solid currentColor;padding:0 0 2px;cursor:pointer;}
.motion-reduced{scroll-behavior:auto;}
.motion-reduced *,.motion-reduced *::before,.motion-reduced *::after{animation:none !important;transition:none !important;}

@media (prefers-reduced-motion:no-preference){
  .collection-strip{animation:collection-in .8s ease-out both;}
  @keyframes collection-in{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:none}}
}
.motion-reduced .collection-strip{animation:none;}

/* =========================================================================
   タブレット
   ========================================================================= */
@media (max-width:1040px){
  .shot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .gallery-intro{grid-template-columns:1fr;gap:20px;align-items:start;}
  .gallery-story{justify-self:start;max-width:34em;}
  .shot-card{grid-template-columns:1fr;gap:18px;}
  .shot-text{max-width:38em;}
  .shot-note{max-width:none;}
  .guide-links{grid-template-columns:1fr;gap:0;}
  .promise-disclosures{grid-template-columns:1fr;}
  .split,.faq-cols{grid-template-columns:1fr;gap:14px;}
  .faq-cols>h2{padding-top:0;}
  .split-label .h2 br{display:none;}
}

/* =========================================================================
   スマートフォン（760px以下）
   PC版と同じ書体・配色・金の罫を使い、配置・文字の大きさ・余白だけを
   手のひらの幅に組み直す。2026-09-28 改訂。
   ここより上の規則（PC・タブレット）は変更していない。
   ========================================================================= */

/* スマホ専用の要素はPC・タブレットでは出さない */
.hdr-call,.picker-more{display:none;}

@media (max-width:760px){
  :root{
    --pad:20px;
    /* 矢印は文字を使わず線で描く（機種依存の絵文字化を避ける） */
    --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5l9-9M5.5 3.5h7v7' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* ---------- 基本 ---------- */
  body{font-size:15px;line-height:1.9;font-weight:500;padding-bottom:0;}
  .dock{display:none;}
  a,button,summary{-webkit-tap-highlight-color:rgba(201,162,92,.22);}

  /* 文節で改行する（iPhone の Safari でも語の途中で折り返さない）。
     区切りは site.js がスマホ幅のときだけ入れ、入れ終えたら html に .wb を付ける */
  .wb :is(h1,h2,h3,summary,figcaption,th,td,dd,dt,.lead,.note,.shot-note,.eyebrow,.qa-b,.lic,.ftr-legal,.tel,.assure,.chips li,.rows p,.guide-links p,.promise-disclosures p,.ftr-g p,.contact-in p){
    word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
  }

  .h1,.phero h1{font-size:clamp(24px,7.2vw,28px);line-height:1.45;letter-spacing:.03em;}
  .h2{font-size:clamp(21px,6.1vw,24px);line-height:1.55;letter-spacing:.03em;}
  .h3{font-size:18px;}
  .lead{font-size:14.5px;line-height:1.95;max-width:none;}
  .eyebrow{font-size:11px;letter-spacing:.24em;margin-bottom:12px;}
  .note{font-size:11.5px;line-height:1.8;}
  .band{padding-block:40px;}
  .band-green+.band-green,.band-green+.ftr,main:has(>.band-green:last-child)+.band-green{padding-top:0;}
  .band-green+.band-green>.wrap,.band-green+.ftr>.ftr-g,main:has(>.band-green:last-child)+.band-green>.wrap{
    padding-top:34px;
    background:linear-gradient(var(--green-line),var(--green-line)) top center/calc(100% - 2 * var(--pad)) 1px no-repeat;
  }

  /* ---------- 線の矢印 ---------- */
  .btn>span[aria-hidden="true"],.guide-links b{
    display:inline-block;flex:none;width:15px;height:15px;font-size:0;line-height:0;
    background:currentColor;
    -webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat;
  }
  .picker-more .btn>span[aria-hidden="true"]{-webkit-mask-image:var(--arrow);mask-image:var(--arrow);}

  /* ---------- 帯・ヘッダー ---------- */
  .lic{font-size:10.5px;letter-spacing:.02em;line-height:1.55;padding:6px var(--pad);}
  .hdr-in{padding:10px var(--pad);gap:10px;}
  .brand{gap:10px;min-width:0;}
  .brand .mark{width:32px;height:32px;}
  .brand>span{display:block;font-size:inherit;letter-spacing:0;}
  .brand b{font-size:16.5px;letter-spacing:.06em;}
  .brand>span>span{font-size:10px;letter-spacing:.14em;margin-top:1px;}
  .hdr-call{
    display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
    min-width:58px;height:44px;padding:0 12px;flex:none;
    background:#fff;border:1px solid var(--paper-line);
    font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--ink-green);
  }
  .hdr-call:active{border-color:var(--gold);}
  .burger{margin-left:0;}

  .navm{padding:4px var(--pad) 22px;}
  .navm a{padding:15px 2px;font-size:16px;font-weight:500;}
  .navm a::after{
    content:"";width:16px;height:16px;background:var(--gold);
    -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  }
  .navm .btn{margin-top:20px;min-height:52px;font-size:15px;justify-content:center;}

  /* ---------- トップの冒頭 ---------- */
  .gallery-intro{padding-block:28px 24px;gap:20px;}
  .hero .eyebrow{margin-bottom:14px;}
  .gallery-intro h1{font-size:clamp(27px,8.1vw,33px);line-height:1.5;letter-spacing:.04em;}
  .gallery-story{max-width:none;padding:0;}
  .gallery-story .lead{font-size:14.5px;line-height:2;margin:0 0 22px;}
  .hero .btn-line{min-height:48px;padding:12px 20px;font-size:14px;gap:12px;}

  /* 冒頭の写真は横に送って見る。1枚を大きく、次の写真を少しのぞかせる */
  .collection-strip{
    display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    padding-inline:var(--pad);margin:0 0 22px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .collection-strip::-webkit-scrollbar{display:none;}
  .collection-strip::after{content:"";flex:0 0 10px;}
  .collection-strip figure{flex:0 0 84%;scroll-snap-align:start;}
  .collection-strip figcaption{font-size:12px;letter-spacing:.1em;gap:10px;padding-top:10px;}

  /* 安心の4点：PCと同じ罫で2列×2段 */
  .hero .assure{grid-template-columns:1fr 1fr;border-top:1px solid var(--green-line);}
  .hero .assure div{padding:16px 6px 18px;border:0;text-align:center;}
  .hero .assure div:nth-child(odd){border-right:1px solid var(--green-line);}
  .hero .assure div:nth-child(n+3){border-top:1px solid var(--green-line);}
  .assure b{font-size:15.5px;letter-spacing:.04em;}
  .assure span{font-size:11.5px;line-height:1.6;margin-top:4px;}

  /* ---------- 買取品目（トップ） ---------- */
  .sec-head{gap:0;}
  .sec-head .lead{margin-top:12px;}
  .sec-head .btn{display:none;}
  .picker{margin-top:22px;}
  .picker-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:20px;}
  .picker-tabs button{min-height:44px;padding:9px 8px;font-size:13.5px;font-weight:500;white-space:normal;line-height:1.4;}
  .picker-tabs button[aria-selected="true"]{font-weight:700;}
  .picker .shot{margin-inline:calc(-1 * var(--pad));border-left:0;border-right:0;}
  .shot-card{gap:18px;}
  .shot-no{font-size:10.5px;padding-top:12px;}
  .shot-text .h3{font-size:21px;margin:8px 0;letter-spacing:.04em;}
  .shot-note{font-size:14px;line-height:1.9;}
  .picker .note{margin-top:20px;}
  .picker-more{display:block;margin:22px 0 0;}
  .picker-more .btn{width:100%;min-height:52px;justify-content:space-between;padding:14px 20px;}

  /* ---------- 案内 ---------- */
  .guide-links{margin-top:18px;}
  .guide-links a{padding:18px 40px 20px 0;}
  .guide-links span{font-size:10.5px;}
  .guide-links h3{font-size:20px;margin:8px 0 6px;}
  .guide-links p{font-size:13.5px;line-height:1.8;}
  .guide-links b{top:26px;right:2px;width:16px;height:16px;color:var(--ink-green);}

  /* ---------- ご相談（濃緑） ---------- */
  .contact-in{display:grid;gap:22px;}
  .contact-in .h2{font-size:clamp(21px,6.1vw,24px);}
  .contact-in .lead{font-size:14px;margin-top:10px !important;}
  .tel{display:flex;width:100%;padding:18px 20px 16px;}
  .tel .k{font-size:11px;letter-spacing:.18em;}
  .tel .n{font-size:clamp(27px,8.2vw,32px);}
  .tel .t{font-size:12.5px;}
  .band-green .tel:active{background:rgba(255,255,255,.1);}

  /* ---------- フッター（濃緑） ---------- */
  .ftr{padding:38px 0 calc(22px + env(safe-area-inset-bottom,0px));font-size:13px;}
  .ftr-g{gap:26px;}
  .ftr h2{font-size:12.5px;margin-bottom:8px;}
  .ftr-links{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;}
  .ftr-links a{padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--green-line);}
  .ftr dl>div{margin-bottom:10px;}
  .ftr-legal{margin-top:26px;font-size:11.5px;line-height:1.8;}
  .ftr-btm{margin-top:14px;gap:8px 16px;font-size:11px;}
  .motion-control{padding:8px 0 4px;}

  /* ---------- 下層ページの見出し（濃緑） ---------- */
  .phero{padding-block:26px 32px;}
  .phero .crumb{font-size:11.5px;margin-bottom:12px;}
  .phero .crumb a{display:inline-block;padding:6px 0;margin-block:-6px;}
  .phero .eyebrow{margin-bottom:10px;}
  .phero .lead{font-size:14px;margin-top:12px;}

  /* ---------- 全21品目 ---------- */
  .shot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;}
  .shot-item .shot-no{font-size:10px;padding-top:8px;margin-top:10px;}
  .shot-item .h3{font-size:15.5px;line-height:1.45;margin:3px 0 4px;letter-spacing:.02em;}
  .shot-item .shot-note{font-size:12.5px;line-height:1.7;}

  /* ---------- 左見出し組版は縦に積む ---------- */
  .split{gap:16px;}
  .split-label .h2{font-size:clamp(21px,6.1vw,24px);}
  .split-label .h3{font-size:18px;}

  .chips{gap:6px;}
  .chips li{font-size:13px;padding:8px 13px;}

  .rows>div{padding:18px;}
  .rows h3{font-size:18px;margin-bottom:6px;}
  .rows p{font-size:14px;line-height:1.85;}
  .rows .n{font-size:10.5px;margin-bottom:6px;}

  .tbl th{width:100px;padding:14px 10px 14px 12px;font-size:12.5px;}
  .tbl td{padding:14px;font-size:13.5px;line-height:1.8;}

  /* ---------- よくあるご質問 ---------- */
  .faq-cols+.faq-cols{margin-top:34px;}
  .faq-cols>h2{font-size:17px;}
  .qa>summary{padding:16px 2px;font-size:15px;gap:12px;}
  .qa .s{margin-top:7px;}
  .qa-b{font-size:14px;line-height:1.9;padding:0 2px 18px 27px;}

  /* ---------- お約束（濃緑）：＋−も線で描く ---------- */
  .promise-disclosures summary{font-size:15.5px;padding:16px 30px 16px 0;}
  .promise-disclosures summary::after{
    content:"";top:24px;right:2px;width:13px;height:13px;
    background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  }
  .promise-disclosures details[open] summary::after{
    content:"";background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat;
  }
  .promise-disclosures p{font-size:14px;margin:0 0 18px;}

  /* ---------- ご挨拶 ---------- */
  .greet{grid-template-columns:1fr;gap:16px;}
  .greet-fig{width:104px;}
  .greet p{font-size:14.5px;line-height:2;}
  .greet .sign{margin-top:14px;}
  .greet .sign b{font-size:19px;}

  /* 本文中の主要ボタンは指で押しやすい幅に */
  .band .btn-solid{width:100%;min-height:52px;}
}

@media (max-width:360px){
  :root{--pad:16px;}
  .brand>span>span{display:none;}
  .brand b{font-size:15.5px;}
  .hdr-call{min-width:52px;padding:0 10px;}
  .collection-strip figure{flex-basis:86%;}
  .shot-grid{gap:24px 10px;}
  .shot-item .h3{font-size:14.5px;}
  .shot-item .shot-note{font-size:12px;}
}

/* Final mobile pass: preserve complete photo edges and compact spacing. */
@media (max-width:760px){
  .shot{border:0;aspect-ratio:auto;box-shadow:0 0 0 1px var(--paper-line);}
  .shot img{display:block;height:auto;object-fit:contain;}
  .collection-strip img{aspect-ratio:auto;}
  .gallery-intro{padding-block:22px 20px;gap:14px;}
  .gallery-story .lead{margin-bottom:16px;}
  .hero .assure div{padding-block:12px 14px;}
  .band{padding-block:32px;}
  .band-green+.band-green,.band-green+.ftr,main:has(>.band-green:last-child)+.band-green{padding-top:0;}
  .guide-links a{padding-block:14px 16px;}
  .contact-in{gap:18px;}
  .ftr-g{gap:22px;}
  .ftr{line-height:1.8;}
  .ftr-legal{margin-top:22px;}
}