/* FUSION様サイト サンプル用スタイル
   値の出どころ：現行サイト(fusion-2024.jp)のCSSを数えた実測
   文字 #1f2937(17回) / 緑 #059669(22回)・#10b981(41回) / 淡い緑 #f0fdf4(10回) / 罫線 #e5e7eb(7回) / 見出し書体 Shippori Mincho
   緑の上の白文字は #059669 だとコントラスト比3.8:1で足りないため、文字・ボタンには一段濃い #047857 を使う */
:root {
  --ink: #1f2937;
  --sub: #4b5563;
  --line: #e5e7eb;
  --paper: #ffffff;
  --tint: #f0fdf4;
  --green: #047857;
  --green-mark: #059669;
  --hole: #f3f4f6;
  --r: 2px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 80px;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 700; line-height: 1.5; margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--s2); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s3); }

/* サンプル帯 */
.sample-bar { background: var(--ink); color: #fff; font-size: 0.8125rem; line-height: 1.6; padding: var(--s1) 0; }
.sample-bar .wrap { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: space-between; }
.sample-bar a { color: #fff; }

/* ヘッダー */
.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 72px; flex-wrap: wrap; padding-top: var(--s1); padding-bottom: var(--s1); }
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; }
.brand img { height: 36px; width: auto; }
.nav { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; font-size: 0.9375rem; }
.nav a { color: var(--ink); text-decoration: none; padding: var(--s1) 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--green); }
.nav .recruit { color: var(--sub); border-left: 1px solid var(--line); padding-left: var(--s3); font-size: 0.875rem; }
.head-tel { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }

/* ボタン */
.btn { display: inline-block; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.4; padding: 14px var(--s3); border-radius: var(--r); text-decoration: none; border: 1px solid var(--green); min-height: 48px; }
.btn-main { background: var(--green); color: #fff; }
.btn-sub { background: var(--paper); color: var(--green); }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cta-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ヒーロー */
.hero { padding: var(--s6) 0 var(--s5); }
.hero .wrap { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s5); align-items: center; }
.hero h1 { margin-bottom: var(--s3); }
.hero .lead { color: var(--sub); max-width: 34em; }
.hero .photo { border: 1px solid var(--line); }
.hero .photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.facts { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.facts li { padding: var(--s2) var(--s3) var(--s2) 0; font-size: 0.9375rem; }
.facts li + li { padding-left: var(--s3); border-left: 1px solid var(--line); }
.facts b { display: block; font-family: "Shippori Mincho", serif; font-size: 1.0625rem; white-space: nowrap; }

/* セクション */
.sec { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.sec.tint { background: var(--tint); }
.sec-head { max-width: 40em; margin-bottom: var(--s4); }
.sec-head p { color: var(--sub); margin: var(--s1) 0 0; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.cols-2.wide-left { grid-template-columns: 1.3fr 0.7fr; }

/* 品目・状況のリスト（カードにしない） */
.dl-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.dl-rows li { display: grid; grid-template-columns: 11em 1fr auto; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dl-rows .k { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 1.0625rem; }
.dl-rows .v { color: var(--sub); font-size: 0.9375rem; }
.dl-rows a.go { font-size: 0.875rem; white-space: nowrap; }
.dl-rows li.compact { grid-template-columns: 11em 1fr; }

/* 流れ */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: f; }
.flow li { border-top: 3px solid var(--green-mark); padding-top: var(--s2); }
.flow strong { display: block; font-family: "Shippori Mincho", serif; font-size: 1.125rem; margin-bottom: var(--s1); }
.flow p { color: var(--sub); font-size: 0.9375rem; margin: 0; }

/* 表 */
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: 14px var(--s2); border-bottom: 1px solid var(--line); }
thead th { border-bottom: 1px solid var(--ink); font-weight: 700; background: var(--paper); }
tbody th { width: 11em; font-weight: 700; color: var(--ink); background: var(--tint); }

/* 穴（仮・確認中） */
.hole { background: var(--hole); border-bottom: 1px dashed var(--sub); padding: 1px 6px; color: var(--ink); font-size: 0.9em; }
.note { border-left: 0; border: 1px solid var(--line); background: var(--hole); padding: var(--s2) var(--s3); font-size: 0.875rem; color: var(--sub); }
.note b { color: var(--ink); }
.ph { display: grid; place-items: center; text-align: left; min-height: 150px; border: 1px dashed var(--sub); background: var(--hole); color: var(--sub); font-size: 0.875rem; padding: var(--s3); }

.crumb { font-size: 0.8125rem; color: var(--sub); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.crumb a { color: var(--sub); }
.crumb span { margin: 0 6px; }

.page-title { padding: var(--s5) 0 var(--s4); }
.page-title .eyebrow { font-size: 0.875rem; color: var(--green); font-weight: 700; margin-bottom: var(--s1); }
.page-title h1 { max-width: 22em; }
.page-title .lead { color: var(--sub); max-width: 38em; margin-top: var(--s2); }

.side-cta { border: 1px solid var(--ink); padding: var(--s3); position: sticky; top: var(--s3); }
.side-cta h3 { margin-bottom: var(--s1); }
.side-cta .tel { display: block; font-family: "Shippori Mincho", serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none; margin: var(--s1) 0 var(--s2); }
.side-cta .btn { display: block; text-align: left; margin-top: var(--s1); }

details { border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
details:first-of-type { border-top: 1px solid var(--ink); }
summary { cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "Q  "; color: var(--green); font-family: "Shippori Mincho", serif; }
details p { margin: var(--s1) 0 0; color: var(--sub); font-size: 0.9375rem; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.related .item { border-top: 1px solid var(--ink); padding-top: var(--s2); font-size: 0.9375rem; }
.related .item .t { font-family: "Shippori Mincho", serif; font-weight: 700; display: block; margin-bottom: 4px; }

footer { background: var(--ink); color: #d1d5db; padding: var(--s5) 0 var(--s4); font-size: 0.875rem; }
footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s5); }
footer a { color: #d1d5db; }
footer h3 { color: #fff; font-size: 1rem; margin-bottom: var(--s1); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px var(--s3); }
footer .copy { grid-column: 1 / -1; border-top: 1px solid #374151; padding-top: var(--s2); color: #9ca3af; }

@media (max-width: 860px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  .site-head .wrap { gap: var(--s1); min-height: 0; }
  .nav { gap: 2px var(--s2); font-size: 0.875rem; }
  .nav a { padding: 6px 0; }
  .sample-bar { font-size: 0.75rem; }
  .hero { padding: var(--s4) 0; }
  .hero .wrap, .cols-2, .cols-2.wide-left, footer .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .hero .photo img { aspect-ratio: 16 / 10; }
  .facts { grid-template-columns: 1fr; }
  .facts li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .flow, .related { grid-template-columns: 1fr; }
  .dl-rows li, .dl-rows li.compact { grid-template-columns: 1fr; gap: 4px; }
  .sec { padding: var(--s5) 0; }
  .side-cta { position: static; }
  .nav { gap: var(--s2); }
  .nav .recruit { border-left: 0; padding-left: 0; }
  tbody th { width: 7em; }
  th, td { padding: 12px 10px; }
}

/* 写真枠（あとで実写を入れる場所。何を撮るかを書く） */
.slot { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 3 / 2; border: 1px dashed var(--sub); background: var(--hole); color: var(--sub); font-size: 0.875rem; padding: var(--s3); line-height: 1.6; }
.slot b { color: var(--ink); font-size: 0.8125rem; }
.slot.tall { aspect-ratio: 4 / 5; }
.slot.wide { aspect-ratio: 16 / 9; }
@media (max-width: 860px) { .slot.tall { aspect-ratio: 16 / 10; } }

.hero .eyebrow { font-size: 0.9375rem; font-weight: 700; color: var(--green); margin: 0 0 var(--s1); }
.hero .steps { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: var(--s3) 0 0; font-size: 0.9375rem; font-weight: 700; counter-reset: st; }
.hero .steps li { counter-increment: st; padding-right: var(--s3); margin-right: var(--s3); border-right: 1px solid var(--line); }
.hero .steps li::before { content: counter(st) "　"; color: var(--green); font-family: "Shippori Mincho", serif; }
.hero .steps li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
@media (max-width: 860px) { .hero .steps { font-size: 0.8125rem; } .hero .steps li { padding-right: 12px; margin-right: 12px; } }

/* 仮の印（コピー・写真が仮であることを画面上で示す。この色は「仮」にだけ使う） */
.kari { display: inline-block; background: #fef3c7; color: #78350f; border: 1px solid #d97706; font: 700 0.75rem/1.5 "Noto Sans JP", sans-serif; letter-spacing: 0.04em; padding: 0 8px; border-radius: 2px; vertical-align: middle; white-space: nowrap; margin-right: 4px; }
h1 .kari { display: block; width: max-content; font-size: 0.8125rem; margin: 12px 0 0; }
.slot, .ph { background: #fffbeb; border-color: #d97706; }
.slot b, .ph .kari { margin-bottom: 4px; }
.ph .kari { display: block; width: max-content; margin: 0 0 8px; }
.sample-bar .kari { background: #fef3c7; margin: 0 2px; }

.kari-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); background: #1f2937; color: #fff; font: 400 0.875rem/1.6 "Noto Sans JP", sans-serif; padding: 12px 20px; border-radius: 2px; z-index: 50; }
.kari-toast[hidden] { display: none; }

.sns-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:24px}
.sns-item{min-width:0;display:flex;justify-content:center}

/* 現行サイト(fusion-2024.jp)のトンマナに寄せる（10/21 中野様「現行サイトとイメージをもう少し合わせたい」）
   現行CSSの実測：角丸 1rem(13回)・ピル型 9999px(13回)・緑グラデーション #10b981→#059669(12回)・影 0 12px 24px rgba(16,185,129,.15)(4回)
   セクションの地は 白 / #f9fafb / #f0fdf4 を交互、セクション見出しは中央の明朝。ここは先方の既存ブランドの値なので採用する */
:root { --card-r: 1rem; --shadow: 0 12px 24px rgba(16, 185, 129, 0.15); --soft: 0 4px 12px rgba(0, 0, 0, 0.08); --grad: linear-gradient(135deg, #059669 0%, #047857 100%); }
.site-head { position: sticky; top: 0; z-index: 5; border-bottom: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.btn { border-radius: 9999px; padding: 14px 32px; text-align: center; transition: box-shadow .2s, background .2s; }
.btn-main { background: var(--grad); border-color: transparent; box-shadow: var(--shadow); }
.btn-sub { border-color: var(--green-mark); }
.btn:hover { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--shadow); }
.btn-sub:hover { background: var(--tint); color: var(--green); border-color: var(--green-mark); box-shadow: none; }
.nav .recruit { background: var(--grad); color: #fff; border-left: 0; border-radius: 9999px; padding: 8px 20px; font-weight: 700; box-shadow: var(--shadow); }
.nav a.recruit:hover { border-bottom-color: transparent; }
.hero { background: linear-gradient(180deg, var(--tint) 0%, #fff 100%); }
.sec { border-top: 0; background: #fff; }
.sec:nth-of-type(even) { background: #f9fafb; }
.sec.tint { background: var(--tint); }
.sec-head { max-width: 44em; margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: 1.875rem; }
.sec-head p { margin-top: var(--s2); }
.dl-rows { border-top: 0; display: grid; gap: var(--s2); }
.dl-rows li, .dl-rows li.compact { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--s3); box-shadow: var(--soft); }
.flow li { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--green-mark); border-radius: var(--card-r); padding: var(--s3); box-shadow: var(--soft); }
.related .item { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--s3); box-shadow: var(--soft); }
.side-cta { border-color: var(--line); border-radius: var(--card-r); box-shadow: var(--shadow); }
details { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--s2) var(--s3); margin-bottom: var(--s1); }
details:first-of-type { border-top: 1px solid var(--line); }
.slot, .ph, .note, .hero .photo { border-radius: var(--card-r); }
.facts { border-top: 0; gap: var(--s2); }
.facts li, .facts li + li { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--s2) var(--s3); box-shadow: var(--soft); }
.kari { border-radius: 9999px; }
@media (max-width: 860px) { .nav .recruit { padding: 6px 16px; } .sec-head h2 { font-size: 1.375rem; } }
.cols-2 .sec-head, .page-title .sec-head { text-align: left; margin-left: 0; }
@media (max-width: 860px) { .site-head { position: static; } }