@charset "utf-8";
/* 事業内容ページの図を、対話・テーマ・伴走の3要素にまとめる。 */
#topService .supportPreview { display: grid; grid-template-columns: 136px minmax(0,1fr) 148px; gap: 28px; align-items: stretch; margin-top: 24px; }
#topService .supportPreviewTalk, #topService .supportPreviewResult { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 14px; border-radius: 18px; text-align: center; font-size: 1rem; font-weight: 700; line-height: 1.7; }
#topService .supportPreviewTalk { background: rgba(255,255,255,.92); color: var(--color-text); }
#topService .supportPreviewTalk > svg { width: 30px; height: 30px; fill: none; stroke: #5964d5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#topService .supportPreviewTalk::after, #topService .supportPreviewPanel::after { content: ''; position: absolute; right: -20px; top: calc(50% - 6px); width: 12px; height: 12px; border-top: 2px solid #58a6d6; border-right: 2px solid #58a6d6; transform: rotate(45deg); }
#topService .supportPreviewPanel { position: relative; min-width: 0; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 12px 40px -28px rgba(51,80,140,.3); }
#topService .supportPreviewLabel { margin: 0 0 16px; color: #4763a5; font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; }
#topService .supportPreviewList { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
#topService .supportPreviewItem { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 15px 12px; border: 1px solid #e1e6f2; border-radius: 12px; background: #f8faff; font-size: 0.875rem; line-height: 1.6; }
#topService .supportPreviewIcon { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #edf1ff; color: #5964d5; }
#topService .supportPreviewIcon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#topService .supportPreviewOther { background: transparent; border-style: dashed; }
#topService .supportPreviewOther > span { color: #e9b63e; font-size: 1.6875rem; line-height: 1; }
#topService .supportPreviewDesign { margin: 16px 0 0; padding: 10px 14px; border-radius: 9px; background: #f7de80; color: #243754; text-align: center; font-size: 0.8125rem; font-weight: 700; line-height: 1.7; }
#topService .supportPreviewResult { background: var(--grad-main); color: #fff; font-size: 1.375rem; }
#topService .supportPreviewResult small { font-size: 0.75rem; font-weight: 500; }
@media (min-width: 641px) and (max-width: 1000px) {
 #topService .supportPreview { grid-template-columns: 108px minmax(0,1fr) 112px; gap: 22px; }
 #topService .supportPreviewList { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #topService .supportPreviewPanel { padding: 18px; }
 #topService .supportPreviewTalk::after, #topService .supportPreviewPanel::after { right: -16px; width: 10px; height: 10px; }
}
@media (max-width: 640px) {
 #topService .supportPreview { grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 20px; }
 #topService .supportPreviewTalk, #topService .supportPreviewResult { flex-direction: row; padding: 14px 18px; gap: 12px; border-radius: 12px; font-size: 1rem; }
 #topService .supportPreviewTalk br { display: none; }
 #topService .supportPreviewPanel { padding: 18px 14px; border-radius: 16px; }
 #topService .supportPreviewList { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 #topService .supportPreviewItem { padding: 12px 10px; gap: 8px; font-size: 0.75rem; }
 #topService .supportPreviewIcon { flex-basis: 26px; width: 26px; height: 26px; }
 #topService .supportPreviewIcon svg { width: 19px; height: 19px; }
 #topService .supportPreviewTalk::after, #topService .supportPreviewPanel::after { right: calc(50% - 5px); top: auto; bottom: -16px; width: 10px; height: 10px; transform: rotate(135deg); }
 #topService .supportPreviewDesign { font-size: 0.75rem; padding: 9px 10px; }
 #topService .supportPreviewResult small { font-size: 0.6875rem; }
}

/* 背景の円をそのまま見せ、見出しとフェーズ図の白い面を外す。 */
#topService .subTitle { background: none; box-shadow: none; }
#topService .phase { background: none; }

/* フェーズ図を30px上へ寄せ、支援テーマ背面の回転する円を80%に。 */
#topService .phase { margin-top: calc(2.5rem - 30px); }
#topService .deco .circle03 { scale: .8; }

/* メインパネルのキャッチとリードを20px上へ。リードの行間は1.8に。 */
#topMainVisual.heroJ .heroMessage { translate: 0 -20px; }
#topMainVisual.heroJ .heroLead, #topMainVisual.heroJ .heroLead * { line-height: 1.8; }

/* 支援テーマ背面の回転する破線の円を30px上へ（回転のtransformとは別に指定）。 */
#topService .deco .circle03 { translate: 0 -30px; }

/* 対話ラベルを一行に保ち、矢印の左右に同じ余白を確保する。 */
#topService .supportPreviewTalkLine { white-space: nowrap; }
#topService .supportPreviewResult { background: var(--color-indigo); }
#topService .more .md_btn { border-radius: 5px; }
@media (min-width: 641px) {
 #topService .supportPreview { --support-preview-gap: 36px; grid-template-columns: 160px minmax(0,1fr) 148px; gap: var(--support-preview-gap); }
 #topService .supportPreviewTalk::after, #topService .supportPreviewPanel::after { left: calc(100% + var(--support-preview-gap) / 2 - 8px); right: auto; top: 50%; bottom: auto; width: 16px; height: 24px; border: 0; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M4 4l8 8-8 8' fill='none' stroke='%2358a6d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
}
@media (min-width: 641px) and (max-width: 1000px) {
 #topService .supportPreview { --support-preview-gap: 28px; grid-template-columns: 140px minmax(0,1fr) 112px; }
}

/* 相談導線は、黄色から金色へ穏やかに色相を変える。 */
.md_btn_mark,
.heroJ .heroActions .heroPrimary,
.heroJ .heroActions .heroPrimary:hover,
.heroJ .heroActions .heroPrimary:focus-visible { background: linear-gradient(115deg,#f2bc42 0%,#f2d65b 100%); }
#topContact .buttons .md_btn_mark { width: 220px; max-width: 100%; box-sizing: border-box; justify-content: center; }


/* 補足文は事業内容ページと同じく、テーマ一覧の下・黄色い帯の上へ。 */
#topService .supportPreviewNote { margin: 14px 0 0; font-size: 0.875rem; line-height: 1.8; color: #53668b; }
@media (max-width: 640px) {
 #topService .supportPreviewNote { font-size: 0.8125rem; }
}

/* PCのメインキャッチを少し大きくする。 */
@media (min-width: 1001px) {
 .heroJ .heroTitle { font-size: clamp(2.5rem,3.6vw,3.25rem); }
}
@media (min-width: 641px) and (max-width: 1000px) {
 .heroJ .heroTitle { font-size: clamp(2.34375rem,4.5vw,2.8125rem); }
}

/* PCのキャッチとリードを、現在の位置からさらに10px上へ。 */
@media (min-width: 641px) {
 #topMainVisual.heroJ .heroMessage { translate: 0 -30px; }
}