@charset "utf-8";
/* K案：03案の雰囲気を継承し、長いリードとパネル内の相談導線を配置。 */
.heroJ .heroLead { position: relative; top: -10px; width: 100%; max-width: 48rem; }
.heroJ.heroPhoto03 .heroBackdrop img { object-position: center 55%; }
#topMainVisual.heroJ .heroActions { position: absolute; left: calc(max(0px,(100% - var(--container-width)) / 2) + clamp(1.25rem,4vw,3.5rem)); right: auto; bottom: 47px; margin: 0; z-index: 3; }
@media (min-width: 1001px) {
 #topMainVisual.heroJ { height: 590px; min-height: 590px; padding-top: 145px; padding-bottom: 85px; }
}
@media (max-width: 640px) {
 #topMainVisual.heroJ { overflow: hidden; padding-bottom: 102px; }
 .heroJ .heroBackdrop, .heroJ .heroXOverlay { bottom: 0; }
 .heroJ.heroPhoto03 .heroBackdrop img { object-position: 68% center; }
 .heroJ .heroLead { width: 70%; font-size: 1rem; line-height: 1.9; }
 #topMainVisual.heroJ .heroActions { left: 20px; bottom: 43px; }
 #topMainVisual.heroJ .heroScroll { left: auto; right: 20px; }
 #topService { padding-top: 60px; }
}

/* 担当。の後の改行はPCだけ。帯は従来220pxから10px広げる。 */
.heroJ .heroLeadPcBreak { display: none; }
.heroJ .heroXOverlay::before, .heroJ .heroXOverlay::after { width: 230px; }
@media (min-width: 641px) {
 .heroJ .heroLeadPcBreak { display: initial; }
}


/* 明るさを保ったまま、淡いピンク・ラベンダー・オレンジを重ねる。 */
.heroJ .heroBackdrop::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg,rgba(244,143,180,.09) 0%,rgba(148,122,220,.09) 48%,rgba(255,177,99,.12) 100%); }
@media (max-width: 640px) {
 .heroJ.heroPhoto03 .heroXOverlay::before,
 .heroJ.heroPhoto03 .heroXOverlay::after { left: var(--x-center,52%); top: var(--x-middle,42%); width: 130px; }
}


@media (max-width: 640px) {
 #topMainVisual.heroJ .wordmark { font-size: 44vw; }
 /* 黄色い説明は上、4つの四角は中央、補足文は下に並べる。 */
 #topService .phase { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 180px auto; gap: 18px; padding: 24px 20px; }
 #topService .phase .entry { grid-column: 1; grid-row: 1; margin: 0; display: block; text-align: center; }
 #topService .phase .entry .entryText { writing-mode: horizontal-tb; text-orientation: mixed; padding: 8px 16px; border-radius: 999px; font-size: 0.75rem; line-height: 1.5; letter-spacing: .04em; animation: none; }
 #topService .phase .entry::before, #topService .phase .entry::after,
 #topService .phase .drops { display: none; }
 #topService .phase .steps { grid-column: 1; grid-row: 2; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; }
 #topService .phase .steps .step,
 #topService .phase .steps .step:nth-child(1),
 #topService .phase .steps .step:not(:first-child) { display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0; padding: 16px 6px; writing-mode: vertical-rl; text-orientation: mixed; font-size: 1rem; line-height: 1.5; letter-spacing: .12em; clip-path: none; border-radius: 2px; animation: none; }
 #topService .phase .steps .step::after { display: none; }
 #topService .phase .caption { grid-column: 1; grid-row: 3; justify-self: stretch; height: auto; margin: 0; writing-mode: horizontal-tb; text-orientation: mixed; font-size: 0.8125rem; line-height: 1.85; letter-spacing: .02em; text-align: left; }

}

/* Xの色と透け感はPC・スマホで統一する。 */
.heroJ.heroPhoto03 .heroXOverlay::before,
.heroJ.heroPhoto03 .heroXOverlay::after { background: linear-gradient(180deg,rgba(235,241,255,.408),rgba(248,245,255,.595) 50%,rgba(255,241,231,.425)); }


/* PCは左80pxを起点とし、広い画面では1600pxの枠に収める。 */
@media (min-width: 1001px) {
 #topMainVisual.heroJ .inner { width: 100%; max-width: 1600px; margin: 0 auto; padding-right: 80px; padding-left: 80px; box-sizing: border-box; }
 .heroJ .heroMessage { width: min(70%,64rem); max-width: none; }
 .heroJ .heroTitle { font-size: clamp(2.375rem,3.4vw,3rem); }
 .heroJ .heroLead { max-width: 58rem; }
 #topMainVisual.heroJ .heroActions { left: calc(max(0px,(100% - 1600px) / 2) + 80px); }
}


@media (max-width: 640px) {
 .heroJ .heroLead { padding: 0; border-radius: 0; background: none; }
 .heroJ .heroLeadText { padding: .04em .15em; background: rgba(255,255,255,.5); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}


/* PCはコピーを10px下げ、相談ボタンだけをさらに12px上へ。Xは文字位置に追従する。 */
@media (min-width: 641px) {
 #topMainVisual.heroJ .inner { transform: translateY(-5px); }
 #topMainVisual.heroJ .heroActions { bottom: 64px; }
 #topMainVisual.heroJ .heroScroll { left: 24px; right: auto; }
 #topMainVisual.heroJ .heroScroll i { height: 72px; }
}



/* サイト内の黄色ボタンと同じホバー表現。 */
.heroJ .heroActions .heroPrimary { transition: transform .25s, box-shadow .25s, filter .25s, background-color .25s, color .25s; }
.heroJ .heroActions .heroPrimary span { display: inline-block; transition: transform .25s; }
.heroJ .heroActions .heroPrimary:hover,
.heroJ .heroActions .heroPrimary:focus-visible { background: #f2cc4d; box-shadow: 0 12px 24px -10px rgba(200,150,20,.6); filter: brightness(1.06); transform: translateY(-2px); }
.heroJ .heroActions .heroPrimary:hover span,
.heroJ .heroActions .heroPrimary:focus-visible span { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
 .heroJ .heroActions .heroPrimary, .heroJ .heroActions .heroPrimary span { transition: none; }
 .heroJ .heroActions .heroPrimary:hover, .heroJ .heroActions .heroPrimary:focus-visible,
 .heroJ .heroActions .heroPrimary:hover span, .heroJ .heroActions .heroPrimary:focus-visible span { transform: none; }
}

/* SCROLLの文字は光彩を付けずに表示する。 */
.heroJ .heroScroll { text-shadow: none; }


/* 文字アニメーション中も、語句全体につながる穏やかな青の濃淡。 */
.heroJ.heroPhoto03 .heroTitle { --hero-copy-gradient: linear-gradient(110deg,#1463c8 0%,#3984cf 55%,#4c70cb 100%); }
.heroJ.heroPhoto03 .heroTitle em { background-image: var(--hero-copy-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.heroJ.heroPhoto03 .heroTitle.isCharacterAnimated em { background: none; }
.heroJ.heroPhoto03 .heroTitle.isCharacterAnimated em .heroCharacter { background-image: var(--hero-copy-gradient); background-size: var(--gradient-width,100%) 100%; background-position: var(--gradient-x,0px) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) {
 .heroJ.heroPhoto03 .heroTitle em,
 .heroJ.heroPhoto03 .heroTitle.isCharacterAnimated em .heroCharacter { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

@media (min-width: 641px) {
 .heroJ .heroTitle { line-height: 1.5; }
}


/* 夫婦と建物は静止させ、人ごみの領域だけを薄く重ねて動かす。 */
.heroJ.heroPhoto03 .heroBackdrop img { animation: none; transform: none; }
.heroJ .heroCrowd { position: absolute; inset: 0; pointer-events: none; background: url('../../imageFile/top/img_k_street_soft_261104.jpg') center 55% / cover no-repeat; background-image: image-set(url('../../imageFile/top/img_k_street_soft_261104.webp') type('image/webp'), url('../../imageFile/top/img_k_street_soft_261104.jpg') type('image/jpeg')); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center 55%; mask-position: center 55%; will-change: transform; }
.heroJ .heroCrowdLeft { -webkit-mask-image: url('../../imageFile/top/mask_crowd_left.svg'); mask-image: url('../../imageFile/top/mask_crowd_left.svg'); animation: heroKCrowdLeft 5.6s ease-in-out infinite alternate; }
.heroJ .heroCrowdCenter { -webkit-mask-image: url('../../imageFile/top/mask_crowd_center.svg'); mask-image: url('../../imageFile/top/mask_crowd_center.svg'); animation: heroKCrowdCenter 7.2s -2.8s ease-in-out infinite alternate; }
.heroJ .heroCrowdRight { -webkit-mask-image: url('../../imageFile/top/mask_crowd_right.svg'); mask-image: url('../../imageFile/top/mask_crowd_right.svg'); animation: heroKCrowdRight 6.4s -1.8s ease-in-out infinite alternate; }
@keyframes heroKCrowdLeft {
 from { transform: translate3d(-11px,0,0); opacity: .65; filter: blur(.8px); }
 to { transform: translate3d(12px,-1px,0); opacity: .92; filter: blur(1.5px); }
}
@keyframes heroKCrowdCenter {
 from { transform: translate3d(9px,0,0); opacity: .68; filter: blur(.7px); }
 to { transform: translate3d(-11px,-1px,0); opacity: .94; filter: blur(1.4px); }
}
@keyframes heroKCrowdRight {
 from { transform: translate3d(-8px,0,0); opacity: .6; filter: blur(.8px); }
 to { transform: translate3d(9px,1px,0); opacity: .88; filter: blur(1.5px); }
}
@media (max-width: 640px) {
 .heroJ .heroCrowd { background-position: 68% center; -webkit-mask-position: 68% center; mask-position: 68% center; }
}
@media (prefers-reduced-motion: reduce) {
 .heroJ .heroCrowd { display: none; animation: none; }
}
@supports not ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
 .heroJ .heroCrowd { display: none; }
}


/* スマホの四角は細くし、各フェーズへの黄色い矢印を戻す。 */
@media (max-width: 640px) {
 #topService .phase { grid-template-rows: auto 24px 180px auto; gap: 0; }
 #topService .phase .entry { margin-bottom: 14px; }
 #topService .phase .drops { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: none; gap: 8px; height: 24px; position: relative; align-self: stretch; }
 #topService .phase .drops::before { content: ''; position: absolute; left: calc(12.5% - 3px); right: calc(12.5% - 3px); top: 0; bottom: auto; height: 0; border-left: 0; border-top: 1px solid var(--color-yellow); }
 #topService .phase .drops .drop::before { left: calc(50% - .5px); right: auto; top: 0; bottom: 6px; width: 1px; border: 0; background: repeating-linear-gradient(var(--color-yellow) 0 4px,transparent 4px 7px); animation: none; }
 #topService .phase .drops .drop::after { left: calc(50% - 4px); right: auto; top: auto; bottom: 0; border: 4px solid transparent; border-top: 6px solid var(--color-yellow); border-bottom: 0; }
 #topService .phase .steps { grid-row: 3; }
 #topService .phase .steps .step,
 #topService .phase .steps .step:nth-child(1),
 #topService .phase .steps .step:not(:first-child) { width: 80%; max-width: 64px; box-sizing: border-box; justify-self: center; }
 #topService .phase .caption { grid-row: 4; margin-top: 18px; }
}

/* スマホのキャッチコピーは行間を詰める。 */
@media (max-width: 640px) {
 .heroJ .heroTitle, .heroJ .heroTitle > span:last-child { line-height: 1.35; }
}

/* タブレットもパネル下部の余白を30px縮める。 */
@media (min-width: 641px) and (max-width: 1000px) {
 #topMainVisual.heroJ { min-height: 670px; padding-bottom: calc(9rem - 30px); }
}



/* PCの各コンテンツ上部の余白を60pxに揃える。 */
@media (min-width: 641px) {
 #topService, #topStrength, #topCases, #topNews, #topContact { padding-top: 60px; }
}