@import url('./fonts.css');

/* 真似元: 大成建設 採用情報サイト taisei.co.jp/saiyo/new/
   観察結果:
   - 細い上ナビ(通年採用 実施中! / INTERNSHIP / ENTRY-MY PAGE)
   - 左上に小さなロゴ「TAISEI CORPORATION RECRUITING SITE」
   - ヒーロー: 大型写真 + 縦書きキャッチコピー「自らの足跡を残すこと」
   - 帯バナー(通年採用)・ロゴ(150th)・座談会動画スライダー
   - CONTENTS グリッド (写真タイル多数・社員顔写真ベース)
   - カテゴリフィルタ(全員/土木/建築/事務 + アイコン4種)
   - フッターは青地、INTERNSHIP/ENTRY 2ボタン、WORK/PROJECT/SESSION/COMPANY/ENVIRONMENT/RECRUIT 6列リンク
   - 主色: 青(#1c3d8e系)・白・うすグレー */
:root{
  --p04-bg:#fff;
  --p04-ink:#31343A;
  --p04-ink-soft:#4a4e56;
  --p04-mute:#888c95;
  --p04-line:#e0e3e8;
  --p04-paper:#f4f5f7;
  --p04-blue:#1B3D8F;
  --p04-blue-dark:#142E6E;
  --p04-blue-light:#2C57B5;
  --p04-red:#C8484A;
  --p04-green:#39805F;
  --p04-gold:#B9905A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--p04-bg);color:var(--p04-ink);font-family:var(--p04-font-body);font-weight:400;font-size:14px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* ===== HEADER ===== */
.p04-skip{position:absolute;left:-9999px;top:0;background:var(--p04-blue);color:#fff;padding:8px 14px}
.p04-skip:focus{left:14px;top:14px;z-index:100}

.p04-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--p04-line);padding:14px 28px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.p04-header__brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;color:var(--p04-ink)}
.p04-header__brand small{font-family:var(--p04-font-display);font-weight:500;font-size:9.5px;letter-spacing:.16em;color:var(--p04-mute)}
.p04-header__brand strong{font-family:var(--p04-font-display);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--p04-ink);margin-top:2px}
.p04-header__brand strong::before{content:"";display:inline-block;width:18px;height:18px;background:var(--p04-ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);vertical-align:-4px;margin-right:8px}
.p04-header__util{display:flex;align-items:center;gap:16px;font-size:11.5px}
.p04-header__util .p04-tag{background:#fff;border:1px solid var(--p04-blue);color:var(--p04-blue);padding:5px 10px;font-weight:700;letter-spacing:.06em;font-size:10.5px}
.p04-header__util .p04-tag::before{content:"●";color:var(--p04-blue);margin-right:6px;font-size:8px}
.p04-header__util a.p04-internship{background:var(--p04-blue);color:#fff;padding:9px 18px;font-family:var(--p04-font-display);font-weight:700;font-size:11px;letter-spacing:.14em}
.p04-header__util a.p04-entry{background:#fff;color:var(--p04-ink);padding:9px 18px;border:1px solid var(--p04-ink);font-family:var(--p04-font-display);font-weight:700;font-size:11px;letter-spacing:.14em}
.p04-header__hb{display:none;width:30px;height:24px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.p04-header__hb span{display:block;width:100%;height:2px;background:var(--p04-ink)}

/* ===== HERO ===== */
.p04-hero{position:relative;background:#0c1632;overflow:hidden}
.p04-hero__plate{position:relative;width:100%;height:min(78vh,720px);overflow:hidden}
.p04-hero__plate img{width:100%;height:100%;object-fit:cover;opacity:.88}
.p04-hero__copy{position:absolute;left:5%;top:14%;color:#fff;writing-mode:vertical-rl;font-family:var(--p04-font-body);font-weight:900;font-size:clamp(28px,4.4vw,56px);line-height:1.6;letter-spacing:.08em;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.p04-hero__copy em{font-style:normal;color:#fff;border-bottom:4px solid var(--p04-red);padding-bottom:2px}
.p04-hero__caption{position:absolute;right:5%;bottom:8%;color:#fff;text-align:right;max-width:520px}
.p04-hero__caption h1{font-family:var(--p04-font-body);font-weight:900;font-size:clamp(22px,2.6vw,32px);line-height:1.45;margin:0 0 10px;color:#fff;letter-spacing:.04em}
.p04-hero__caption p{font-size:13px;line-height:1.85;color:#dadde8;margin:0}
.p04-hero__scroll{position:absolute;right:24px;top:50%;transform:translateY(-50%);color:#fff;font-family:var(--p04-font-display);font-size:10px;letter-spacing:.3em;writing-mode:vertical-rl}
.p04-hero__scroll::after{content:"";display:block;width:1px;height:60px;background:#fff;margin:14px auto 0}

/* ===== 帯バナー ===== */
.p04-banner{background:var(--p04-blue);color:#fff;padding:14px 28px;display:flex;justify-content:center;align-items:center;gap:24px;font-size:13px}
.p04-banner strong{font-family:var(--p04-font-display);font-weight:800;font-size:16px;letter-spacing:.06em}
.p04-banner a{font-size:11.5px;border:1px solid #fff;padding:5px 14px;font-family:var(--p04-font-display);letter-spacing:.14em;font-weight:600}

/* ===== 150周年バナー ===== */
.p04-anniv{background:var(--p04-blue-dark);color:#fff;padding:24px 28px;display:flex;justify-content:center;align-items:center;gap:28px}
.p04-anniv__num{font-family:var(--p04-font-display);font-weight:800;font-size:48px;color:#fff;line-height:1;letter-spacing:.02em}
.p04-anniv__num small{font-size:14px;font-weight:500;letter-spacing:.1em;margin-left:4px}
.p04-anniv__txt{font-family:var(--p04-font-display);font-weight:700;font-size:14px;letter-spacing:.18em;color:#fff;border-left:1px solid #4a6bb5;padding-left:24px}
.p04-anniv__txt b{display:block;font-family:var(--p04-font-body);font-size:11px;color:#a8b8de;letter-spacing:.06em;margin-top:4px;font-weight:400}

/* ===== TAISEI CULTURE 帯 ===== */
.p04-culture{background:var(--p04-blue-light);color:#fff;padding:20px 28px;text-align:center}
.p04-culture h2{font-family:var(--p04-font-display);font-weight:800;font-size:22px;letter-spacing:.1em;margin:0 0 6px;color:#fff}
.p04-culture p{font-size:12px;color:#dde4f2;margin:0;letter-spacing:.06em}

/* ===== 募集中ストリップ ===== */
.p04-strip{background:#fff;border-bottom:1px solid var(--p04-line);padding:14px 28px;display:flex;justify-content:center;align-items:center;gap:24px;font-size:13px}
.p04-strip__tag{background:var(--p04-blue);color:#fff;padding:5px 14px;font-family:var(--p04-font-display);font-weight:700;font-size:11px;letter-spacing:.14em}
.p04-strip__txt{color:var(--p04-ink);font-weight:700;font-size:14px}
.p04-strip a{font-size:11px;color:var(--p04-blue);border:1px solid var(--p04-blue);padding:5px 12px;font-family:var(--p04-font-display);letter-spacing:.1em}

/* ===== 動画スライダー(3枚) ===== */
.p04-vidstrip{padding:48px 28px;background:#fff;position:relative}
.p04-vidstrip__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.p04-vidcard{aspect-ratio:16/10;background:#222;position:relative;overflow:hidden;cursor:pointer}
.p04-vidcard img{width:100%;height:100%;object-fit:cover;opacity:.85}
.p04-vidcard__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;background:rgba(255,255,255,.92);border-radius:50%;display:grid;place-items:center;color:var(--p04-blue);font-size:18px}
.p04-vidcard__play::before{content:"▶";margin-left:3px}
.p04-vidcard__cap{position:absolute;left:14px;bottom:14px;color:#fff;font-family:var(--p04-font-body);font-weight:700;font-size:13px;line-height:1.4;text-shadow:0 2px 8px rgba(0,0,0,.6);max-width:80%}
.p04-vidcard__cap small{display:block;font-family:var(--p04-font-display);font-weight:700;font-size:10px;letter-spacing:.16em;color:#fff;margin-bottom:4px;opacity:.85}
.p04-vidstrip__arrow{position:absolute;top:50%;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--p04-line);display:grid;place-items:center;color:var(--p04-ink-soft);font-size:14px}
.p04-vidstrip__arrow--l{left:-8px;transform:translateY(-50%)}
.p04-vidstrip__arrow--r{right:-8px;transform:translateY(-50%)}

/* ===== CONTENTS 見出し + フィルタ ===== */
.p04-contents{padding:0 28px 60px;background:#fff}
.p04-contents__head{max-width:1100px;margin:0 auto 28px;padding:36px 0 28px;border-bottom:1px solid var(--p04-line)}
.p04-contents__head small{font-family:var(--p04-font-display);font-size:11px;color:var(--p04-mute);letter-spacing:.2em;display:block;margin-bottom:6px}
.p04-contents__head h2{font-family:var(--p04-font-display);font-weight:800;font-size:clamp(40px,5.6vw,72px);letter-spacing:.1em;color:var(--p04-ink);margin:0;line-height:1}
.p04-contents__filter{max-width:1100px;margin:0 auto 28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.p04-contents__filter button{font-family:var(--p04-font-body);font-size:12px;background:#fff;border:1px solid var(--p04-line);padding:10px 20px;cursor:pointer;color:var(--p04-ink);font-weight:500;display:flex;align-items:center;gap:8px;border-radius:30px}
.p04-contents__filter button.is-on{background:var(--p04-blue);color:#fff;border-color:var(--p04-blue)}
.p04-contents__filter button::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--p04-line)}
.p04-contents__filter button.is-on::before{background:#fff}

/* タイルグリッド */
.p04-tiles{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.p04-tile{aspect-ratio:1/1;position:relative;background:var(--p04-paper);overflow:hidden;display:block;color:#fff}
.p04-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.p04-tile:hover img{transform:scale(1.06)}
.p04-tile__role{position:absolute;left:10px;top:10px;font-family:var(--p04-font-display);font-size:9px;font-weight:700;letter-spacing:.16em;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px}
.p04-tile__name{position:absolute;left:10px;bottom:10px;font-family:var(--p04-font-body);font-weight:700;font-size:13px;line-height:1.3;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.p04-tile__name small{display:block;font-family:var(--p04-font-display);font-weight:500;font-size:9px;letter-spacing:.14em;opacity:.85;margin-top:2px}
.p04-tile--blue{background:var(--p04-blue);display:flex;align-items:flex-end;padding:16px;text-align:left}
.p04-tile--blue .p04-tile__title{font-family:var(--p04-font-body);font-weight:900;font-size:14px;line-height:1.5;color:#fff}
.p04-tile--blue .p04-tile__title small{display:block;font-family:var(--p04-font-display);font-size:10px;letter-spacing:.18em;color:#a8b8de;margin-bottom:6px;font-weight:600}
.p04-tile--bluedark{background:var(--p04-blue-dark)}
.p04-tile--gold{background:var(--p04-gold)}
.p04-tile--red{background:var(--p04-red)}
.p04-tile--green{background:var(--p04-green)}
.p04-tile--white{background:#fff;color:var(--p04-ink);border:1px solid var(--p04-line)}
.p04-tile--white .p04-tile__title{color:var(--p04-ink)}
.p04-tile--white .p04-tile__title small{color:var(--p04-mute)}

/* ===== INTERNSHIP / ENTRY 大型CTA ===== */
.p04-cta{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff;padding:60px 28px}
.p04-cta a{background:var(--p04-blue);color:#fff;padding:28px 36px;text-align:center;font-family:var(--p04-font-display);font-weight:700;font-size:15px;letter-spacing:.22em;max-width:540px;margin:0 auto;width:100%}
.p04-cta a:nth-child(2){background:#fff;color:var(--p04-ink);border:1px solid var(--p04-ink)}

/* ===== FOOTER ===== */
.p04-foot{background:#fff;color:var(--p04-ink);padding:60px 36px 36px;border-top:1px solid var(--p04-line)}
.p04-foot__cols{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:24px;font-size:12px}
.p04-foot__col h4{font-family:var(--p04-font-display);font-weight:700;font-size:11.5px;letter-spacing:.16em;color:var(--p04-ink);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--p04-line)}
.p04-foot__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.p04-foot__col a{font-size:11.5px;color:var(--p04-ink-soft);line-height:1.6}
.p04-foot__col a:hover{color:var(--p04-blue)}
.p04-foot__brand{max-width:1200px;margin:40px auto 0;padding-top:24px;border-top:1px solid var(--p04-line);display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.p04-foot__brand strong{font-family:var(--p04-font-display);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--p04-ink)}
.p04-foot__brand strong::before{content:"";display:inline-block;width:18px;height:18px;background:var(--p04-ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);vertical-align:-4px;margin-right:8px}
.p04-foot__brand small{font-family:var(--p04-font-display);font-size:10px;letter-spacing:.12em;color:var(--p04-mute)}
.p04-foot__brand span{font-size:11px;color:var(--p04-mute)}

@media (max-width:880px){
  .p04-header{grid-template-columns:auto 1fr auto;gap:12px;padding:12px 16px}
  .p04-header__util{font-size:10px;gap:8px}
  .p04-header__util a{padding:7px 10px}
  .p04-hero__plate{height:min(60vh,560px)}
  .p04-hero__copy{font-size:32px;left:6%}
  .p04-banner,.p04-anniv,.p04-strip{flex-wrap:wrap;text-align:center;justify-content:center;gap:12px}
  .p04-vidstrip__inner{grid-template-columns:1fr;gap:14px}
  .p04-tiles{grid-template-columns:repeat(2,1fr)}
  .p04-cta{grid-template-columns:1fr;padding:36px 16px}
  .p04-foot__cols{grid-template-columns:repeat(2,1fr)}
  .p04-foot__brand{grid-template-columns:1fr;text-align:center}
}

/* ============================================================
   下層ページ共通(大成建設 下層ページ風)
   ------------------------------------------------------------
   - 上部に大型写真ヒーロー + 番号「04」+ パンくず
   - 巨大アウトラインタイポ(TOP INTERVIEW / JOBS など)が背景レイヤー
   - 青のジオメトリ的長方形ブロック(座談会ページの構図)
   ============================================================ */
.p04-page{background:#fff}
.p04-page__hero{position:relative;background:#0c1632;color:#fff;overflow:hidden;padding:0;margin-bottom:60px}
.p04-page__hero__img{position:relative;height:280px;overflow:hidden}
.p04-page__hero__img img{width:100%;height:100%;object-fit:cover;opacity:.7}
.p04-page__hero__num{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);font-family:var(--p04-font-display);font-weight:800;font-size:64px;color:#fff;letter-spacing:.05em;opacity:.95;line-height:1}
.p04-page__hero__label{position:absolute;left:50%;top:50%;transform:translate(-50%,40%);background:var(--p04-blue);color:#fff;padding:8px 28px;font-family:var(--p04-font-body);font-weight:700;font-size:14px;letter-spacing:.16em;border-radius:30px}
.p04-page__hero__title{position:relative;background:#fff;max-width:1100px;margin:-40px auto 0;padding:0 28px;font-family:var(--p04-font-display);font-weight:800;font-size:clamp(40px,6vw,84px);letter-spacing:.08em;line-height:1;color:var(--p04-paper);-webkit-text-stroke:1px var(--p04-line);text-stroke:1px var(--p04-line)}

.p04-page__inner{max-width:1100px;margin:0 auto;padding:0 28px 60px}
.p04-page__crumb{font-size:11px;color:var(--p04-mute);margin:14px 0 36px;letter-spacing:.06em;max-width:1100px;padding:0 28px}
.p04-page__crumb a{color:var(--p04-mute)}
.p04-page__lead{font-size:14.5px;line-height:1.95;color:var(--p04-ink-soft);margin:0 0 48px;max-width:64ch}

/* JOBS index — タイルマトリクス(大成「職種紹介」ページ) */
.p04-jobs__matrix{position:relative;padding:40px 0 60px}
.p04-jobs__matrix__bg{position:absolute;inset:0;background:url('https://picsum.photos/seed/p04-matrix/1800/900') center/cover;opacity:.18;z-index:0}
.p04-jobs__matrix__inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 28px}
.p04-jobs__matrix__label{display:inline-block;background:#fff;color:var(--p04-ink);padding:18px 36px;border-radius:60px;font-weight:800;font-size:18px;letter-spacing:.06em;margin:0 auto 30px;border:1px solid var(--p04-line)}
.p04-jobs__matrix__label::before{content:"";display:inline-block;width:8px;height:8px;background:var(--p04-blue);border-radius:50%;vertical-align:3px;margin-right:10px}

.p04-jobs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px;max-width:1100px;margin:0 auto;padding:0 28px}
.p04-jobcard{background:#fff;text-decoration:none;color:var(--p04-ink);display:flex;flex-direction:column;border:0;transition:transform .25s ease}
.p04-jobcard:hover{transform:translateY(-3px)}
.p04-jobcard__plate{aspect-ratio:1/1;overflow:hidden;background:var(--p04-paper);margin-bottom:18px;position:relative}
.p04-jobcard__plate img{width:100%;height:100%;object-fit:cover}
.p04-jobcard__plate::after{content:attr(data-color);position:absolute;left:0;bottom:0;width:120px;height:120px;background:var(--p04-blue);color:#fff;display:grid;place-items:center;font-family:var(--p04-font-body);font-weight:800;font-size:18px;letter-spacing:.04em}
.p04-jobcard:nth-child(3n+2) .p04-jobcard__plate::after{background:var(--p04-red)}
.p04-jobcard:nth-child(3n+3) .p04-jobcard__plate::after{background:var(--p04-green)}
.p04-jobcard__code{font-family:var(--p04-font-display);font-size:10.5px;font-weight:700;color:var(--p04-blue);letter-spacing:.18em;margin:0 0 8px}
.p04-jobcard__title{font-family:var(--p04-font-body);font-weight:800;font-size:18px;color:var(--p04-ink);margin:0 0 6px;line-height:1.4}
.p04-jobcard__sub{font-size:12.5px;color:var(--p04-ink-soft);margin:0 0 14px;line-height:1.7}
.p04-jobcard__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--p04-ink-soft);padding-top:12px;border-top:1px solid var(--p04-line)}
.p04-jobcard__meta b{color:var(--p04-ink)}
@media (max-width:880px){.p04-jobs__grid{grid-template-columns:1fr}}

/* 職種詳細(座談会ページの構図を借用) */
.p04-job__hero{position:relative;background:#0c1632;color:#fff;overflow:hidden;padding:0;margin-bottom:60px}
.p04-job__hero__img{position:relative;height:340px;overflow:hidden}
.p04-job__hero__img img{width:100%;height:100%;object-fit:cover;opacity:.72}
.p04-job__hero__num{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:var(--p04-font-display);font-weight:800;font-size:54px;color:#fff;line-height:1}
.p04-job__hero__label{position:absolute;left:50%;top:62%;transform:translateX(-50%);background:var(--p04-blue);color:#fff;padding:8px 28px;font-weight:700;font-size:13px;letter-spacing:.14em;border-radius:30px}
.p04-job__hero__title{position:relative;background:#fff;max-width:1100px;margin:-40px auto 0;padding:24px 28px 0;font-family:var(--p04-font-display);font-weight:800;font-size:clamp(36px,5vw,72px);letter-spacing:.06em;line-height:1;color:var(--p04-paper);-webkit-text-stroke:1px var(--p04-line)}
.p04-job__hero__sub{max-width:1100px;margin:18px auto 0;padding:0 28px;font-size:14.5px;line-height:1.85;color:var(--p04-ink-soft)}
.p04-job__hero__meta{max-width:1100px;margin:24px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;font-size:12.5px;border-top:1px solid var(--p04-line);padding-top:18px}
.p04-job__hero__meta dt{font-family:var(--p04-font-display);font-size:10px;letter-spacing:.16em;color:var(--p04-mute);font-weight:700;margin:0 0 4px}
.p04-job__hero__meta dd{margin:0;color:var(--p04-ink);font-weight:600;font-size:14px}
@media (max-width:880px){.p04-job__hero__meta{grid-template-columns:1fr 1fr}}

.p04-job__sec{max-width:1100px;margin:0 auto;padding:0 28px 56px;position:relative}
.p04-job__sec__bar{display:flex;align-items:stretch;gap:0;margin:0 0 28px;position:relative}
.p04-job__sec__bar__tag{background:var(--p04-blue);color:#fff;padding:18px 24px;font-family:var(--p04-font-body);font-weight:700;font-size:14px;letter-spacing:.06em;writing-mode:vertical-rl;letter-spacing:.18em}
.p04-job__sec__bar__title{background:#0c1632;color:#fff;flex:1;padding:24px 28px;font-family:var(--p04-font-display);font-weight:800;font-size:clamp(28px,3.6vw,48px);letter-spacing:.06em;line-height:1.1;display:flex;align-items:center}
.p04-job__sec p{font-size:14.5px;line-height:1.95;color:var(--p04-ink);margin:0 0 14px}
.p04-job__sec ul{padding-left:1.4em;margin:0;font-size:14.5px;line-height:1.95}
.p04-job__sec ul li{margin:0 0 6px}

/* 1日の流れ — 大成「座談会」風 縦並びの番号付きブロック */
.p04-day{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--p04-blue);padding-left:0}
.p04-day__row{display:grid;grid-template-columns:120px 1fr;gap:0;border-bottom:1px solid var(--p04-line)}
.p04-day__time{background:var(--p04-blue);color:#fff;padding:20px 18px;font-family:var(--p04-font-display);font-weight:800;font-size:18px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.p04-day__body{padding:20px 24px;background:#fff}
.p04-day__body h4{font-family:var(--p04-font-body);font-weight:700;font-size:15px;margin:0 0 6px;color:var(--p04-ink)}
.p04-day__body p{font-size:13.5px;color:var(--p04-ink-soft);margin:0;line-height:1.75}

/* requirements table */
.p04-reqtable{width:100%;border-collapse:collapse;font-size:14px;border-top:2px solid var(--p04-blue)}
.p04-reqtable tr{border-bottom:1px solid var(--p04-line)}
.p04-reqtable th{font-family:var(--p04-font-body);font-weight:700;font-size:13px;color:var(--p04-blue);text-align:left;padding:20px 20px 20px 0;width:200px;vertical-align:top;background:#fff}
.p04-reqtable td{padding:20px 0;color:var(--p04-ink);line-height:1.95}

/* faq */
.p04-faqlist{border-top:2px solid var(--p04-blue);max-width:880px;margin:0 auto}
.p04-faqitem{border-bottom:1px solid var(--p04-line);background:#fff}
.p04-faqitem summary{font-family:var(--p04-font-body);font-weight:700;font-size:15px;color:var(--p04-ink);cursor:pointer;list-style:none;padding:20px 0;display:flex;gap:18px;align-items:flex-start}
.p04-faqitem summary::-webkit-details-marker{display:none}
.p04-faqitem summary::before{content:"Q";font-family:var(--p04-font-display);font-weight:800;color:var(--p04-blue);font-size:22px;line-height:1;flex-shrink:0}
.p04-faqitem summary::after{content:"+";margin-left:auto;color:var(--p04-blue);font-size:18px;font-weight:300}
.p04-faqitem[open] summary::after{content:"−"}
.p04-faqitem div{padding:0 0 20px 40px;font-size:14px;color:var(--p04-ink-soft);line-height:1.95;display:flex;gap:18px}
.p04-faqitem div::before{content:"A";font-family:var(--p04-font-display);font-weight:800;color:var(--p04-red);font-size:22px;line-height:1;flex-shrink:0}

/* apply form */
.p04-form{display:grid;gap:22px;max-width:680px;margin:0 auto}
.p04-form__note{font-size:12.5px;color:var(--p04-ink-soft);background:var(--p04-paper);padding:16px 22px;border-left:3px solid var(--p04-blue);max-width:680px;margin:0 auto 24px;line-height:1.85}
.p04-form label{display:block;font-family:var(--p04-font-body);font-weight:700;font-size:12.5px;color:var(--p04-ink);margin:0 0 8px;letter-spacing:.04em}
.p04-form label small{font-weight:500;color:#c00;margin-left:6px;font-size:10.5px}
.p04-form input,.p04-form select,.p04-form textarea{width:100%;font:inherit;padding:14px 16px;border:1px solid var(--p04-line);background:#fff;color:var(--p04-ink);border-radius:0;font-size:14px}
.p04-form input:focus,.p04-form select:focus,.p04-form textarea:focus{outline:none;border-color:var(--p04-blue);box-shadow:0 0 0 3px rgba(27,61,143,.12)}
.p04-form button{background:var(--p04-blue);color:#fff;padding:16px 48px;font-family:var(--p04-font-display);font-weight:700;font-size:13px;letter-spacing:.2em;border:0;cursor:pointer;justify-self:center;margin-top:6px}
.p04-form button:hover{background:var(--p04-blue-dark)}

/* history */
.p04-history{border-top:2px solid var(--p04-blue);max-width:880px;margin:0 auto}
.p04-history__row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--p04-line)}
.p04-history__year{font-family:var(--p04-font-display);font-weight:800;font-size:20px;color:var(--p04-blue);letter-spacing:.04em}
.p04-history__event{font-size:14px;color:var(--p04-ink);line-height:1.85}

/* message — トップメッセージ風 青ジオメトリ */
.p04-message{position:relative;background:#fff;padding:80px 28px;margin-top:80px;overflow:hidden}
.p04-message__bg{position:absolute;right:0;top:5%;width:50%;height:60%;background:var(--p04-blue);z-index:0}
.p04-message__bg2{position:absolute;left:6%;top:18%;width:24%;height:34%;background:var(--p04-paper);z-index:0}
.p04-message__title{position:relative;font-family:var(--p04-font-display);font-weight:800;font-size:clamp(36px,5vw,72px);letter-spacing:.08em;line-height:1;color:#fff;-webkit-text-stroke:1px var(--p04-line);text-stroke:1px var(--p04-line);margin:0 0 36px;max-width:1100px;margin-left:auto;margin-right:auto;z-index:1}
.p04-message__inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;background:#fff;padding:36px;border:1px solid var(--p04-line)}
.p04-message__lead{font-family:var(--p04-font-body);font-weight:800;font-size:clamp(20px,2.6vw,30px);line-height:1.55;color:var(--p04-ink);margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--p04-line)}
.p04-message__body{font-size:14.5px;line-height:2;color:var(--p04-ink-soft);max-width:64ch;white-space:pre-line}
.p04-message__sign{margin-top:24px;font-family:var(--p04-font-body);font-weight:700;font-size:13px;color:var(--p04-blue);text-align:right}
.p04-message__sign b{color:var(--p04-ink);font-size:15px}

/* ========= 動的要素 ========= */
html.p04-motion-ready .p04-hero__plate img{transition:transform 8s ease;transform:scale(1.04)}
html.p04-motion-ready .p04-hero__plate.p04-loaded img{transform:scale(1.0)}
html.p04-motion-ready .p04-hero__copy{opacity:0;transform:translateY(20px);transition:opacity 1s ease .25s,transform 1s ease .25s}
html.p04-motion-ready .p04-hero__plate.p04-loaded .p04-hero__copy{opacity:1;transform:none}
html.p04-motion-ready .p04-hero__caption{opacity:0;transform:translateY(20px);transition:opacity 1s ease .5s,transform 1s ease .5s}
html.p04-motion-ready .p04-hero__plate.p04-loaded .p04-hero__caption{opacity:1;transform:none}
html.p04-motion-ready .p04-reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease var(--p04-delay,0ms),transform .8s ease var(--p04-delay,0ms)}
html.p04-motion-ready .p04-reveal.p04-in{opacity:1;transform:none}