/* トップ top.css v2.0（WS-02）：チラシの赤を引き継ぐ表紙と、4社を「別々の制作者のサイト」として並べる入口 */
@font-face { font-family: "A Display"; src: url("fonts/a-shippori.woff2") format("woff2"); font-weight: 800; font-display: optional; }
@font-face { font-family: "B Display"; src: url("fonts/b-zenold.woff2") format("woff2"); font-weight: 700; font-display: optional; }
@font-face { font-family: "C Display"; src: url("fonts/c-zenkaku.woff2") format("woff2"); font-weight: 900; font-display: optional; }
@font-face { font-family: "D Display"; src: url("fonts/d-zenmaru.woff2") format("woff2"); font-weight: 700; font-display: optional; }

.top-red { background: var(--red); color: var(--ink); padding: 28px 0 32px; }
.top-lead { font-family: var(--font-ws); font-size: clamp(20px, 5.8vw, 34px); line-height: 1.3; margin: 0 0 6px; }
.top-h1 { font-family: var(--font-ws); font-size: clamp(40px, 12.4vw, 116px); line-height: 1.12; margin: 0 0 18px; }
.top-sub { font-size: clamp(18px, 5vw, 24px); font-weight: 700; line-height: 1.5; margin: 0; max-width: 24em; }
.top-info-wrap { padding: 16px 0 8px; }
.top-info { margin: 0; }
.top-info > div { display: grid; grid-template-columns: 5.2em 1fr; gap: 8px; padding: 12px 0; border-bottom: 2px solid var(--ink); }
.top-info dt { font-weight: 700; font-size: 16px; line-height: 1.6; padding-top: 2px; }
.top-info dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.55; }
@media (min-width: 960px) {
  .top-fv { display: grid; grid-template-columns: 1.5fr 1fr; align-items: stretch; }
  .top-red { display: flex; align-items: flex-end; padding: 72px 0 56px; min-height: 72vh; }
  .top-red .wrap { width: auto; margin: 0 48px 0 max(32px, calc((100vw - 1120px) / 2)); }
  .top-info-wrap { width: auto; margin: 0; padding: 56px 32px 24px; display: flex; flex-direction: column; justify-content: flex-end; }
}

.top-cos { padding: 72px 0 24px; }
.top-h2 { font-family: var(--font-ws); font-size: clamp(26px, 7.2vw, 52px); line-height: 1.4; margin: 0 0 20px; }
.top-about { max-width: 36em; }
.entrances { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
@media (min-width: 720px) { .entrances { grid-template-columns: 1fr 1fr; gap: 24px; } }
.entrance-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; border: 3px solid var(--ink); }
.entrance-photo { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.entrance-photo img { width: 100%; height: 100%; object-fit: cover; }
.entrance-body { display: block; flex: 1; padding: 16px 16px 20px; }
.entrance .kind { display: block; font-size: 16px; font-weight: 700; }
.entrance .name { display: block; font-size: 27px; line-height: 1.35; margin: 4px 0 8px; }
.entrance .word { display: block; font-size: 16px; line-height: 1.7; }
.co-a .entrance-body { background: #FFFFFF; border-top: 8px solid #E0A21A; }
.co-a .name { font-family: "A Display", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 800; color: #5E2436; }
.co-b .entrance-body { background: #EEF1F0; color: #2A3135; }
.co-b .name { font-family: "B Display", "Hiragino Mincho ProN", "Yu Mincho", serif; color: #34495A; }
.co-b .kind { color: #5A4430; }
.co-c .entrance-body { background: #17325A; color: #FFFFFF; }
.co-c .kind { color: #F2B705; }
.co-c .name { font-family: "C Display", var(--font-ui); font-weight: 900; }
.co-d .entrance-body { background: #FFF8EE; color: #2B2118; }
.co-d .name { font-family: "D Display", var(--font-ui); color: #B23A1E; }
.co-d .kind { color: #2F5E2B; }
/* 扉（AS-14 の転用：4社の扉が順に開く。トップの動きはこの1か所） */
.door { position: absolute; inset: 0; transform-origin: right center; transform: scaleX(0); }
.co-a .door { background: #E0A21A; } .co-b .door { background: #4A6572; } .co-c .door { background: #17325A; } .co-d .door { background: #D6452A; }
.js-motion .entrances .door { transform: scaleX(1); transition: transform 760ms cubic-bezier(0.7, 0, 0.2, 1) calc(var(--n) * 150ms + 120ms); }
.js-motion .entrances.is-in .door { transform: scaleX(0); }

.top-apply { padding: 48px 0 8px; }
.top-apply .wrap { max-width: 760px; }
.top-guide { margin-top: 28px; }
.top-guide .sub { font-weight: 400; font-size: 16px; }
@media (min-width: 960px) { .top-h1 { font-size: clamp(56px, 6.4vw, 100px); } }