/* ==========================================================
   画屋 採用LP ／ デザイン案1「原稿用紙」
   制作工程の原稿を、各セクションの背景に薄く敷く構成
   ========================================================== */

:root{
  --paper:#fdfbf6;
  --panel:#ffffff;
  --ink:#17171a;
  --sub:#645f58;
  --muted:#9c968d;
  --accent:#d94f3d;
  --guide:#6ba3d6;          /* 原稿用紙のガイド罫の色 */
  --guide-line:#cfe0ef;
  --guide-tint:#f2f7fb;
  --rail:64px;
  --gutter:52px;
  --measure:40em;           /* 枠のない本文の1行上限＝全角約40文字 */
  --box-16:704px;           /* 枠つき（16px本文）の枠幅：640 + 左右padding */
  --box-15:716px;           /* 枠つき（15px本文・番号列あり）の枠幅 */

  /* 背景の原稿の幅。高さではなく幅で揃えるため固定値で指定する。
     本文は左52px始まりの640px幅なので右端が692px。ブロック幅1116pxから
     424pxを引くと692pxとなり、絵の左端が本文の終わりにちょうど接する。
     ウィンドウが狭まると本文（固定幅）に重なるため clamp で下限を持たせる。 */
  --art-w:clamp(240px, 38%, 424px);
}

/* 枠で囲んだブロックは、テキストではなく「枠そのもの」を行長に合わせる。
   テキスト側を狭めると、枠の右側に空白が残ってしまうため。 */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);
  line-height:1.85;
  letter-spacing:0.02em;
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(107,163,214,0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,163,214,0.26) 1px, transparent 1px);
  background-size:40px 40px;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--accent); }

/* ==========================================================
   背景に敷く工程の原稿
   ----------------------------------------------------------
   方眼はページ全体で1枚（body の背景）。工程の原稿はその上に
   低い不透明度で重ねる。原稿が薄いので方眼はそのまま透ける。
   セクションごとに方眼レイヤーを持たせるとマス目の継ぎ目が
   出るため、方眼はここでは描かない。
   幅は --art-w で固定し、高さは原稿の比率のまま流す。ブロックより
   縦に長い分はブロックの外へ出て見えなくなる（原稿が続いている表現）。
   contain だとブロックの高さに合わせて縮むため、高さの違うブロック間で
   幅が揃わなくなる。
   ========================================================== */
.art{ position:relative; }
.art::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--art);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:var(--art-w) auto;
  opacity:var(--art-op,0.15);
}
.art > *{ position:relative; z-index:1; }

/* 工程ごとの原稿と濃さ。
   線が密になるほど本文が読みにくくなるため、進行につれて薄くする。 */
#hero      { --art:url("img/flow02.png");        --art-op:0.14; }
#manifesto { --art:url("img/flow-rough.png");    --art-op:0.18; }  /* 01 企画（キャラクター設定） */
#atmosphere{ --art:url("img/flow-scenario.png"); --art-op:0.18; }  /* 02 シナリオ */
#roles     { --art:url("img/flow-name.png");     --art-op:0.18; }  /* 03 ネーム */
#fit       { --art:url("img/flow-rough2.png");   --art-op:0.16; }  /* 04 下描き */
#policy    { --art:url("img/flow-clean.png");    --art-op:0.14; }  /* 05 ペン入れ */
#process   { --art:url("img/flow-finish.png");   --art-op:0.12; }  /* 06 仕上げ・写植 */
#message   { --art:url("img/flow03.png");        --art-op:0.14; }
#entry     { --art:url("img/flow05.png");        --art-op:0.12; }
#done      { --art:url("img/flow02.png");        --art-op:0.14; }  /* 応募完了ページ */

/* 欄外の工程表示 */
.stage-mark{
  position:absolute;
  top:22px; right:var(--gutter);
  z-index:1;
  text-align:right;
  font-family:"Klee One",serif;
  font-size:12px;
  line-height:1.7;
  color:var(--sub);
  max-width:15em;
}
.stage-mark .no{ color:var(--accent); letter-spacing:0.1em; }
.stage-mark .name{
  display:block;
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  line-height:1.4;
  margin:2px 0 4px;
}

/* ---------- 用紙全体（左に綴じ代のレール） ---------- */
.sheet{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  align-items:stretch;
  max-width:1180px;
  margin:0 auto;
}
.rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:32px 0;
  border-right:1px solid var(--guide-line);
  background:rgba(253,251,246,0.86);
}
.rail-title{
  writing-mode:vertical-rl;
  font-family:"Klee One",serif;
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--guide);
}
.rail-folio{ font-family:"Klee One",serif; font-size:12px; color:var(--guide); }
.page{ min-width:0; }

/* ---------- 共通セクション ---------- */
.s{
  padding:64px var(--gutter);
  border-top:1px solid var(--guide-line);
}
.s.tint{ background:rgba(255,255,255,0.62); }

.kicker{
  font-family:"Klee One",serif;
  font-size:13px;
  letter-spacing:0.2em;
  color:var(--accent);
  margin-bottom:6px;
}
h2.title{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:clamp(21px,2.4vw,26px);
  line-height:1.6;
  margin-bottom:18px;
  max-width:24em;
  text-wrap:pretty;
}
h2.title.lg{ font-weight:800; font-size:clamp(23px,2.8vw,29px); }

.lead{ font-size:16px; color:#413d38; max-width:var(--measure); }
.body p{ font-size:16px; color:#413d38; max-width:var(--measure); }
.body p + p{ margin-top:1.05em; }
.body .highlight{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  max-width:none;           /* 改行位置を <br> で固定しているため幅制限を外す */
}

/* ---------- ヒーロー ---------- */
.hero{ padding:56px var(--gutter) 60px; }
.hero::after{
  content:"";
  position:absolute;
  bottom:14px; right:14px;
  width:20px; height:20px;
  border-bottom:2px solid var(--ink);
  border-right:2px solid var(--ink);
  pointer-events:none;
}
.crop-tl{                    /* ヒーロー左上のトンボ */
  position:absolute;
  top:14px; left:14px;
  width:20px; height:20px;
  border-top:2px solid var(--ink);
  border-left:2px solid var(--ink);
  pointer-events:none;
}
.eyebrow{
  display:inline-block;
  font-family:"Klee One",serif;
  font-size:13px;
  letter-spacing:0.24em;
  border:1px solid var(--ink);
  padding:4px 14px;
  margin-bottom:22px;
}
h1.catch{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:800;
  font-size:clamp(25px,3.4vw,38px);
  line-height:1.58;
  margin-bottom:18px;
  max-width:22em;
  text-wrap:pretty;
}
h1.catch em{
  font-style:normal;
  color:var(--accent);
  border-bottom:5px solid var(--accent);
  padding-bottom:2px;
}
.hero-sub{
  font-size:16px;
  color:var(--sub);
  max-width:var(--measure);
  margin-bottom:36px;
}
.hero-foot{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
.hero-title{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.5;
}
.hero-title small{
  display:block;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:13px;
  font-weight:400;
  color:var(--sub);
  letter-spacing:0.08em;
  margin-top:6px;
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  padding:14px 36px;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:transform .15s ease;
}
.btn.dark{ color:var(--paper); background:var(--ink); }
.btn.accent{ color:var(--paper); background:var(--accent); padding:15px 44px; }
.btn:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } .btn:hover{ transform:none; } }

/* ---------- 企画班／作画班 ---------- */
.roles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.role{ border:2px solid var(--ink); background:var(--panel); padding:22px 24px 24px; }
.role-tag{
  display:inline-block;
  font-family:"Klee One",serif;
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--paper);
  padding:3px 12px;
  margin-bottom:10px;
}
.role-tag.k{ background:var(--accent); }
.role-tag.s{ background:var(--ink); }
.role h3{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:19px;
  margin-bottom:8px;
}
.role-where{
  font-family:"Klee One",serif;
  font-size:12px;
  color:var(--accent);
  margin-bottom:10px;
}
.role p{ font-size:15px; color:var(--sub); }

/* ---------- 相性（墨ベタのコマ） ---------- */
.fit{ background:var(--ink); color:var(--paper); padding:30px 32px; margin-top:20px; max-width:var(--box-16); }
.fit p{ font-size:16px; color:#d5d2cc; }
.fit .turn{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:18px;
  color:#f0c9a8;
  margin-top:14px;
}

/* ---------- お約束すること ---------- */
.promises{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.promise{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:16px;
  align-items:start;
  border:2px solid var(--ink);
  background:var(--panel);
  padding:20px 22px;
  max-width:var(--box-15);
}
.promise-num{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:800;
  font-size:27px;
  color:var(--accent);
  line-height:1.3;
}
.promise h3{ font-size:17px; margin-bottom:5px; }
.promise p{ font-size:15px; color:var(--sub); }

/* ---------- 選考の流れ ---------- */
.steps{ margin-top:22px; }
.step{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:18px;
  position:relative;
  padding-bottom:26px;
}
.step:last-child{ padding-bottom:0; }
.step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:23px; top:46px; bottom:2px;
  border-left:1px dashed var(--guide);
}
.step-num{
  width:48px; height:48px;
  border:2px solid var(--ink);
  background:var(--panel);
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:800;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.step h3{ font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif; font-size:18px; margin-bottom:5px; }
.step p{ font-size:15px; color:var(--sub); max-width:var(--measure); }
.step p + p{ margin-top:0.8em; }
.fee{
  display:inline-block;
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:14px;
  border:2px solid var(--accent);
  background:var(--paper);
  padding:6px 16px;
  margin-top:10px;
}

/* ---------- ヤタロウ ---------- */
.mascot{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:22px;
  align-items:start;
  margin-top:6px;
}
.mascot-icon{
  width:84px; height:84px;
  border:2px solid var(--ink);
  background:var(--accent);
  color:var(--paper);
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:36px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.bubble{ position:relative; border:2px solid var(--ink); background:var(--panel); padding:20px 24px; max-width:648px; }
.bubble::before,
.bubble::after{
  content:"";
  position:absolute;
  left:-14px; top:28px;
  width:0; height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.bubble::before{ border-right:14px solid var(--ink); }
.bubble::after{ left:-11px; border-right:14px solid var(--panel); }
.bubble h3{ font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif; font-size:17px; margin-bottom:7px; }
.bubble p{ font-size:15px; color:var(--sub); }

/* ---------- 応募フォーム ---------- */
.entry{ padding:64px var(--gutter) 72px; border-top:2px solid var(--ink); }
.entry .lead{ margin-bottom:26px; }

.notice{
  border:2px solid var(--ink);
  background:var(--panel);
  padding:20px 22px;
  margin-bottom:28px;
  max-width:var(--box-16);
}
.notice h3{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:16px;
  margin-bottom:8px;
}
.notice p{ font-size:15px; color:var(--sub); }
.notice p + p{ margin-top:0.7em; }

.form{ max-width:36em; }
.field{ margin-bottom:18px; }
.field > label,
.fieldset > legend{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-bottom:5px;
}
.req{
  font-family:"Klee One",serif;
  font-size:11px;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:0 6px;
  margin-left:8px;
  vertical-align:2px;
}
.hint{ font-size:13px; color:var(--sub); margin-bottom:6px; }

.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--ink);
  padding:10px 12px;
}
.form textarea{ min-height:110px; resize:vertical; }
.form ::placeholder{ color:var(--muted); opacity:1; }

/* スパム対策のおとり項目。画面外へ飛ばして人間には見えなくする。
   display:none にすると埋めないロボットがいるため、位置で隠す。 */
.honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.form input:focus-visible,
.form textarea:focus-visible,
.form input[type="checkbox"]:focus-visible,
.form input[type="radio"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.fieldset{ border:0; margin-bottom:18px; }
.choices{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:2px; }
.choice{ display:flex; align-items:center; gap:7px; font-size:15px; }
.choice input{ width:17px; height:17px; accent-color:var(--accent); }

.consent{ display:flex; align-items:flex-start; gap:9px; font-size:14px; margin:22px 0 20px; }
.consent input{ width:17px; height:17px; margin-top:5px; accent-color:var(--accent); flex-shrink:0; }

.form-note{ font-size:13px; color:var(--sub); margin-top:16px; max-width:var(--measure); }
.form-note + .form-note{ margin-top:10px; font-size:12px; color:var(--muted); }

/* reCAPTCHA の右下バッジを隠す。
   代わりに、Googleが求める告知文を送信ボタンの下に置いてある。
   告知文を消す場合は、この指定も外してバッジを表示させること。
   バッジ自体に style="visibility: visible" がインラインで付くため、
   !important を付けないと打ち消せない。 */
.grecaptcha-badge{ visibility:hidden !important; }

/* ---------- 応募完了ページ ---------- */
.stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:92px; height:92px;
  border:3px solid var(--accent);
  border-radius:50%;
  color:var(--accent);
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:23px;
  line-height:1.25;
  text-align:center;
  transform:rotate(-8deg);
  margin-bottom:26px;
}
.ph{                         /* 公開前に差し替える箇所の目印 */
  color:#b03a2b;
  background:#fdf0ed;
  padding:0 5px;
}
.back-link{
  display:inline-block;
  margin-top:26px;
  font-family:"Klee One",serif;
  font-size:14px;
}

footer{
  padding:0 var(--gutter) 34px;
  font-family:"Klee One",serif;
  font-size:12px;
  color:var(--muted);
}

/* ==========================================================
   レスポンシブ
   ========================================================== */
@media (max-width:900px){
  /* 工程表示が見出しに被らないよう、本文の下へ回す */
  .stage-mark{
    position:static;
    text-align:left;
    max-width:none;
    margin-top:26px;
    padding-top:14px;
    border-top:1px dashed var(--guide-line);
  }
  .stage-mark .name{ display:inline; font-size:15px; margin:0 6px; }
  .roles{ grid-template-columns:minmax(0,1fr); }
  .role{ max-width:696px; }
}

@media (max-width:720px){
  :root{ --gutter:20px; --measure:100%; --box-16:100%; --box-15:100%; --art-w:72%; }

  /* 広い画面でだけ効かせている改行。
     狭い画面では自動の折り返しと重なって短い行が残るため無効にする。 */
  br.wide{ display:none; }

  .sheet{ grid-template-columns:minmax(0,1fr); }
  .rail{ display:none; }
  body{ background-size:32px 32px; }

  /* 画面が狭いと原稿が本文の真後ろに来るため、さらに薄くする */
  .art::before{
    opacity:calc(var(--art-op,0.15) * 0.6);
    background-position:center top;
  }

  .s{ padding:44px var(--gutter); }
  .hero{ padding:40px var(--gutter) 44px; }
  .hero::after, .crop-tl{ display:none; }
  .fit{ padding:22px 20px; }
  .bubble{ max-width:none; }
  .promise{ grid-template-columns:40px minmax(0,1fr); gap:12px; padding:18px 16px; }
  .promise-num{ font-size:22px; }
  .step{ grid-template-columns:40px minmax(0,1fr); gap:14px; }
  .step-num{ width:40px; height:40px; font-size:16px; }
  .step:not(:last-child)::before{ left:19px; top:40px; }
  .mascot{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .bubble::before,.bubble::after{ display:none; }
  .entry{ padding:44px var(--gutter) 52px; }
  .btn{ padding:13px 28px; font-size:15px; }
}