/*
Theme Name: MOAI
Theme URI:
Description: 沖縄北部のAI学習コミュニティ MOAI の公式テーマ
Author: CODEVISION
Author URI:
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moai
Requires at least: 6.0
Requires PHP: 8.0
*/

.moai-section-image {
    margin: 1.5rem 0 2rem;
    overflow: hidden;
    border-radius: 14px;
    background: #eef8f7;
    box-shadow: 0 10px 28px rgba(20, 73, 78, 0.1);
}

.moai-section-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ==========================================================================
   Design Tokens — 教育系LP（SAMURAI系）：ネイビー×オレンジ／黄色マーカー
   ========================================================================== */
:root {
    /* Brand — MOAIロゴ準拠：ティール（プライマリ）× コーラル（CTA・アクセント） */
    --color-primary: #1a6d72;          /* MOAIロゴのティール（M・O・I の文字色相当） */
    --color-primary-dark: #0e4245;     /* 深ティール — heading 強調 */
    --color-primary-soft: #e6f1f1;     /* ティールの淡い背景 */

    --color-cta: #e87761;              /* MOAIロゴのコーラル（A の文字色相当） */
    --color-cta-dark: #c4604c;         /* コーラル深 — hover */
    --color-cta-soft: #fdebe6;         /* コーラルの淡い背景 */

    --color-marker: #fff066;
    --color-marker-strong: #ffd84d;

    /* Surface — クリーム × ティール深層の組み合わせ */
    --color-canvas: #ffffff;
    --color-surface-soft: #f6f4ef;     /* 暖色のソフト背景 */
    --color-surface-warm: #fff8f0;
    --color-surface-cream: #fef9f3;
    --color-surface-dark: #073f42;     /* 深ティール（旧ネイビー → ロゴ準拠） */
    --color-surface-elevated: #155356; /* 深ティールの上に重ねるサーフェス */

    /* Hairline / border */
    --color-hairline: #e5e8ec;
    --color-hairline-soft: #eef0f3;
    --color-hairline-on-dark: rgba(255, 255, 255, 0.16);

    /* Text */
    --color-ink: #1f2937;
    --color-body: #2b3340;
    --color-mute: #6b7280;
    --color-stone: #8a8f97;
    --color-ash: #b3b8be;
    --color-on-dark: #ffffff;
    --color-on-dark-mute: rgba(255, 255, 255, 0.78);
    --color-link: #1a73c2;

    /* Semantic */
    --color-error: #e52020;
    --color-warning: #df6500;
    --color-success: #16a34a;

    /* Legacy aliases — 既存コード互換 */
    --color-secondary: var(--color-cta);
    --color-secondary-dark: var(--color-cta-dark);
    --color-accent: var(--color-primary);
    --color-accent-soft: var(--color-primary-soft);
    --color-bg: var(--color-canvas);
    --color-bg-alt: var(--color-surface-soft);
    --color-bg-section: var(--color-surface-soft);
    --color-text: var(--color-body);
    --color-text-light: var(--color-mute);
    --color-text-inverse: var(--color-on-dark);
    --color-border: var(--color-hairline);
    --color-warm-highlight: var(--color-surface-warm);

    /* Typography
       2026-05-10 教育機関らしい誠実トーン化:
        - heading は中間ウェイト (500) も解禁
        - line-height-heading をやや緩めて読みやすく
        - display 用の追加サイズと緩めの tracking */
    --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
    --font-heading-en: 'Inter', 'Noto Sans JP', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --font-size-base: 16px;
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.375rem;    /* 22px */
    --font-size-2xl: 1.625rem;   /* 26px */
    --font-size-3xl: 2.25rem;    /* 36px */
    --font-size-4xl: 3rem;       /* 48px */
    --font-size-5xl: 3.75rem;    /* 60px */
    --font-size-display: clamp(2.5rem, 5.2vw, 3.5rem);  /* h1: 40-56px */
    --font-size-section: clamp(1.875rem, 3.4vw, 2.375rem); /* section h2: 30-38px */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-base: 1.85;          /* 本文：教育系は広めの行間 */
    --line-height-heading: 1.55;       /* 旧 1.4 → 緩めて読みやすく */
    --line-height-display: 1.45;       /* 大見出し */
    --letter-spacing-base: 0.02em;
    --letter-spacing-caps: 0.1em;

    /* Spacing — 教育LPはセクションごとに広めの呼吸 */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;     /* 旧コードが参照していたが未定義だった */
    --spacing-5xl: 8rem;
    --spacing-section: clamp(4.5rem, 8vw, 8rem);  /* 旧 6rem 固定 → 可変・最大128px */

    /* Layout */
    --container-max: 1080px;
    --container-narrow: 720px;
    --header-height: 88px;

    /* Geometry — 親しみやすい角丸 */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --radius-full: 9999px;

    /* Elevation — MOAIロゴ色準拠：ティール rgba ベースのふんわり影 */
    --shadow-none: none;
    --shadow-sm: 0 2px 8px rgba(7, 63, 66, 0.06);
    --shadow-md: 0 8px 24px rgba(7, 63, 66, 0.10);
    --shadow-lg: 0 20px 48px rgba(7, 63, 66, 0.14);
    --shadow-cta: 0 10px 24px rgba(232, 119, 97, 0.30);
    --shadow-cta-hover: 0 14px 30px rgba(232, 119, 97, 0.40);

    /* Gradients — ヒーロー用のクリーム背景 */
    --gradient-page: var(--color-canvas);
    --gradient-hero: linear-gradient(180deg, #fff8ef 0%, #ffffff 100%);
    --gradient-cta: linear-gradient(135deg, #ec8675 0%, #d96a52 100%);

    --transition-base: 0.25s cubic-bezier(.21,.78,.36,1);

    /* ----------------------------------------------------------------------
       Authority Tokens（2026-05-06）— MOAIロゴ準拠：ティール × コーラル
       Starbucks DS の構造（色ブロック + whisper shadow）を踏襲し、
       色相だけ MOAI ブランド（沖縄の海＝ティール、夕日＝コーラル）に翻訳
       ---------------------------------------------------------------------- */
    /* Authority surfaces — クリームキャンバス & 深ティールバンド */
    --color-canvas-warm: #f4f1ec;       /* 暖色キャンバス（沖縄の砂・カフェ材質感） */
    --color-canvas-warm-soft: #ebe7df;  /* 区切り用の少し濃いクリーム */
    --color-deep: #073f42;              /* 深ティール — feature band / footer（旧 deep navy） */
    --color-deep-elevated: #155356;     /* 深ティールの上に重ねるサーフェス */
    --color-deep-soft: #cce0e1;         /* 深ティールの淡いトーン（hairline accent） */

    /* Coral — 権威性アクセント（旧 gold）。ロゴの A 文字色準拠 */
    --color-gold: #e87761;              /* 互換性のため alias 名は keep。値は MOAI コーラル */
    --color-gold-soft: #fdebe6;
    --color-gold-deep: #c4604c;
    --color-coral: #e87761;             /* 新エイリアス（推奨） */
    --color-coral-soft: #fdebe6;
    --color-coral-deep: #c4604c;

    /* Tech accent — ライトティールのコードライク細線 */
    --color-tech-cyan: #6cb1b4;         /* ロゴのライトティール準拠 */
    --color-tech-cyan-soft: #e6f1f1;

    /* Tracking — 教育機関は詰めすぎず誠実に */
    --letter-spacing-tight: 0;           /* デフォルトボディ（英数混在）— 旧 -0.01em */
    --letter-spacing-display: -0.01em;   /* 大見出し — 旧 -0.02em */
    --letter-spacing-display-tight: -0.02em; /* 超大ディスプレイ — 旧 -0.04em */

    /* Component radius */
    --button-radius-pill: 50px;          /* 全ボタン共通 */
    --card-radius-soft: 12px;            /* 全カード共通 */

    /* Active scale — signature micro-interaction */
    --button-active-scale: 0.96;

    /* Whisper shadow — ティールベースの重ね 2-3 段階 */
    --shadow-whisper: 0 0 0.5px rgba(7, 63, 66, 0.14), 0 1px 2px rgba(7, 63, 66, 0.08);
    --shadow-whisper-lift: 0 0 0.5px rgba(7, 63, 66, 0.14), 0 4px 12px rgba(7, 63, 66, 0.12);
    --shadow-frap-base: 0 0 6px rgba(7, 63, 66, 0.26);
    --shadow-frap-ambient: 0 8px 16px rgba(7, 63, 66, 0.20);
    --shadow-nav-stack: 0 1px 3px rgba(7, 63, 66, 0.08), 0 2px 2px rgba(7, 63, 66, 0.04), 0 0 2px rgba(7, 63, 66, 0.06);

    /* Motion easing — 過剰にならない subtle 動き */
    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring-gentle: cubic-bezier(0.32, 1.18, 0.61, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-body);
    background-color: var(--color-canvas);  /* 旧 canvas-warm → 真っ白に。section--gray でクリームを差し込む */
    letter-spacing: var(--letter-spacing-tight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

ul, ol {
    list-style: none;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-cta);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-deep);
    letter-spacing: var(--letter-spacing-display);
}

h1 {
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display-tight);
}

h2 {
    font-size: var(--font-size-section);
}

h3 {
    font-size: var(--font-size-xl);
}

h1 .en, h2 .en, h3 .en,
.heading-en {
    font-family: var(--font-heading-en);
    letter-spacing: var(--letter-spacing-tight);
    font-weight: 700;
}

/* ==========================================================================
   Marker — 黄色のハイライト風アンダーライン（教育LPの定番）
   ========================================================================== */
.marker {
    background: linear-gradient(transparent 60%, var(--color-marker) 60%);
    padding: 0 0.1em;
    font-weight: 900;
}

.marker-strong {
    background: linear-gradient(transparent 55%, var(--color-marker-strong) 55%);
    padding: 0 0.15em;
    font-weight: 900;
    color: var(--color-primary);
}

.text-cta {
    color: var(--color-cta);
    font-weight: 900;
}

/* ==========================================================================
   Utility — Container & Section
   ========================================================================== */
.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
    padding-right: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

.section--gray {
    background-color: var(--color-canvas-warm);  /* #f4f1ec — body の白と分離 */
}

.section--cream {
    background-color: var(--color-canvas-warm-soft);
}

.section--dark {
    background-color: var(--color-deep);
    color: var(--color-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
    color: var(--color-on-dark);
}

.section__title {
    text-align: center;
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xl);
    letter-spacing: var(--letter-spacing-display);
    line-height: var(--line-height-heading);
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
}

/* 装飾線は削除 — テンプレ感を排除し、タイポグラフィ単体で語る */
.section__title::after {
    display: none;
}

.section__subtitle {
    text-align: center;
    color: var(--color-mute);
    margin-bottom: var(--spacing-3xl);
    font-size: var(--font-size-lg);
}

.section__label {
    display: block;
    text-align: center;
    font-family: var(--font-heading-en);
    font-size: var(--font-size-sm);
    color: var(--color-cta);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

/* ==========================================================================
   Buttons — 角丸ピル（教育LP定番）／オレンジCTA＋影
   ========================================================================== */
/* Starbucks DS 翻訳：50px full-pill, tight tracking, scale(0.96) active, solid color block */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 50px;
    padding: 0.85rem 2rem;
    border-radius: var(--button-radius-pill);
    border: 1.5px solid transparent;
    font-family: var(--font-heading-en), var(--font-body);
    font-weight: 700;
    font-size: var(--font-size-md);
    line-height: 1.2;
    text-align: center;
    letter-spacing: var(--letter-spacing-tight);
    transition: transform 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    cursor: pointer;
}

.btn:active {
    transform: scale(var(--button-active-scale));
}

/* Primary — ロゴ準拠コーラルのピル型ソリッド。
   サイト全ページで統一（front-page.css の上書きと整合）。
   chrome（header / footer-sticky）と content（hero / consult / apply）で同じ見た目 */
.btn--primary {
    background-color: var(--color-cta);
    color: var(--color-on-dark);
    border-color: var(--color-cta);
    box-shadow: 0 10px 22px -12px rgba(232, 119, 97, 0.45);
}

.btn--primary::after {
    content: '→';
    margin-left: 0.35rem;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--color-cta-dark);
    border-color: var(--color-cta-dark);
    color: var(--color-on-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px rgba(232, 119, 97, 0.55);
}

.btn--primary:hover::after {
    transform: translateX(3px);
}

/* CTA — レガシーオレンジ（限定使用：強調アクセント・実績バッジ） */
.btn--cta {
    background-color: var(--color-cta);
    color: var(--color-on-dark);
    border-color: var(--color-cta);
    box-shadow: var(--shadow-whisper);
}

.btn--cta:hover,
.btn--cta:focus-visible {
    background-color: var(--color-cta-dark);
    border-color: var(--color-cta-dark);
}

/* Outline — クリーム/白の上に Deep Navy outline */
.btn--outline {
    background-color: transparent;
    color: var(--color-deep);
    border: 1.5px solid var(--color-deep);
    box-shadow: none;
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background-color: var(--color-deep);
    color: var(--color-on-dark);
}

/* Outline on dark — Hero / feature band の上に */
.btn--outline-on-dark {
    background-color: transparent;
    color: var(--color-on-dark);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.btn--outline-on-dark:hover,
.btn--outline-on-dark:focus-visible {
    background-color: var(--color-on-dark);
    color: var(--color-deep);
    border-color: var(--color-on-dark);
}

/* Inverted white — Deep Navy 上の primary CTA */
.btn--white {
    background-color: var(--color-canvas);
    color: var(--color-deep);
    border-color: var(--color-canvas);
    box-shadow: var(--shadow-whisper);
}

.btn--white:hover,
.btn--white:focus-visible {
    background-color: var(--color-canvas-warm);
    color: var(--color-deep);
    border-color: var(--color-canvas-warm);
}

/* Ghost — 装飾の薄いリンクボタン */
.btn--ghost {
    background-color: transparent;
    color: var(--color-deep);
    border: 1.5px solid transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background-color: var(--color-canvas-warm);
    border-color: var(--color-hairline);
}

/* Size variants */
.btn--lg {
    min-height: 56px;
    padding: 1rem 2.5rem;
    font-size: var(--font-size-md);
}

.btn--sm {
    min-height: 40px;
    padding: 0.5rem 1.25rem;
    font-size: var(--font-size-sm);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--color-surface-soft);
    color: var(--color-ash);
    border-color: var(--color-hairline);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* LINE — ブランドカラー（#06C755）の塗り／アウトライン */
.btn--line {
    background-color: #06C755;
    color: #ffffff;
    border-color: #06C755;
}

.btn--line:hover,
.btn--line:focus-visible {
    background-color: #05a648;
    color: #ffffff;
    border-color: #05a648;
}

.btn--line-outline {
    background-color: transparent;
    color: #06C755;
    border: 1.5px solid #06C755;
}

.btn--line-outline:hover,
.btn--line-outline:focus-visible {
    background-color: #06C755;
    color: #ffffff;
    border-color: #06C755;
}

/* Text link — 控えめなインライン */
.text-link {
    color: var(--color-cta);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.text-link:hover {
    color: var(--color-cta-dark);
}

/* Text utilities */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-cta); }
.text-accent { color: var(--color-primary); }
.text-light { color: var(--color-mute); }

/* ==========================================================================
   Stats callout — 大きな数字で実績訴求（LP定番）
   ========================================================================== */
.stat {
    text-align: center;
}

.stat__value {
    display: block;
    font-family: var(--font-heading-en);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--color-cta);
    line-height: 1;
    letter-spacing: 0;
}

.stat__value sup {
    font-size: 0.4em;
    margin-left: 0.1em;
    color: var(--color-primary);
}

.stat__label {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 700;
}

/* ==========================================================================
   Scroll animation — subtle springy reveal（ease-spring-gentle）
   ========================================================================== */
.fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s var(--ease-out-soft),
        transform 0.7s var(--ease-spring-gentle);
}

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

/* Reduced motion — アクセシビリティ尊重 */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* JS 無効時のフォールバック — IntersectionObserver が走らない環境で真っ白にならないように
   <html class="no-js"> をデフォルトとし、main.js 冒頭で document.documentElement.classList.remove('no-js') する想定 */
.no-js .fade-in {
    opacity: 1;
    transform: none;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-link — 通常時は sr-only と同じ、フォーカス時に可視化（キーボードユーザー向け） */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: var(--color-ink);
    color: var(--color-on-dark);
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
    transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem;
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}