/* RLC ─ Running Life Create / portal
   配色は jidouka.rlcworks.jp（--navy #26547C）を継承し、
   ポータル → 事業サイトの遷移で同一ブランドに見えるようにしている。 */

:root {
    --navy: #26547C;
    --navy-deep: #1B3D5C;
    --ink: #1F2933;
    --sub: #5B6672;
    --line: #E3E7EB;
    --line-strong: #D2D8DE;
    --paper: #F7F8F9;
    --white: #FFFFFF;
    --accent-run: #C05746;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--navy); color: #fff; padding: 8px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.wordmark {
    font-family: Poppins, sans-serif;
    font-weight: 700; font-size: 1.25rem; letter-spacing: .04em;
    color: var(--navy); text-decoration: none;
}
.wordmark small {
    display: block; font-family: "Noto Sans JP", sans-serif;
    font-size: .58rem; font-weight: 500; letter-spacing: .18em;
    color: var(--sub); margin-top: -4px;
}
.site-nav { display: flex; gap: 4px; }
.site-nav a {
    font-size: .82rem; font-weight: 500; color: var(--sub);
    text-decoration: none; padding: 8px 14px; border-radius: 4px;
    transition: color .2s, background .2s;
}
.site-nav a:hover { color: var(--navy); background: rgba(38, 84, 124, .06); }
@media (max-width: 560px) { .site-nav a:not(:last-child) { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 88px 0 72px; }
.hero__eyebrow {
    display: inline-block;
    font-size: .74rem; font-weight: 500; letter-spacing: .16em;
    color: var(--navy);
    border: 1px solid var(--line-strong); background: var(--paper);
    padding: 6px 14px; border-radius: 3px; margin-bottom: 28px;
}
.hero__title {
    font-size: clamp(1.7rem, 4.6vw, 2.6rem);
    font-weight: 700; line-height: 1.5; letter-spacing: .01em;
    margin-bottom: 18px;
}
.hero__title .u-nav { border-bottom: 3px solid rgba(38, 84, 124, .35); padding-bottom: 2px; }
.hero__title .u-run { border-bottom: 3px solid rgba(192, 87, 70, .35); padding-bottom: 2px; }
.hero__subtitle { font-size: 1rem; color: var(--sub); max-width: 560px; }

/* ---------- services ---------- */
.services {
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 72px 0;
}
.section-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 36px; }
.section-heading h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; }
.section-heading span {
    font-family: Poppins, sans-serif; font-size: .72rem; font-weight: 600;
    letter-spacing: .18em; color: var(--sub); text-transform: uppercase;
}

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .card-grid { grid-template-columns: 1fr; } }

.card {
    background: var(--white); border: 1px solid var(--line-strong);
    border-radius: 6px; padding: 32px 28px 28px;
    display: flex; flex-direction: column;
    transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: 0 6px 24px rgba(31, 41, 51, .08); transform: translateY(-2px); }

.card__tag {
    align-self: flex-start;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    padding: 4px 10px; border-radius: 3px; margin-bottom: 18px;
}
.card--biz .card__tag { color: var(--navy); background: rgba(38, 84, 124, .08); }
.card--media .card__tag { color: var(--accent-run); background: rgba(192, 87, 70, .08); }

.card__title { font-size: 1.22rem; font-weight: 700; line-height: 1.5; margin-bottom: 12px; }
.card__body { font-size: .9rem; color: var(--sub); margin-bottom: 20px; }

.card__facts { list-style: none; border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 24px; }
.card__facts li {
    font-size: .82rem; color: var(--ink);
    padding: 4px 0 4px 18px; position: relative;
}
.card__facts li::before {
    content: ""; position: absolute; left: 2px; top: 13px;
    width: 6px; height: 6px; border-radius: 50%;
}
.card--biz .card__facts li::before { background: var(--navy); }
.card--media .card__facts li::before { background: var(--accent-run); }
.card__facts b { font-weight: 700; }

.card__cta {
    margin-top: auto; align-self: flex-start;
    font-size: .88rem; font-weight: 700; text-decoration: none;
    padding: 11px 22px; border-radius: 4px;
    transition: background .2s, color .2s;
}
.card--biz .card__cta { color: #fff; background: var(--navy); }
.card--biz .card__cta:hover { background: var(--navy-deep); }
.card--media .card__cta { color: var(--accent-run); border: 1px solid currentColor; }
.card--media .card__cta:hover { color: #fff; background: var(--accent-run); border-color: var(--accent-run); }

/* ---------- owner ---------- */
.owner { padding: 72px 0; }
.owner__grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
@media (max-width: 720px) { .owner__grid { grid-template-columns: 1fr; gap: 20px; } }
.owner__name { font-size: 1.35rem; font-weight: 700; line-height: 1.4; }
.owner__kana {
    display: block; font-family: Poppins, sans-serif;
    font-size: .7rem; font-weight: 500; letter-spacing: .14em;
    color: var(--sub); margin-top: 4px;
}
.owner__body { font-size: .92rem; color: var(--sub); max-width: 600px; }
.owner__facts { list-style: none; margin-top: 18px; border-left: 3px solid var(--line-strong); padding-left: 18px; }
.owner__facts li { font-size: .84rem; color: var(--ink); padding: 3px 0; }
.owner__contact { margin-top: 26px; font-size: .86rem; }
.owner__contact a { color: var(--navy); font-weight: 700; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--paper); padding: 32px 0; }
.footer__inner {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    align-items: center; justify-content: space-between;
    font-size: .76rem; color: var(--sub);
}
.footer a { color: var(--sub); }
.footer a:hover { color: var(--navy); }