@charset "utf-8";
/* J案：承認された画像案の構成を、編集できるHTMLで再現する。 */
#header { border-bottom: 0; }
#topMainVisual.heroJ { position: relative; height: 620px; min-height: 620px; box-sizing: border-box; padding: 130px 0 110px; overflow: hidden; isolation: isolate; background: #f6f2e9; color: #12273e; }
#topMainVisual.heroJ::after { content: none; }
#topMainVisual.heroJ .inner { display: block; position: relative; z-index: 2; transform: translateY(70px); }
.heroJ .heroMessage { width: min(66%,48rem); }
.heroJ .heroTitle { margin: 0; font-size: 2.625rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
.heroJ .heroTitle > span { display: block; }
.heroJ .heroTitle > span:last-child { width: max-content; white-space: nowrap; }
/* 写真の上で読みやすいロゴに使われている青。文字アニメーション後も単色を保つ。 */
.heroJ .heroTitle em { background: none; color: #1578ff; -webkit-text-fill-color: #1578ff; }
.heroJ .heroTitle.isCharacterAnimated em { background: none; }
.heroJ .heroTitle.isCharacterAnimated em .heroCharacter { background: none; color: #1578ff; -webkit-text-fill-color: #1578ff; }
.heroJ .heroLead { margin-top: 1.4rem; font-size: .9375rem; line-height: 1.95; font-weight: 500; }
.heroJ .heroBackdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.heroJ .heroBackdrop picture, .heroJ .heroBackdrop img { display: block; width: 100%; height: 100%; }
.heroJ .heroBackdrop img { object-fit: cover; object-position: center; }
/* 広い光の範囲を保ちながら、写真を消さない薄いフェードにする。 */
.heroJ .heroBackdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 95% 95% at 20% 48%,rgba(255,250,238,.46) 0%,rgba(255,250,238,.25) 48%,rgba(255,250,238,0) 85%),linear-gradient(90deg,rgba(255,248,232,.14),transparent 80%); }
#topMainVisual.heroJ .wmFrame { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#topMainVisual.heroJ .wordmark { position: absolute; top: -165px; right: -26px; translate: none; margin: 0; padding-bottom: .3em; font-family: 'Century Gothic',CenturyGothic,'URW Gothic',AppleGothic,sans-serif; font-size: 24.75rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: #fff; -webkit-text-fill-color: #fff; background: none; opacity: .9; filter: blur(.65px); user-select: none; }
.heroJ .heroExecution { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; width: min(100%,calc(40rem - 40px)); box-sizing: border-box; margin-top: 1.55rem; padding: calc(1.15rem + 5px) calc(1.4rem + 5px); border: 0; border-radius: 6px; background: rgba(255,253,248,.96); color: #243c55; text-decoration: none; transition: background .25s; }
.heroJ .heroExecution:hover { background: rgba(255,253,248,1); }
.heroJ .heroExecutionIntro { display: flex; flex-wrap: wrap; align-items: baseline; flex-basis: 100%; gap: .2rem .65em; font-size: .8125rem; font-weight: 600; color: #1d344d; line-height: 1.8; }
.heroJ .heroExecutionIntro h2 { margin: 0; font-size: inherit; font-weight: 700; }
.heroJ .heroExecutionIntro p { margin: 0; }
.heroJ .heroExecutionSteps { display: flex; flex-wrap: wrap; gap: .3em 0; margin: 0; padding: 0; list-style: none; font-size: 1.125rem; font-weight: 700; letter-spacing: .08em; line-height: 1.7; }
.heroJ .heroExecutionSteps li + li::before { content: '／'; margin: 0 .65em; color: #8b9bac; font-weight: 400; }
.heroJ .heroExecutionLink { position: relative; top: 10px; margin-left: auto; padding: .2rem 0; font-size: .75rem; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.heroJ .heroExecutionLink span { margin-left: .65rem; }
.heroJ .heroExecution:focus-visible { outline: 3px solid #2784c6; outline-offset: 5px; }
.heroJ .heroActions { position: absolute; right: 0; bottom: 34px; margin: 0; z-index: 3; display: block; }
.heroJ .heroActions .heroPrimary { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; width: 216px; min-width: 0; height: 60px; margin: 0; padding: 0 1.5rem; box-sizing: border-box; border: 0; border-radius: 4px 0 0 4px; background: #f2cc4d; color: #172b43; font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background .25s; }
.heroJ .heroActions .heroPrimary:hover { background: #f7d76c; filter: none; }
.heroJ .heroScroll { color: #4c627a; }
@media (max-width: 1000px) {
 #topMainVisual.heroJ { height: auto; min-height: 700px; padding: calc(5.5rem + 40px) 0 9rem; }
 #topMainVisual.heroJ .inner { transform: translateY(30px); }
 .heroJ .heroMessage { width: 100%; max-width: 48rem; }
 .heroJ .heroTitle { font-size: clamp(1.75rem,3.4vw,2.125rem); }
 .heroJ .heroBackdrop img { object-position: 65% center; }
 .heroJ .heroBackdrop::after { background: linear-gradient(110deg,rgba(255,250,239,.72),rgba(255,250,239,.44) 65%,rgba(255,250,239,.1)); }
 .heroJ .heroActions { bottom: 26px; }
}
@media (max-width: 640px) {
 #topMainVisual.heroJ { display: block; min-height: 840px; padding: calc(3.5rem + 40px) 0 18rem; }
 .heroJ .heroTitle { font-size: 1.75rem; line-height: 1.6; letter-spacing: .025em; }
 .heroJ .heroTitle > span:last-child { font-size: clamp(.875rem,4.7vw,1.75rem); }
 .heroJ .heroLead { margin-top: 1.15rem; font-size: .8125rem; line-height: 1.95; }
 .heroJ .heroBackdrop img { object-position: 72% bottom; }
 .heroJ .heroBackdrop::after { background: linear-gradient(180deg,rgba(255,250,240,.8) 0%,rgba(255,250,240,.72) 46%,rgba(255,250,240,.12) 82%); }
 #topMainVisual.heroJ .wordmark { top: calc(-.12em - 5px); right: -.06em; font-size: 56vw; opacity: .65; }
 .heroJ .heroExecution { margin-top: 1.2rem; padding: calc(.9rem + 5px) calc(1rem + 5px); gap: .65rem; }
 .heroJ .heroExecutionIntro { font-size: .75rem; }
 .heroJ .heroExecutionSteps { font-size: .875rem; letter-spacing: .04em; }
 .heroJ .heroExecutionSteps li + li::before { margin: 0 .4em; }
 .heroJ .heroExecutionLink { font-size: .6875rem; }
 .heroJ .heroActions .heroPrimary { width: 180px; height: 54px; font-size: .875rem; }
}
@media (forced-colors: active) {
 #topMainVisual.heroJ .wordmark { color: CanvasText; -webkit-text-fill-color: CanvasText; opacity: .3; filter: none; }
 .heroJ .heroTitle em, .heroJ .heroTitle.isCharacterAnimated em .heroCharacter { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
/* 写真の上でも、次のコンテンツへの導線を見つけやすくする */
.heroJ .heroScroll { gap: 14px; color: #172f48; font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-shadow: 0 1px 5px rgba(255,255,255,.95); }
.heroJ .heroScroll > span { padding: 0; background: none; writing-mode: vertical-rl; text-orientation: mixed; line-height: 1; }
.heroJ .heroScroll i { width: 1px; height: 48px; background: rgba(23,47,72,.3); }
.heroJ .heroScroll i::after { background: #244f79; animation-duration: 1.6s; }
@media (max-width: 640px) { .heroJ .heroScroll { font-size: .6875rem; } .heroJ .heroScroll i { height: 36px; } }
.heroJ .heroLeadLine { display: block; }
@media (min-width: 641px) { .heroJ .heroLeadLine { white-space: nowrap; width: max-content; } .heroJ .heroLeadMobileBreak { display: none; } }

/* メインパネル直下の紹介文は、少し控えめな大きさと余白にする。 */
#topAbout { padding: 4.375rem 0; }
#topAbout .text { font-size: clamp(1rem,1.35vw,1.125rem); }
@media (max-width: 640px) { #topAbout { padding: 3.125rem 0; } }
/* 対称なXの中心を、コピー内の（リアル）の中心へ合わせる。 */
.heroJ .heroXOverlay { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.heroJ .heroXOverlay::before, .heroJ .heroXOverlay::after { content: ''; position: absolute; left: var(--x-center,36%); top: var(--x-middle,50%); width: 220px; height: 260%; transform-origin: center; background: linear-gradient(180deg,rgba(255,252,245,.32),rgba(255,252,245,.5) 50%,rgba(255,252,245,.36)); }
.heroJ .heroXOverlay::before { transform: translate(-50%,-50%) skewX(39.5deg); animation: heroJBandExtend 2s cubic-bezier(.42,0,.18,1) both; }
.heroJ .heroXOverlay::after { transform: translate(-50%,-50%) skewX(-39.5deg); animation: heroJBandExtend 2.2s .25s cubic-bezier(.42,0,.18,1) both; }
.heroJ .heroScroll { left: 24px; transform: none; }
@media (max-width: 640px) { .heroJ .heroXOverlay::before, .heroJ .heroXOverlay::after { width: 220px; } .heroJ .heroScroll { left: 20px; } }
/* 左上・右上から斜め下へ伸ばし、交点を通って定位置に収める。 */
@keyframes heroJBandExtend {
 0% { opacity: 0; clip-path: inset(0 0 100% 0); }
 22% { opacity: 1; }
 100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
.heroJ .heroBackdrop img { transform-origin: 68% 55%; animation: heroJPhotoDrift 32s ease-in-out infinite alternate; }
@keyframes heroJPhotoDrift {
 from { transform: scale(1.025) translate3d(0,0,0); }
 to { transform: scale(1.075) translate3d(-.6%,.3%,0); }
}
@media (prefers-reduced-motion: reduce) {
 .heroJ .heroXOverlay::before, .heroJ .heroXOverlay::after, .heroJ .heroBackdrop img { animation: none; }
 .heroJ .heroBackdrop img { transform: none; }
}
/* 箱全体の操作に、右下のリンク表現も連動させる。 */
.heroJ .heroExecutionLink { transition: color .25s ease; }
.heroJ .heroExecutionLink span { display: inline-block; transition: transform .25s ease; }
.heroJ .heroExecution:hover .heroExecutionLink,
.heroJ .heroExecution:focus-visible .heroExecutionLink { color: #1578ff; text-decoration: none; }
.heroJ .heroExecution:hover .heroExecutionLink span,
.heroJ .heroExecution:focus-visible .heroExecutionLink span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
 .heroJ .heroExecutionLink, .heroJ .heroExecutionLink span { transition: none; }
}
/* 狭い画面では内容の高さに合わせ、文字と導線を自然な順番で配置する。 */
@media (min-width: 641px) and (max-width: 1000px) {
 .heroJ .heroLeadLine { width: auto; white-space: normal; }
 .heroJ .heroTitle > span:last-child { width: auto; white-space: normal; }
}
@media (max-width: 640px) {
 #topMainVisual.heroJ { height: auto; min-height: 700px; padding: 92px 0 72px; }
 #topMainVisual.heroJ .inner { transform: none; }
 .heroJ .heroMessage { width: 100%; min-width: 0; }
 .heroJ .heroTitle { font-size: clamp(1.625rem,6.8vw,2rem); line-height: 1.65; letter-spacing: .025em; }
 .heroJ .heroTitle > span:last-child { width: auto; white-space: normal; font-size: inherit; overflow-wrap: anywhere; }
 .heroJ .heroLead { margin-top: 22px; font-size: 0.8125rem; line-height: 1.95; }
 .heroJ .heroLeadLine { width: auto; white-space: normal; overflow-wrap: anywhere; }
 .heroJ .heroExecution { width: 100%; margin-top: 24px; padding: calc(18px + 5px) calc(16px + 5px); gap: 14px; }
 .heroJ .heroExecutionIntro { display: block; font-size: 0.75rem; line-height: 1.8; }
 .heroJ .heroExecutionIntro h2 { margin-bottom: 5px; font-size: 0.8125rem; }
 .heroJ .heroExecutionSteps { flex-wrap: nowrap; font-size: clamp(0.75rem,3.45vw,0.9375rem); letter-spacing: .02em; }
 .heroJ .heroExecutionSteps li { white-space: nowrap; }
 .heroJ .heroExecutionSteps li + li::before { margin: 0 .3em; }
 .heroJ .heroExecutionLink { top: 0; font-size: 0.75rem; }
 .heroJ .heroActions { position: relative; right: auto; bottom: auto; width: fit-content; margin: 28px 0 0 auto; }
 .heroJ .heroActions .heroPrimary { width: 168px; height: 52px; }
 .heroJ .heroBackdrop img { object-position: 72% center; }
 .heroJ .heroScroll { left: 20px; }
}
/* モバイル：上部にコピー、中央に写真、下部に導線をまとめる。 */
@media (max-width: 640px) {
 #topMainVisual.heroJ { height: auto; min-height: 0; padding: 72px 0 100px; }
 #topMainVisual.heroJ .inner { position: relative; z-index: 2; transform: none; }
 #topMainVisual.heroJ .wordmark { left: 16px; right: auto; top: -24px; font-size: 53vw; opacity: .8; }
 .heroJ .heroTitle { font-size: clamp(1.875rem,7.6vw,2.625rem); line-height: 1.55; letter-spacing: .015em; }
 .heroJ .heroTitle > span:last-child { font-size: inherit; }
 .heroJ .heroExecution { position: relative; z-index: 3; left: auto; right: auto; bottom: auto; width: calc(100% - 40px); margin: 180px 0 0 40px; padding: calc(17px + 5px) calc(15px + 5px); gap: 12px; }
 .heroJ .heroExecutionSteps { font-size: clamp(0.6875rem,3.15vw,0.9375rem); letter-spacing: 0; }
 .heroJ .heroExecutionSteps li + li::before { margin: 0 .25em; }
 .heroJ .heroExecutionLink { margin-left: auto; }
 .heroJ .heroActions { position: absolute; right: 20px; bottom: 24px; margin: 0; }
 .heroJ .heroScroll { left: 20px; }
 .heroJ .heroBackdrop img { object-position: 72% center; }
 .heroJ .heroBackdrop::after { background: linear-gradient(180deg,rgba(255,250,240,.78) 0%,rgba(255,250,240,.68) 35%,rgba(255,250,240,.08) 61%,rgba(255,250,240,.08) 100%); }
}

/* v3：実行フェーズと相談導線をパネルとサービスの境界へまとめる。 */
.heroJ .heroTitle { font-size: 3.28125rem; }
.heroJ .heroLead { font-size: 1.125rem; line-height: 1.9; }
#topMainVisual.heroJ .inner { transform: none; }
#topMainVisual.heroJ { padding-top: 170px; }
.heroJ.heroBoundary { position: relative; z-index: 4; height: 0; margin: 0; }
.heroBoundary .heroBoundaryInner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; transform: translateY(calc(-50% - 35px)); }
.heroBoundary .heroExecution { flex: 0 1 680px; width: auto; margin: 0; padding: 14px 28px 24px; border-radius: 20px; box-shadow: 0 8px 30px rgba(30,49,65,.09); }
.heroBoundary .heroExecutionIntro { padding-bottom: 14px; border-bottom: 1px solid rgba(36,60,85,.2); }
.heroBoundary .heroActions { position: static; flex: 0 0 auto; width: auto; margin: 0; }
#topService { padding-top: 110px; }
@media (min-width: 641px) and (max-width: 1200px) {
 .heroJ .heroTitle > span:last-child { width: auto; white-space: normal; }
 .heroJ .heroLeadLine { width: auto; white-space: normal; }
}
@media (min-width: 641px) and (max-width: 1000px) {
 .heroJ .heroTitle { font-size: clamp(2.1875rem,4.25vw,2.65625rem); }
 #topMainVisual.heroJ { padding-top: 120px; }
 .heroBoundary .heroExecution { padding: 12px 22px 22px; }
 .heroBoundary .heroBoundaryInner { gap: 24px; }
 .heroBoundary .heroActions .heroPrimary { width: 180px; }
}
@media (max-width: 640px) {
 #topMainVisual.heroJ { height: auto; min-height: 0; padding: 72px 0 220px; }
 .heroJ .heroTitle, .heroJ .heroTitle > span:last-child { font-size: clamp(2.34375rem,9.5vw,3.28125rem); line-height: 1.45; }
 .heroJ .heroLead { font-size: 1.125rem; margin-top: 24px; }
 .heroJ.heroBoundary { height: 0; margin: 0; }
 .heroBoundary .heroBoundaryInner { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
 .heroBoundary .heroExecution { position: relative; flex: none; left: auto; right: auto; bottom: auto; width: calc(100% - 40px); margin: 0; padding: 12px 20px 22px; }
 .heroBoundary .heroExecutionIntro { padding-bottom: 12px; }
 .heroBoundary .heroActions { position: static; margin: 0; }
 .heroBoundary .heroActions .heroPrimary { width: 168px; }
 #topService { padding-top: 180px; }
}


/* サービスエリアは白から従来の明るいブルーへ縦に変化させる。 */
#topService { --grad-soft: linear-gradient(180deg, #fff 0%, #e5eefa 45%, #d3e1f6 100%); }

/* フェーズ名は端末を問わず1.5remとし、狭い画面では折り返す。 */
.heroBoundary .heroExecutionSteps { font-size: 1.5rem; flex-wrap: wrap; }
@media (max-width: 640px) {
 .heroBoundary .heroExecutionSteps { gap: 8px 16px; }
 .heroBoundary .heroExecutionSteps li + li::before { content: '／'; margin: 0 .15em; }
}


/* スマホは背景の下端を相談ボタンの中央に合わせる。 */
@media (max-width: 640px) {
 #topMainVisual.heroJ { overflow: visible; z-index: 1; }
 .heroJ .heroBackdrop, .heroJ .heroXOverlay { bottom: calc(-1 * var(--hero-background-extension, 60px)); }
 #topService { z-index: 0; }
 .heroBoundary .heroExecutionSteps { font-size: clamp(0.8125rem,3.65vw,1.0625rem); flex-wrap: nowrap; justify-content: space-between; gap: 0; width: 100%; }
}


/* 見出しは青の帯、フェーズ名は白地にまとめる。 */
.heroBoundary .heroExecution { padding: 0; gap: 0; overflow: hidden; }
.heroBoundary .heroExecutionIntro { padding: 10px 28px; letter-spacing: .05em; border: 0; background: linear-gradient(120deg,#287ab9 0%,#5264cf 100%); color: #fff; }
.heroBoundary .heroExecutionIntro h2,
.heroBoundary .heroExecutionIntro p { color: inherit; }
.heroBoundary .heroExecutionSteps { width: 100%; box-sizing: border-box; padding: 18px 28px 24px; }
@media (min-width: 641px) and (max-width: 1000px) {
 .heroBoundary .heroExecutionIntro { padding: 8px 22px; }
 .heroBoundary .heroExecutionSteps { padding: 18px 22px 22px; }
}
@media (max-width: 640px) {
 .heroBoundary .heroExecutionIntro { padding: 8px 20px; }
 .heroBoundary .heroExecutionSteps { padding: 18px 16px 22px; justify-content: flex-start; }
 .heroBoundary .heroExecutionSteps li { position: relative; flex: 1 1 0; min-width: 0; text-align: center; }
 .heroBoundary .heroExecutionSteps li + li::before { position: absolute; left: 0; top: 50%; transform: translate(-50%,-50%); margin: 0; line-height: 1; }
}


/* スマホは見出し後の改行をなくし、青い帯を2行程度に抑える。 */
@media (max-width: 640px) {
 .heroBoundary .heroExecutionIntro { display: block; padding: 8px 16px; font-size: clamp(0.65625rem,3vw,0.75rem); line-height: 1.7; }
 .heroBoundary .heroExecutionIntro h2 { display: inline; margin: 0; font-size: inherit; }
 .heroBoundary .heroExecutionIntro p { display: inline; margin: 0; }
}