@charset "utf-8";
/* ============================================================
   株式会社千紙堂印刷（架空）／業種サンプルHP「印刷」C案「見本帳をめくる」
   KIGAKU Web Design 制作・2026-09-08
   署名: 見本帳（紙が段違いに立ち、小口に用紙名が縦に読める）
   影 0 / 角丸 0 / 全幅写真 0 / グラデーション 0 / keyframes 0
   ============================================================ */

/* ---------- 書体（SIL OFL・セルフホスト） ---------- */
@font-face{
  font-family:"KG Noto Sans JP";
  src:url("fonts/notosansjp-subset.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"KG BIZ UDPGothic";
  src:url("fonts/bizudpgothic-subset.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- 変数 ---------- */
:root{
  --bg:#f9f9f9;
  --paper:#ffffff;
  --ink:#1a1a1a;
  --ink-sub:#202020;   /* 本文の副色。地(#f9f9f9)とのコントラスト 15.2:1（リン指摘で #4f4f4f から変更） */
  --ink-weak:#6a6a6a;
  --rule:#d5d5d5;
  --rule-soft:#e4e4e4;

  /* 紙の面。色を持つのはここだけ。
     淡い紙と濃い紙を交互に置き、隣り合う面の明度差を大きく取る。
     文字色は紙ごとに白／墨を切り替える（いずれもコントラスト比 6:1 以上）。 */
  --p1:#f4f2ec;  --p1t:#1c1c1c;  /* 上質紙       明 */
  --p2:#1e2b45;  --p2t:#f6f4ee;  /* 紺板紙       暗 */
  --p3:#eac8be;  --p3t:#1c1c1c;  /* 色上質さくら 明 */
  --p4:#17191b;  --p4t:#f6f4ee;  /* 黒板紙       暗 */
  --p5:#bd9260;  --p5t:#1c1c1c;  /* クラフト紙   中 */
  --p6:#22402f;  --p6t:#f6f4ee;  /* 濃緑板紙     暗 */
  --p7:#ccd08d;  --p7t:#1c1c1c;  /* 色上質うぐいす 明 */
  --p8:#6d1f2b;  --p8t:#f6f4ee;  /* 臙脂板紙     暗 */
  --p9:#ece6d6;  --p9t:#1c1c1c;  /* 和紙風       明 */

  /* 小口（断ち口）の線。明るい紙は暗い線、暗い紙は明るい線で見せる */
  --cut-lo:rgba(0,0,0,.24);
  --cut-hi:rgba(255,255,255,.42);

  /* 紙の目（CSSのみ・画像ファイル不要）。
     overlay で重ねるので、濃い紙が白く濁らない */
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");

  --lift:-9px;   /* めくれる量（動きはこの1種だけ） */
}

/* ---------- 土台 ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"KG Noto Sans JP","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8;
  letter-spacing:.04em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.num{
  font-family:"KG BIZ UDPGothic","BIZ UDPGothic","KG Noto Sans JP",sans-serif;
  font-feature-settings:"palt" 0;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;padding:10px 16px;font-size:14px;z-index:99;
}
.skip:focus{left:0;}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px;}
.narrow{max-width:720px;}

/* ---------- 見出し（大きさで叫ばない・語中で折らない） ---------- */
h1,h2,h3,.logo{
  font-weight:600;
  word-break:keep-all;
  line-height:1.5;
}
h2{font-size:22px;letter-spacing:.1em;}
h3{font-size:18px;letter-spacing:.08em;line-height:1.6;}
.eyebrow{
  font-size:12px;letter-spacing:.28em;color:var(--ink-weak);
  line-height:1.4;padding-bottom:14px;
}

/* ---------- ヘッダー（4項目・375px以下で折り返す） ---------- */
.head{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.head__in{
  max-width:1200px;margin:0 auto;padding:0 40px;
  min-height:62px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 28px;flex-wrap:wrap;
}
.head__name{font-size:15px;letter-spacing:.16em;font-weight:600;word-break:keep-all;}
.head__home{text-decoration:none;color:inherit;}
.head nav ul{display:flex;gap:30px;list-style:none;flex-wrap:wrap;}
.head nav a{
  font-size:14px;letter-spacing:.1em;text-decoration:none;color:var(--ink);
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s linear,border-color .2s linear;
  word-break:keep-all;
}
.head nav a:hover,.head nav a:focus-visible{color:#000;border-bottom-color:var(--ink);}
.head nav a[aria-current="page"]{border-bottom-color:var(--ink);}

/* ============================================================
   ⑨ 署名: 見本帳
   紙が段違いに立ち、小口に用紙名が縦に読める。
   重なりは 1px の切れ目2本（暗線＋白線）で見せる。影は使わない。
   ============================================================ */
.book{
  display:flex;align-items:flex-start;flex-wrap:wrap;list-style:none;
  max-width:none;margin:0;padding:44px 0 0 26px;  /* 第一画面は紙束が主役。ほぼ左端まで裁ち落とす。
     26px は1枚目が傾いた分の逃げ（傾き1.7度・高さ740pxで小口が左へ約22px動く） */
}
.leaf{transform-origin:50% 100%;}  /* 傾きの軸は束ねてある下端 */
.leaf-info{display:none;}  /* 携帯専用の「タップ目印＋選んだ紙の名前」。PC/タブレットでは常に非表示 */
.leaf{
  /* 1枚=画面幅の7.3〜8.9%（紙の判型に近い幅）。幅（--k）も重なり（--o）も1枚ずつ変える。
     同じ幅を等間隔で並べると棒グラフに見えるので、意図的に不揃いにしている */
  --u:1vw;
  flex:0 0 auto;
  width:calc(var(--k,8) * var(--u));
  margin-right:calc(var(--o,1.2) * var(--u) * -1);
  position:relative;list-style:none;
}
.leaf__sheet{
  position:relative;
  border-left:1px solid rgba(0,0,0,.34);   /* 下の紙に乗った線 */
  border-top:3px solid var(--cut,var(--cut-lo)); /* 小口（断ち口）＝紙の厚みぶんの幅を持たせる */
  background-color:var(--pc,var(--p1));
  background-image:var(--grain);
  background-repeat:repeat;
  background-blend-mode:overlay;           /* 濃い紙が白く濁らない重ね方 */
  transition:transform .38s cubic-bezier(.22,.61,.36,1),filter .38s linear;
  will-change:transform;
}
.leaf__sheet::before{           /* 紙の厚みに見える白い切れ目 */
  content:"";position:absolute;top:0;left:0;width:1px;height:100%;
  background:rgba(255,255,255,.72);
}
.leaf__sheet::after{          /* 上の紙が乗る位置の直前に落ちる、紙一枚ぶんの明度差 */
  content:"";position:absolute;top:0;right:calc(var(--o,1.2) * var(--u));
  width:2px;height:100%;background:var(--cut,var(--cut-lo));
}
.leaf__nm{
  position:absolute;top:26px;left:28px;
  writing-mode:vertical-rl;
  font-size:15px;letter-spacing:.18em;line-height:1;
  color:var(--pt,#1c1c1c);word-break:keep-all;white-space:nowrap;
}
/* 紙の色と、その紙に載る文字色。濃い紙には --cut-hi の明るい小口 */
.p1{--pc:var(--p1);--pt:var(--p1t);--cut:var(--cut-lo);}
.p2{--pc:var(--p2);--pt:var(--p2t);--cut:var(--cut-hi);}
.p3{--pc:var(--p3);--pt:var(--p3t);--cut:var(--cut-lo);}
.p4{--pc:var(--p4);--pt:var(--p4t);--cut:var(--cut-hi);}
.p5{--pc:var(--p5);--pt:var(--p5t);--cut:var(--cut-lo);}
.p6{--pc:var(--p6);--pt:var(--p6t);--cut:var(--cut-hi);}
.p7{--pc:var(--p7);--pt:var(--p7t);--cut:var(--cut-lo);}
.p8{--pc:var(--p8);--pt:var(--p8t);--cut:var(--cut-hi);}
.p9{--pc:var(--p9);--pt:var(--p9t);--cut:var(--cut-lo);}
/* 章の紙の断面（左端の細い帯）。小口より薄く掛けて、帯の上の用紙名も 4.5 以上を保つ */
.p1,.p3,.p5,.p7,.p9{--band:rgba(0,0,0,.14);}
.p2,.p4,.p6,.p8{--band:rgba(255,255,255,.20);}

/* 用途（小口の用紙名の左＝縦書きの次の行） */
.leaf__use{
  position:absolute;top:26px;left:10px;
  writing-mode:vertical-rl;
  font-size:11px;letter-spacing:.14em;line-height:1;
  color:var(--pt,#1c1c1c);word-break:keep-all;white-space:nowrap;
}
/* 小口は押せる。選んだ紙は持ち上がったまま */
button.leaf__sheet{
  -webkit-appearance:none;appearance:none;
  border-right:0;border-bottom:0;
  display:block;width:100%;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
button.leaf__sheet:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.leaf.is-on{z-index:7;}
.leaf.is-on .leaf__sheet{transform:translate(var(--lift),-6px);filter:brightness(1.04);}

/* 選んだ紙の「使う場面」。箱にしない。細い罫と、紙の小片だけ */
.scene{
  border-top:1px solid var(--rule);
  margin-top:30px;padding-top:20px;max-width:520px;min-height:132px;
}
.scene__chip{
  width:46px;height:24px;
  background-color:var(--pc,var(--p1));
  background-image:var(--grain);background-repeat:repeat;background-blend-mode:overlay;
  border-top:3px solid var(--cut,var(--cut-lo));
  border-left:1px solid rgba(0,0,0,.34);
  margin-bottom:14px;
}
.scene__ttl{font-size:15px;letter-spacing:.1em;line-height:1.5;word-break:keep-all;}
.scene__use{font-weight:600;}
.scene__nm{font-size:12px;letter-spacing:.16em;color:var(--ink-sub);padding-left:14px;}
.scene__txt{font-size:14px;line-height:1.8;color:var(--ink-sub);padding-top:8px;}

/* 束は扇のように開く。下端をそろえて立てただけでは、幅を不揃いにしても棒グラフに見えた。
   紙は薄くてしなるので、1枚ずつ最大1.7度、下端を軸に傾ける（影は使わない）。
   重なりは下で16〜19px、上で9px前後になり、重なり方が高さで変わる。
   段違い: 下端はそろえ（束ねてある側）、上端（小口）だけを 0〜40px ずらす。
   あわせて幅（--k）と重なり（--o）も1枚ずつ変える。1440pxで重なりは16〜19px。
   9枚の合計は画面幅の約62%。高さは第一画面の下端近くまで */
.leaf:nth-child(1){--k:8.0;--o:1.15;transform:rotate(-1.7deg);}
.leaf:nth-child(2){--k:7.3;--o:1.30;transform:rotate(-1.15deg);}
.leaf:nth-child(3){--k:8.7;--o:1.10;transform:rotate(-0.9deg);}
.leaf:nth-child(4){--k:7.6;--o:1.35;transform:rotate(-0.35deg);}
.leaf:nth-child(5){--k:8.9;--o:1.20;transform:rotate(0.1deg);}
.leaf:nth-child(6){--k:7.4;--o:1.30;transform:rotate(0.4deg);}
.leaf:nth-child(7){--k:8.4;--o:1.10;transform:rotate(0.95deg);}
.leaf:nth-child(8){--k:7.8;--o:1.35;transform:rotate(1.15deg);}
.leaf:nth-child(9){--k:8.2;--o:0;transform:rotate(1.7deg);}
.leaf:nth-child(9) .leaf__sheet::after{display:none;}  /* 一番手前の紙。右は自由な断ち口 */
.leaf:nth-child(1) .leaf__sheet{height:740px;margin-top:0;}
.leaf:nth-child(2) .leaf__sheet{height:714px;margin-top:26px;}
.leaf:nth-child(3) .leaf__sheet{height:731px;margin-top:9px;}
.leaf:nth-child(4) .leaf__sheet{height:702px;margin-top:38px;}
.leaf:nth-child(5) .leaf__sheet{height:724px;margin-top:16px;}
.leaf:nth-child(6) .leaf__sheet{height:700px;margin-top:40px;}
.leaf:nth-child(7) .leaf__sheet{height:735px;margin-top:5px;}
.leaf:nth-child(8) .leaf__sheet{height:710px;margin-top:30px;}
.leaf:nth-child(9) .leaf__sheet{height:727px;margin-top:13px;}

/* 動きは1種だけ: 指を置いた紙が一枚だけ持ち上がる（めくる手前） */
.leaf:hover,.leaf:focus-within{z-index:6;}
.leaf:hover .leaf__sheet,.leaf:focus-within .leaf__sheet{
  transform:translate(var(--lift),-6px);
  filter:brightness(1.04);
}

/* ⑨-b 紙をはじく（JSが動くときだけ .book に is-flick が付く）。
   軸は右端＝次の紙が乗っている側。左の小口が手前へ起きる＝めくれる向き。
   紙の変形はJSがバネで1枚ずつ書くので、CSS側の補間と持ち上げはここで下ろす。
   影・グラデーション・角丸は足さない。薄さは動きの速さだけで見せる */
.book.is-flick .leaf__sheet{transform-origin:100% 100%;transition:filter .38s linear;}
.book.is-flick .leaf:hover .leaf__sheet,
.book.is-flick .leaf:focus-within .leaf__sheet,
.book.is-flick .leaf.is-on .leaf__sheet{transform:none;}

/* 開いている1枚: 箱にしない。枠も背景も持たず、地に直接置く。
   区切りは余白と、数字の上の細い罫線だけ */
.open{
  flex:1 1 380px;min-width:0;align-self:center;
  position:relative;
  padding:0 40px 0 64px;
}
.open__corp{font-size:13px;letter-spacing:.5em;color:var(--ink-sub);line-height:1.4;}
.open__title{
  font-size:clamp(34px,3.3vw,48px);line-height:1.24;letter-spacing:.12em;
  padding:10px 0 24px;
}
.open__lead{font-size:16px;letter-spacing:.06em;max-width:520px;}
/* 数字は、すごさでなく「何ができるか」。横に一言の説明を置く */
.open__facts{
  border-top:1px solid var(--rule);
  margin-top:30px;max-width:520px;
}
.open__facts div{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;
  border-bottom:1px solid var(--rule-soft);padding:9px 0;
  font-size:14px;letter-spacing:.06em;line-height:1.7;color:var(--ink-sub);
}
.open__facts b{font-size:26px;letter-spacing:.02em;color:var(--ink);font-weight:600;line-height:1.3;flex:0 0 auto;min-width:58px;}
.open__facts i{font-style:normal;flex:0 0 auto;word-break:keep-all;}
.open__facts span{flex:1 1 210px;min-width:0;font-size:13px;color:var(--ink-sub);letter-spacing:.04em;}

/* 第一画面のCTAは右下の小さな1個だけ（塗りは墨・差し色を使わない） */
.cta-mini{
  display:inline-block;margin-top:38px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:13px;letter-spacing:.12em;padding:11px 20px;
  transition:background-color .2s linear;
  word-break:keep-all;
}
.cta-mini:hover,.cta-mini:focus-visible{background:#3d3d3d;}

/* ---------- 署名の使い回し: 見本帳の帯 ---------- */
.band{display:flex;align-items:flex-start;list-style:none;}
.band li{flex:1 1 0;min-width:0;position:relative;}
/* 淡い紙は地色(#f9f9f9)に溶けて「抜け」に見える。下端に髪の毛の線を1本。
   帯は第一画面の紙束と比率だけ合わせる。小口の厚みと重なりの明度差は持ち込まない */
.band .leaf__sheet{border-bottom:1px solid rgba(0,0,0,.14);border-top-width:1px;}
.band .leaf__sheet::after{display:none;}
.band li:nth-child(1) .leaf__sheet{height:62px;margin-top:0;}
.band li:nth-child(2) .leaf__sheet{height:58px;margin-top:3px;}
.band li:nth-child(3) .leaf__sheet{height:63px;margin-top:1px;}
.band li:nth-child(4) .leaf__sheet{height:57px;margin-top:5px;}
.band li:nth-child(5) .leaf__sheet{height:61px;margin-top:2px;}
.band li:nth-child(6) .leaf__sheet{height:64px;margin-top:0;}
.band li:nth-child(7) .leaf__sheet{height:56px;margin-top:6px;}
.band li:nth-child(8) .leaf__sheet{height:62px;margin-top:1px;}
.band li:nth-child(9) .leaf__sheet{height:59px;margin-top:4px;}
.band li:nth-child(10) .leaf__sheet{height:63px;margin-top:0;}
.band li:nth-child(11) .leaf__sheet{height:57px;margin-top:5px;}
.band li:nth-child(12) .leaf__sheet{height:61px;margin-top:2px;}
.band li:nth-child(13) .leaf__sheet{height:60px;margin-top:3px;}
.band li:nth-child(14) .leaf__sheet{height:64px;margin-top:0;}
.band li{margin-right:-9px;}
.band li:hover .leaf__sheet,.band li:focus-within .leaf__sheet{transform:translate(-6px,-5px);filter:brightness(1.04);}
.band li:hover,.band li:focus-within{z-index:6;}

.band--sep{margin:0 auto;max-width:1200px;padding:0 40px;}
/* 章の区切りの帯は、第一画面の見本帳を閉じて置いた形。
   幅を絞って1枚あたりを細くし、色見本の一覧に見えないようにする */
.band--sep .band{max-width:812px;}

/* 下層ページの第一画面: 帯に用紙名を出す（署名を小さく再掲） */
.pagehead{padding:52px 0 0;}
.pagehead .band--sep .band{max-width:none;}   /* 第一画面の帯は幅いっぱい */
.pagehead .band li .leaf__sheet{height:112px;}
.pagehead .band li:nth-child(even) .leaf__sheet{height:106px;margin-top:6px;}
.pagehead .leaf__nm{top:16px;left:18px;font-size:11px;letter-spacing:.16em;}
.pagehead__txt{padding:44px 0 0;}
.pagehead h1{font-size:28px;letter-spacing:.1em;padding-bottom:18px;}
/* 🔴 .pagehead p だと小口の用紙名まで灰色にしてしまう。本文だけに当てる */
.pagehead__txt p{max-width:720px;color:var(--ink-sub);}
.pagehead__txt .eyebrow{color:var(--ink-weak);}

/* ---------- セクション（余白はセクション高さで作る） ---------- */
.sec{padding:112px 0;}
.sec--tight{padding:88px 0;}
.sec + .sec{border-top:1px solid var(--rule-soft);}
.sec__lead{max-width:720px;padding-top:22px;color:var(--ink-sub);}
.sec__head{padding-bottom:52px;}

/* 章＝1枚の大きな紙（3列カードは置かない）。
   濃淡を交互に重ね、左端の細い帯で紙の断面（厚み）を見せる。
   本文はその紙の上に直接置き、文字色は紙ごとに白／墨を切り替える */
.chapters{display:flex;flex-direction:column;}
.chap{
  display:flex;align-items:stretch;
  background-color:var(--pc,var(--p1));
  background-image:var(--grain);
  background-repeat:repeat;
  background-blend-mode:overlay;
  color:var(--pt,#1c1c1c);
  border-top:3px solid var(--cut,var(--cut-lo));  /* 上端＝小口 */
}
.chap + .chap{margin-top:14px;}
.chap__cut{                                       /* 左端＝断面（紙の厚み） */
  flex:0 0 44px;position:relative;
  background:var(--band,rgba(0,0,0,.14));
  border-right:1px solid rgba(0,0,0,.26);
}
.chap__cut::after{
  content:"";position:absolute;top:0;right:0;width:1px;height:100%;
  background:rgba(255,255,255,.55);
}
.chap__nm{
  position:absolute;top:20px;left:15px;
  writing-mode:vertical-rl;
  font-size:12px;letter-spacing:.16em;line-height:1;
  color:inherit;word-break:keep-all;white-space:nowrap;
}
.chap__body{flex:1 1 auto;min-width:0;padding:44px 44px 48px;}
.chap h3{padding-bottom:12px;}
.chap p{font-size:15px;color:inherit;letter-spacing:.04em;max-width:720px;}
.chap .tags li{border-color:var(--cut,var(--cut-lo));color:inherit;}
.tags{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding-top:18px;}
.tags li{font-size:12px;letter-spacing:.1em;color:var(--ink-weak);border:1px solid var(--rule);padding:3px 10px;}

/* 番号つきの並び */
.steps{display:flex;flex-wrap:wrap;gap:36px 32px;list-style:none;}
.steps li{flex:1 1 220px;min-width:0;border-top:1px solid var(--rule);padding-top:18px;}
.steps b{display:block;font-size:13px;letter-spacing:.2em;color:var(--ink-weak);font-weight:400;padding-bottom:8px;}
.steps strong{display:block;font-size:17px;letter-spacing:.08em;font-weight:600;word-break:keep-all;line-height:1.6;}
.steps p{font-size:14px;color:var(--ink-sub);padding-top:6px;line-height:1.75;}

/* 確認項目 */
.checks{list-style:none;border-top:1px solid var(--rule);max-width:720px;}
.checks li{
  display:flex;gap:18px;align-items:baseline;
  border-bottom:1px solid var(--rule-soft);padding:16px 0;
  font-size:15px;letter-spacing:.05em;
}
.checks span{font-size:12px;letter-spacing:.16em;color:var(--ink-weak);flex:0 0 42px;}

/* 事例 */
.case{display:flex;flex-wrap:wrap;gap:44px;padding:56px 0;border-top:1px solid var(--rule);}
.case__papers{flex:0 0 auto;display:flex;align-items:flex-start;}
.case__papers li{list-style:none;width:56px;margin-right:-18px;position:relative;}
.case__papers .leaf__sheet{height:232px;}
.case__papers li:nth-child(2) .leaf__sheet{height:226px;margin-top:5px;}
.case__papers li:nth-child(3) .leaf__sheet{height:230px;margin-top:2px;}
.case__papers .leaf__nm{font-size:11px;letter-spacing:.16em;top:14px;left:14px;}
.case__body{flex:1 1 380px;min-width:0;}
.case__body h3{font-size:20px;padding:10px 0 14px;}
.case__body p{color:var(--ink-sub);max-width:640px;}
.spec{list-style:none;padding-top:22px;border-top:1px solid var(--rule-soft);margin-top:22px;}
.spec li{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px;padding:5px 0;color:var(--ink-sub);}
.spec b{flex:0 0 92px;font-weight:400;color:var(--ink-weak);letter-spacing:.1em;}

/* 表 */
.tablewrap{overflow-x:auto;}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px;}
th,td{border-bottom:1px solid var(--rule-soft);padding:14px 16px 14px 0;text-align:left;vertical-align:top;letter-spacing:.04em;}
th{font-weight:600;color:var(--ink);border-bottom:1px solid var(--rule);white-space:nowrap;}
td{color:var(--ink-sub);}

/* 定義リスト（会社概要） */
.outline{border-top:1px solid var(--rule);max-width:720px;}
.outline div{display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--rule-soft);padding:16px 0;}
.outline dt{flex:0 0 128px;font-size:14px;letter-spacing:.1em;color:var(--ink-weak);}
.outline dd{flex:1 1 320px;min-width:0;font-size:15px;color:var(--ink-sub);}

/* フォーム */
.form{max-width:720px;}
.form__note{border:1px solid var(--rule);padding:16px 18px;font-size:14px;color:var(--ink-sub);margin-bottom:34px;}
.field{padding-bottom:24px;}
.field label{display:block;font-size:14px;letter-spacing:.1em;padding-bottom:8px;}
.field .req{font-size:11px;letter-spacing:.1em;color:var(--ink-weak);padding-left:10px;}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);
  padding:11px 13px;border-radius:0;
  transition:border-color .2s linear;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field textarea{min-height:150px;resize:vertical;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-sub);padding-bottom:24px;}
.form__agree input{width:16px;height:16px;flex:0 0 16px;margin-top:6px;}
.btn{
  font:inherit;font-size:14px;letter-spacing:.12em;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:13px 30px;cursor:not-allowed;border-radius:0;
  transition:background-color .2s linear;
}
.btn:hover{background:#3d3d3d;}

/* 終いの誘い */
.tail{padding:104px 0;border-top:1px solid var(--rule-soft);}
.tail h2{padding-bottom:16px;}
.tail p{color:var(--ink-sub);max-width:720px;padding-bottom:30px;}
.tail a{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-size:14px;letter-spacing:.12em;padding:13px 30px;
  transition:background-color .2s linear;word-break:keep-all;
}
.tail a:hover,.tail a:focus-visible{background:#3d3d3d;}

/* 注記 */
.fiction{font-size:13px;color:var(--ink-weak);line-height:1.8;letter-spacing:.03em;max-width:720px;}

/* フッター */
.foot{background:var(--paper);border-top:1px solid var(--rule);padding:56px 0 44px;}
.foot__in{display:flex;flex-wrap:wrap;gap:32px 48px;justify-content:space-between;}
.foot__name{font-size:15px;letter-spacing:.16em;font-weight:600;padding-bottom:12px;}
.foot ul{display:flex;flex-wrap:wrap;gap:12px 26px;list-style:none;}
.foot a{font-size:14px;letter-spacing:.08em;text-decoration:none;transition:color .2s linear;}
.foot a:hover,.foot a:focus-visible{color:#000;text-decoration:underline;}
.foot__end{padding-top:34px;margin-top:34px;border-top:1px solid var(--rule-soft);font-size:12px;letter-spacing:.08em;color:var(--ink-weak);}

/* ---------- 動きを止める ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
  .leaf:hover .leaf__sheet,.leaf:focus-within .leaf__sheet,
  .band li:hover .leaf__sheet,.band li:focus-within .leaf__sheet{transform:none !important;}
}

/* ---------- 中間幅 ---------- */
@media (max-width:1080px){
  .leaf{--u:0.95vw;}
  .open{flex:1 1 300px;padding:0 32px 0 48px;}
  .leaf:nth-child(1) .leaf__sheet{height:600px;margin-top:0;}
  .leaf:nth-child(2) .leaf__sheet{height:582px;margin-top:18px;}
  .leaf:nth-child(3) .leaf__sheet{height:594px;margin-top:6px;}
  .leaf:nth-child(4) .leaf__sheet{height:572px;margin-top:28px;}
  .leaf:nth-child(5) .leaf__sheet{height:588px;margin-top:12px;}
  .leaf:nth-child(6) .leaf__sheet{height:568px;margin-top:32px;}
  .leaf:nth-child(7) .leaf__sheet{height:597px;margin-top:3px;}
  .leaf:nth-child(8) .leaf__sheet{height:578px;margin-top:22px;}
  .leaf:nth-child(9) .leaf__sheet{height:590px;margin-top:10px;}
}

/* ---------- 携帯（見本帳は横並びのまま・開いた紙が下へ回る） ---------- */
@media (max-width:860px){
  .wrap{padding:0 20px;}
  .head__in{padding:12px 20px;min-height:0;}
  .head nav ul{gap:8px 20px;}
  /* 携帯の第一画面: 紙束と社名を切り離さない。
     9枚のうち3枚を伏せて6枚にし、1枚を太く。区切りの罫も置かない */
  .book{padding:16px 20px 0;}
  .leaf{--u:1.9vw;}   /* 6枚で画面幅の約78%。見える幅は 390px で約49px */
  .leaf:nth-child(4),.leaf:nth-child(5),.leaf:nth-child(7){display:none;}
  .leaf__sheet{border-top-width:2px;}
  .leaf:nth-child(1) .leaf__sheet{height:186px;margin-top:0;}
  .leaf:nth-child(2) .leaf__sheet{height:176px;margin-top:10px;}
  .leaf:nth-child(3) .leaf__sheet{height:182px;margin-top:4px;}
  .leaf:nth-child(6) .leaf__sheet{height:170px;margin-top:16px;}
  .leaf:nth-child(8) .leaf__sheet{height:178px;margin-top:8px;}
  .leaf:nth-child(9) .leaf__sheet{height:180px;margin-top:6px;}
  .leaf__nm{font-size:12px;letter-spacing:.12em;top:11px;left:22px;}
  .leaf__use{font-size:10px;letter-spacing:.1em;top:11px;left:7px;}
  /* ⑨-c 帯の直下: タップの目印と、選んだ紙の名前・用途（帯の並びは変えない） */
  .leaf-info{display:block;flex:1 0 100%;padding:0 20px;}
  .leaf-hint{font-size:12px;letter-spacing:.04em;color:var(--ink-weak);margin:6px 0 0;transition:opacity .3s linear;}
  .leaf-hint.is-gone{opacity:0;height:0;margin:0;overflow:hidden;}
  .leaf-peek{font-size:15px;letter-spacing:.06em;margin:4px 0 0;min-height:20px;opacity:0;transform:translateY(4px);transition:opacity .2s linear,transform .2s linear;}
  .leaf-peek.is-show{opacity:1;transform:translateY(0);}
  .leaf.is-pulled .leaf__sheet{transform:translateY(-14px) scale(1.06);box-shadow:0 10px 18px rgba(0,0,0,.22);}
  .open{flex:1 0 100%;min-height:0;align-self:auto;padding:16px 20px 30px 20px;margin-top:0;border-top:0;}
  .open__title{font-size:32px;letter-spacing:.08em;padding:8px 0 18px;}
  .scene{margin-top:24px;padding-top:18px;min-height:0;}
  .open__facts{margin-top:24px;}
  .open__facts b{font-size:22px;min-width:52px;}
  .cta-mini{position:static;margin-top:28px;}
  .sec{padding:72px 0;}
  .sec--tight{padding:60px 0;}
  .sec__head{padding-bottom:36px;}
  .tail{padding:72px 0;}
  .band--sep{padding:0 20px;}
  .band li:nth-child(n+8){display:none;}
  .pagehead{padding:28px 0 0;}
  .pagehead .band li .leaf__sheet{height:96px;}
  .pagehead .band li:nth-child(even) .leaf__sheet{height:90px;}
  .pagehead__txt{padding:30px 0 0;}
  .chap__cut{flex:0 0 32px;}
  .chap__nm{left:9px;top:16px;font-size:11px;}
  .chap__body{padding:26px 20px 30px;}
  .case{gap:28px;padding:40px 0;}
  .case__papers li{width:46px;margin-right:-14px;}
  .case__papers .leaf__sheet{height:180px;}
  .case__papers li:nth-child(2) .leaf__sheet{height:175px;}
  .case__papers li:nth-child(3) .leaf__sheet{height:178px;}
}

/* ---------- 375px以下: ナビを折り返す ---------- */
@media (max-width:420px){
  .head__in{flex-direction:column;align-items:flex-start;gap:8px;}
  .head nav ul{gap:6px 16px;}
  .head nav a{font-size:13px;letter-spacing:.06em;}
  .open__title{font-size:27px;}
  .foot__in{gap:24px;}
}