/* ========================================
   JOLLYGOOD+ About Pages — Design Tokens
   v4 — Trust & Persuasion Tone

   App系ページとの差別化:
   - App = 先進感・テクノロジー (#00A2FA 青)
   - About = 信頼・説得・読みやすさ (#1B6B93 ティール)

   読み込み順: common.css → about-tokens.css → page-specific.css
======================================== */

:root {
    /* ── About カラースキーム ── */
    --about-primary:       #1B6B93;
    --about-primary-hover: #145374;
    --about-secondary:     #3DA5D9;
    --about-accent:        #E8833A;
    --about-accent-light:  #F5A623;
    --about-bg:            #FAFBFD;
    --about-bg-alt:        #F0F4F8;
    --about-text:          #1E293B;
    --about-text-sub:      #64748B;
    --about-border:        #E2E8F0;

    /* ── About ヒーロー ── */
    --about-hero-gradient: linear-gradient(
        135deg, #1B6B93 0%, #145374 50%, #0F3D5C 100%
    );

    /* ── Typography Scale (v4: ~1.5x) ── */
    --fs-hero         : clamp(3.6, 9vw, 5.4);   /* 86–130px — ページ最上部のメインキャッチ */
    --fs-section-title: clamp(2.64, 6vw, 3.84);   /* 63–92px — 各セクションのH2 */
    --fs-cta-title    : clamp(2.4, 6vw, 3.6);   /* 58–86px — ボトムCTAのH2 */
    --fs-price        : 3.36rem;   /* 81px — プランカード料金表示 */
    --fs-number       : 4.32rem;   /* 104px — ソリューション番号（01,02,03） */
    --fs-stat         : clamp(2.88, 6vw, 4.32);   /* 69–104px — Numbers Bar */
    --fs-card-title-lg: 2.05rem;   /* 49px — ソリューション等の大カードH3 */
    --fs-card-title   : 1.75rem;   /* 42px — コース・エビデンスカードH3 */
    --fs-btn-lg       : 1.67rem;   /* 40px — HeroCTA等の大ボタン */
    --fs-section-sub  : 1.95rem;   /* 47px — セクション導入文・Hero本文 */
    --fs-card-title-sm: 1.5rem;   /* 36px — 社会課題・料金プラン名 */
    --fs-card-text-lg : 1.92rem;   /* 46px — ソリューション説明文 */
    --fs-card-text    : 1.68rem;   /* 40px — コースカード説明文 */
    --fs-card-text-sm : 1.6rem;   /* 38px — エビデンス・プラン機能リスト */
    --fs-section-en   : 2.0rem;   /* 48px — セクションラベル（BACKGROUND, SOLUTIONS等）大文字・lett */
    --fs-meta         : 1.33rem;   /* 32px — コースメタ情報・料金注釈 */
    --fs-note         : 1.33rem;   /* 32px — CTA注釈・ストアリンク */
    --fs-tag          : 1.33rem;   /* 32px — ソリューションタグ・バッジ */
    --fs-btn          : 1.33rem;   /* 32px — 通常ボタン */

    /* ── Section Spacing ── */
    --section-pad:    120px;
    --section-pad-sp: 72px;
}


/* ============================================
   About — Body Override
============================================ */
.page-about body,
body.page-about {
    background: var(--about-bg);
    color: var(--about-text);
    font-size: var(--fs-body);
}


/* ============================================
   About — Section Variants
============================================ */
.section--about {
    padding: var(--section-pad) 0;
}

.section--alt {
    background: var(--about-bg-alt);
}

@media (max-width: 768px) {
    .section--about {
        padding: var(--section-pad-sp) 20px;
    }
}


/* ============================================
   About — Headings with Side Accent
============================================ */
.about-heading {
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--about-text);
    line-height: 1.4;
    margin-bottom: 56px;
    text-align: center;
    letter-spacing: 0.02em;
}

.about-heading em {
    font-style: normal;
    color: var(--about-primary);
}

.about-heading--left {
    text-align: left;
    padding-left: 20px;
    border-left: 4px solid var(--about-primary);
}


/* ============================================
   About — Cards (No Liquid Glass)
============================================ */
.about-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--about-border);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    padding: 40px 32px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}


/* ============================================
   About — CTA Buttons (Warm Orange)
============================================ */
.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 60px;
    font-family: var(--font-primary);
    font-size: var(--fs-btn);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.02em;
}

.about-btn--primary {
    background: linear-gradient(135deg, var(--about-accent), var(--about-accent-light));
    color: #fff;
    box-shadow: 0 4px 16px rgba(232, 131, 58, 0.25);
}

.about-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(232, 131, 58, 0.35);
}

.about-btn--outline {
    background: transparent;
    color: var(--about-primary);
    border: 2px solid var(--about-primary);
}

.about-btn--outline:hover {
    background: rgba(27, 107, 147, 0.06);
    transform: translateY(-2px);
}


/* ============================================
   About — Hero (Trust Tone)
============================================ */
.about-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--about-hero-gradient);
    color: #fff;
}

.about-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 160px 48px 96px;
}

.about-hero__label {
    display: inline-block;
    font-family: var(--font-en);
    font-size: var(--fs-small);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 600;
    opacity: 0.85;
}

.about-hero__title {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.about-hero__subtitle {
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.8;
    opacity: 0.9;
    max-width: 600px;
}

.about-hero__cta-wrap {
    display: flex;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .about-hero__inner {
        padding: 120px 24px 64px;
    }

    .about-hero__title {
        font-size: 3.2rem;
    }

    .about-hero__cta-wrap {
        flex-direction: column;
    }
}


/* ============================================
   Numbers Speak — 定量データグリッド
============================================ */
.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
}

.numbers-grid__item {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--about-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.numbers-grid__value {
    font-family: var(--font-number);
    font-size: 6.4rem;
    font-weight: 700;
    color: var(--about-primary);
    line-height: 1.1;
    margin-bottom: 8px;
}

.numbers-grid__label {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--about-text);
    margin-bottom: 4px;
}

.numbers-grid__note {
    font-size: var(--fs-small);
    color: var(--about-text-sub);
}

@media (max-width: 768px) {
    .numbers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .numbers-grid__value {
        font-size: 4.8rem;
    }
}


/* ============================================
   Case Studies — 導入事例カード
============================================ */
.case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.case-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--about-border);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.case-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--about-bg-alt);
}

.case-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-card__body {
    padding: 28px 28px 32px;
}

.case-card__badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: var(--fs-small);
    font-weight: 700;
    background: rgba(27, 107, 147, 0.1);
    color: var(--about-primary);
    margin-bottom: 16px;
}

.case-card__quote {
    font-size: var(--fs-h3);
    font-weight: 700;
    font-style: italic;
    color: var(--about-text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.case-card__quote::before {
    content: '\201C';
    color: var(--about-primary);
    opacity: 0.4;
    font-size: 4rem;
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 4px;
}

.case-card__author {
    font-size: var(--fs-small);
    color: var(--about-text-sub);
    margin-bottom: 16px;
}

.case-card__text {
    font-size: var(--fs-body);
    color: var(--about-text-sub);
    line-height: 1.8;
    margin-bottom: 16px;
}

.case-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--about-accent);
    text-decoration: none;
    transition: opacity 0.2s;
}

.case-card__link:hover {
    opacity: 0.7;
}

.case-card__link::after {
    content: '\2192';
}

@media (max-width: 768px) {
    .case-grid {
        grid-template-columns: 1fr;
    }

    .case-card__body {
        padding: 20px 20px 24px;
    }

    .case-card__quote {
        font-size: 2.2rem;
    }
}


/* ============================================
   About — Fade In Animation
============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}