@charset "utf-8";
/* ============================================================
   株式会社粒成工業（架空）／移植案 W1「墨一色の絵巻物」
   色は生成り＋墨の2色のみ。彩度を足さない。
   ============================================================ */

/* ---- 書体（セルフホスト。外部通信ゼロ） ---- */
@import url("fonts/fonts.css");

:root{
  --paper:#f2f3ec;
  --sumi:#000000;
  --usu:rgba(0,0,0,.45);
  --keshi:rgba(0,0,0,.18);
  --maki:0;                 /* 0→1：巻を繰った量。main.js が scroll で書き換える */
  --gl:96px;                /* 左の余白（巻物の芯より内側） */
  --gr:132px;               /* 右は軸のぶんだけ広く取る */
  --curl:78px;              /* まだ巻いてある部分の幅 */
  --min:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --got:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  background:var(--paper);
  color:var(--sumi);
  font-family:var(--got);
  font-size:16px;
  line-height:1.5;
  letter-spacing:.1em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sumi)}

/* 見出しは字間と余白で差を出す。巨大文字に頼らない。 */
h1,h2,h3{
  font-family:var(--min);
  font-weight:500;
  margin:0;
  word-break:keep-all;
  line-break:strict;
  overflow-wrap:normal;
}
.nw{display:inline-block;white-space:nowrap}

/* 短い語は語中で折らない。長い本文は通常どおり折り返す（anywhere は使わない） */
.hanga figcaption,.soe,.kan-no,.cta,.fuda li,.hyo th,.maki .na,.nav a,.radio-set label{
  word-break:keep-all;
  line-break:strict;
  overflow-wrap:normal;
}

strong{font-weight:500}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--paper);
  padding:8px 14px;border:1px solid var(--sumi);z-index:60;
}
.skip:focus{left:8px;top:8px}

/* ---- まだ巻いてある部分（右端）。繰るほど細くなり、軸だけが残る ---- */
.curl{
  position:fixed;z-index:45;pointer-events:none;
  right:0;top:0;height:100vh;
  width:calc(10px + var(--curl) - var(--maki) * var(--curl));
  background-repeat:no-repeat;
  background-position:right top,right top,right top;
  background-size:10px 100%,46px 100%,100% 100%;
  background-image:
    linear-gradient(var(--sumi),var(--sumi)),
    repeating-linear-gradient(to left,
      rgba(0,0,0,0) 10px 17px,rgba(0,0,0,.30) 17px 18px),
    linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.11) 100%);
}
.curl::before,.curl::after{
  content:"";position:absolute;right:0;width:24px;height:13px;background:var(--sumi);
}
.curl::before{top:0}
.curl::after{bottom:0}

/* ---- 巻物の芯（本文の左を貫く一本の墨線） ---- */
.page{position:relative}
.rule{
  position:absolute;z-index:0;pointer-events:none;
  left:calc(var(--gl) - 34px);top:0;bottom:0;width:1px;
  background:var(--keshi);
}

/* ---- ヘッダー（fixed・ナビ4項目・中黒を頭に付ける） ---- */
.head{
  position:fixed;z-index:40;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;gap:40px;
  padding:26px var(--gr) 22px var(--gl);
  background:var(--paper);
}
.head .yago{font-family:var(--min);font-size:15px;letter-spacing:.24em;margin:0;white-space:nowrap}
.head .right{display:flex;align-items:center;gap:36px}
.nav{display:flex;gap:26px;flex-wrap:wrap}
.nav a{font-size:13px;letter-spacing:.16em;text-decoration:none;white-space:nowrap;padding:14px 0;display:inline-flex;align-items:center}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.inkan{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.inkan a{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.inkan img{width:36px;height:36px;display:block}

main{position:relative;z-index:1;padding-bottom:150px}

/* ---- 序（第一画面） ---- */
.jo{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:row-reverse;align-items:center;
  justify-content:space-between;gap:96px;
  padding:120px var(--gr) 0 var(--gl);
}
.tate{writing-mode:vertical-rl;text-orientation:upright;margin:0}
.jo-koto{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:48px}
.jo h1{font-size:44px;line-height:1.9;letter-spacing:.26em}
.jo .soe{font-size:17px;line-height:2.4;letter-spacing:.24em;margin:0}
.hanga{margin:0;display:flex;flex-direction:column;gap:18px;max-width:100%}
.hanga img{border:1px solid var(--sumi);background:var(--paper);width:100%;height:auto}
.hanga figcaption{font-family:var(--min);font-size:13px;letter-spacing:.24em;line-height:1.9}
.jo .hanga{width:320px;flex:0 0 auto}

/* PC・タブレット：低い高さのビューポートで .aizu が写真・キャプションと重ならないよう下に余白を確保 */
@media (min-width:768px){
  .jo{padding-bottom:200px}
}

/* 「巻を繰る」の合図。繰りはじめた瞬間に消える */
.aizu{
  position:absolute;left:var(--gl);bottom:150px;
  display:flex;align-items:center;gap:14px;
  opacity:max(0,calc(1 - var(--maki) * 16));
}
.aizu span{font-family:var(--min);font-size:14px;letter-spacing:.26em}

/* ---- 何も描かない画面（余白は padding ではなく空白そのもの） ---- */
.ma{height:66vh}
.ma-s{height:34vh}

/* ---- 一巻 ---- */
.kan{
  padding:0 var(--gr) 0 var(--gl);
  display:flex;flex-direction:row-reverse;align-items:flex-start;gap:64px;
}
.kan .hanga{width:min(420px,46vw);flex:0 0 auto}
.kan-koto{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:36px;padding-top:24px}
.kan h2{font-size:31px;line-height:1.85;letter-spacing:.26em}
.kan .kan-no{font-family:var(--min);font-size:12px;letter-spacing:.3em;line-height:2.2;opacity:.55}
.kan .toki{
  max-width:21em;margin:96px 0 0;font-size:14px;line-height:2.2;letter-spacing:.12em;
}
/* 巻ごとに置き位置をずらす。整列させない＝巻物の呼吸 */
.kan:nth-of-type(even){justify-content:flex-end}
.kan:nth-of-type(3n){margin-right:7%}
.kan:nth-of-type(4n){margin-left:6%}

/* ---- 結び＋CTA（頁の最後に1つだけ） ---- */
.musubi{
  padding:0 var(--gr) 0 var(--gl);
  display:flex;flex-direction:column;align-items:flex-start;gap:44px;
}
.musubi h2{font-size:27px;letter-spacing:.3em;line-height:2}
.cta{
  display:inline-block;font-family:var(--min);font-size:16px;letter-spacing:.3em;
  text-decoration:none;padding:20px 42px;border:1px solid var(--sumi);
}
.cta:hover{background:var(--sumi);color:var(--paper)}

/* ---- 下位ページの共通 ---- */
/* 巻頭（別巻のはじまり）。骨格は序（.jo）をそのまま使い、
   同じ文法・同じ余白比にする。ここでは別巻の札だけを足す。 */
.hyoshi .kan-no{font-family:var(--min);font-size:12px;letter-spacing:.3em;line-height:2.2;opacity:.55;margin:0}

.dan{padding:0 var(--gr) 0 var(--gl);max-width:calc(800px + var(--gl) + var(--gr))}
.dan h2{font-size:22px;letter-spacing:.3em;line-height:2;margin-bottom:26px}
.dan p{font-size:14px;line-height:2.2;letter-spacing:.12em;max-width:32em}
.dan .sumi-line{height:1px;background:var(--keshi);margin:56px 0}

.hyo{border-collapse:collapse;width:100%;max-width:640px;font-size:14px}
.hyo th,.hyo td{
  text-align:left;vertical-align:top;padding:16px 12px;
  border-bottom:1px solid var(--keshi);letter-spacing:.1em;line-height:2;
}
.hyo th{font-family:var(--min);font-weight:500;white-space:nowrap;width:8em;letter-spacing:.2em}

.fuda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.fuda li{
  font-family:var(--min);font-size:14px;letter-spacing:.22em;
  padding:12px 20px;border:1px solid var(--keshi);
}
.hako-nami{display:flex;flex-wrap:wrap;gap:56px}
.hako-nami .hanga{width:min(300px,72vw)}

/* ---- 架空フォーム ---- */
.form{max-width:620px;margin:0}
.form .gyo{margin:0 0 34px}
.form label.mei{
  display:block;font-family:var(--min);font-size:13px;letter-spacing:.24em;margin-bottom:12px;
}
.form input[type="text"],.form input[type="email"],.form textarea{
  width:100%;background:transparent;color:var(--sumi);
  border:0;border-bottom:1px solid var(--sumi);
  font-family:var(--got);font-size:15px;letter-spacing:.08em;line-height:2;
  padding:10px 2px;border-radius:0;
}
.form textarea{border:1px solid var(--sumi);padding:14px;min-height:170px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--sumi);outline-offset:3px}
.radio-set{display:flex;gap:26px;flex-wrap:wrap}
.radio-set label{white-space:nowrap;flex-wrap:nowrap;display:flex;align-items:center;gap:9px;font-size:14px;letter-spacing:.1em;min-height:44px}
.radio-set input{accent-color:#000;margin:0}
.form .okuri{
  font-family:var(--min);font-size:15px;letter-spacing:.3em;
  padding:18px 40px;border:1px solid var(--sumi);background:transparent;color:var(--sumi);
  cursor:not-allowed;
}
.kakuu{
  font-size:13px;letter-spacing:.12em;line-height:2;
  border:1px solid var(--keshi);padding:16px 20px;margin:0 0 40px;max-width:34em;
}

/* ---- 奥付 ---- */
.oku{
  padding:0 var(--gr) 130px var(--gl);
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.16em;line-height:2;
}
.oku .chu{font-size:11px;opacity:.75}
.oku-meta{display:flex;align-items:flex-end;justify-content:flex-end;gap:16px}
.rakkan{width:56px;height:56px;flex:0 0 auto;display:block}
.oku nav{display:flex;gap:22px;flex-wrap:wrap}
.oku nav a{font-size:12px;letter-spacing:.14em;text-decoration:none;white-space:nowrap;padding:14px 0;display:inline-flex;align-items:center}

/* ============================================================
   巻尺（署名の仕掛け）
   スクロール量そのものが目盛りを進める。出現演出はしない。
   ============================================================ */
.maki{position:fixed;z-index:30;pointer-events:none}
.maki .me{position:absolute;background:var(--sumi);opacity:.45}
.maki .fuchi{position:absolute;background:var(--keshi)}
.maki .koma{position:absolute;background:var(--sumi)}
.maki .na{
  position:absolute;font-family:var(--min);font-size:12px;letter-spacing:.2em;
  opacity:.4;white-space:nowrap;
}
.maki .na.ima{opacity:1}

/* PC・タブレット：下辺を右から左へ繰る（巻物は右から左へ開く） */
@media (min-width:768px){
  .maki{left:0;right:0;bottom:0;height:96px;background:var(--paper)}
  .maki .track{position:absolute;left:var(--gl);right:calc(var(--gr) + 44px);top:0;bottom:0}
  .maki .fuchi{left:0;right:0;top:30px;height:1px}
  .maki .me{top:22px;width:1px;height:17px;right:var(--pr)}
  .maki .koma{top:26px;width:9px;height:9px;right:calc(4% + var(--maki) * 84%);transform:translateX(4px)}
  .maki .na{top:44px;right:var(--pr);transform:translateX(50%)}
}
/* スマートフォン：左辺を上から下へ繰る */
@media (max-width:767.98px){
  .maki{left:0;top:0;bottom:0;width:56px}
  .maki .track{position:absolute;left:0;right:0;top:118px;bottom:40px}
  .maki .fuchi{left:26px;top:0;bottom:0;width:1px}
  .maki .me{left:18px;width:17px;height:1px;top:var(--pt)}
  .maki .koma{left:22px;width:9px;height:9px;top:calc(6% + var(--maki) * 80%);transform:translateY(-4px)}
  .maki .na{left:40px;top:var(--pt);transform:translateY(-50%)}
}

/* ---- 画面幅ごとの寸法 ---- */
@media (max-width:1100px){
  :root{--gl:72px;--gr:92px;--curl:52px}
  .head{gap:20px;padding:22px var(--gr) 18px var(--gl)}
  .head .yago{font-size:13px;letter-spacing:.18em}
  .head .right{gap:22px}
  .nav{gap:16px;flex-wrap:nowrap}
  .nav a{font-size:11.5px;letter-spacing:.08em}
  .inkan{width:44px;height:44px}
  .inkan img{width:32px;height:32px}
  .jo{gap:56px;padding-top:104px}
  .jo h1{font-size:38px}
  .jo .hanga{width:270px}
  .kan{gap:44px}
  .kan .toki{margin-top:64px}
}
@media (max-width:767.98px){
  :root{--gl:70px;--gr:22px;--curl:0px}
  body{font-size:15px}
  .curl{display:none}
  .rule{display:none}
  .head{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 22px 14px 70px}
  .head .right{width:100%;justify-content:space-between;gap:12px}
  .nav{gap:14px}
  .nav a{font-size:11px;letter-spacing:.06em}
  .inkan{width:44px;height:44px}
  .inkan img{width:32px;height:32px}
  main{padding-bottom:60px}
  .jo{
    min-height:100vh;flex-direction:column-reverse;align-items:flex-start;
    justify-content:flex-end;gap:46px;padding:132px var(--gr) 96px var(--gl);
  }
  .jo h1{font-size:30px;line-height:1.85}
  .jo .soe{font-size:13px}
  .jo .hanga{width:min(170px,46vw);align-self:flex-end}
  .aizu{left:var(--gl);bottom:44px}
  .aizu span{font-size:12px}
  .ma{height:44vh}
  .ma-s{height:22vh}
  .kan{flex-direction:column-reverse;align-items:flex-start;gap:30px}
  .kan:nth-of-type(even){margin-left:0}
  .kan:nth-of-type(3n){margin-right:0}
  .kan .hanga{width:min(240px,64vw);align-self:flex-end}
  .kan h2{font-size:25px}
  .kan .toki{font-size:13px;line-height:2.1;margin-top:0}
  .kan-koto{padding-top:0;gap:26px}
  .musubi h2{font-size:22px}
  .cta{font-size:14px;padding:17px 30px;letter-spacing:.24em}
  .hyo th{width:6.5em;font-size:13px;letter-spacing:.12em;padding:14px 8px}
  .hyo td{font-size:13px;padding:14px 8px}
  .hako-nami{gap:36px}
  .oku{padding:0 var(--gr) 60px var(--gl);gap:22px}
  .oku nav{gap:14px}
}

/* 幅の狭い端末（360px 級）だけ：案内が1行に収まらず落款が画面外へ出るため、折り返しを許す。
   max-width:1100px の .nav{flex-wrap:nowrap} を同じプロパティで打ち消す。375px 以上は変えない。 */
@media (max-width:374.98px){
  .nav{flex-wrap:wrap;row-gap:6px}
}

/* ---- 動きを減らす設定：巻尺は静止する ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .aizu{opacity:1}
  .curl{width:var(--curl)}
}