@charset "UTF-8";

/* 事業案内ページ専用。見出し帯・事業の帯・お問い合わせ帯など新デザイン共通の部品は home-base.css */

html { scroll-behavior: smooth; }

/* ページ内リンク（事業の帯） */
.service-index-arrow { display: block; width: 22px; height: 22px; margin-top: clamp(14px, 1.4vw, 20px); background: currentColor; mask: url("../img/home/icons/arrow-down-light.svg") center / contain no-repeat; -webkit-mask: url("../img/home/icons/arrow-down-light.svg") center / contain no-repeat; transition: transform .2s ease; }
.home-service:hover .service-index-arrow { transform: translateY(4px); }

/* 各事業 */
/* ページ内リンクで移動したとき、上余白の一部をヘッダーの下に隠して見出しを近づける */
.service-section { padding-block: clamp(72px, 8vw, 120px); scroll-margin-top: calc(var(--home-header-compact) - clamp(32px, 4.5vw, 72px)); }
.service-section + .service-section { padding-top: 0; }
.service-section + .service-section > .home-container { padding-top: clamp(72px, 8vw, 120px); border-top: 1px solid var(--home-rule); }
.service-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.service-heading { position: sticky; top: calc(var(--home-header-compact) + 32px); }
.service-number { font-family: var(--home-latin); font-size: clamp(48px, 5.4vw, 78px); font-weight: 500; line-height: 1; letter-spacing: .02em; }
.service-heading .home-eyebrow { margin-top: clamp(16px, 1.6vw, 24px); }
.service-heading h2 { margin-top: 10px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.service-heading .service-summary { margin-top: 10px; color: var(--home-muted); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.8; }

.service-intro h3 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; line-height: 1.5; }
.service-body .service-intro > * + * { margin-top: clamp(16px, 1.6vw, 22px); }
.service-intro p { font-size: clamp(14px, 1.15vw, 17px); line-height: 2.05; color: #454545; }

.service-block { margin-top: clamp(52px, 5.4vw, 80px); }
/* 共通の .home-page h3 / ol / dl の余白リセットより優先させるため .service-body を付ける */
.service-body .service-label { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.5; }
.service-label::before { content: ""; flex: 0 0 auto; width: 24px; height: 2px; background: var(--home-red); }

.service-industries { border-top: 1px solid var(--home-ink); }
.service-industries > div { padding-block: clamp(20px, 2vw, 26px); border-bottom: 1px solid var(--home-rule); }
.service-industries dt { font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; line-height: 1.6; }
.service-industries dt span { display: inline-block; margin-left: 14px; color: var(--home-muted); font-size: .8em; font-weight: 500; }
.service-industries dd { margin-top: 8px; font-size: clamp(13px, 1.08vw, 16px); line-height: 1.95; color: #454545; }

/* 区切り線は隙間に見せる背景色で引く */
.service-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; list-style: none; background: var(--home-rule); border: 1px solid var(--home-rule); }
.service-step { position: relative; padding: clamp(24px, 2.6vw, 38px); background: #fff; }
.service-step-icon { position: absolute; top: clamp(22px, 2.4vw, 34px); right: clamp(22px, 2.4vw, 34px); width: clamp(34px, 3vw, 44px); height: clamp(34px, 3vw, 44px); background: var(--home-red); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.service-step-icon-analysis { --icon: url("../img/home/icons/magnifying-glass-light.svg"); }
.service-step-icon-proposal { --icon: url("../img/home/icons/lightbulb-light.svg"); }
.service-step-icon-development { --icon: url("../img/home/icons/code-light.svg"); }
.service-step-icon-support { --icon: url("../img/home/icons/lifebuoy-light.svg"); }
.service-step-number { color: var(--home-red); font-family: var(--home-latin); font-size: clamp(11px, .97vw, 14px); font-weight: 700; letter-spacing: .2em; }
.service-step .service-step-title { margin-top: 12px; font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; line-height: 1.5; }
.service-step .service-step-label { margin-top: 4px; color: var(--home-muted); font-size: clamp(12px, 1vw, 14px); font-weight: 700; }
.service-step .service-step-text { margin-top: 16px; font-size: clamp(13px, 1.04vw, 15px); line-height: 1.95; color: #454545; }

.service-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; }
.service-features li { padding-top: 18px; border-top: 1px solid var(--home-ink); }
.service-features .service-feature-title { font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; line-height: 1.6; }
.service-features p + p { margin-top: 10px; font-size: clamp(13px, 1.04vw, 15px); line-height: 1.95; color: #454545; }

.service-recommend { margin-top: clamp(36px, 3.6vw, 52px); padding: clamp(26px, 3vw, 44px); background: #f8f7f6; }
.service-recommend ul { margin: 0; padding: 0; list-style: none; }
.service-recommend li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid #e2e0dd; font-size: clamp(14px, 1.15vw, 17px); font-weight: 500; line-height: 1.75; }
.service-recommend li:last-child { padding-bottom: 0; }
.service-recommend li::before { content: ""; position: absolute; top: calc(14px + .2em); left: 0; width: 20px; height: 20px; background: var(--home-red); -webkit-mask: url("../img/home/icons/check-light.svg") center / contain no-repeat; mask: url("../img/home/icons/check-light.svg") center / contain no-repeat; }

@media (max-width: 1100px) {
    .service-features { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 900px) {
    .service-section { padding-block: 56px; }
    .service-section + .service-section { padding-top: 0; }
    .service-section + .service-section > .home-container { padding-top: 56px; }
    .service-grid { grid-template-columns: 1fr; gap: 32px; }
    .service-heading { position: static; }
    .service-number { font-size: 48px; }
    .service-heading h2 { font-size: 26px; }
    .service-industries dt span { display: block; margin: 2px 0 0; }
    .service-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}