/* ============================================================ GrowLink — Service DETAIL pages (service-01〜06) 各ページはか最上位 section に --c / --c-ink を指定して事業カラーでテーマづけする ============================================================ */ /* ---------- Detail hero ---------- */ .svc-hero{ position:relative;overflow:hidden; padding-top:140px;padding-bottom:clamp(52px,6vw,84px); background: radial-gradient(120% 92% at 90% 4%, color-mix(in oklab, var(--c) 16%, transparent), transparent 56%), radial-gradient(90% 80% at 2% 104%, color-mix(in oklab, var(--c) 9%, transparent), transparent 55%), var(--hero-bg); } .svc-hero .wrap{position:relative;z-index:2;} .svc-hero .ghost-en{ position:absolute;right:clamp(-12px,2vw,48px);top:88px;z-index:1; font-family:var(--latin);font-weight:700; font-size:clamp(7rem,26vw,20rem);line-height:.74;letter-spacing:-.04em; color:color-mix(in oklab, var(--c) 14%, transparent); pointer-events:none;user-select:none; } .svc-hero .eyebrow{color:color-mix(in oklab,var(--c) 72%, var(--ink-1));} .svc-hero .eyebrow::before{background:var(--c);} .svc-hero .cat{ display:inline-block;margin-top:.2em; font-size:.84rem;font-weight:600;color:var(--ink-3);letter-spacing:.06em; } .svc-hero h1{ font-family:var(--heading-family);font-weight:700; font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.3;letter-spacing:.04em;margin:.35em 0 0; } .svc-hero .lead{ margin:1.4em 0 0;color:var(--ink-2);font-size:1.05rem;line-height:2.05;max-width:60ch; } /* ---------- Section heading (detail) ---------- */ .d-head{margin-bottom:clamp(32px,4vw,52px);} .d-head .label{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--latin);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase; color:color-mix(in oklab,var(--c) 70%, var(--ink-1)); } .d-head .label::before{content:"";width:24px;height:2px;background:var(--c);border-radius:2px;} .d-head h2{ font-family:var(--heading-family);font-weight:700; font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.4;letter-spacing:.03em;margin:.5em 0 0; } /* ---------- 特長 features ---------- */ .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:820px){ .feature-grid{grid-template-columns:1fr;} } .feature{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:32px 30px;position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--c) 35%,var(--line));} .feature .fn{ font-family:var(--latin);font-weight:700;font-size:.82rem;letter-spacing:.06em; color:var(--c);margin-bottom:.9em;display:flex;align-items:center;gap:.6em; } .feature .fn .bar{width:18px;height:2px;background:var(--c);border-radius:2px;} .feature h3{font-family:var(--heading-family);font-weight:700;font-size:1.22rem;letter-spacing:.02em;margin:0 0 .5em;line-height:1.5;} .feature p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.95;} /* ---------- こんな方に target ---------- */ .target{background:var(--bg-2);} .target-wrap{ display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center; } @media (max-width:820px){ .target-wrap{grid-template-columns:1fr;gap:28px;} } .target-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;} .target-list li{ display:flex;align-items:flex-start;gap:14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm); padding:20px 24px;font-size:1rem;color:var(--ink-1);line-height:1.7;font-weight:500; } .target-list .check{ flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:.1em; background:color-mix(in oklab,var(--c) 16%, var(--surface));color:var(--c); } .target-list .check svg{width:15px;height:15px;} /* ---------- サービスの流れ flow ---------- */ .flow-list{display:flex;flex-direction:column;gap:0;position:relative;} .flow-step{ display:grid;grid-template-columns:58px 1fr;gap:clamp(22px,3vw,34px); padding:0 0 clamp(34px,4.2vw,52px) 0;position:relative; } .flow-step:last-child{padding-bottom:0;} .flow-rail{display:flex;flex-direction:column;align-items:center;align-self:stretch;} .flow-no{ flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;z-index:2; background:var(--surface);border:2px solid var(--c); font-family:var(--latin);font-weight:700;font-size:.7rem;color:var(--c); line-height:1;text-align:center;letter-spacing:.04em; box-shadow:0 6px 16px -10px color-mix(in oklab,var(--c) 80%, transparent); } .flow-no span{display:block;font-size:.6rem;opacity:.7;margin-bottom:1px;} .flow-no b{display:block;font-size:1.2rem;letter-spacing:-.01em;} .flow-line{width:2px;flex:1;background:color-mix(in oklab,var(--c) 28%, var(--line));margin:10px 0 0;min-height:24px;} .flow-step:last-child .flow-line{display:none;} .flow-body{padding-top:13px;padding-bottom:0;} .flow-body h3{font-family:var(--heading-family);font-weight:700;font-size:1.22rem;letter-spacing:.02em;margin:0 0 .6em;line-height:1.4;} .flow-body p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.95;max-width:52ch;} /* ---------- 他の事業 nav ---------- */ .other{border-top:1px solid var(--line);} .other-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media (max-width:640px){ .other-grid{grid-template-columns:1fr;} } .other-card{ display:flex;align-items:center;gap:16px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:22px 26px;transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .other-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .other-card.prev{justify-content:flex-start;} .other-card.next{justify-content:flex-end;text-align:right;} .other-card .dir{font-family:var(--latin);font-weight:700;font-size:.72rem;letter-spacing:.08em;color:var(--ink-3);} .other-card .nm{font-family:var(--heading-family);font-weight:700;font-size:1.05rem;letter-spacing:.02em;margin-top:2px;} .other-card .dot{width:12px;height:12px;border-radius:50%;background:var(--oc);flex:none;} .other-card.next .dot{order:2;}