/* ====================================================
   base.css - グローバルスタイル
   ====================================================
   
   目次 (Table of Contents)
   ----------------------------------------------------
   00. CSS変数定義（Custom Properties）
   01. リセット・ノーマライズ
   02. ベーススタイル（要素セレクタ）
   03. レイアウトユーティリティ
   04. グローバルコンポーネント - ヘッダー・ナビゲーション
   05. グローバルコンポーネント - フッター
   06. グローバルコンポーネント - ボタン
   07. ページセクション - ヒーロー / パンくず
   08. ページセクション - クラス情報
   09. ページセクション - FAQ
   10. アニメーション定義
   11. その他のユーティリティ
   12. セクションヘッダー共通スタイル
   13. CTA セクション
   99. メディアクエリ
   
   ※ 9段認定バッジは07.ヒーロー内に含む
   
   ==================================================== */

/* ====================================================
   00. CSS変数定義（Custom Properties）
==================================================== */

:root {
    /* カラーパレット */
    --color-primary: #0056b3;
    --color-primary-light: #069efc;
    --color-primary-hover: #007bff;
    --color-primary-dark: #004494;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    --color-text: #000000;
    --color-text-secondary: #666666;
    --color-text-muted: #6c757d;
    --color-text-white: #ffffff;
    --color-bg: #fafafa;
    --color-bg-white: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-border: #e9ecef;
    
    /* フォントサイズ */
    --font-size-xs: clamp(0.6rem, 1.2vw, 0.8rem);
    --font-size-sm: clamp(0.7rem, 1.2vw, 0.9rem);
    --font-size-base: clamp(0.8rem, 1.6vw, 1.0rem);
    --font-size-lg: clamp(0.9rem, 2.4vw, 1.36rem);
    --font-size-xl: clamp(2rem, 5vw, 2.9rem);
    --font-size-2xl: clamp(1.4rem, 4vw, 1.7rem);
    
    /* スペーシング */
    --spacing-xs: clamp(6.4px, 0.8vh, 9.6px);
    --spacing-sm: clamp(12px, 1.6vh, 16px);
    --spacing-md: clamp(16px, 2.4vh, 24px);
    --spacing-lg: clamp(24px, 4vh, 48px);
    
    /* ブレークポイント（参照用コメント - メディアクエリでは直接値を使用） */
    /* --breakpoint-xs: 360px;  極小モバイル */
    /* --breakpoint-sm: 480px;  小型モバイル */
    /* --breakpoint-md: 768px;  タブレット */
    /* --breakpoint-lg: 1024px; デスクトップ */
    /* --breakpoint-xl: 1200px; 大型デスクトップ */
    
    /* z-index管理 */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 998;
    --z-modal: 999;
    --z-header: 1000;
    --z-menu-overlay: 1001;
    --z-nav-mobile: 1200;
    --z-popup-overlay: 9998;
    --z-popup: 9999;
    
    /* ナビゲーション */
    --navbar-height: max(48px, min(9vh, 72px));
    --navbar-height-mobile: max(40px, min(6.8vh, 60px));
    --km-bc-gap: 1rem;
    --km-bc-size: clamp(0.875rem, 1.5vw, 1.2rem);
    
    /* トランジション */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.6s ease-in-out;
    
    /* シャドウ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}


/* ====================================================
   01. リセット・ノーマライズ
==================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}


/* ====================================================
   02. ベーススタイル（要素セレクタ）
==================================================== */

body {
    font-family: "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    line-height: 1.6;
    color: var(--color-text);
    text-align: center;
    overflow-x: hidden;
    word-wrap: break-word;
    scroll-behavior: smooth;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* 見出し要素 */

h1 {
    font-size: var(--font-size-xl);
    position: relative;
    color: var(--color-primary);
}

h1::first-letter {
    font-size: 1.2em;
    color: var(--color-primary-light);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

h4 {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-text);
}

h5,
p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.6;
    text-align: center;
}

p {
    margin-bottom: 0;
}


/* セクションホバー効果 */

section:hover h1::after,
section:hover h2::after {
    border-bottom: 3px solid var(--color-primary-light);
    width: 100%;
    left: 0;
}


/* その他の要素 */

b {
    font-weight: bolder;
}


/* ====================================================
   03. レイアウトユーティリティ
==================================================== */

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.mobile-blank {
    display: inline;
}


/* スクロール禁止 */

body.no-scroll {
    overflow: hidden;
}


/* ====================================================
   04. グローバルコンポーネント - ヘッダー・ナビゲーション
==================================================== */

/* ヘッダーセクションの基本スタイル（新規追加） */

.header,
section.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-header);
    display: block;
    visibility: visible;
    background-color: var(--color-bg-white);
}


/* ナビゲーションバー（PC用） */

.navbar ul li a {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.header .navbar {
    background-color: var(--color-bg-white);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    /* 縦paddingを0に変更 */
    box-shadow: 
    0 4px 12px -2px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.04);
    height: var(--navbar-height);
}

.header nav img {
    width: auto;
    /* 幅を自動に変更 */
    height: calc(var(--navbar-height) * 0.7);
    /* navbarの70%の高さに固定 */
    max-width: 130px;
    /* 最大幅を制限 */
    margin-left: 8px;
    object-fit: contain;
    /* アスペクト比を保持 */
}

.header .navbar a,
.header .navbar a img {
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    pointer-events: auto;
    cursor: pointer;
}

.header .nav-pc-links {
    width: 100%;
    display: flex;
}

.header .nav-pc-links ul {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    justify-content: space-evenly;
    width: 100%;
    list-style: none;
}

.header .nav-pc-links ul li a {
    color: var(--color-text);
    padding: 0 2px;
    text-decoration: none;
    transition: color var(--transition-base);
    position: relative;
}

/* ホバー時のテキスト効果 */
.header .nav-pc-links ul li a:hover {
    color: var(--color-primary);
}

/* アイコンのホバー効果 - 回転＋カラー変化 */
.header .nav-pc-links ul li a svg,
.header .nav-pc-links ul li a .icons {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.header .nav-pc-links ul li a:hover svg,
.header .nav-pc-links ul li a:hover .icons {
    color: var(--color-primary-light);
    transform: rotate(-8deg) scale(1.1);
}

/* アンダーライン - 左から右へ描画 */
.header .nav-pc-links ul li a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    /* アイコンと同じ色 */
    background-color: var(--color-primary-light);
    /* 左から右へ描画されるアニメーション */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0 1px 1px 0;
}

.header .nav-pc-links ul li a:hover::after {
    transform: scaleX(1);
}


/* モバイルナビゲーション */

.header .nav-phone {
    display: none;
    position: fixed;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    z-index: var(--z-nav-mobile);
    background: rgba(255, 255, 255, 0.9);
    padding: 0;
    /* paddingを削除 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
    height: calc(var(--navbar-height) * 0.7);
    /* navbarの70%の高さに制限 */
    flex-direction: row;
}

.header .nav-phone:hover {
    background: var(--color-bg-white);
    transform: translateY(-50%) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.header .nav-phone .menu-font {
    margin-right: 8px;
    transition: color var(--transition-base);
    padding: 0 8px;
    /* 横paddingのみ追加 */
    display: flex;
    align-items: center;
    height: 100%;
}

.header .nav-phone .menu-font h4 {
    font-size: var(--font-size-xs);
    font-weight: bold;
    color: var(--color-primary);
    margin: 0;
    transition: color var(--transition-base);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ハンバーガーボタン - iOS Safari最適化 */

.header .nav-phone .navbar-toggler {
    background: none;
    border: none;
    width: calc(var(--navbar-height) * 0.7);
    /* navbarの70%の高さ */
    height: calc(var(--navbar-height) * 0.7);
    /* navbarの70%の高さ */
    padding: 0;
    cursor: pointer;
    /* PCブラウザ用に維持 */
    position: relative;
    border-radius: 5px;
    transition: background-color var(--transition-base);
    /* iOS Safari最適化 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    /* 300ms遅延除去 */
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .nav-phone .navbar-toggler:hover {
    background-color: rgba(0, 86, 179, 0.1);
}

.header .nav-phone .navbar-toggler .navbar-toggler-icon {
    width: 20px;
    /* 固定幅に変更 */
    height: 2px;
    background-color: var(--color-primary);
    display: block;
    position: relative;
    margin: 0;
    /* marginを0に */
    transition: all var(--transition-base);
}

.header .nav-phone .navbar-toggler .navbar-toggler-icon::before,
.header .nav-phone .navbar-toggler .navbar-toggler-icon::after {
    content: "";
    width: 20px;
    /* 固定幅に変更 */
    height: 2px;
    background-color: var(--color-primary);
    display: block;
    position: absolute;
    transition: all var(--transition-base);
    left: 0;
}

.header .nav-phone .navbar-toggler .navbar-toggler-icon::before {
    top: -6px;
    /* 間隔を調整 */
}

.header .nav-phone .navbar-toggler .navbar-toggler-icon::after {
    top: 6px;
    /* 間隔を調整 */
}


/* ハンバーガーアイコン開閉アニメーション */

.navbar-toggler.open .navbar-toggler-icon {
    background-color: transparent;
    transform: rotate(180deg);
}

.navbar-toggler.open .navbar-toggler-icon::before {
    transform: rotate(45deg) translate(5px, 5px);
    top: -5px;
}

.navbar-toggler.open .navbar-toggler-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
    top: 5px;
}

.navbar-toggler.open+.menu-font h4 {
    color: #fd7e14;
}


/* モーダルメニュー */


/* モーダルメニュー - iOS Safari最適化 */

.modal-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    /* iOS Safari対応 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, #f5f9ff 100%);
    z-index: 1032;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transition: transform var(--transition-base);
    transform: translateX(100%);
    /* iOS Safari最適化 */
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateX(100%) translateZ(0);
}

.modal-menu.visible {
    transform: translateX(0);
}

.modal-content {
    padding: clamp(20px, 3vh, 25px) 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 86, 179, 0.2);
    margin-bottom: 20px;
}

.modal-header h4 {
    position: relative;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--color-primary);
    font-weight: bold;
    margin: 0;
    padding-left: 28px;
}

.modal-header h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    /* そろばん珠風 - 円形グラデーション */
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 126, 95, 1) 0%,
        rgba(220, 90, 60, 1) 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.modal-header .close-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 1.8rem;
    color: rgba(108, 117, 125, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.modal-header .close-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--color-primary);
    transform: rotate(90deg);
}

.modal-body {
    margin-top: 15px;
    flex-grow: 1;
    overflow-y: auto;
}


/* モーダルメニュー項目 */

.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar-nav li {
    margin: 0 0 min(8px, 1.2vh) 0;
    padding-bottom: min(8px, 1.2vh);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    /* 項目間の区切り線 */
    border-bottom: 1px solid rgba(0, 86, 179, 0.06);
}

.navbar-nav li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-menu.visible .navbar-nav li {
    opacity: 1;
    transform: translateX(0);
}


/* アニメーション遅延 */

.modal-menu.visible .navbar-nav li:nth-child(1) {
    transition-delay: 0.05s;
}

.modal-menu.visible .navbar-nav li:nth-child(2) {
    transition-delay: 0.1s;
}

.modal-menu.visible .navbar-nav li:nth-child(3) {
    transition-delay: 0.15s;
}

.modal-menu.visible .navbar-nav li:nth-child(4) {
    transition-delay: 0.2s;
}

.modal-menu.visible .navbar-nav li:nth-child(5) {
    transition-delay: 0.25s;
}

.modal-menu.visible .navbar-nav li:nth-child(6) {
    transition-delay: 0.3s;
}

.navbar-nav li a {
    display: flex;
    padding: min(12px, 1.5vh) 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.navbar-nav li .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    margin-right: 14px;
    background: linear-gradient(
        135deg,
        rgba(0, 86, 179, 0.08) 0%,
        rgba(0, 86, 179, 0.15) 100%
    );
    border-radius: 50%;
    transition: all var(--transition-base);
    /* 珠の立体感 */
    box-shadow: 
        0 2px 4px rgba(0, 86, 179, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.navbar-nav li .menu-icon .icons {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-primary);
    transition: all var(--transition-base);
}

.navbar-nav li .menu-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.navbar-nav li .menu-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    transition: color var(--transition-base);
}

.navbar-nav li .menu-description {
    font-size: clamp(0.7rem, 1.4vw, 0.8rem);
    color: rgba(108, 117, 125, 1);
    line-height: 1.2;
    transition: color var(--transition-base);
}


/* ホバー効果 */

.navbar-nav li a:hover {
    background-color: rgba(0, 86, 179, 0.1);
    transform: translateX(5px);
}

.navbar-nav li a:hover .menu-icon {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-light) 100%
    );
    box-shadow: 
        0 4px 8px rgba(0, 86, 179, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}
/* 上位項目の強調（ホーム・特色） */
.navbar-nav li:nth-child(1) .menu-title,
.navbar-nav li:nth-child(2) .menu-title {
    font-size: clamp(0.95rem, 1.9vw, 1.05rem);
    font-weight: 700;
}

.navbar-nav li:nth-child(1) .menu-icon,
.navbar-nav li:nth-child(2) .menu-icon {
    min-width: 46px;
    height: 46px;
}

/* 区切り - ページリンクとセクションリンク（Q&A）のグループ分け */
.navbar-nav li:nth-child(5) {
    margin-bottom: min(16px, 2.5vh);
    padding-bottom: min(16px, 2.5vh);
    border-bottom: 2px solid rgba(0, 86, 179, 0.12);
}
.navbar-nav li a:hover .menu-icon .icons {
    color: #fff;
}

.navbar-nav li a:hover .menu-title {
    color: var(--color-primary);
}


/* アクティブページ */

.navbar-nav li a.active {
    background-color: rgba(0, 86, 179, 0.1);
    border-left: 3px solid var(--color-primary);
    padding-left: 15px;
    width: 90%;
}

.navbar-nav li a.active .menu-title {
    color: var(--color-primary);
}

.navbar-nav li a.active .menu-icon {
    background-color: var(--color-primary);
}

.navbar-nav li a.active .menu-icon .icons {
    color: #fff;
}


/* オーバーレイ */


/* オーバーレイ */

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1031;
    backdrop-filter: blur(2px);
    transition: opacity var(--transition-base);
    opacity: 0;
    pointer-events: none;
    /* 追加：初期状態ではクリックを透過 */
}

.overlay.visible {
    opacity: 1;
    pointer-events: auto;
    /* 追加：表示中のみクリックを受ける */
}


/* ====================================================
   05. グローバルコンポーネント - フッター
==================================================== */

footer {
    /* 暖色系ダークカラー - ページ全体との接続を改善 */
    background: linear-gradient(
        180deg,
        #3D3A37 0%,    /* 暖色系ダークグレー（茶系）*/
        #2F2C29 100%   /* より深い暖色系ダーク */
    );
    color: var(--color-text-white);
    padding: clamp(1.5rem, 3vh, 2rem) 1rem clamp(1rem, 3vh, 1rem);
    width: 100%;
}

footer .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer .footer-content .footer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer .footer-content .footer-main h1,
footer .footer-content .footer-main h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--color-text-white);
}

footer .footer-content .footer-main h1::after,
footer .footer-content .footer-main h2::after {
    content: none;
}

footer .footer-content .footer-main h5 {
    margin: 0.25rem 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}


/* 連絡先情報のスタイリング */

.contact-info {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 1.2rem 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 235, 220, 0.15);  /* 暖色系ボーダー */
    transition: all var(--transition-base);
    min-width: min(280px, 85vw);
    flex: 1 1 auto;
    max-width: 400px;
    min-height: 120px;  /* 高さを揃える */
}

.contact-item:hover {
    background: rgba(255, 245, 235, 0.12);  /* 暖色系ホバー */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.contact-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
}

.phone-item .contact-icon {
    background: rgba(249, 115, 22, 0.25);  /* オレンジ系（CTAカラーと連携） */
}

.email-item .contact-icon {
    background: rgba(13, 148, 136, 0.25);  /* ティール（サブカラーと連携） */
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
}

.contact-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
}

.contact-value {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    transition: color var(--transition-base);
}

.contact-value:hover {
    color: #FFB088;  /* 暖色系（オレンジ系） */
    text-decoration: underline;
}

.contact-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}


/* ソーシャルメディアセクション */

footer .footer-content .footer-main .footer-social-media {
    display: flex;
    justify-content: center;
    gap: clamp(35px, 8vw, 70px);
    margin: clamp(1rem, 2vh, 1.5rem) 0;
    flex-wrap: wrap;
}
/* SNSセクション見出し */
.social-section-title {
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    color: rgba(255, 235, 220, 0.7);  /* 暖色系 */
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.social-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.social-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 56px;
    height: 56px;
}

.social-link i,
.social-link svg {
    width: clamp(2.5rem, 6vw, 3rem);
    height: clamp(2.5rem, 6vw, 3rem);
    font-size: clamp(2.5rem, 6vw, 3rem);
    transition: all var(--transition-base);
    z-index: 1;
}

.service-label {
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    transition: all var(--transition-base);
    margin-top: 8px;
    /* order: -1 を削除 - アイコンの下に配置 */
}


/* ステータスバッジ - 完全修正版 */

.status-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    /* 縦伸び防止: 高さを明示的に制御 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 16px;
    max-height: 20px;
    /* 幅の制御 */
    width: auto;
    min-width: fit-content;
    max-width: 60px;
    /* テキストスタイル */
    font-size: clamp(0.55rem, 1.2vw, 0.65rem);
    font-weight: bold;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    /* その他 */
    z-index: 3;
    transition: all var(--transition-base);
    border: none;
    box-sizing: border-box;
}

.status-badge.active {
    background: linear-gradient(135deg, #F97316, #FB923C);  /* オレンジ系（CTAと連携） */
    color: white;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
    animation: pulse-glow 2.5s infinite;
}

.status-badge.preparing {
    background: rgba(120, 113, 108, 0.8);  /* 控えめなグレー */
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
    font-weight: 600;
    text-shadow: none;
}


/* ツールチップ */

.tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 15;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

.tooltip h4 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.tooltip p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.social-item:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}


/* ソーシャルリンクホバー効果 */

.instagram-link:hover i,
.instagram-link:hover svg {
    color: #ff6bb3;
    transform: scale(1.1);
}

.instagram-item:hover .service-label {
    font-weight: 600;
}

.youtube-link:hover i,
.youtube-link:hover svg {
    color: #ff4757;
    transform: scale(1.1);
}

.youtube-item:hover .service-label {
    font-weight: 600;
}

.line-link:hover i,
.line-link:hover svg {
    color: #2ed573;
    transform: scale(1.05);
}

.line-item:hover .service-label {
    font-weight: 600;
}

.slack-link:hover i,
.slack-link:hover svg {
    color: #7bed9f;
    transform: scale(1.1);
}

.slack-item:hover .service-label {
    font-weight: 600;
}


/* 準備中サービス */

.preparing-link {
    opacity: 1;
    cursor: help;
    pointer-events: none;
}

.social-item .preparing-link {
    pointer-events: auto;
}

.social-item .preparing-link:click {
    pointer-events: none;
}

.preparing-link i,
.preparing-link svg {
    opacity: 1;
}

.social-item:has(.preparing-link) .service-label {
    color: rgba(255, 255, 255, 0.8);
}

.social-link.preparing-link:hover {
    opacity: 1 !important;
    transform: none !important;
}

.social-link.preparing-link:hover i,
.social-link.preparing-link:hover svg {
    transform: none !important;
    color: inherit !important;
}

.social-item:has(.preparing-link):hover .service-label {
    font-weight: normal !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.social-item:has(.preparing-link):hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}


/* 後方互換性 */

footer .footer-content .footer-main .footer-social-media a {
    color: var(--color-text-white);
    margin: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

footer .footer-content .footer-main .footer-social-media a.instagram-link:hover {
    color: #ff6bb3;
}

footer .footer-content .footer-main .footer-social-media a.youtube-link:hover {
    color: #ff4757;
}

footer .footer-content .footer-main .footer-social-media a.message-link:hover {
    color: #2ed573;
}

footer .footer-content .footer-main .footer-social-media a.slack-link:hover {
    color: #7bed9f;
}

footer .footer-content .footer-main .footer-social-media a.youtube-link.preparing-link:hover,
footer .footer-content .footer-main .footer-social-media a.line-link.preparing-link:hover,
footer .footer-content .footer-main .footer-social-media a.message-link.preparing-link:hover,
footer .footer-content .footer-main .footer-social-media a.slack-link.preparing-link:hover {
    color: inherit;
}

/* 準備中アイテムの透明度 */
.preparing-item {
    opacity: 0.6;
    transition: opacity var(--transition-base);
}

.preparing-item:hover {
    opacity: 0.85;
}


/* =====================================================
   フッターCTA - 最後のコンバージョン機会
   ===================================================== */

.footer-cta {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
    margin-top: 1rem;
}

.footer-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    color: white;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.footer-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    background: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
}

.footer-cta-button i,
.footer-cta-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.footer-cta-button span {
    white-space: nowrap;
}


/* フッターリンク */

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 235, 220, 0.15);  /* 暖色系ボーダー */
    margin-top: 1rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-base);
}

.footer-links a.footer-link-primary {
    color: rgba(255, 200, 150, 0.95);  /* 暖色系で控えめに強調 */
    font-weight: 500;
}

.footer-links a.footer-link-primary:hover {
    color: #FFB088;
}

.footer-links a:hover {
    color: var(--color-text-white);
    text-decoration: underline;
}


/* フッターボトム */

footer .footer-bottom {
    width: 100%;
    text-align: center;
    font-size: var(--font-size-xs);
    padding-top: 10px;
    border-top: 1px solid rgba(255, 235, 220, 0.15);  /* 暖色系ボーダー */
}

footer .footer-bottom p {
    color: var(--color-text-white);
}


/* アクセシビリティ対応 */

.social-link:focus {
    outline: 3px solid #4dabf7;
    outline-offset: 4px;
}

.social-link:focus .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}


/* ====================================================
   06. グローバルコンポーネント - ボタン
==================================================== */


/* 共通ボタンスタイル */

.trial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.5vh, 12px) clamp(20px, 4vw, 30px);
    min-height: 48px;  /* タップ領域確保（WCAG準拠） */
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    background: linear-gradient(to right, #6ac1ff, #4ba3f2);
    box-shadow: 2px 2px 4px rgba(4, 14, 174, 0.7);
    transition: transform 0.3s, background 0.3s;
    transform: scale(1);
}

.trial-btn:hover {
    transform: scale(0.95) translateX(10px);
    background: linear-gradient(to right, #3b92e1, #0084ff);
}


/* ====================================================
   07. ページセクション - ヒーロー
==================================================== */


/* パンくず */

.km-breadcrumb {
    position: absolute;
    top: max(12px, 2vh);
    left: var(--km-bc-gap);
    font-size: var(--km-bc-size);
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.km-breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 0.25em;
}

.km-breadcrumb a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.km-breadcrumb li+li::before {
    content: "›";
    margin: 0 0.25em;
}


/* インナーヒーロー */

.inner-hero {
    margin: var(--navbar-height) 0 0;
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/IMG_0480.webp");
    background-size: cover;
    background-position: center;
    height: max(300px, min(40vh, 500px));
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.inner-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
}

.inner-hero .content {
    text-align: center;
    margin-left: clamp(15px, 3vw, 25px);
    padding-top: max(20px, 3vh);
    position: relative;
    z-index: 5;
}

.inner-hero .content h1,
.inner-hero .content h2 {
    color: var(--color-text-white);
    margin-bottom: clamp(12px, 2vh, 20px);
}

.inner-hero .content h1 {
    margin-bottom: clamp(12px, 2vh, 20px);
    text-align: justify;
}

.inner-hero .content h2 {
    margin-bottom: clamp(1rem, 3vh, 2rem);
    text-align: justify;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.inner-hero .trial-btn {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    margin-left: 15vw;
}


/* features.html専用 */

.inner-hero h1.typewriter {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
}

.inner-hero h1.typewriter::first-letter {
    font-size: 1.3em;
}
.hero-text-link {
    color: #475569;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid #94a3b8;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-text-link:hover {
    color: #0056b3;
    border-bottom-color: #0056b3;
}
/* ====================================================
   08. ページセクション - クラス情報
==================================================== */

.class-excuse {
    background: linear-gradient( 168deg, rgba(255, 255, 255, 0.97) 40%, rgba(255, 255, 255, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    padding: var(--spacing-md) 0 var(--spacing-lg) 0;
    width: 100%;
}

.class-excuse .class-info h2 {
    color: rgba(51, 51, 51, 1);
    margin: 10px 0;
}

.class-excuse .class-info h3 {
    color: #333;
    margin: 10px 0;
}

.class-excuse .class-info p {
    color: var(--color-text-secondary);
    margin-bottom: max(8px, 1vh);
}


/* 横並びタイムライン */

.class-excuse .timeline-horizontal {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 4vw, 60px);
    align-items: center;
    max-width: 1200px;
    width: 100%;
    padding: clamp(20px, 3vh, 40px) 0;
    position: relative;
}

.class-excuse .timeline-horizontal .timeline-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgba(204, 204, 204, 1);
    z-index: 0;
}

.class-excuse .timeline-item-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 20%;
    padding: 20px 0;
    text-align: center;
    z-index: 1;
}

.class-excuse .timeline-item-horizontal .timeline-content-horizontal {
    padding: clamp(20px, 2.5vh, 28px) clamp(15px, 2vw, 20px);
    border-radius: 12px;
    width: 100%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 160px;
    height: auto;
}

/* カード内アイコン */
.class-excuse .timeline-content-horizontal .class-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform var(--transition-base);
}

.class-excuse .timeline-content-horizontal .class-icon i,
.class-excuse .timeline-content-horizontal .class-icon svg {
    width: 24px;
    height: 24px;
}

.class-excuse .timeline-item-horizontal .timeline-content-horizontal h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.class-excuse .timeline-item-horizontal .timeline-content-horizontal p {
    margin: 4px 0;
    font-size: 0.9rem;
}

/* クラス別カラー */
/* 1部：入門（オレンジ/ピーチ系） */
.class-excuse .timeline-item-horizontal.class-1 .timeline-content-horizontal {
    background: linear-gradient(135deg, #FFF5EB 0%, #FFE8D6 100%);
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.class-excuse .timeline-item-horizontal.class-1 .class-icon {
    background: rgba(249, 115, 22, 0.15);
    color: #EA580C;
}
.class-excuse .timeline-item-horizontal.class-1 h4 {
    color: #C2410C;
}
.class-excuse .timeline-item-horizontal.class-1 p {
    color: #78350F;
}

/* 2部：初級（イエロー/ゴールド系） */
.class-excuse .timeline-item-horizontal.class-2 .timeline-content-horizontal {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.class-excuse .timeline-item-horizontal.class-2 .class-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}
.class-excuse .timeline-item-horizontal.class-2 h4 {
    color: #B45309;
}
.class-excuse .timeline-item-horizontal.class-2 p {
    color: #78350F;
}

/* 3部：中級（ブルー系） */
.class-excuse .timeline-item-horizontal.class-3 .timeline-content-horizontal {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.class-excuse .timeline-item-horizontal.class-3 .class-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #2563EB;
}
.class-excuse .timeline-item-horizontal.class-3 h4 {
    color: #1D4ED8;
}
.class-excuse .timeline-item-horizontal.class-3 p {
    color: #1E3A5F;
}

/* 4部：上級（パープル系） */
.class-excuse .timeline-item-horizontal.class-4 .timeline-content-horizontal {
    background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}
.class-excuse .timeline-item-horizontal.class-4 .class-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #7C3AED;
}
.class-excuse .timeline-item-horizontal.class-4 h4 {
    color: #6D28D9;
}
.class-excuse .timeline-item-horizontal.class-4 p {
    color: #4C1D95;
}

.class-excuse .timeline-item-horizontal.top .timeline-content-horizontal {
    margin-bottom: clamp(30px, 4vh, 40px);
}

.class-excuse .timeline-item-horizontal.bottom .timeline-content-horizontal {
    margin-top: clamp(30px, 4vh, 40px);
}

.class-excuse .timeline-item-horizontal:hover .timeline-content-horizontal {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.class-excuse .timeline-item-horizontal:hover .class-icon {
    transform: scale(1.1);
}


/* --- クラスガイダンスボックス --- */
.class-guidance-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(6, 158, 252, 0.2);
    border-radius: 14px;
    padding: 20px 28px;
    margin-top: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(6, 158, 252, 0.08);
}

.class-guidance-box .guidance-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.class-guidance-box .guidance-icon svg {
    width: 24px;
    height: 24px;
}

.class-guidance-box .guidance-content {
    text-align: left;
}

.class-guidance-box .guidance-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.6;
    text-align: left;
}

.class-guidance-box .guidance-content p:first-child {
    margin-bottom: 4px;
}

.class-guidance-box .guidance-content strong {
    color: #2c5f8a;
    background: none;
}

@media (max-width: 768px) {
    .class-guidance-box {
        flex-direction: column;
        text-align: center;
        padding: 18px 20px;
        gap: 12px;
        margin: 2rem 1rem 0;
    }
    
    .class-guidance-box .guidance-icon {
        width: 44px;
        height: 44px;
    }
    
    .class-guidance-box .guidance-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .class-guidance-box .guidance-content p {
        text-align: center;
        font-size: 0.85rem;
    }
}


/* ====================================================
   09. ページセクション - FAQ
==================================================== */

.faq-section {
    padding: 0;
    text-align: center;
    position: relative;
    width: 100%;
    margin-bottom: 5vh;
}


.faq-section .faq {
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
    z-index: 1;
}


/* FAQアイテム */

.faq-section .faq .faq-item {
    margin-bottom: var(--spacing-md);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 0;
    transition: box-shadow var(--transition-base);
}

.faq-section .faq .faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 86, 179, 0.1);
}


/* 質問部分 */

.faq-section .faq .faq-item .faq-question h3 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-base), background-color var(--transition-base);
    padding: 15px 20px;
    margin: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(250, 250, 250, 0.5);
    font-weight: 600;
}

.faq-section .faq .faq-item .faq-question h3:hover {
    color: var(--color-primary-hover);
    background-color: rgba(233, 245, 255, 1);
}


/* 質問の前に矢印アイコンを追加 */

.faq-section .faq .faq-item .faq-question h3::before {
    content: "▶";
    display: inline-block;
    margin-right: 10px;
    font-size: 0.8em;
    transition: transform var(--transition-base);
}

.faq-section .faq .faq-item.active .faq-question h3::before {
    transform: rotate(90deg);
}


/* 回答部分 */

.faq-section .faq .faq-item .faq-answer {
    display: none;
    padding: 20px;
    border-left: 3px solid var(--color-primary-light);
    margin-left: 20px;
    animation: fadeIn 0.3s ease-in-out;
}

.faq-section .faq .faq-item .faq-answer p {
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    line-height: 1.8;
    color: rgba(51, 51, 51, 0.9);
    margin-bottom: 0.8em;
}

.faq-section .faq .faq-item .faq-answer p:last-child {
    margin-bottom: 0;
}


/* 強調テキスト */

.faq-section .faq .faq-item .faq-answer strong {
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    background: linear-gradient(to bottom, transparent 60%, rgba(255, 235, 59, 0.3) 60%);
}


/* リンクスタイル */

.faq-section .faq .faq-item .faq-answer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 86, 179, 0.3);
    transition: color var(--transition-base), border-bottom-color var(--transition-base);
    padding-bottom: 1px;
}


/* リンクのhover時のみ下線表示 */

.faq-section .faq .faq-item .faq-answer a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    border-bottom-color: transparent;
}


/* アクティブ状態 */

.faq-section .faq .faq-item.active .faq-question h3 {
    color: var(--color-primary-hover);
    background-color: rgba(233, 245, 255, 1);
    border-radius: 8px 8px 0 0;
}

.faq-section .faq .faq-item.active .faq-answer {
    display: block;
}


/* ボタンセクション（FAQセクション内） */

.faq-section .faq .btn-section {
    background: transparent;
    padding: 0;
}

.faq-section .faq .btn-section h2 {
    margin-bottom: clamp(15px, 2vh, 25px);
}


/* 背景SVG装飾 */

.faq-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 40vw, 600px);
    height: 100%;
    background-image: url("../svg/12178_color.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}


/* 10. ページセクション - ボタンセクション==================================================== */

.btn-section {
    width: 100%;
    padding: var(--spacing-lg) 0;
    background: linear-gradient( to bottom right, rgba(249, 250, 251, 0.9), rgba(243, 244, 246, 0.9));
    display: flex;
    justify-content: center;
}

.btn-section .content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 1rem;
    padding: clamp(1rem, 2vh, 1.5rem);
    background-color: var(--color-bg-white);
    color: rgba(51, 51, 51, 1);
    text-align: center;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-section .content-box h1 {
    margin-bottom: clamp(0.75rem, 1.5vh, 1rem);
    font: 700 clamp(1.3rem, 3vw, 2rem) / 1.5 "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    color: rgba(51, 51, 51, 1);
}

.btn-section .content-box .description {
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(75, 85, 99, 1);
}

.btn-section .content-box .info-box {
    width: min(90%, 70vw);
    margin-bottom: clamp(0.3rem, 1vh, 0.5rem);
    padding: clamp(0.75rem, 1.5vh, 1rem);
    background-color: rgba(191, 219, 254, 0.5);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 900;
    color: rgba(29, 78, 216, 1);
    border-radius: 0.5rem;
}

.btn-section .content-box .details-button {
    display: inline-block;
    width: max(200px, 25ch);
    padding: clamp(0.5rem, 1.5vh, 0.75rem);
    margin-top: clamp(8px, 1vh, 15px);
    background-color: rgba(59, 130, 246, 1);
    color: var(--color-text-white);
    font: 600 clamp(0.875rem, 1.8vw, 1rem) / 1 "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base), color var(--transition-base);
    transform: scale(1.1);
}

.btn-section .content-box .details-button:hover {
    background-color: rgba(37, 99, 235, 1);
    transform: scale(1.05);
    animation: colorChange 1.5s infinite;
}

.btn-section .content-box .note {
    margin-top: clamp(0.75rem, 1.5vh, 1rem);
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: rgba(107, 114, 128, 1);
}


/* ====================================================
   10. アニメーション定義
==================================================== */

@keyframes colorChange {
    0% {
        color: var(--color-text-white);
    }
    50% {
        color: rgb(213, 249, 5);
    }
    100% {
        color: var(--color-text-white);
    }
}

@keyframes pulse-glow {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 6px 18px rgba(46, 213, 115, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(46, 213, 115, 0.9);
    }
}

@keyframes swipe-left {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-5px);
        opacity: 1;
    }
}

@keyframes swipe-right {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ====================================================
   11. その他のユーティリティ
==================================================== */


/* トップへ戻るボタン */

#backToTop {
    position: fixed;
    bottom: max(20px, 3vh);
    right: max(20px, 3vw);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    transform: rotate(45deg);
    cursor: pointer;
    z-index: 9;
    color: black;
    text-shadow: 1px 1px 6px rgba(255, 255, 255);
}


/* ====================================================
   99. メディアクエリ
==================================================== */
@media (min-width: 769px) {
    .header .nav-phone {
        display: none !important;
    }
    .header .nav-pc-links {
        display: flex !important;
    }
}

/* タブレット（〜768px） */

@media (max-width: 768px) {
    /* CSS変数の上書き */
     :root {
        --navbar-height: var(--navbar-height-mobile);
    }
    html {
        font-size: 14px;
    }
    /* レイアウト調整 */
    .desktop-only,
    .mobile-blank,
    .class-excuse .timeline-horizontal {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    /* ナビゲーション */
    .header,
    section.header {
        display: block !important;
        visibility: visible !important;
    }
    .header .nav-pc-links {
        display: none;
    }
    .header .nav-phone {
        display: flex;
        position: absolute;
        right: 1vw;
        top: 50%;
        transform: translateY(-50%);
        height: calc(var(--navbar-height-mobile) * 0.75);
    }
    .header .navbar {
        height: var(--navbar-height-mobile);
        padding: 0 16px;
        flex-direction: row;
        justify-content: space-between;
    }
    .header nav img {
        height: calc(var(--navbar-height-mobile) * 0.75);
        /* モバイルでは75% */
        max-width: 100px;
    }
    .header .nav-phone .navbar-toggler {
        width: calc(var(--navbar-height-mobile) * 0.75);
        height: calc(var(--navbar-height-mobile) * 0.75);
    }
    .navbar-toggler-icon {
        width: 1.8rem;
        height: 1.8rem;
    }
    .modal-menu {
        width: 85%;
    }
    .navbar-nav li a {
        padding: min(12px, 2vh) 12px;
    }
    .overlay {
        padding: 2rem 1rem;
    }
    /* ヒーロー */
    .inner-hero {
        height: max(250px, min(50vh, 400px));
        justify-content: center;
        padding-left: 0;
        margin-top: 0;
    }
    .inner-hero .overlay {
        justify-content: center;
        padding: 0 5vw;
    }
    .inner-hero .content {
        margin-left: 0;
        padding-top: clamp(20px, 3vh, 40px);
        text-align: center;
        width: 100%;
    }
    .inner-hero .content h1,
    .inner-hero .content h2 {
        text-align: center;
    }
    /* ヒーロー内フォントサイズ調整（タブレット） */
    .inner-hero h1.typewriter {
        font-size: clamp(1.5rem, 4.5vw, 2.5rem);
    }
    .inner-hero .content h2 {
        font-size: clamp(0.9rem, 2.2vw, 1.1rem);
        line-height: 1.6;
    }
    .inner-hero .trial-btn {
        min-height: 46px;
        font-size: clamp(0.85rem, 2.5vw, 1rem);
    }
    /* Swiper表示 */
    .swiper {
        display: block;
    }
    /* その他 */
    #backToTop {
        font-size: clamp(2rem, 5vw, 2.5rem);
        bottom: clamp(15px, 2vh, 30px);
        right: clamp(15px, 2vw, 30px);
    }
    .faq-section .faq {
        padding: 0 15px;
    }
    .faq-section .faq .faq-item .faq-question h3 {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        padding: 12px 15px;
    }
    .faq-section .faq .faq-item .faq-answer {
        padding: 15px;
        margin-left: 10px;
    }
    .faq-section .faq .faq-item .faq-answer p {
        font-size: clamp(0.8rem, 2vw, 0.95rem);
    }
    /* フッター */
    footer .footer-content .footer-main .footer-social-media {
        gap: clamp(25px, 6vw, 50px);
    }
    .social-link {
        width: 60px;
        height: 60px;
    }
    .social-link i,
    .social-link svg {
        width: clamp(2.8rem, 7vw, 3.5rem);
        height: clamp(2.8rem, 7vw, 3.5rem);
        font-size: clamp(2.8rem, 7vw, 3.5rem);
    }
    .service-label {
        font-size: clamp(0.7rem, 1.8vw, 0.8rem);
    }
    .status-badge {
        font-size: clamp(0.6rem, 1.4vw, 0.7rem);
        padding: 2px 6px;
        top: 1px;
        right: 1px;
    }
    .tooltip {
        font-size: 0.8rem;
        padding: 10px 14px;
        white-space: normal;
        min-width: 150px;
    }
    .tooltip h4 {
        font-size: 0.85rem;
    }
    .tooltip p {
        font-size: 0.75rem;
    }
    .footer-links {
        gap: 1.5rem;
    }
    /* ====================================================
   11. Swiper関連スタイル
==================================================== */
    /* Swiper読み込み前のレイアウト崩れ防止 */
    .class-swiper:not(.swiper-initialized),
    .course-swiper:not(.swiper-initialized) {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .class-swiper:not(.swiper-initialized)::-webkit-scrollbar,
    .course-swiper:not(.swiper-initialized)::-webkit-scrollbar {
        display: none;
    }
    .class-swiper:not(.swiper-initialized) .swiper-slide,
    .course-swiper:not(.swiper-initialized) .swiper-slide {
        flex: 0 0 auto;
        scroll-snap-align: center;
        width: 85%;
        margin-right: 24px;
    }
    /* スワイプインジケーター */
    .swipe-indicator {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        pointer-events: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border-radius: 20px;
        font-size: 0.9rem;
    }
    .swipe-indicator::before {
        content: "←";
        animation: swipe-left 1.5s ease-in-out infinite;
    }
    .swipe-indicator::after {
        content: "→";
        animation: swipe-right 1.5s ease-in-out infinite;
    }
    /* クラススワイパー */
    .class-swiper {
        width: 80%;
        padding: clamp(20px, 3vh, 40px) 1rem clamp(30px, 4vh, 50px) 1rem;
    }
    .class-swiper .swiper-wrapper {
        padding-bottom: clamp(30px, 5vh, 50px);
    }
    .class-swiper .swiper-slide {
        width: auto;
        background: var(--color-bg-white);
        border-radius: 16px;
        padding: clamp(1.2rem, 2vh, 1.5rem) 1.2rem;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
        text-align: center;
        max-width: 480px;
        margin: 0 auto;
        transition: transform var(--transition-base);
        min-height: 160px;
    }
    .class-swiper .swiper-slide:hover {
        transform: scale(1.05);
    }
    
    /* スライド内アイコン */
    .class-swiper .class-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
    }
    .class-swiper .class-icon i,
    .class-swiper .class-icon svg {
        width: 22px;
        height: 22px;
    }
    
    /* スライド個別カラー（PC版と統一） */
    .class-swiper .slide-1 {
        background: linear-gradient(135deg, #FFF5EB 0%, #FFE8D6 100%);
        border: 1px solid rgba(249, 115, 22, 0.2);
    }
    .class-swiper .slide-1 .class-icon {
        background: rgba(249, 115, 22, 0.15);
        color: #EA580C;
    }
    .class-swiper .slide-1 h4 {
        color: #C2410C;
    }
    .class-swiper .slide-1 p {
        color: #78350F;
    }
    
    .class-swiper .slide-2 {
        background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }
    .class-swiper .slide-2 .class-icon {
        background: rgba(245, 158, 11, 0.15);
        color: #D97706;
    }
    .class-swiper .slide-2 h4 {
        color: #B45309;
    }
    .class-swiper .slide-2 p {
        color: #78350F;
    }
    
    .class-swiper .slide-3 {
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
        border: 1px solid rgba(59, 130, 246, 0.2);
    }
    .class-swiper .slide-3 .class-icon {
        background: rgba(59, 130, 246, 0.15);
        color: #2563EB;
    }
    .class-swiper .slide-3 h4 {
        color: #1D4ED8;
    }
    .class-swiper .slide-3 p {
        color: #1E3A5F;
    }
    
    .class-swiper .slide-4 {
        background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%);
        border: 1px solid rgba(139, 92, 246, 0.2);
    }
    .class-swiper .slide-4 .class-icon {
        background: rgba(139, 92, 246, 0.15);
        color: #7C3AED;
    }
    .class-swiper .slide-4 h4 {
        color: #6D28D9;
    }
    .class-swiper .slide-4 p {
        color: #4C1D95;
    }
    
    /* 共通スタイル */
    .class-swiper .timeline-content-horizontal h4 {
        margin: clamp(0.3rem, 1vh, 0.5rem) 0;
        font-size: clamp(1rem, 2.5vw, 1.2rem);
    }
    .class-swiper .timeline-content-horizontal p {
        font-size: clamp(0.8rem, 2vw, 0.95rem);
        margin: 0.2rem 0;
    }
    /* スライドエフェクト */
    .class-swiper .swiper-slide-prev {
        transform: translateX(-30%) rotateZ(-5deg);
        opacity: 0.6;
        z-index: 1;
        filter: brightness(0.9);
        transition: transform var(--transition-smooth), opacity var(--transition-smooth), filter var(--transition-smooth);
    }
    .class-swiper .swiper-slide-next {
        transform: translateX(30%) rotateZ(5deg);
        opacity: 0.6;
        z-index: 1;
        filter: brightness(0.9);
        transition: transform var(--transition-smooth), opacity var(--transition-smooth), filter var(--transition-smooth);
    }
    .class-swiper .swiper-slide-active {
        transform: scale(1.03) rotateZ(0deg);
        opacity: 1;
        z-index: 2;
        transition: transform var(--transition-smooth), opacity var(--transition-smooth);
    }
    /* アクティブ時の背景 */
    .class-swiper .swiper-slide-active.slide-1 {
        background-color: rgba(255, 213, 150, 1);
    }
    .class-swiper .swiper-slide-active.slide-2 {
        background-color: rgba(255, 230, 140, 1);
    }
    .class-swiper .swiper-slide-active.slide-3 {
        background-color: rgba(170, 230, 255, 1);
    }
    .class-swiper .swiper-slide-active.slide-4 {
        background-color: rgba(220, 180, 255, 1);
    }
    /* ページネーション */
    .class-swiper .swiper-pagination {
        margin-top: clamp(1.5rem, 3vh, 2rem);
    }
}


/* スマートフォン（〜600px） */

@media (max-width: 600px) {
    .navbar ul li a {
        font-size: clamp(0.9rem, 2vw, 1.2rem);
    }
    .inner-hero {
        height: max(200px, min(45vh, 350px));
    }
}


/* 小型スマートフォン（〜480px） */

@media (max-width: 480px) {
    .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    .modal-menu {
        width: 90%;
    }
    .navbar-nav li .menu-icon {
        min-width: 32px;
        height: 32px;
    }
    /* ヒーローセクション（モバイル最適化） */
    .inner-hero {
        height: max(180px, min(40vh, 300px));
        margin-top: max(45px, 7vh);
    }
    .inner-hero h1.typewriter {
        font-size: clamp(1.2rem, 5.5vw, 1.8rem);
        line-height: 1.35;
    }
    .inner-hero .content h2 {
        font-size: clamp(0.8rem, 2.8vw, 0.95rem);
        line-height: 1.55;
    }
    .inner-hero .trial-btn {
        min-height: 44px;
        font-size: clamp(0.8rem, 3vw, 0.9rem);
        padding: clamp(8px, 1.2vh, 10px) clamp(16px, 3vw, 24px);
    }
    /* フッター - SNSアイコン改善 */
    footer .footer-content .footer-main .footer-social-media {
        gap: 24px;
        padding: 0 8px;
    }
    
    .social-item {
        min-width: 60px;
    }
    
    .social-link {
        width: 56px;
        height: 56px;
        /* タップ領域の最小サイズ確保 */
        min-width: 44px;
        min-height: 44px;
    }
    
    .social-link i,
    .social-link svg {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 2.2rem;
    }
    
    .service-label {
        font-size: 0.7rem;
        margin-top: 2px;
    }
    
    /* ステータスバッジ - 縦伸び完全修正 */
    .status-badge {
        font-size: 0.58rem;
        padding: 2px 6px;
        bottom: -6px;
        max-width: 50px;
        min-width: auto;
        line-height: 1;
        min-height: 14px;
        max-height: 18px;
        border-radius: 9px;
    }
    
    .status-badge.active,
    .status-badge.preparing {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    .tooltip {
        bottom: 130%;
        font-size: 0.75rem;
        padding: 8px 12px;
        max-width: 200px;
    }
    .footer-links {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .footer-links a {
        font-size: 0.8rem;
    }
    /* フッターCTA - モバイル */
    .footer-cta {
        padding: 1.2rem 1rem;
    }
    .footer-cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}


/* 極小スマートフォン（〜360px） */

@media (max-width: 360px) {
    /* フッターSNS */
    footer .footer-content .footer-main .footer-social-media {
        gap: 16px;
    }
    
    .social-item {
        min-width: 50px;
    }
    
    .social-link {
        width: 48px;
        height: 48px;
    }
    
    .social-link i,
    .social-link svg {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1.8rem;
    }
    
    .service-label {
        font-size: 0.65rem;
    }
    
    .status-badge {
        font-size: 0.52rem;
        padding: 2px 5px;
        max-width: 42px;
        min-height: 12px;
        max-height: 16px;
        border-radius: 8px;
        bottom: -5px;
    }
    
    /* 連絡先カード */
    .contact-item {
        padding: 1rem;
        min-width: 260px;
    }
    
    .contact-value {
        font-size: 0.95rem;
    }
    
    .contact-note {
        font-size: 0.7rem;
    }
    
    /* ナビゲーション */
    .navbar-nav li .menu-icon {
        min-width: 28px;
        height: 28px;
    }
    
    .navbar-nav li .menu-title {
        font-size: 0.85rem;
    }
}


/* 横向き対応（〜600px高さ） */

@media (max-height: 600px) {
    .header .navbar {
        height: 50px;
        padding: 0 16px;
    }
    .header nav img {
        height: 35px;
        /* 固定高さ */
        max-width: 80px;
    }
    .header .nav-phone {
        height: 35px;
    }
    .header .nav-phone .navbar-toggler {
        width: 35px;
        height: 35px;
    }
    .header .nav-phone .navbar-toggler .navbar-toggler-icon {
        width: 18px;
    }
    .header .nav-phone .navbar-toggler .navbar-toggler-icon::before,
    .header .nav-phone .navbar-toggler .navbar-toggler-icon::after {
        width: 18px;
    }
    .inner-hero {
        height: max(200px, 45vh);
        margin-top: 50px;
    }
    .class-excuse {
        padding: 15px 0 25px 0;
    }
    .class-excuse .timeline-item-horizontal .timeline-content-horizontal {
        height: max(120px, 18vh);
        min-height: 100px;
    }
    .btn-section {
        padding: 20px 0;
    }
    footer {
        padding: 1rem;
    }
    .modal-content {
        padding: 15px 20px;
    }
    .navbar-nav li {
        margin: 0 0 5px 0;
    }
    .navbar-nav li a {
        padding: 8px 12px;
    }
}


/* 極小高さ対応（〜400px高さ） */

@media (max-height: 400px) {
    .header .navbar {
        height: 40px;
        padding: 0 12px;
    }
    .header nav img {
        height: 28px;
        /* 固定高さ */
        max-width: 70px;
    }
    .header .nav-phone {
        height: 30px;
    }
    .header .nav-phone .navbar-toggler {
        width: 30px;
        height: 30px;
    }
    .header .nav-phone .navbar-toggler .navbar-toggler-icon {
        width: 16px;
    }
    .header .nav-phone .navbar-toggler .navbar-toggler-icon::before,
    .header .nav-phone .navbar-toggler .navbar-toggler-icon::after {
        width: 16px;
    }
    .header .nav-phone .navbar-toggler .navbar-toggler-icon::before {
        top: -5px;
    }
    .header .nav-phone .navbar-toggler .navbar-toggler-icon::after {
        top: 5px;
    }
    .header .nav-phone .menu-font h4 {
        font-size: 0.7rem;
    }
    .inner-hero {
        height: 150px;
        margin-top: 40px;
    }
    .inner-hero .content {
        padding-top: 10px;
    }
    .inner-hero .content h1,
    .inner-hero .content h2 {
        margin-bottom: 5px;
    }
    #backToTop {
        bottom: 10px;
        right: 10px;
        font-size: 1.8rem;
    }
}


/* アクセシビリティ対応 */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ダークモード対応 */

@media (prefers-color-scheme: dark) {
    .tooltip {
        background: rgba(0, 0, 0, 0.95);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/* ====================================================
   11.5. 情報ラベル共通スタイル
   カード内のカテゴリラベル用（アクセス情報等）
==================================================== */

.info-label {
    display: block;
    font-size: var(--font-size-xs);  /* 0.6rem〜0.8rem */
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* --- 情報ラベル レスポンシブ --- */
@media screen and (max-width: 480px) {
    .info-label {
        font-size: 0.7rem;
        letter-spacing: 0.06em;
    }
}

/* ====================================================
   12. セクションヘッダー共通スタイル
   全ページ統一用（features.cssから移植）
==================================================== */

/* --- セクションヘッダー --- */
.section-header {
    text-align: center;
    margin-bottom: 20px;
}

.section-header h1 {
    display: inline-block;
    margin-bottom: 0px;
    background-color: transparent;
}

/* base.cssのh1::afterを無効化 */
.section-header h1::after {
    display: none;
}

.section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.section-divider {
    width: 80px;
    height: 3px;
    background-color: var(--color-primary-light);
    margin: 0 auto;
    border-radius: 2px;
}

/* --- セクションヘッダー レスポンシブ --- */
@media screen and (max-width: 768px) {
    .section-header {
        margin-bottom: 36px;
    }
}

@media screen and (max-width: 480px) {
    .section-header {
        margin-bottom: 24px;
    }

    .section-header h1 {
        font-size: 1.6rem;
    }

    .section-subtitle {
        font-size: 0.8rem;
    }

    .section-divider {
        width: 80px;
    }
}

/* ====================================================
   13. CTA セクション
==================================================== */

/* コンテナ */
.cta-section {
    width: 100%;
    padding: clamp(2.5rem, 5vh, 3.5rem) 1rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
}

/* リード文 */
.cta-lead {
    font-family: "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    letter-spacing: 0.02em;
}

/* ボタン */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    font-family: "YuMincho", "Yu Mincho", serif;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
    transition: all 0.2s ease;
}
.cta-button:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
}

.cta-button:active {
    transform: translateY(0);
}

/* 注釈・チェックリスト */
.cta-note {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    color: #64748b;
    margin: 0;
}

.cta-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cta-check svg {
    color: #28a745;
}

/* ヒーロー用マイクロコピー */
.cta-micro-copy {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: rgba(100, 116, 139, 0.9);
    font-weight: 500;
}

.cta-main-text {
    font-weight: 700;
}

/* ====================================================
   13-1. CTA レスポンシブ
==================================================== */

@media (max-width: 480px) {
    .cta-section {
        padding: 2rem 1rem;
        gap: 1rem;
    }
    
    .cta-button {
        padding: 0.9rem 2.5rem;
        width: 100%;
        max-width: 280px;
    }
}

/* アニメーション軽減 */
@media (prefers-reduced-motion: reduce) {
    .cta-button {
        transition: none;
    }
}


/* ====================================================
   14. シャイニングアニメーション（グローバル）
   ====================================================
   美術的効果：プレミアム感を演出、視線誘導
   心理学効果：品質認知の向上、行動喚起の強化
   ==================================================== */

/* --- CTAボタン シャイニング効果 --- */
.trial-btn,
.cta-button {
    position: relative;
    overflow: hidden;
}

.trial-btn::before,
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.1) 80%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: buttonShine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* ホバー時は即座にシャイニング */
.trial-btn:hover::before,
.cta-button:hover::before {
    animation: buttonShineHover 0.6s ease-out forwards;
}

/* --- キーフレーム定義 --- */
@keyframes buttonShine {
    0% {
        left: -100%;
    }
    20% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

@keyframes buttonShineHover {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}

/* 画像シャイニング（汎用） */
@keyframes imageShine {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    30% {
        left: 150%;
        opacity: 1;
    }
    31% {
        opacity: 0;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

/* カードシャイニング（汎用） */
@keyframes cardShine {
    0% {
        left: -100%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    20% {
        left: 150%;
        opacity: 1;
    }
    21% {
        opacity: 0;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

/* --- モバイルでのシャイニング最適化 --- */
@media screen and (max-width: 768px) {
    .trial-btn::before,
    .cta-button::before {
        animation-duration: 4s;
    }
}

/* --- アクセシビリティ：動きを減らす設定を尊重 --- */
@media (prefers-reduced-motion: reduce) {
    .trial-btn::before,
    .cta-button::before {
        animation: none;
        display: none;
    }
}