@charset "utf-8";
/* I案：会社の役割を伝える、明るく奥行きのあるメインパネル */
#topMainVisual.heroI { display: flex; justify-content: center; min-height: 47rem; padding: 5.5rem 0 7rem; overflow: hidden; isolation: isolate; background: #f6f5f1; color: #12273e; }
#topMainVisual.heroI .inner { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 5rem); align-items: center; z-index: 1; }
.heroTitle { margin: 0; font-size: clamp(2.4rem, 4.1vw, 3.65rem); font-weight: 700; line-height: 1.38; letter-spacing: .035em; }
.heroTitle > span { display: block; }
.heroTitle em { font-style: normal; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroTitle small { font-size: .63em; font-weight: 700; letter-spacing: .01em; }
.heroLead { margin-top: 1.8rem; font-size: clamp(.875rem, 1.1vw, 1rem); line-height: 2; font-weight: 500; letter-spacing: .01em; }
.heroPhases { display: flex; align-items: stretch; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.heroPhases li { flex: 1; position: relative; padding: 1rem 1.4rem; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 700; line-height: 1.5; text-align: center; color: #102a43; background: #c5dfed; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.heroPhases li:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.heroPhases li + li { margin-left: -6px; background: #aacee2; }
.heroPhases li:nth-child(3) { background: #87b8d4; }
.heroActions { display: flex; align-items: center; gap: 2rem; margin-top: 2.5rem; font-size: .875rem; font-weight: 700; }
.heroActions a { display: inline-flex; justify-content: space-between; align-items: center; gap: 1rem; text-decoration: none; transition: background .2s, color .2s; }
.heroPrimary { min-width: 17rem; padding: 1.05rem 1.6rem; border-radius: 999px; background: var(--grad-main); color: #fff; }
.heroPrimary:hover { background: var(--grad-main); filter: brightness(.95); }
.heroSecondary { color: #213d5d; padding: .7rem 0; border-bottom: 1px solid #93adc3; }
.heroSecondary:hover { color: #2784c6; }
.heroActions a:focus-visible, .heroScroll:focus-visible { outline: 3px solid #2784c6; outline-offset: 5px; }
.heroCompany { padding: 0 0 0 clamp(1.5rem, 3vw, 3rem); border-left: 1px solid #d2dfe8; text-align: center; }
.companyIntro { margin-top: 0; font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 700; }
.companyName { margin-top: 0; font-family: Outfit, sans-serif; font-size: 7rem; font-weight: 500; line-height: 1.05; letter-spacing: -.04em; color: #17334b; }
.companySub { margin-top: .5rem; font-family: Outfit, sans-serif; font-size: 1.75rem; font-weight: 500; line-height: 1.2; letter-spacing: .02em; color: #17334b; white-space: nowrap; }
.companyEnd { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 700; }
.heroScroll { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .75rem; font-family: Inter,sans-serif; font-size: .625rem; letter-spacing: .2em; color: #718ca6; text-decoration: none; }
.heroScroll i { width: 1px; height: 2.5rem; background: #a8bdce; }
@media (max-width: 900px) and (min-width: 641px) {
#topMainVisual.heroI .inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 1.5rem; }
.heroTitle { font-size: 2.4rem; }
.heroActions { gap: 1rem; font-size: .75rem; }
.heroPrimary { padding-inline: 1rem; }
.heroCompany { padding-left: 1.5rem; }

}
@media (max-width: 640px) {
#topMainVisual.heroI { min-height: 0; padding: 3rem 0 4rem; }
#topMainVisual.heroI .inner { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.heroTitle { font-size: clamp(1.8rem, 7.7vw, 2.9rem); line-height: 1.45; }
.heroLead { margin-top: 1.5rem; font-size: .875rem; line-height: 1.95; }
.heroPhases { margin-top: 1.8rem; }
.heroPhases li { font-size: .95rem; padding: .9rem .8rem; }
.heroActions { flex-direction: column; align-items: stretch; gap: .75rem; margin-top: 1.8rem; }
.heroActions a { justify-content: center; }
.heroSecondary { align-self: center; }
.heroCompany { border-left: 0; border-top: 1px solid #d2dfe8; padding: 1.75rem 0 0; }
.companyIntro { margin-top: 1rem; font-size: 1.1rem; }


.companyEnd { margin-top: .75rem; font-size: 1.1rem; }
.heroScroll i { height: 1.5rem; }
.heroScroll { gap: .4rem; }
}

/* D案と同じ地平線・道・ぼけ光の背景 */
#topMainVisual.heroI .tunnel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.companyLockup { width: min(100%, 20rem); margin: 1.2rem auto 0; }
.companyLockup p span { display: inline-block; white-space: nowrap; }
@media (max-width: 640px) { .companyLockup { width: min(100%, 17rem); margin-top: .75rem; } .heroPrimary { min-width: 0; } }
.companyName span { letter-spacing: -.04em; } .companySub span { letter-spacing: .02em; }

/* 後ろ姿のプロジェクトチームを、社名の背後に重ねる */
.heroCompany { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.companyTeam { display: block; position: relative; z-index: -1; flex-shrink: 0; width: 175%; max-width: none; margin: .5rem 0 -5.5rem; opacity: 1; pointer-events: none; }
.companyTeam img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .companyTeam { width: 150%; margin-bottom: -4rem; } }
@media (forced-colors: active) { .heroTitle em { background: none; color: CanvasText; } }

.companyIntro, .companyLockup, .companyEnd { position: relative; text-shadow: 0 0 14px rgba(255,255,255,.95), 0 1px 3px rgba(255,255,255,.9); }

.heroActions .heroPrimary { justify-content: center; text-align: center; }

/* 写真の上に導入、下端に社名が軽く重なる配置 */
.heroCompany .companyIntro { margin-top: 0; }
.heroCompany .companyLockup { margin-top: 0; }
.heroCompany .companyEnd { margin-top: 1rem; }

/* v2：右カラムを下げ、黒い社名と接地する逆光の人物を組み合わせる */
.heroCompany { border-left: 0; padding-left: 0; transform: translateY(2rem); }
.companyName, .companySub, .companyIntro, .companyEnd { color: #111; }
.companyTeam img { position: relative; z-index: 1; }
.companyTeam::before { content: ""; position: absolute; z-index: 0; left: 15%; right: 13%; bottom: 2%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(40,48,60,.28) 0%, rgba(51,62,78,.12) 40%, transparent 72%); filter: blur(5px); transform: scaleY(.65); }
.companyTeam::after { content: ""; position: absolute; z-index: 0; width: 60%; height: 28%; bottom: -14%; left: 21%; background: radial-gradient(ellipse at 50% 0, rgba(47,55,70,.12), transparent 70%); filter: blur(10px); pointer-events: none; }
@media (max-width: 640px) { .heroCompany { transform: none; } }

/* フェーズは控えめな長方形の3区分にする */
.heroPhases { width: 80%; gap: .4rem; }
.heroPhases li, .heroPhases li:first-child { clip-path: none; padding-inline: .5rem; }
.heroPhases li + li { margin-left: 0; }
.companyName span { letter-spacing: .025em; }

/* 逆光になじむ、ごく薄い紙・空気の粒子感 */
#topMainVisual.heroI::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23725f42' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }

/* 写真の床の端を、背景の道へなだらかにつなぐ */
.companyTeam img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%); }

@media (max-width: 640px) { .heroCompany { border-top: 0; } }

@media (max-width: 640px) { .heroActions .heroPrimary { width: 84%; align-self: center; box-sizing: border-box; } }

@media (max-width: 640px) { .companyTeam { width: 105%; margin-bottom: -2.8rem; } }

/* メインパネルの余白とスクロール誘導 */
#topMainVisual.heroI { min-height: 43rem; padding-top: 4rem; padding-bottom: 5rem; }
.heroScroll { z-index: 2; }
.heroScroll i { position: relative; overflow: hidden; background: rgba(124,153,180,.22); }
.heroScroll i::after { content: ''; position: absolute; inset: -100% 0 0; height: 100%; background: #718ca6; animation: heroScrollFlow 1.8s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes heroScrollFlow { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(220%); } }
@media (max-width: 640px) {
#topMainVisual.heroI { min-height: 0; padding-top: 2.25rem; padding-bottom: 3rem; }
#topMainVisual.heroI .inner { gap: 2rem; }
.heroCompany { padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .heroScroll i::after { animation: none; inset: 0; } }

/* 社名とひと続きに読める導入 */
.heroCompany .companyIntro { font-size: .9375rem; font-weight: 500; letter-spacing: .08em; margin: .35rem 0 .15rem; }
@media (max-width: 640px) { .heroCompany .companyIntro { font-size: .8125rem; margin-top: .25rem; } }

/* 元の位置で、写真に添える言葉として控えめに */
.heroCompany .companyIntro { color: #61748a; font-size: 1rem; font-weight: 500; letter-spacing: .12em; line-height: 1.8; margin: 0 0 .25rem; text-shadow: 0 1px 10px rgba(255,255,255,.85); }
@media (max-width: 640px) { .heroCompany .companyIntro { font-size: .875rem; margin: 0 0 .25rem; } }

/* 英語社名と語尾を一行につなぐ */
.heroCompany .companyIntro { color: #111; }
.companySub { display: flex; align-items: baseline; justify-content: center; gap: .5rem; }
.heroCompany .companySub .companyEnd { margin: 0; flex-shrink: 0; font-family: 'Noto Sans JP', sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
@media (max-width: 640px) { .heroCompany .companySub .companyEnd { font-size: .75rem; } }

/* 導入と語尾を、英語社名と同じ大きさ・ウェイトにする */
.heroCompany .companyIntro, .heroCompany .companySub .companyEnd { font-size: var(--company-sub-size, 1.5rem); font-weight: 500; color: #111; letter-spacing: 0; }
.companySub { width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); }

/* 添付の以前の文字サイズのバランスに合わせる */
.heroCompany .companyIntro { font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 700; }
.heroCompany .companySub .companyEnd { font-size: 1.5rem; font-weight: 700; }
@media (max-width: 640px) { .heroCompany .companyIntro, .heroCompany .companySub .companyEnd { font-size: 1.1rem; } }

/* PCの人物・社名エリアを20px上げる */
@media (min-width: 641px) { .heroCompany { transform: translateY(calc(2rem - 20px)); } }

/* スマホでも英語社名と語尾を改行させない */
@media (max-width: 640px) { .heroCompany .companySub { display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; } .heroCompany .companySub > span, .heroCompany .companySub > .companyEnd { display: inline-block; flex: 0 0 auto; white-space: nowrap; } }

.heroCompany .companyIntro { letter-spacing: .3em; }

/* 導入と人物写真の間を15px詰める */
.heroCompany .companyTeam { margin-top: calc(.5rem - 15px); }

@media (max-width: 640px) { .heroCompany { transform: translateY(-20px); } }

.heroCompany .companySub { transform: translateX(calc(-50% + 10px)); }

/* キャッチコピーを一文字ずつ、控えめに表示 */
.heroTitle.isCharacterAnimated .heroCharacter { display: inline-block; animation: heroCharacterReveal 1.25s cubic-bezier(.25,.46,.45,.94) var(--char-delay) both; }
@keyframes heroCharacterReveal { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .heroTitle.isCharacterAnimated .heroCharacter { animation: none; opacity: 1; transform: none; } }

/* お知らせの下に余白を追加 */
#topNews { padding-bottom: calc(6rem + 40px); }
@media (max-width: 640px) { #topNews { padding-bottom: calc(4rem + 24px); } }

.heroTitle.isCharacterAnimated em { background: none; }
.heroTitle.isCharacterAnimated em .heroCharacter { background-image: var(--grad-main); background-size: var(--gradient-width) 100%; background-position: var(--gradient-x) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .heroTitle.isCharacterAnimated em .heroCharacter { background: none; color: CanvasText; } }

/* 英語社名2行の間隔を少し広げる */
.heroCompany .companySub { margin-top: 1rem; }

/* 実行支援フェーズへつなぐ約束 */
.heroPromise { margin-top: calc(1.25rem + 10px); font-size: clamp(.875rem, 1.1vw, 1rem); line-height: 1.9; font-weight: 700; color: #12273e; letter-spacing: .01em; }
.heroPromise + .heroPhases { margin-top: calc(1.5rem - 10px); }
@media (max-width: 640px) { .heroPromise { margin-top: 1rem; font-size: .875rem; } .heroPromise + .heroPhases { margin-top: 1.25rem; } }