/* TOKIHANA consulting site — generated from wireframe */
/* ============================================================
   TOKIHANA Design System — Foundations
   ブランドトーン：誠実・透明・自由
   用途：16:9 スライド形式の PDF 資料（会場レポート・提案書）
   ============================================================ */
/* -------- Color ------------------------------------------------ */
:root {
    /* Brand */
    --tk-white: #FFFFFF;
    --tk-paper: #FDFEFE;
    /* ほんのり青みのある紙色 */
    --tk-mist: #F4FAFC;
    /* 背景用の最も薄いブルー */
    --tk-sky: #E0F6FF;
    /* サブアクセント */
    --tk-aqua: #CBF1F8;
    /* メインアクセント */
    --tk-emerald: #8FD8D2;
    /* 補助アクセント（濃いめ） */
    --tk-teal: #3A8F8A;
    /* データ強調・リンク */
    --tk-deep: #1F5D5A;
    /* 最強調・見出しの小物 */
    /* Text */
    --tk-ink: #222222;
    /* 本文 */
    --tk-ink-70: #4A4A4A;
    /* 補助テキスト */
    --tk-ink-50: #777777;
    /* キャプション */
    --tk-ink-30: #B5B5B5;
    /* プレースホルダ */
    --tk-ink-10: #E5E7E8;
    /* 罫線（主） */
    --tk-ink-05: #F1F2F3;
    /* 罫線（補助）・ゼブラ */
    /* Semantic */
    --tk-positive: #2E8F6A;
    --tk-warning: #C98A2E;
    --tk-negative: #B24B4B;
    /* Chart palette（白背景・罫線主体のため、彩度を抑えた落ち着いた配色） */
    --tk-chart-1: #3A8F8A;
    --tk-chart-2: #8FD8D2;
    --tk-chart-3: #CBF1F8;
    --tk-chart-4: #1F5D5A;
    --tk-chart-5: #B8C5C4;
    --tk-chart-6: #E0E6E6;
    /* Rule widths */
    --tk-rule-hair: 0.5px;
    --tk-rule: 1px;
    --tk-rule-bold: 2px;
    /* Radius — 明朝×整然のトーンに合わせて極めて控えめ */
    --tk-r-0: 0px;
    --tk-r-1: 2px;
    --tk-r-2: 4px;
    /* Shadow — 紙面印象を守るため原則使わない。必要時のみ微弱に */
    --tk-shadow-soft: 0 1px 2px rgba(31, 93, 90, 0.06);
    --tk-shadow-card: 0 2px 8px rgba(31, 93, 90, 0.08);
    /* Spacing（4の倍数＋8刻み） */
    --tk-s-1: 4px;
    --tk-s-2: 8px;
    --tk-s-3: 12px;
    --tk-s-4: 16px;
    --tk-s-5: 20px;
    --tk-s-6: 24px;
    --tk-s-8: 32px;
    --tk-s-10: 40px;
    --tk-s-12: 48px;
    --tk-s-16: 64px;
    --tk-s-20: 80px;
    /* Fonts */
    --tk-font-serif-ja: "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", serif;
    --tk-font-serif-en: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --tk-font-sans-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", sans-serif;
    --tk-font-mono: "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
    /* Slide canvas */
    --tk-slide-w: 1920px;
    --tk-slide-h: 1080px;
    --tk-margin-x: 96px;
    --tk-margin-y: 72px;
}
/* -------- Reset (軽量) ----------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    color: var(--tk-ink);
    font-family: var(--tk-font-serif-ja);
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--tk-mist);
}
/* -------- Type utilities --------------------------------------- */
.tk-serif-ja {
    font-family: var(--tk-font-serif-ja);
}
.tk-serif-en {
    font-family: var(--tk-font-serif-en);
    font-feature-settings: "liga" 1;
}
.tk-sans-ja {
    font-family: var(--tk-font-sans-ja);
}
.tk-mono {
    font-family: var(--tk-font-mono);
}
.tk-eyebrow {
    font-family: var(--tk-font-serif-en);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.12em;
    font-size: 20px;
    color: var(--tk-teal);
}
.tk-label {
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--tk-ink-50);
    text-transform: uppercase;
}
.tk-kicker {
    font-family: var(--tk-font-serif-en);
    letter-spacing: 0.2em;
    font-size: 16px;
    color: var(--tk-ink-70);
    text-transform: uppercase;
}
.tk-h1 {
    font-family: var(--tk-font-serif-ja);
    font-size: 68px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin: 0;
}
.tk-h2 {
    font-family: var(--tk-font-serif-ja);
    font-size: 44px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin: 0;
}
.tk-h3 {
    font-family: var(--tk-font-serif-ja);
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin: 0;
}
.tk-h4 {
    font-family: var(--tk-font-serif-ja);
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin: 0;
}
.tk-body {
    font-family: var(--tk-font-serif-ja);
    font-size: 18px;
    line-height: 1.85;
    letter-spacing: 0.04em;
    color: var(--tk-ink);
}
.tk-body-sm {
    font-family: var(--tk-font-sans-ja);
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.04em;
    color: var(--tk-ink-70);
}
.tk-caption {
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: var(--tk-ink-50);
}
.tk-num {
    font-family: var(--tk-font-serif-en);
    font-weight: 500;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.01em;
}
/* -------- Rule / divider primitives ---------------------------- */
.tk-rule {
    border: 0;
    border-top: var(--tk-rule) solid var(--tk-ink-10);
    margin: 0;
}
.tk-rule-ink {
    border: 0;
    border-top: var(--tk-rule) solid var(--tk-ink);
    margin: 0;
}
.tk-rule-hair {
    border: 0;
    border-top: var(--tk-rule-hair) solid var(--tk-ink-10);
    margin: 0;
}
.tk-rule-bold {
    border: 0;
    border-top: var(--tk-rule-bold) solid var(--tk-ink);
    margin: 0;
}
.tk-rule-aqua {
    border: 0;
    border-top: var(--tk-rule-bold) solid var(--tk-aqua);
    margin: 0;
}
/* ============================================================
   TOKIHANA — Components
   すべて罫線ベース。影や角丸は極力使わず、紙面感を守る。
   ============================================================ */
/* -------- Logo ------------------------------------------------- */
.tk-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1;
}
.tk-logo .mark {
    width: 28px;
    height: 28px;
    position: relative;
    display: inline-block;
}
.tk-logo .wordmark {
    font-family: var(--tk-font-serif-en);
    font-weight: 500;
    letter-spacing: 0.24em;
    font-size: 22px;
    color: var(--tk-ink);
    text-transform: uppercase;
}
.tk-logo .jp {
    font-family: var(--tk-font-serif-ja);
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--tk-ink-50);
    margin-left: 4px;
}
.tk-logo.-sm .wordmark {
    font-size: 16px;
}
.tk-logo.-sm .mark {
    width: 20px;
    height: 20px;
}
.tk-logo.-lg .wordmark {
    font-size: 36px;
}
.tk-logo.-lg .mark {
    width: 44px;
    height: 44px;
}
/* -------- Button (UI用) --------------------------------------- */
.tk-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--tk-ink);
    background: var(--tk-white);
    border: var(--tk-rule) solid var(--tk-ink);
    cursor: pointer;
}
.tk-btn.-primary {
    background: var(--tk-ink);
    color: var(--tk-white);
}
.tk-btn.-aqua {
    background: var(--tk-aqua);
    border-color: var(--tk-aqua);
}
.tk-btn.-ghost {
    background: transparent;
    border-color: var(--tk-ink-10);
    color: var(--tk-ink-70);
}
/* -------- Eyebrow / Section title block ----------------------- */
.tk-section-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: end;
    padding-bottom: var(--tk-s-5);
    border-bottom: var(--tk-rule) solid var(--tk-ink);
}
.tk-section-title .no {
    font-family: var(--tk-font-serif-en);
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--tk-teal);
    padding-bottom: 10px;
}
.tk-section-title .title {
    font-family: var(--tk-font-serif-ja);
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    color: var(--tk-ink);
}
/* -------- KPI card (罫線ベース) ------------------------------- */
.tk-kpi {
    border-top: var(--tk-rule-bold) solid var(--tk-ink);
    padding: 20px 0 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
}
.tk-kpi .tk-kpi-label {
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--tk-ink-50);
}
.tk-kpi .tk-kpi-value {
    font-family: var(--tk-font-serif-en);
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--tk-ink);
    font-feature-settings: "tnum" 1, "lnum" 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tk-kpi .tk-kpi-value .unit {
    font-family: var(--tk-font-serif-ja);
    font-size: 20px;
    letter-spacing: 0.05em;
    color: var(--tk-ink-70);
}
.tk-kpi .tk-kpi-delta {
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--tk-ink-70);
}
.tk-kpi .tk-kpi-delta.-up {
    color: var(--tk-positive);
}
.tk-kpi .tk-kpi-delta.-down {
    color: var(--tk-negative);
}
.tk-kpi.-aqua {
    border-top-color: var(--tk-teal);
}
.tk-kpi.-aqua .tk-kpi-value {
    color: var(--tk-deep);
}
/* -------- Table ----------------------------------------------- */
.tk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tk-font-sans-ja);
}
.tk-table thead th {
    font-family: var(--tk-font-sans-ja);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--tk-ink-50);
    text-align: left;
    padding: 12px 14px;
    border-top: var(--tk-rule-bold) solid var(--tk-ink);
    border-bottom: var(--tk-rule) solid var(--tk-ink-10);
    background: var(--tk-white);
}
.tk-table tbody td {
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--tk-ink);
    padding: 14px;
    border-bottom: var(--tk-rule-hair) solid var(--tk-ink-10);
    vertical-align: top;
}
.tk-table tbody tr:last-child td {
    border-bottom: var(--tk-rule) solid var(--tk-ink);
}
.tk-table .num {
    font-family: var(--tk-font-serif-en);
    font-weight: 500;
    text-align: right;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.tk-table.-zebra tbody tr:nth-child(even) td {
    background: var(--tk-mist);
}
.tk-table.-compact thead th {
    padding: 8px 10px;
    font-size: 11px;
}
.tk-table.-compact tbody td {
    padding: 9px 10px;
    font-size: 14px;
}
/* -------- Pull quote / comment -------------------------------- */
.tk-pullquote {
    display: grid;
    grid-template-columns: 6px 1fr;
    gap: 24px;
    padding: 16px 0;
}
.tk-pullquote .bar {
    background: var(--tk-aqua);
}
.tk-pullquote .text {
    font-family: var(--tk-font-serif-ja);
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--tk-ink);
}
.tk-pullquote .attrib {
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--tk-ink-50);
    margin-top: 12px;
}
/* -------- Checklist ------------------------------------------ */
.tk-checklist {
    list-style-type: disc !important;
    padding: 0;
    margin: 0;
}
.tk-checklist li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: var(--tk-rule-hair) solid var(--tk-ink-10);
    font-family: var(--tk-font-serif-ja);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;
}
.tk-checklist li::before {
    content: "";
    width: 10px;
    height: 10px;
    border: var(--tk-rule) solid #297889;
    margin-top: 8px;
    background: transparent;
    left: 10px;
    position: relative;
    background: #d1e6ea;
}
.tk-checklist li.-done::before {
    background:
        linear-gradient(45deg, transparent 45%, var(--tk-ink) 45%, var(--tk-ink) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, var(--tk-ink) 45%, var(--tk-ink) 55%, transparent 55%);
}
/* -------- Numbered list (セリフ欧文ナンバー) ----------------- */
.tk-numlist {
    list-style: none;
    counter-reset: tk;
    padding: 0;
    margin: 0;
}
.tk-numlist li {
    counter-increment: tk;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: var(--tk-rule-hair) solid var(--tk-ink-10);
}
.tk-numlist li::before {
    content: counter(tk, decimal-leading-zero);
    font-family: var(--tk-font-serif-en);
    font-size: 20px;
    letter-spacing: 0.1em;
    color: var(--tk-teal);
}
/* -------- Image placeholder ---------------------------------- */
.tk-ph {
    background:
        linear-gradient(135deg, var(--tk-sky) 0%, var(--tk-aqua) 100%);
    position: relative;
    overflow: hidden;
}
.tk-ph::after {
    content: attr(data-label);
    position: absolute;
    inset: auto 0 16px 0;
    text-align: center;
    font-family: var(--tk-font-serif-en);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--tk-deep);
    opacity: 0.7;
}
.tk-ph.-dark {
    background: linear-gradient(135deg, #243a3f 0%, #1F5D5A 100%);
}
.tk-ph.-dark::after {
    color: rgba(255, 255, 255, 0.6);
}
/* Decorative overlay lines for image placeholders */
.tk-ph.-lined::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: var(--tk-rule-hair) solid rgba(255, 255, 255, 0.6);
    pointer-events: none;
}
/* -------- Badge / pill --------------------------------------- */
.tk-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-family: var(--tk-font-sans-ja);
    font-size: 11px;
    letter-spacing: 0.16em;
    border: var(--tk-rule-hair) solid var(--tk-ink-30);
    color: var(--tk-ink-70);
    background: var(--tk-white);
}
.tk-badge.-filled {
    background: var(--tk-ink);
    color: var(--tk-white);
    border-color: var(--tk-ink);
}
.tk-badge.-aqua {
    background: var(--tk-aqua);
    border-color: var(--tk-aqua);
    color: var(--tk-deep);
}
.tk-badge.-mist {
    background: var(--tk-mist);
    border-color: var(--tk-ink-10);
    color: var(--tk-ink-70);
}
/* -------- Tag row ------------------------------------------- */
.tk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* -------- Legend -------------------------------------------- */
.tk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.tk-legend .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--tk-ink-70);
}
.tk-legend .swatch {
    width: 14px;
    height: 14px;
    display: inline-block;
}
/* -------- Stat block (label : big num : detail) ------------- */
.tk-stat {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
}
.tk-stat .label {
    font-family: var(--tk-font-sans-ja);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--tk-ink-50);
}
.tk-stat .value {
    font-family: var(--tk-font-serif-en);
    font-size: 34px;
    line-height: 1;
    color: var(--tk-ink);
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.tk-stat .detail {
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    color: var(--tk-ink-70);
}
/* -------- Timeline ------------------------------------------ */
.tk-timeline {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    position: relative;
    padding-top: 36px;
}
.tk-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 1px;
    background: var(--tk-ink-10);
}
.tk-timeline .step {
    position: relative;
    padding: 16px 16px 0 0;
}
.tk-timeline .step::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--tk-teal);
    border: 2px solid var(--tk-teal);
    border-radius: 10px;
}
.tk-timeline .step.-done::before {
    background: var(--tk-teal);
}
.tk-timeline .step .when {
    font-family: var(--tk-font-serif-en);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--tk-teal);
}
.tk-timeline .step .what {
    font-family: var(--tk-font-serif-ja);
    font-size: 16px;
    letter-spacing: 0.04em;
    margin-top: 6px;
    line-height: 1.7;
    color: var(--tk-ink);
}
.tk-timeline .step .note {
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--tk-ink-50);
    margin-top: 4px;
}
/* -------- Chart: simple bar --------------------------------- */
.tk-bars {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px 16px;
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
    color: var(--tk-ink);
}
.tk-bars .lbl {
    letter-spacing: 0.05em;
}
.tk-bars .track {
    height: 10px;
    background: var(--tk-ink-05);
    position: relative;
}
.tk-bars .fill {
    height: 100%;
    background: var(--tk-teal);
    width: var(--pct, 50%);
}
.tk-bars .fill.-aqua {
    background: var(--tk-aqua);
}
.tk-bars .fill.-emerald {
    background: var(--tk-emerald);
}
.tk-bars .val {
    font-family: var(--tk-font-serif-en);
    font-feature-settings: "tnum" 1, "lnum" 1;
    color: var(--tk-ink-70);
}
/* -------- Info grid (ラベル: 値) ---------------------------- */
.tk-info {
    display: grid;
    grid-template-columns: 1fr;
    border-top: var(--tk-rule) solid var(--tk-ink-10);
}
.tk-info>.row {
    display: grid;
    grid-template-columns: 180px 1fr;
    padding: 12px 0;
    border-bottom: var(--tk-rule-hair) solid var(--tk-ink-10);
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
}
.tk-info>.row .k {
    color: var(--tk-ink-50);
    letter-spacing: 0.14em;
}
.tk-info>.row .v {
    color: var(--tk-ink);
    font-family: var(--tk-font-serif-ja);
    font-size: 15px;
    letter-spacing: 0.04em;
}
/* ============ SITE (inside frames) ============ */
.site {
    background: #fff;
    color: var(--tk-ink);
    font-family: var(--tk-font-serif-ja);
    letter-spacing: .02em;
}
.site a {
    text-decoration: none;
    color: inherit;
}
/* header */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 40px;
    border-bottom: 1px solid var(--tk-ink-10);
    background: #fff;
}
.brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}
.brand .wm {
    display: inline-block;
    height: 46px;
    width: 137px;
    background: url("../img/logo.png") no-repeat left center/contain;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}
.brand .wm::after {
    content: none;
}
.brand .jp {
    display: none;
}
.brand .jp {
    font-family: var(--tk-font-sans-ja);
    font-size: 9px;
    letter-spacing: .26em;
    color: var(--tk-ink-50);
}
.navlinks {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--tk-font-sans-ja);
    font-size: 11.5px;
    letter-spacing: .04em;
}
.navlinks a {
    color: var(--tk-ink-70);
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
}
.navlinks a.on {
    color: var(--brand-coral);
}
.navlinks a.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: var(--brand-coral);
}
.navlinks .new {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 8px;
    letter-spacing: .1em;
    color: #fff;
    background: var(--brand-coral);
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 5px;
    vertical-align: 2px;
}
.navtel {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .04em;
    color: var(--tk-ink);
    text-align: right;
    line-height: 1.2;
}
.navtel small {
    display: block;
    font-family: var(--tk-font-sans-ja);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--tk-ink-50);
    margin-top: 2px;
}
/* mobile header */
.mnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--tk-ink-10);
}
.mnav .burger {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mnav .burger i {
    width: 22px;
    height: 2px;
    background: var(--tk-ink);
    display: block;
}
/* generic */
.wrap {
    padding: 0 56px;
}
.mwrap {
    padding: 0 20px;
}
.eyebrow {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--tk-teal);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.lede {
    font-family: var(--tk-font-serif-ja);
    font-size: 16px;
    line-height: 2;
    color: var(--tk-ink-70);
    letter-spacing: .04em;
}
.sec {
    padding: 72px 56px;
}
.sec.first {
    border-top: none;
}
.sechd {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 32px;
}
.sechd .sec-no {
    display: none;
}
.sec-no {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .22em;
    color: var(--tk-teal);
    text-transform: uppercase;
}
.sec-h {
    font-family: var(--tk-font-serif-ja);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 0;
    line-height: 1.5;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 9px;
}
.sec-h .en {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-size: 12.5px;
    color: var(--tk-teal);
    letter-spacing: .2em;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
}
.g2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.g3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.g4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.g5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.card {
    border: 1px solid var(--tk-ink-10);
    background: #fff;
    padding: 15px;
}
.card h4 {
    font-family: var(--tk-font-serif-ja);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: .05em;
    margin: 0 0 6px;
}
.card p {
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    line-height: 1.85;
    color: var(--tk-ink-70);
    margin: 0;
    letter-spacing: .02em;
}
.card .role {
    font-family: var(--tk-font-mono);
    font-size: 13px;
    color: var(--tk-ink-50);
}
.card.hot {
    border-color: var(--brand-coral);
    border-width: 2px;
    background: #FDECEA;
}
.newtag {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .08em;
    color: #fff;
    background: var(--brand-coral);
    padding: 2px 9px;
    border-radius: 999px;
}
.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: auto;
    max-width:800px;
}
.arrowlink {
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--tk-teal);
    border-bottom: 1px solid var(--tk-teal);
    padding-bottom: 2px;
    display: inline-block;
}
/* footer */
.foot {
    background: #4ca3bf;
    color: #fff;
    padding: 52px 56px 30px;
}
.foot .ftop {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.foot .wm {
    display: inline-block;
    height: 52px;
    width: 155px;
    background: url("../img/logo-white.png") no-repeat left center/contain;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}
.foot .wm::after {
    content: none;
}
/* 追加ここから */
/* フッター: 運営会社情報 */
.foot .fcorp{ font-family:var(--tk-font-sans-ja); font-size:11px; line-height:1.9; color:rgba(255,255,255,.62); margin-top:14px; letter-spacing:.04em; }
.foot .fcorp .cname{ color:rgba(255,255,255,.85); font-weight:700; font-size:12px; display:block; margin-bottom:2px; }
.foot .fbot{ gap:14px; flex-wrap:wrap; }
.foot .fbot .fpolicy{ color:rgba(255,255,255,.62); margin-left:18px; }
.foot .fbot .fpolicy:hover{ color:rgba(255,255,255,.9); }
.foot .fbot .fleft{ display:flex; align-items:center; flex-wrap:wrap; }

@media (max-width:960px){ 
    .foot .fbot .fleft{ display:block; } 
    .foot .fbot .fpolicy{ margin-left:0; display:block; margin-top:8px; } 
}
/* ここまで */
.foot .fjp {
    display: none;
}
.foot .fjp {
    font-family: var(--tk-font-sans-ja);
    font-size: 9px;
    letter-spacing: .26em;
    color: rgba(255, 255, 255, .5);
    margin-top: 6px;
}
.foot .flinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: .04em;
    max-width: 460px;
}
.foot .flinks a {
    color: rgba(255, 255, 255, .72);
}
.foot .frel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
}
.foot .frel .lb {
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .06em;
    margin-bottom: 2px;
}
.foot .frel a {
    color: rgba(255, 255, 255, .85);
}
.foot .fbot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .4);
}
.foot .fbot .totop {
    color: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 8px 14px;
    border-radius: 2px;
}
/* form */
.form {
    display: grid;
    gap: 16px;
    max-width: 640px;
}
.form .fld {
    display: grid;
    gap: 6px;
}
.form label {
    font-family: var(--tk-font-sans-ja);
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--tk-ink-70);
}
.form label .req {
    color: var(--tk-negative);
    font-size: 10px;
    margin-left: 6px;
}
.form .inp {
    border: 1px solid var(--tk-ink-10);
    background: var(--tk-paper);
    height: 44px;
    border-radius: 2px;
}
.form .inp.area {
    height: 120px;
}
.form .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.radios {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--tk-font-sans-ja);
    font-size: 12.5px;
    color: var(--tk-ink-70);
}
.radios span {
    border: 1px solid var(--tk-ink-10);
    padding: 9px 18px;
    border-radius: 999px;
}
/* hero */
.heroA {
    padding: 84px 56px 0;
    text-align: center;
    background: radial-gradient(circle at 26% 34%, rgba(95, 179, 208, .16), transparent 42%), radial-gradient(circle at 74% 20%, rgba(95, 179, 208, .12), transparent 38%), radial-gradient(circle at 58% 74%, rgba(228, 87, 76, .05), transparent 40%);
}
.heroA .eyebrow {
    font-size: 13px;
}
.heroA h1 {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.42;
    letter-spacing: .14em;
    margin: 18px 0 22px;
}
.heroA .lede {
    max-width: 620px;
    margin: 0 auto;
}
.heroA .cta-row {
    justify-content: center;
    margin-top: 28px;
}
.heroA .hero-img {
    height: 380px;
    margin-top: 52px;
    border-radius: 2px 2px 0 0;
}
.heroB {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 0;
    align-items: stretch;
}
.heroB .hcopy {
    padding: 80px 48px 80px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.heroB h1 {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.42;
    letter-spacing: .12em;
    margin: 16px 0 20px;
}
.heroB .hero-img {
    min-height: 520px;
}
.statline {
    display: flex;
    gap: 40px;
    margin-top: 34px;
    padding-top: 26px;
    /*border-top: 1px solid var(--tk-ink-10);*/
}
.statline .st .v {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 34px;
    /*color: var(--tk-deep);*/
    color: var(--tk-teal);
    line-height: 1.05;
    letter-spacing: .01em;
    font-feature-settings: "tnum";
}
.statline .st .l {
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--tk-deep);
    margin-top: 6px;
}
.band {
    background: var(--tk-mist);
}
.newsrow {
    display: grid;
    grid-template-columns: 130px 120px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--tk-ink-10);
    font-size: 13.5px;
    align-items: baseline;
}
.newsrow .dt {
    font-family: "Playfair Display", serif;
    color: var(--tk-teal);
    letter-spacing: .06em;
}
.newsrow .ct {
    font-family: var(--tk-font-sans-ja);
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--tk-ink-50);
    border: 1px solid var(--tk-ink-10);
    padding: 3px 8px;
    text-align: center;
}
.newsrow .tt {
    font-family: var(--tk-font-serif-ja);
    letter-spacing: .03em;
    color: var(--tk-ink);
}
/* mobile inner scale */
/* pricing menu blocks */
.menu {
    border: 1px solid var(--tk-ink-10);
    border-left: 3px solid var(--tk-teal);
    padding: 22px 26px;
    margin-bottom: 14px;
    background: #fff;
}
.menu .mh {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    border-bottom: 1px solid var(--tk-ink-10);
    padding-bottom: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.menu .mname {
    font-family: var(--tk-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--tk-ink-50);
}
.menu .mtitle {
    font-family: var(--tk-font-serif-ja);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-top: 3px;
}
.menu .mprice {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--tk-deep);
    letter-spacing: .01em;
    white-space: nowrap;
    font-feature-settings: "tnum";
}
.menu .mprice small {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--tk-ink-70);
    margin-left: 1px;
}
.menu .mterm {
    font-family: var(--tk-font-mono);
    font-size: 10px;
    color: var(--tk-ink-50);
    margin-left: 8px;
}
.menu ul {
    columns: 2;
    column-gap: 28px;
    margin: 0;
    padding-left: 18px;
    font-family: var(--tk-font-sans-ja);
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--tk-ink-70);
    letter-spacing: .02em;
}
.menu ul li {
    break-inside: avoid;
}
.menu .fn {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--tk-ink-10);
    font-family: var(--tk-font-sans-ja);
    font-size: 10.5px;
    color: var(--tk-ink-50);
    line-height: 1.8;
}
.initfee {
    background: var(--tk-ink);
    color: #fff;
    padding: 18px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.initfee .l {
    font-family: var(--tk-font-sans-ja);
    font-size: 12.5px;
    letter-spacing: .06em;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
}
.initfee .v {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .01em;
}
/* corporate pill buttons */
.site .tk-btn {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: .1em;
    border-radius: 999px;
    padding: 14px 32px;
    border: 1.5px solid var(--brand-coral);
    color: var(--brand-coral);
    background: #fff;
    width:75%;
    max-width:300px;
    text-align:center;
    display: block;
    margin:auto;
}
.site .tk-btn.-primary {
    background: var(--brand-coral);
    color: #fff;
    border-color: var(--brand-coral);
}
.site .tk-btn.-aqua {
    background: var(--brand-coral);
    color: #fff;
    border-color: var(--brand-coral);
}
.site .tk-btn.-ghost {
    background: #fff;
    border-color: var(--tk-ink-10);
    color: var(--tk-ink-70);
}
.form .inp {
    border-radius: 6px;
}
.arrowlink {
    border-bottom: none;
    font-weight: 700;
    letter-spacing: .1em;
}
/* pricing groups */
.mgroup {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--tk-ink);
}
.mgroup.-second {
    margin-top: 38px;
}
.mgroup .gt {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .08em;
    color: var(--tk-ink);
}
.mgroup .gtag {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    color: #fff;
    background: var(--tk-teal);
    padding: 3px 11px;
    border-radius: 999px;
}
.mgroup .gtag.-bpo {
    background: var(--tk-deep);
}
.mgroup .gnote {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11.5px;
    color: var(--tk-ink-50);
    letter-spacing: .03em;
    margin-left: auto;
}
.mcat {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.mcat.-con {
    background: var(--tk-teal);
}
.mcat.-bpo {
    background: var(--tk-deep);
}
/* ============================================================
   実サイト用レイヤー（レスポンシブ・ナビ・フォーム）
   ============================================================ */
:root {
    --tk-teal: #297889;
    --tk-deep: #1f5f6e;
    --tk-mist: #F6F5F3;
    --tk-sky: #EAF5FA;
    --tk-aqua: #DCEEF4;
    --tk-emerald: #BFE3EE;
    --tk-font-serif-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --brand-coral: #E4574C;
    --brand-blue: #5FB3D0;
}
html {
    scroll-behavior: smooth;
}
body.site {
    margin: 0;
}
.site a[href] {
    cursor: pointer;
}
/* ワイド画面：コンテンツ幅を1280pxに制限 */
.nav {
    padding: 16px max(40px, calc((100% - 1280px) / 2 + 40px));
    position: sticky;
    top: 0;
    z-index: 100;
}
.sec {
    padding: 72px max(56px, calc((100% - 1280px) / 2 + 56px));
}
.heroA {
    padding: 84px max(56px, calc((100% - 1280px) / 2 + 56px)) 0;
}
.foot {
    padding: 52px max(56px, calc((100% - 1280px) / 2 + 56px)) 30px;
}
/* フォーム実装 */
.form input.inp, .form textarea.inp, .form select.inp {
    border: 1px solid var(--tk-ink-10);
    background: var(--tk-paper);
    height: 44px;
    border-radius: 6px;
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
}
.form textarea.inp.area {
    height: 120px;
    padding: 12px 14px;
    resize: vertical;
}
.form .inp:focus {
    outline: 2px solid var(--brand-blue);
    outline-offset: -1px;
}
.form button.tk-btn {
    cursor: pointer;
}
.radios label {
    border: 1px solid var(--tk-ink-10);
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.radios input {
    accent-color: var(--brand-coral);
}
.radios label:has(input:checked) {
    border-color: var(--brand-coral);
    color: var(--brand-coral);
    background: #FDECEA;
}
/* メンバー紹介カード: モバイルは写真→テキストの縦積み（インラインgrid指定を上書き） */
@media (max-width:960px) {
    .mcard {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .mcard .member-photo {
        max-width: 200px;
        margin:auto;
    }
    .consultant_lsit {
      display: grid;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px;
    }
}
/* メンバー写真 */
.member-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 230/320;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.member-photo.ando {
    aspect-ratio:  320/320;
}
/* モバイルナビ */
.navburger {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.navburger i {
    width: 24px;
    height: 2px;
    background: var(--tk-ink);
    display: block;
    transition: .25s;
}
.site.nav-open .navburger i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site.nav-open .navburger i:nth-child(2) {
    opacity: 0;
}
.site.nav-open .navburger i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
@media (max-width:960px) {
    .navlinks {
        display: none;
    }
    .navtel {
        display: none;
    }
    .navburger {
        display: flex;
    }
    .nav {
        padding: 14px 20px;
    }
    .site.nav-open .navlinks {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: fixed;
        top: 57px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 99;
        padding: 12px 20px;
        font-size: 15px;
        overflow: auto;
    }
    .site.nav-open .navlinks a {
        padding: 16px 4px;
        border-bottom: 1px solid var(--tk-ink-05);
    }
    .site.nav-open .navlinks a.on::after {
        content: none;
    }
    /* ヒーロー */
    .heroA {
        padding: 44px 20px 0;
    }
    .heroA h1 {
        font-size: 24px;
        letter-spacing: .1em;
    }
    .heroA .lede {
        font-size: 14px;
    }
    .heroA .hero-img {
        height: 220px;
        margin-top: 28px;
    }
    .heroA br, .heroA .lede br {
        display: none;
    }
    .heroB {
        grid-template-columns: 1fr;
    }
    .heroB .hcopy {
        padding: 40px 20px;
    }
    .heroB h1 {
        font-size: 29px;
    }
    .heroB .hero-img {
        min-height: 240px;
    }
    .statline {
        gap: 22px;
        flex-wrap: wrap;
    }
    .statline .st .v {
        font-size: 26px;
    }
    /* 汎用 */
    .row2, .form .row2 {
        grid-template-columns: 1fr;
    }
    .newsrow {
        grid-template-columns: auto auto;
        gap: 8px 14px;
    }
    .newsrow .tt {
        grid-column: 1 / -1;
    }
    .menu ul {
        columns: 1;
    }
    .wrap {
        padding: 0 20px;
    }
    .site .brand .wm {
        height: 36px;
        width: 107px;
    }
    .site .sec {
        padding: 38px 20px;
    }
    .site .sechd {
        margin-bottom: 20px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .site .sec-h {
        font-size: 22px;
    }
    .site .g2, .site .g3, .site .g4, .site .g5 {
        grid-template-columns: 1fr;
    }
    .site .heroM {
        padding: 40px 20px 0;
        text-align: center;
    }
    .site .heroM h1 {
        font-family: var(--tk-font-serif-ja);
        font-weight: 700;
        font-size: 29px;
        line-height: 1.45;
        letter-spacing: .1em;
        margin: 12px 0 16px;
    }
    .site .heroM .hero-img {
        height: 220px;
        margin-top: 26px;
    }
    .site .foot {
        padding: 36px 20px 24px;
    }
    .site .cta-row .tk-btn {
        width: 100%;
        justify-content: center;
    }
    .site .menu ul {
        columns: 1;
    }
    .site .menu {
        padding: 18px 18px;
    }
    .site .mgroup {
        flex-wrap: wrap;
        gap: 8px;
    }
    .site .mgroup .gnote {
        margin-left: 0;
        flex-basis: 100%;
    }
}
/* カード内の価格・注記（依頼可能メニュー用） */
.card .mprice {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--tk-deep);
    margin: 2px 0 10px;
    letter-spacing: .01em;
    font-feature-settings: "tnum";
}
.card .mprice small {
    font-weight: 500;
    font-size: 11.5px;
    color: var(--tk-ink-70);
    margin-left: 2px;
}
.card .mterm {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: var(--tk-ink-50);
    margin-left: 8px;
    letter-spacing: .06em;
}
.card .fn {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--tk-ink-10);
    font-family: var(--tk-font-sans-ja);
    font-size: 10.5px;
    color: var(--tk-ink-50);
    line-height: 1.8;
}
/* ヒーローのリード文を1行表示（PCのみ。スマホは折り返し） */
.heroA .lede.-oneline {
    max-width: none;
}
@media (min-width:961px) {
    .heroA .lede.-oneline {
        white-space: nowrap;
    }
}
/* 料金列はゴシック体で（DSのPlayfair指定を上書き） */
.tk-table th.num, .tk-table td.num {
    font-family: "Noto Sans JP", sans-serif;
    text-align: right;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.tk-table tbody td.num {
    font-weight: 700;
    color: var(--tk-deep);
}
/* タイムラインのSTEPラベル: 欧文セリフ→ゴシックに統一（sec-hのENラベルと同トーン） */
.site .tk-timeline .step .when {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
}
/* 一括代行の仕組みタイムライン（拡大版）: 間隔を広げ、担当者をピルで表示 */
.tk-timeline.-lg .step .when {
    font-size: 16px;
}
.site .tk-timeline.-lg .step .when {
    font-size: 13px;
}
.site .tk-timeline.-lg {
    column-gap: 30px;
    padding-top: 36px;
}
.site .tk-timeline.-lg .step {
    padding-right: 0;
}
.site .tk-timeline.-lg .step .what {
    margin-top: 10px;
    line-height: 1.55;
}
.site .tk-timeline.-lg .step .note {
    margin-top: 12px;
}
.tk-timeline .who {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .08em;
    padding: 4px 13px;
    border-radius: 999px;
    background: var(--tk-teal);
    color: #fff;
}
.tk-timeline .who.-you {
    background: #fff;
    color: var(--tk-ink-70);
    border: 1px solid var(--tk-ink-30);
}
.tk-timeline .or {
    font-family: var(--tk-font-sans-ja);
    font-size: 10.5px;
    color: var(--tk-ink-50);
    margin: 0 5px;
}
@media (max-width:960px) {
    .site .tk-timeline.-lg {
        grid-template-columns: 1fr;
        row-gap: 10px;
        padding-top: 14px;
        width: fit-content;
        margin: auto;
        border-left: 1px solid #e5e7e8;
        padding: 10px 40px 0;
    }
    .site .tk-timeline.-lg::before {
        display: none;
    }
    .site .tk-timeline.-lg .step {
        padding: 10px 0 12px;
    }
    .site .tk-timeline.-lg .step::before {
        position: static;
        display: inline-block;
        margin-bottom: 8px;
    }
    .site .tk-timeline.-lg .step::before{
      display: none;
    }
    .site .tk-timeline.-lg .step .what{
      margin-top: 0px;
    }
}
.tk-timeline.-lg .step .what {
    font-size: 19px;
    font-weight: 700;
}
.tk-timeline.-lg .step .note {
    font-size: 13.5px;
}
/* カード内チェックリスト: 本文サイズに調整し、空チェックボックス→ティールのチェックマークに */
.site .card .tk-checklist li {
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: .02em;
    color: var(--tk-ink-70);
    grid-template-columns: 18px 1fr;
    gap: 10px;
    padding: 11px 0;
}
.site .card .tk-checklist li::before {
    content: "";
    width: 11px;
    height: 6px;
    border: none;
    border-left: 2px solid var(--tk-teal);
    border-bottom: 2px solid var(--tk-teal);
    transform: rotate(-45deg);
    background: transparent;
    margin-top: 7px;
}
/* チェックリストの項目を縦に均等充填（カード高さ揃え用） */
.tk-checklist.-fill {
    height: 100%;
}
.tk-checklist.-fill li {
    flex: 1;
    align-items: center;
}
.tk-checklist.-fill li::before {
    margin-top: 0;
}
/* note・トキハナラボへのリンクバナー */
.linkbanner {
    display: block;
    position: relative;
    border: 3px solid var(--tk-teal);
    background: #fff;
    padding: 32px 24px 30px;
    text-align: center;
}
.linkbanner::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    border-style: solid;
    border-width: 16px 16px 0 0;
    border-color: var(--tk-emerald) transparent transparent transparent;
}
.linkbanner::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 6px;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent var(--tk-emerald) transparent;
}
.linkbanner .lb-title {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .06em;
    color: var(--tk-ink);
}
.linkbanner .lb-sub {
    font-family: var(--tk-font-sans-ja);
    font-size: 12.5px;
    color: var(--tk-ink-50);
    margin-top: 8px;
    letter-spacing: .04em;
}
.linkbanner .lb-brand {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--tk-ink);
    letter-spacing: .02em;
}
.linkbanner:hover {
    background: var(--tk-mist);
}
@media (max-width:960px) {
    .linkbanner .lb-title {
        font-size: 17px;
    }
}
/* noteバナー: noteブランドカラー（ミントグリーン×薄グレー） */
.linkbanner.-note {
    border-color: #41C9B4;
}
.linkbanner.-note::before {
    border-color: #E4E6E8 transparent transparent transparent;
}
.linkbanner.-note::after {
    border-color: transparent transparent #E4E6E8 transparent;
}
.linkbanner.-note:hover {
    background: #F3FBF9;
}
/* TOPサービスショーケース（写真×交互2カラム） */
.svc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.svc .svc-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}
.svc.-rev .svc-img {
    order: 2;
}
.svc-no {
    font-family: "Playfair Display", serif;
    font-size: 52px;
    color: var(--tk-teal);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 16px;
}
.svc-en {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .2em;
    color: var(--tk-teal);
    text-transform: uppercase;
}
.svc-title {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .08em;
    margin: 14px 0 0;
    line-height: 1.4;
}
.svc-list li {
    font-size: 14.5px;
    padding: 10px 0;
}
@media (max-width:960px) {
    .svc {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .svc.-rev .svc-img {
        order: 0;
    }
    .svc .svc-img img {
        height: 220px;
    }
    .svc-no {
        font-size: 38px;
    }
    .svc-title {
        font-size: 23px;
    }
}
/* サービス目次帯（ヒーローとサービス紹介の間） */
.svcindex {
    background: var(--tk-sky);
    padding: 44px max(56px, calc((100% - 1280px) / 2 + 56px));
    text-align: center;
}
.svcindex .si-label {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .22em;
    color: var(--tk-teal);
}
.svcindex .si-title {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .08em;
    margin-top: 8px;
    color: var(--tk-ink);
}
.svcindex .si-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 26px;
}
.svcindex .si-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid rgba(31, 93, 90, .12);
    padding: 18px 5px 16px;
    transition: .18s;
}
.svcindex .si-grid a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(31, 93, 90, .12);
}
.svcindex .si-no {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    color: var(--tk-teal);
    line-height: 1;
}
.svcindex .si-name {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .05em;
    color: var(--tk-ink);
}
.svcindex .si-name .new {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 8px;
    letter-spacing: .1em;
    color: #fff;
    background: var(--brand-coral);
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: 2px;
}
.svcindex .si-note {
    font-family: var(--tk-font-sans-ja);
    font-size: 11px;
    color: var(--tk-ink-50);
    letter-spacing: .03em;
}
@media (max-width:960px) {
    .svcindex {
        padding: 32px 20px;
    }
    .svcindex .si-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* TOPヒーロー: 全幅写真＋白ボックス */
.heroC {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    overflow: hidden;
}
.heroC-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.heroC::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .42);
}
.heroC-box {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    max-width: 780px;
    width: 100%;
    padding: 60px 56px 54px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(31, 93, 90, .10);
}
.heroC-box h1 {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.5;
    letter-spacing: .12em;
    margin: 16px 0 18px;
}
.heroC-box .lede {
    line-height: 2;
}
@media (max-width:960px) {
    .heroC {
        min-height: 480px;
        padding: 52px 16px;
    }
    .heroC-box {
        padding: 36px 22px 32px;
    }
    .heroC-box h1 {
        font-size: 25px;
        letter-spacing: .08em;
    }
    .heroC-box .lede br {
        display: none;
    }
}
/* カード用ラインアイコン（ティール単色） */
.card .ic {
    display: block;
    width: 36px;
    height: 36px;
    color: var(--tk-teal);
    margin-bottom: 12px;
}
.card .ic svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* アイコン付きコンパクトメニューリスト（カード羅列の圧縮版） */
.ilist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}
.ilist .item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid var(--tk-ink-10);
}
.ilist .item .ic {
    display: block;
    width: 26px;
    height: 26px;
    color: var(--tk-teal);
    margin-top: 1px;
}
.ilist .item .ic svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ilist .item h4 {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .05em;
    margin: 0 0 4px;
}
.ilist .item p {
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    line-height: 1.8;
    color: var(--tk-ink-70);
    margin: 0;
    letter-spacing: .02em;
}
@media (max-width:960px) {
    .ilist {
        grid-template-columns: 1fr;
    }
}
/* ティールの帯セクション（料金・キー数字のクライマックス用。フッターの深ティールとは色を変える） */
.darksec {
    background: var(--tk-teal);
    color: #fff;
}
.darksec .sec-no {
    color: var(--tk-emerald);
}
.darksec .sec-h {
    color: #fff;
}
.darksec .sec-h .en {
    color: var(--tk-emerald);
}
.darksec .lede {
    color: rgba(255, 255, 255, .9);
}
.darksec .tk-caption {
    color: rgba(255, 255, 255, .9);
}
.dstats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.dstat {
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 30px 24px 26px;
    text-align: center;
}
.dstat .dl {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--tk-emerald);
}
.dstat .dv {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 36px;
    margin-top: 12px;
    letter-spacing: .02em;
    font-feature-settings: "tnum";
    line-height: 1.2;
}
.dstat .dv small {
    font-size: 17px;
    font-weight: 700;
    margin-left: 1px;
}
.dstat .dn {
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
    margin-top: 10px;
    letter-spacing: .04em;
    line-height: 1.8;
}
.dstats.-two {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width:960px) {
    .dstats, .dstats.-two {
        grid-template-columns: 1fr;
    }
    .dstat .dv {
        font-size: 30px;
    }
}
/* ワークス相関図（貴社⇄トキハナワークス⇄プランナー）: モバイルは縦積み */
.relmap {
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.relmap .rbox {
    flex: 1;
    border: 1px solid var(--tk-ink-10);
    padding: 30px 0px 28px;
    text-align: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.relmap .rbox .ric {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 12px;
    color: var(--tk-teal);
}
.relmap .rbox .ric svg {
    width: 100%;
    height: 100%;
    display: block;
}
.relmap .rbox .rt {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .05em;
}
.relmap .rbox .rs {
    font-family: var(--tk-font-sans-ja);
    font-size: 11.5px;
    color: var(--tk-ink-50);
    margin-top: 6px;
}
.relmap .rbox.-hub {
    flex: 1.15;
    border: none;
    background: var(--tk-teal);
    padding: 34px 0px 32px;
}
.relmap .rbox.-hub .ric {
    color: #fff;
}
.relmap .rbox.-hub .rt {
    color: #fff;
    font-size: 21px;
}
.relmap .rbox.-hub .rs {
    color: rgba(255, 255, 255, .78);
}
.relmap .arr {
    font-family: var(--tk-font-mono);
    font-size: 12px;
    color: var(--tk-teal);
    text-align: center;
    line-height: 1.9;
    white-space: nowrap;
    align-self: center;
}
.relmap .arr span {
    display: block;
}
.relmap .arr .a1::after {
    content: " →";
}
.relmap .arr .a2::before {
    content: "← ";
}
@media (max-width:960px) {
    .relmap {
        flex-direction: column;
        gap: 10px;
    }
    .relmap .rbox {
        width: 100%;
        box-sizing: border-box;
    }
    .relmap .arr {
        white-space: normal;
        display: flex;
        gap: 20px;
    }
    .relmap .arr .a1::after {
        content: " ↓";
    }
    .relmap .arr .a2::before {
        content: "↑ ";
    }
}
/* FAQ アコーディオン（detailsベース・JS不要） */
.faq {
    border-bottom: 1px solid var(--tk-ink-10);
}
.faq summary {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 16px;
    padding: 17px 0;
    cursor: pointer;
    list-style: none;
    align-items: baseline;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq .qm {
    font-family: "Playfair Display", serif;
    color: var(--tk-teal);
    font-size: 16px;
}
.faq .qt {
    font-family: var(--tk-font-serif-ja);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .03em;
}
.faq summary::after {
    content: "＋";
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--tk-teal);
    line-height: 1;
}
.faq[open] summary::after {
    content: "−";
}
.faq .ans {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 16px;
    padding: 2px 24px 20px 0;
}
.faq .ans .am {
    font-family: "Playfair Display", serif;
    color: var(--brand-coral);
    font-size: 16px;
}
.faq .ans p {
    margin: 0;
    font-family: var(--tk-font-sans-ja);
    font-size: 14px;
    line-height: 1.95;
    color: var(--tk-ink-70);
    letter-spacing: .02em;
}
/* 折り返し調整: 見出しは行バランス、本文は孤立文字（1〜2文字の行）を防ぐ */
h1, .sec-h, .svc-title, .heroC-box h1, .dstat .dv, .linkbanner .lb-title {
    text-wrap: balance;
}
.lede, .card p, .card h4, .ilist .item p, .dstat .dn, .faq .ans p, .faq .qt,
.tk-checklist li, .tk-caption, .newsrow .tt, .linkbanner .lb-sub {
    text-wrap: pretty;
}
/* モバイル: 本文中の手動<br>はデスクトップ行組み用なので無効化（自然折り返しに任せる） */
@media (max-width:960px) {
    .sec .lede br {
        display: none;
    }
}
/* ニュース日付・コラムVol.: 欧文セリフ→ゴシック（STEP/CASEラベルと同トーン） */
.newsrow .dt {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
}
/* 事例ページの課題リスト: チェックではなくダッシュの箇条書き（課題＝未達事項のため） */
.tk-checklist.-issues li {
    font-family: var(--tk-font-sans-ja);
    font-size: 13px;
    line-height: 1.85;
    letter-spacing: .02em;
    color: var(--tk-ink-70);
    grid-template-columns: 16px 1fr;
    gap: 10px;
    padding: 10px 0;
}
.tk-checklist.-issues li::before {
    width: 9px;
    height: 0;
    border: none;
    border-top: 2px solid var(--tk-teal);
    background: transparent;
    margin-top: 11px;
}
/* フッター: 水色→深いティールでトンマナ統一 */
.foot {
    background: var(--tk-deep);
}
/* Relatedラベル: 欧文セリフイタリック→ゴシック大文字 */
.foot .frel .lb {
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
/* フッター: PC表示時、各サービス・各ページへのリンクの文字サイズを拡大 */
@media (min-width:961px) {
    .foot .flinks,
    .foot .frel {
        font-size: 14px;
    }
}