@charset "utf-8";
/* ============================================================
   有限会社木音工房（架空）／業種サンプルHP「木工・家具」
   絵コンテC案「木目が地になる」 ／ KIGAKU Web Design 制作・2026-09-08
   署名(9): 地が濃い板と淡い板で割れ、その境目で椅子と見出しの色が反転する。
   やらないこと(10): 影 0 / 角丸 0 / グラデーション 0 / keyframes 0 /
   差し色 0 / 英語スローガン 0 / 写真 0 / 外部ライブラリ 0
   ============================================================ */

/* ---------- 書体（SIL OFL 1.1・セルフホスト・外部読込なし） ---------- */
@font-face{
  font-family:"KG Serif JP";
  src:url("fonts/notoserifjp-subset.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"KG Sans JP";
  src:url("fonts/notosansjp-subset.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- 変数 ---------- */
:root{
  /* 濃い板（L30%前後）。面ベタのみ。彩度上限 C=0.060 */
  --w1:#3a2a1c; --w2:#43311f; --w3:#332318; --w4:#4a3623; --w5:#3d2c1e; --w6:#2f2116;
  /* 淡い板（L90%前後） */
  --m1:#e8dcc6; --m2:#e1d3b8; --m3:#efe5d4; --m4:#dccdae; --m5:#ebe0cb; --m6:#e5d8bf; --m7:#f1e8d9;

  --walnut:#3a2a1c;      /* 濃い側の主役 oklch 30.0% */
  --walnut-mid:#6b4a2f;
  --maple:#e8dcc6;       /* 淡い側の主役 oklch 89.8% */
  --maple-mid:#d6c3a1;
  --paper:#f4efe6;
  --cream:#faf7f1;
  --ink:#2a1e12;

  --split:46%;           /* 境目の位置。ページごとに上書き */
  --wrap:1200px;
  --read:720px;
  --pad:90px;
  --lift:-7px;

  /* 木肌の細かなざらつき（画像ファイル不要・面ベタを壊さない程度） */
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 土台 ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:"KG Sans JP",system-ui,sans-serif;
  font-size:16px; line-height:1.8; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
ul,ol{list-style:none;}
h1,h2,h3,h4{
  font-family:"KG Serif JP",serif;
  font-weight:600; line-height:1.5; letter-spacing:.1em;
  word-break:keep-all;              /* 語中改行を止める。任意位置での折返し指定とは併用しない */
}
.skip{position:absolute;left:-9999px;top:0;}
.skip:focus{left:0;z-index:99;background:var(--walnut);color:var(--cream);padding:10px 18px;}

/* ---------- 板の地（署名の土台・すべて面ベタ） ---------- */
.planks{position:absolute;inset:0;display:flex;z-index:0;}
.planks>b{display:flex;height:100%;}
.planks__d{width:var(--split);}
.planks__l{flex:1;}
.planks i{display:block;height:100%;}
.planks__d i:nth-child(1){flex:5;background:var(--w1);}
.planks__d i:nth-child(2){flex:4;background:var(--w2);}
.planks__d i:nth-child(3){flex:6;background:var(--w3);}
.planks__d i:nth-child(4){flex:4;background:var(--w4);}
.planks__d i:nth-child(5){flex:5;background:var(--w5);}
.planks__d i:nth-child(6){flex:3;background:var(--w6);}
.planks__l i:nth-child(1){flex:4;background:var(--m1);}
.planks__l i:nth-child(2){flex:6;background:var(--m2);}
.planks__l i:nth-child(3){flex:4;background:var(--m3);}
.planks__l i:nth-child(4){flex:5;background:var(--m4);}
.planks__l i:nth-child(5){flex:3;background:var(--m5);}
.planks__l i:nth-child(6){flex:5;background:var(--m6);}
.planks__l i:nth-child(7){flex:4;background:var(--m7);}
.planks::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);background-size:160px 160px;
  opacity:.07;mix-blend-mode:overlay;pointer-events:none;
}

/* 章区切りの短い割線（境目を小さく繰り返す） */
.seam{display:flex;width:96px;height:5px;margin-bottom:26px;}
.seam i{display:block;}
.seam i:first-child{width:46%;background:var(--walnut);}
.seam i:last-child{flex:1;background:var(--maple-mid);}
.seam--on-dark i:last-child{background:var(--maple);}
.seam--on-dark i:first-child{background:var(--walnut-mid);}

/* ---------- ヘッダー（境目がそのまま帯を割る） ---------- */
.head{position:sticky;top:0;z-index:20;}
.head::before,.head::after{content:"";position:absolute;top:0;bottom:0;}
.head::before{left:0;width:var(--split);background:var(--walnut);}
.head::after{left:var(--split);right:0;background:var(--maple);}
.head__in{
  position:relative;z-index:2;height:78px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;
}
.head__name{font-size:14px;letter-spacing:.3em;color:var(--cream);white-space:nowrap;}
.head nav ul{display:flex;gap:38px;}
.head nav a{
  color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.14em;
  white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .2s linear;
}
.head nav a:hover,.head nav a[aria-current="page"]{border-bottom-color:var(--ink);}

/* ---------- 第一画面（トップ） ---------- */
.hero{position:relative;min-height:760px;overflow:hidden;}
.hero__chair{
  position:absolute;left:var(--split);bottom:-20px;transform:translateX(-50%);
  width:520px;aspect-ratio:500/656;z-index:2;display:block;
  transition:transform .3s ease-out;
}
.hero__chair>span{position:absolute;inset:0;display:block;}
.hero__chair svg{position:absolute;inset:0;width:100%;height:100%;}
.hero__chair .chair-a{clip-path:inset(0 50% 0 0);}   /* 濃い板の上＝淡い椅子 */
.hero__chair .chair-b{clip-path:inset(0 0 0 50%);}   /* 淡い板の上＝濃い椅子 */
.hero__chair:hover,.hero__chair:focus-visible{transform:translateX(-50%) translateY(var(--lift));}
.hero__chair:focus-visible{outline:2px solid var(--maple);outline-offset:6px;}

.hero__copy{position:absolute;left:5%;bottom:58px;z-index:3;max-width:330px;}
.hero__copy h1{
  font-size:38px;line-height:1.55;letter-spacing:.12em;color:var(--maple);
}
.hero__copy p{
  margin-top:16px;font-size:14px;letter-spacing:.18em;color:var(--maple-mid);
  line-height:1.9;
}
.hero__cta{
  position:absolute;right:5%;bottom:48px;z-index:3;
  border:1px solid var(--ink);color:var(--ink);text-decoration:none;
  font-size:14px;letter-spacing:.14em;padding:13px 26px;
  transition:background-color .2s linear,color .2s linear;
}
.hero__cta:hover{background:var(--ink);color:var(--cream);}

/* ---------- 下層ページの第一画面（見出しが境目で反転する） ---------- */
.phero{position:relative;min-height:340px;overflow:hidden;display:flex;align-items:flex-end;}
.phero__in{position:relative;z-index:3;width:100%;padding-bottom:46px;}
.splitT{position:relative;display:block;height:1.32em;font-size:clamp(40px,8vw,116px);}
.splitT span{
  position:absolute;inset:0;padding-left:5%;
  font-family:"KG Serif JP",serif;font-weight:600;
  font-size:1em;line-height:1.32;letter-spacing:.12em;white-space:nowrap;word-break:keep-all;
}
.splitT .a{color:var(--maple);clip-path:inset(0 calc(100% - var(--split)) 0 0);}
.splitT .b{color:var(--walnut);clip-path:inset(0 0 0 var(--split));}
.phero__lead{
  position:relative;z-index:3;margin-top:22px;padding-left:5%;
  font-size:14px;letter-spacing:.16em;color:var(--maple-mid);max-width:44%;
}

/* ---------- 一般セクション ---------- */
.sec{padding:var(--pad) 0;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 5%;}
.sec h2{font-size:30px;letter-spacing:.12em;}
.sec__lead{margin-top:22px;max-width:var(--read);color:var(--ink);}
.eyebrow{font-size:13px;letter-spacing:.24em;color:var(--walnut-mid);margin-bottom:12px;}

/* 3列（板を並べたまま章にする） */
.cols{display:flex;flex-wrap:wrap;}
.cols>div{flex:1 1 300px;padding:72px 5% 78px;}
.cols h3{font-size:22px;letter-spacing:.1em;margin-bottom:16px;}
.cols p{font-size:16px;line-height:1.9;}
.cols .num{display:block;font-size:13px;letter-spacing:.24em;margin-bottom:18px;font-feature-settings:"tnum";}
.on-dark{background:var(--walnut);color:var(--cream);}
.on-dark .num{color:var(--maple-mid);}
.on-lite{background:var(--maple);color:var(--ink);}
.on-lite .num{color:var(--walnut-mid);}
.on-dark2{background:var(--w4);color:var(--cream);}
.on-dark2 .num{color:var(--maple-mid);}

/* 一点だけの紹介 */
.pick{position:relative;overflow:hidden;}
.pick__grid{position:relative;z-index:3;display:flex;flex-wrap:wrap;min-height:420px;}
.pick__l{width:var(--split);padding:80px 4% 80px 5%;color:var(--cream);}
.pick__r{flex:1;padding:80px 5% 80px 4%;color:var(--ink);}
.pick h2{font-size:28px;letter-spacing:.12em;margin-bottom:20px;}
.pick p{font-size:16px;line-height:1.95;}
.pick__l p{color:var(--maple);}
.pick dl{display:flex;flex-wrap:wrap;margin-top:26px;border-top:1px solid rgba(42,30,18,.35);}
.pick dt{width:26%;padding:12px 0;font-size:13px;letter-spacing:.16em;color:var(--walnut-mid);border-bottom:1px solid rgba(42,30,18,.2);}
.pick dd{width:74%;padding:12px 0;font-size:15px;border-bottom:1px solid rgba(42,30,18,.2);font-feature-settings:"tnum";}
.linkline{
  display:inline-block;margin-top:30px;font-size:14px;letter-spacing:.14em;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:opacity .2s linear;
}
.linkline:hover{opacity:.62;}

/* ---------- 下層の大きな造形（署名と同じ作法で境目に立たせる） ---------- */
.figband{position:relative;overflow:hidden;padding:74px 0 78px;}
.figband__fig{
  position:relative;z-index:2;
  margin-left:var(--split);transform:translateX(-50%);
  width:min(90%,calc(var(--split)*2 - 8%),calc((100% - var(--split))*2 - 8%),900px);
  aspect-ratio:900/420;
}
.figband__fig>span{position:absolute;inset:0;display:block;}
.figband__fig svg{position:absolute;inset:0;width:100%;height:100%;}
.figband__fig .fig-a{clip-path:inset(0 50% 0 0);}   /* 濃い板の上＝淡い造形 */
.figband__fig .fig-b{clip-path:inset(0 0 0 50%);}   /* 淡い板の上＝濃い造形 */
.figband__cap{
  position:absolute;left:5%;bottom:26px;z-index:3;
  max-width:calc(var(--split) - 12%);
  font-size:13px;letter-spacing:.18em;color:var(--maple-mid);
}

/* ---------- 事例（仕立てたもの） ---------- */
.case{position:relative;overflow:hidden;}
.case__in{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:stretch;}
.case__t{width:var(--split);padding:78px 4% 78px 5%;}
.case__b{flex:1;padding:78px 5% 78px 4%;}
.case h2{font-size:26px;letter-spacing:.12em;margin-bottom:18px;}
.case .num{font-size:13px;letter-spacing:.24em;margin-bottom:14px;display:block;font-feature-settings:"tnum";}
.case p{font-size:16px;line-height:1.95;}
.case dl{display:flex;flex-wrap:wrap;margin-top:24px;}
.case dt{width:28%;padding:11px 0;font-size:13px;letter-spacing:.16em;border-top:1px solid;}
.case dd{width:72%;padding:11px 0;font-size:15px;border-top:1px solid;font-feature-settings:"tnum";}
.case--dark{color:var(--cream);}
.case--dark .num{color:var(--maple-mid);}
.case--dark dt{border-color:rgba(250,247,241,.34);color:var(--maple-mid);}
.case--dark dd{border-color:rgba(250,247,241,.34);}
.case--lite{color:var(--ink);}
.case--lite .num{color:var(--walnut-mid);}
.case--lite dt{border-color:rgba(42,30,18,.28);color:var(--walnut-mid);}
.case--lite dd{border-color:rgba(42,30,18,.28);}
/* 板の面（写真が用意でき次第、同じ枠へ差し替えられる寸法） */
.slab{position:relative;overflow:hidden;height:230px;margin-bottom:26px;display:flex;}
.slab i{display:block;height:100%;}
.slab::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:160px 160px;opacity:.1;mix-blend-mode:overlay;}
.slab--oak i:nth-child(1){flex:5;background:#d6c3a1}
.slab--oak i:nth-child(2){flex:3;background:#c9b28a}
.slab--oak i:nth-child(3){flex:6;background:#e0d0af}
.slab--oak i:nth-child(4){flex:4;background:#cdb894}
.slab--oak i:nth-child(5){flex:5;background:#d9c8a6}
.slab--hinoki i:nth-child(1){flex:4;background:#e6d9bd}
.slab--hinoki i:nth-child(2){flex:6;background:#efe5d0}
.slab--hinoki i:nth-child(3){flex:3;background:#dccdac}
.slab--hinoki i:nth-child(4){flex:5;background:#e9dec4}
.slab--hinoki i:nth-child(5){flex:4;background:#f2ead9}
.slab--kuri i:nth-child(1){flex:5;background:#5b3f28}
.slab--kuri i:nth-child(2){flex:3;background:#6b4a2f}
.slab--kuri i:nth-child(3){flex:6;background:#4d3522}
.slab--kuri i:nth-child(4){flex:4;background:#63452b}
.slab--kuri i:nth-child(5){flex:5;background:#553b25}
.slab__cap{font-size:12px;letter-spacing:.18em;margin-top:-14px;margin-bottom:26px;}
.case--dark .slab__cap{color:var(--maple-mid);}
.case--lite .slab__cap{color:var(--walnut-mid);}

/* ---------- 会社案内 ---------- */
.pick dl.spec{display:block;max-width:var(--read);margin-top:22px;
  border-top:1px solid rgba(42,30,18,.28);border-bottom:0;}
.pick .spec div{display:flex;flex-wrap:wrap;width:100%;
  border-bottom:1px solid rgba(42,30,18,.28);}
.pick .spec dt{width:30%;padding:16px 0;font-size:13px;letter-spacing:.16em;
  color:var(--walnut-mid);border:0;}
.pick .spec dd{width:70%;padding:16px 0;font-size:15px;line-height:1.9;border:0;}

/* ---------- 相談する（フォーム） ---------- */
.ready{display:flex;flex-wrap:wrap;max-width:var(--read);}
.ready li{width:50%;padding:16px 20px 16px 0;font-size:16px;border-top:1px solid rgba(42,30,18,.24);}
.form{max-width:var(--read);}
.form p{margin-bottom:24px;}
.form label{display:block;font-size:13px;letter-spacing:.16em;color:var(--walnut-mid);margin-bottom:8px;}
.form input,.form select,.form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid rgba(42,30,18,.4);
  padding:13px 14px;border-radius:0;
}
.form textarea{min-height:150px;resize:vertical;}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--walnut);outline-offset:1px;}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.btn{
  font:inherit;font-size:15px;letter-spacing:.14em;
  background:var(--walnut-mid);color:var(--cream);border:1px solid var(--walnut-mid);
  padding:15px 34px;border-radius:0;cursor:not-allowed;
}
.note{font-size:13px;color:var(--walnut-mid);margin-top:14px;line-height:1.9;}

/* ---------- 下端の相談帯（境目で見出しが反転する） ---------- */
.close{position:relative;overflow:hidden;padding:96px 0 100px;}
.close__in{position:relative;z-index:3;}
.close .splitT{font-size:clamp(30px,4.6vw,58px);}
.close__lead{
  position:relative;z-index:3;margin-top:24px;padding-left:5%;
  /* 文字は必ず境目の手前で終わらせる（淡い文字が淡い板に乗ると消えるため） */
  max-width:calc(var(--split) - 6%);
  font-size:15px;line-height:1.95;color:var(--maple);
}
.close__meta{
  position:relative;z-index:3;margin-top:20px;padding-left:5%;
  max-width:calc(var(--split) - 6%);
  font-size:13px;letter-spacing:.14em;line-height:1.9;color:var(--maple-mid);
}
.close__cta{
  position:relative;z-index:3;display:inline-block;margin-top:34px;margin-left:5%;
  border:1px solid var(--maple);color:var(--maple);text-decoration:none;
  font-size:14px;letter-spacing:.14em;padding:14px 30px;
  transition:background-color .2s linear,color .2s linear;
}
.close__cta:hover{background:var(--maple);color:var(--walnut);}

/* ---------- フッター ---------- */
.foot{background:var(--w6);color:var(--maple);padding:56px 0 62px;}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:0 5%;
  display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:baseline;}
.foot__name{font-size:14px;letter-spacing:.26em;}
.foot nav ul{display:flex;flex-wrap:wrap;gap:26px;}
.foot nav a{font-size:14px;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .2s linear;}
.foot nav a:hover{border-bottom-color:var(--maple);}
.foot__note{width:100%;font-size:13px;color:var(--maple-mid);line-height:1.9;margin-top:8px;}

/* ---------- 中間幅 ---------- */
@media (max-width:1100px){
  :root{--pad:76px;}
  .hero{min-height:640px;}
  .hero__chair{width:380px;}
  .hero__copy{max-width:250px;}
  .hero__copy h1{font-size:29px;letter-spacing:.1em;}
  .phero__lead{max-width:58%;}
  .head nav ul{gap:24px;}
  .head nav a{font-size:13px;letter-spacing:.1em;}
  .head__name{font-size:12px;letter-spacing:.2em;}
}

/* ---------- スマートフォン ---------- */
@media (max-width:640px){
  :root{--pad:56px;}
  body{font-size:16px;}
  /* 帯は濃い板で通す（幅が狭く、帯の中で反転させると読みにくいため） */
  .head::before{width:100%;}
  .head::after{display:none;}
  .head__in{height:auto;padding:14px 16px;flex-direction:column;align-items:flex-start;gap:10px;}
  .head__name{font-size:11px;letter-spacing:.18em;}
  .head nav ul{gap:18px;flex-wrap:wrap;}
  .head nav a{color:var(--maple);font-size:12px;letter-spacing:.06em;}
  .head nav a:hover,.head nav a[aria-current="page"]{border-bottom-color:var(--maple);}

  /* 幅が狭いので、見出し・一行・ボタンは縦に積む（重なりを作らない） */
  /* 幅が狭いぶん境目を右へ寄せ、文字は濃い板の側だけに収める */
  .hero{min-height:660px;--split:58%;}
  .hero__chair{width:262px;bottom:238px;}
  .hero__copy{left:16px;bottom:92px;max-width:calc(var(--split) - 26px);}
  .hero__copy h1{font-size:24px;letter-spacing:.08em;}
  .hero__copy p{font-size:12px;letter-spacing:.1em;margin-top:10px;}
  .hero__cta{left:16px;right:auto;bottom:28px;padding:11px 18px;font-size:12px;letter-spacing:.08em;
    color:var(--maple);border-color:var(--maple);}
  .hero__cta:hover{background:var(--maple);color:var(--walnut);}

  .phero{min-height:230px;}
  .phero__in{padding-bottom:30px;}
  .splitT span{padding-left:16px;}
  .phero__lead{max-width:88%;padding-left:16px;font-size:13px;margin-top:16px;}

  .wrap{padding:0 16px;}
  .sec h2{font-size:23px;letter-spacing:.08em;}
  .cols>div{flex:1 1 100%;padding:44px 16px 48px;}
  /* 縦積みになるので境目も横に寝かせる。文字と地の組を1対1にする */
  .pick{--split:100%;}
  .pick__grid{display:block;}
  .pick__l,.pick__r{width:100%;padding:46px 16px 44px;}
  .pick__r{background:var(--maple);}
  .pick h2{font-size:22px;}
  .pick dt{width:34%;} .pick dd{width:66%;}

  .figband{padding:44px 0 52px;--split:50%;}
  .figband__cap{left:16px;bottom:20px;font-size:12px;max-width:calc(var(--split) - 10%);}

  .case__in{display:block;}
  .case__t,.case__b{width:100%;padding:44px 16px 40px;}
  .case__b{padding-top:0;}
  .case h2{font-size:21px;}
  .slab{height:170px;}
  .case dt{width:32%;} .case dd{width:68%;}

  .pick .spec dt{width:36%;} .pick .spec dd{width:64%;}
  .ready li{width:100%;padding-right:0;}

  /* 幅が狭いので帯は濃い板で通す。淡い文字が淡い板へ乗らない */
  .close{padding:56px 0 62px;--split:100%;}
  .close .splitT{font-size:26px;}
  .close__lead{max-width:88%;padding-left:16px;font-size:14px;}
  .close__meta{max-width:88%;padding-left:16px;font-size:12px;}
  .close__cta{margin-left:16px;}
  .foot{padding:40px 0 46px;}
  .foot__in{padding:0 16px;display:block;}
  .foot nav ul{margin-top:18px;gap:18px;}
}

/* ナビは 375px 以下で折り返す */
@media (max-width:375px){
  .head nav ul{gap:14px;row-gap:8px;}
  .head nav a{font-size:11px;}
  .hero__copy h1{font-size:22px;}
  .hero__chair{width:238px;}
}

/* 動きを止める設定に必ず従う */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .hero__chair:hover,.hero__chair:focus-visible{transform:translateX(-50%);}
}