/* ==========================================================================
   components.css — 部品
   規律：ラベルと数値は必ず縦積み＋余白（inline で詰めない）／アイコンは絵文字でなくSVG
   （DESIGN_LAWS_DEEP.md E2項）
   ========================================================================== */

/* ---- 章扉ロックアップ（番号＋英字＋和文サブ）----------------------------- */
.lockup__no {
  display: block;
  font-family: var(--font-en); font-size: var(--fs-caption);
  letter-spacing: var(--ls-cap); opacity: 0.72;
  margin-bottom: var(--space-2);
}
.lockup__en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 0.94; letter-spacing: var(--ls-en);
  text-transform: uppercase;
  color: inherit;
}
.lockup__ja {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-head);
  color: inherit;
}
.lockup__note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.82);
}

/* ---- FV ------------------------------------------------------------------ */
.fv__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-en); font-size: var(--fs-caption);
  letter-spacing: var(--ls-cap); color: var(--color-ink);
  border: 1px solid var(--color-ink-16); border-radius: var(--radius-pill);
  padding: 6px 14px; margin-bottom: var(--space-4);
}
.fv__title {
  font-family: var(--font-en);
  font-size: var(--fs-display);
  line-height: 0.88; letter-spacing: var(--ls-en);
  text-transform: uppercase; color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.fv__title span { display: block; }
.fv__title .is-out { color: transparent; -webkit-text-stroke: 1.5px var(--color-ink); }
.fv__lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--color-ink); font-weight: 500;
  margin-bottom: var(--space-2);
}
.fv__sub { font-size: var(--fs-body); color: var(--color-body); }

/* ---- ボタン -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;                     /* タッチ48dp以上（第12-5） */
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: 700;
  text-decoration: none; text-align: center;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--color-ink); color: #fff; box-shadow: var(--shadow-card); }
.btn--primary:hover { background: #0a2c53; box-shadow: var(--shadow-lift); }
.btn--ghost { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink-16); }
.btn--ghost:hover { border-color: var(--color-ink); background: var(--color-ink-08); }
/* LINE：白文字＋緑ベタは 2.26:1 でAAを割るため、白地＋緑の縁＋緑のロゴで識別させる。
   文字は濃紺（対白 16:1）なので、どの面に置いてもコントラストが崩れない。 */
.btn--line {
  background: #fff; color: var(--color-ink);
  border: 2px solid var(--line-green);
  box-shadow: var(--shadow-card);
}
.btn--line:hover { background: #F2FCF6; }
.btn--line .icon { color: var(--line-green); }
.btn--on-ink { background: #fff; color: var(--color-ink); }
.btn--on-ink:hover { background: #F0F4F9; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: var(--fs-small); }
.btn .icon { width: 18px; height: 18px; flex: none; }

/* ---- 見出し（右カラム内）------------------------------------------------- */
.h-block { display: grid; gap: var(--space-2); }
.h-block__en {
  font-family: var(--font-en); font-size: var(--fs-caption);
  letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--theme);
}
.h-block__ja {
  font-size: var(--fs-h2); line-height: var(--lh-head); color: var(--color-ink);
}
.h-block__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-body); }

.prose { display: grid; gap: var(--space-3); }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose strong { color: var(--color-ink); font-weight: 700; }

/* ---- 写真 ---------------------------------------------------------------- */
.figure { display: grid; gap: var(--space-2); }
.figure img { border-radius: var(--radius); width: 100%; }
.figure figcaption {
  font-size: var(--fs-small); color: var(--color-muted); line-height: 1.7;
}
.figure--tall img { aspect-ratio: 2 / 3; object-fit: cover; }
.figure--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.figure--square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* 写真に重なる縦組みラベル（Tabio DNA／美術館キャプションの借用） */
.figure--tagged { position: relative; }
.figure--tagged .tag-v {
  position: absolute; top: var(--space-3); right: var(--space-3);
  writing-mode: vertical-rl;
  background: var(--theme); color: #fff;
  font-size: var(--fs-small); font-weight: 700;
  padding: 12px 8px; border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
}

/* 2枚並べ（3カード均等を避け、意図的に非対称にする） */
.duo { display: grid; gap: var(--space-3); }
@media (min-width: 700px) {
  .duo { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .duo > :last-child { margin-top: var(--space-8); }   /* 段差＝均等を崩す */
}

/* ---- スタッフカード ------------------------------------------------------ */
.staff { display: grid; gap: var(--space-6); }
.staff__item { display: grid; gap: var(--space-3); }
@media (min-width: 700px) {
  .staff__item { grid-template-columns: 1fr 1.15fr; gap: var(--space-5); align-items: center; }
  .staff__item:nth-child(even) > .figure { order: 2; }
}
.staff__meta { display: grid; gap: var(--space-2); }
.staff__from {
  display: inline-flex; align-self: start; align-items: center; gap: 6px;
  background: var(--color-ink-08); color: var(--color-ink);
  font-size: var(--fs-caption); font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.staff__name { font-size: var(--fs-h3); color: var(--color-ink); }
.staff__role { font-size: var(--fs-small); color: var(--color-muted); }
.staff__school { font-size: var(--fs-small); color: var(--color-body); }

/* ---- 数値（ラベルと値は縦積み＋余白。inline で詰めない）------------------ */
.stats { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  display: grid; gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.stat__label {
  display: block;
  font-size: var(--fs-small); color: var(--color-muted); font-weight: 500;
}
.stat__value {
  display: block;
  font-size: var(--fs-h2); line-height: 1.2; color: var(--color-ink); font-weight: 700;
  margin-top: var(--space-1);
}
.stat__unit { font-size: var(--fs-body); font-weight: 500; margin-left: 2px; }
.stat__note {
  display: block;
  font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.7;
  margin-top: var(--space-1);
}
.stat--wide { grid-column: 1 / -1; }

/* 手当リスト */
.perks { display: grid; gap: var(--space-2); }
@media (min-width: 700px) { .perks { grid-template-columns: repeat(2, 1fr); } }
.perk {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}
.perk .icon { width: 20px; height: 20px; color: var(--theme); margin-top: 3px; }
.perk__body { display: grid; gap: 4px; }
.perk__title { font-size: var(--fs-body); font-weight: 700; color: var(--color-ink); }
.perk__desc { font-size: var(--fs-small); color: var(--color-body); line-height: 1.75; }

/* ---- 作品グリッド -------------------------------------------------------- */
.works { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .works { grid-template-columns: repeat(4, 1fr); } }
.works img { border-radius: var(--radius-sm); aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- 見学の流れ（ステップ）----------------------------------------------- */
.steps { display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  display: grid; gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 3px solid var(--theme);
}
.step__no {
  font-family: var(--font-en); font-size: var(--fs-caption);
  letter-spacing: var(--ls-cap); color: var(--theme);
}
.step__title { font-size: var(--fs-body); font-weight: 700; color: var(--color-ink); }
.step__desc { font-size: var(--fs-small); color: var(--color-body); line-height: 1.75; }
/* 濃紺の面では文字色を反転（inline style で個別指定しない） */
.band--ink .step__title { color: #fff; }
.band--ink .step__desc { color: rgba(255, 255, 255, 0.86); }
.band--ink .h-block__lead { color: rgba(255, 255, 255, 0.9); }
.band--ink .h-block__lead strong { color: #fff; }

/* ---- 注意書き（見学は応募ではない）--------------------------------------- */
.notice {
  display: grid; gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-left: 3px solid var(--theme);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.notice--on-ink { background: rgba(255,255,255,0.10); border-left-color: #fff; }
.notice__title { font-size: var(--fs-body); font-weight: 700; color: var(--color-ink); }
.notice--on-ink .notice__title { color: #fff; }
.notice__desc { font-size: var(--fs-small); line-height: 1.8; }
.notice--on-ink .notice__desc { color: rgba(255,255,255,0.88); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-2); }
.faq__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 56px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body); font-weight: 700; color: var(--color-ink);
  text-align: left;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item[open] .faq__q { border-bottom: 1px solid var(--color-line); }
.faq__mark { flex: none; width: 18px; height: 18px; color: var(--theme); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__mark { transform: rotate(45deg); }
.faq__a { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); line-height: 1.85; }

/* ---- フォーム（第7-Form章：上ラベル・iOS 16px・色以外の手掛かり）-------- */
/* 入力欄は「入る内容の長さ」に合わせる。1000px超の一本線は入力量を誤認させる（第7-Form章）。
   読ませる本文ではないので、ここは意図的に幅を絞ってよい。 */
.form { display: grid; gap: var(--space-4); max-width: 40em; }
.field { display: grid; gap: var(--space-1); }
.field__label {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-small); font-weight: 700; color: var(--color-ink);
}
.field__req {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--color-ink); color: #fff;
  padding: 2px 7px; border-radius: 3px;
}
.field__opt { font-size: 11px; color: var(--color-muted); }
.field__hint { font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.7; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-size: 16px;                    /* iOS の自動ズーム防止（16px未満にしない） */
  background: var(--color-bg);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.8; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-decor); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-ink-08);
  outline: none;
}
/* エラーは色＋アイコン＋文言の3手掛かり（色だけに頼らない） */
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: #C0392B; }
.field__error {
  display: none; align-items: center; gap: 6px;
  font-size: var(--fs-caption); color: #C0392B; font-weight: 700;
}
.field.is-error .field__error { display: flex; }
.field__error .icon { width: 14px; height: 14px; flex: none; }

.choice { display: grid; gap: var(--space-1); }
@media (min-width: 620px) { .choice { grid-template-columns: repeat(3, 1fr); } }
.choice__opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--fs-small); font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.choice__opt:hover { border-color: var(--color-decor); }
.choice__opt input { width: 18px; height: 18px; min-height: 0; accent-color: var(--color-ink); flex: none; }
.choice__opt:has(input:checked) { border-color: var(--color-ink); background: var(--color-ink-08); font-weight: 700; color: var(--color-ink); }

.form__result { display: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-small); line-height: 1.8; }
.form__result.is-ok { display: block; background: #EAF5EE; border-left: 3px solid #1E8E4E; color: #14663A; }
.form__result.is-ng { display: block; background: #FCEDEB; border-left: 3px solid #C0392B; color: #94271B; }

.form__privacy { font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.8; }

/* ---- APPIIS AI チャット --------------------------------------------------- */
.chat-launcher {
  position: fixed; right: var(--space-3); bottom: 88px; z-index: var(--z-chat);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 20px 12px 16px;
  background: var(--color-ink); color: #fff;
  border-radius: var(--radius-pill);
  /* 濃紺セクション（band--ink）の上では地色と同化して消えるため、必ず白い縁を回す */
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-small); font-weight: 700;
  /* FVの上には出さない。FV内には専用のボタンがあるので、
     ここで出すと本文（「2027年度 新卒美容学生採用」）を覆ってしまう。 */
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.chat-launcher.is-shown { opacity: 1; visibility: visible; transform: none; }
.chat-launcher.is-shown:hover { transform: translateY(-2px); }
.chat-launcher .icon { width: 20px; height: 20px; }

.chat {
  position: fixed; z-index: var(--z-chat);
  right: var(--space-3); bottom: var(--space-3);
  width: min(420px, calc(100vw - var(--space-4)));
  height: min(640px, calc(100svh - var(--space-8)));
  display: none; grid-template-rows: auto 1fr auto;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.chat.is-open { display: grid; }
.chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink); color: #fff;
}
.chat__title { display: grid; gap: 2px; }
.chat__name { font-family: var(--font-en); font-size: var(--fs-small); letter-spacing: var(--ls-cap); }
.chat__sub { font-size: 11px; color: rgba(255,255,255,0.78); }
.chat__close { color: #fff; padding: 8px; display: grid; place-items: center; }
.chat__close .icon { width: 18px; height: 18px; }
.chat__log { overflow-y: auto; padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 14px; font-size: var(--fs-small); line-height: 1.8; }
.msg--ai { justify-self: start; background: var(--color-surface); color: var(--color-body); border-bottom-left-radius: 4px; }
.msg--ai strong { color: var(--color-ink); }
.msg--ai a { display: inline-block; margin-top: var(--space-1); font-weight: 700; }
.msg--me { justify-self: end; background: var(--color-ink); color: #fff; border-bottom-right-radius: 4px; }
.msg--typing { color: var(--color-muted); font-style: normal; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--space-3) var(--space-2); }
.chip {
  font-size: var(--fs-caption); padding: 8px 12px; min-height: 36px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  color: var(--color-ink); background: var(--color-bg);
}
.chip:hover { border-color: var(--color-ink); background: var(--color-ink-08); }
.chat__form { display: flex; gap: var(--space-1); padding: var(--space-2); border-top: 1px solid var(--color-line); }
.chat__input {
  flex: 1; min-height: 48px; padding: 12px 14px; font-size: 16px;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-pill);
}
.chat__input:focus { border-color: var(--color-ink); outline: none; }
.chat__send {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  background: var(--color-ink); color: #fff; border-radius: 50%;
}
.chat__send .icon { width: 20px; height: 20px; }
.chat__send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- フッター ------------------------------------------------------------ */
.footer { background: var(--color-ink); color: rgba(255,255,255,0.82); padding: var(--space-10) var(--flow-pad) var(--space-8); }
.footer__inner { max-width: var(--content-max); margin-inline: auto; display: grid; gap: var(--space-6); }
@media (min-width: 800px) { .footer__inner { grid-template-columns: 1.2fr 1fr; } }
.footer__logo { width: 120px; margin-bottom: var(--space-3); }
.footer__addr { font-size: var(--fs-small); line-height: 1.9; }
.footer__links { display: grid; gap: var(--space-2); align-content: start; }
.footer__links a { color: #fff; font-size: var(--fs-small); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer__links a:hover { text-decoration: underline; }
.footer__copy { margin-top: var(--space-6); font-size: var(--fs-caption); color: rgba(255,255,255,0.6); }

/* ---- スクロール出現（transform / opacity のみ）--------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}