/* 0. リセット & ベース */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 55px; }
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.9;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* 1. CSS変数 */
:root {
    --color-bg: #FAFAF7;
    --color-bg-warm: #F5F0E8;
    --color-bg-accent: #EDE4D0;
    --color-primary: #C4714A;
    --color-primary-dk: #A85C39;
    --color-secondary: #7A9E7E;
    --color-accent: #E8D5A3;
    --color-text: #2C2416;
    --color-text-sub: #8A7E72;
    --color-border: #DDD5C4;
    --color-white: #FFFFFF;
    --color-footer-bg: #2C2416;
    --color-footer-txt: #C8BCA8;

    --font-serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif;
    --font-sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.25rem;
    --text-hero: 3.5rem;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    --max-width: 1100px;
    --header-h: 64px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --shadow-sm: 0 2px 8px rgba(44,36,22,0.08);
    --shadow-md: 0 6px 24px rgba(44,36,22,0.12);
    --shadow-lg: 0 12px 40px rgba(44,36,22,0.16);
    --transition: 0.25s ease;
}

/* 2. 共通レイアウト */
.section { padding: var(--space-xl) var(--space-sm); }
.section--warm { background: var(--color-bg-warm); }
.section--accent { background: var(--color-bg-accent); }

/* テキストの色 */
.text-primary { color: var(--color-primary) }
.text-secondary { color: var(--color-secondary); }
.text-blue { color: #0021cd; }
.text-info { color: #00cef7; }
.text-warning { color: #f8b500; }
.text-danger { color: #a94442;    }

/* 全ラッパー共通（gallery-inner / footer-inner も同クラスで代替） */
.section-inner { max-width: var(--max-width); margin: 0 auto; }

/* 見出し */
.section-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}
.section-title--center { text-align: center; }
.section-title--white { color: var(--color-white); }

/* デコレーションライン */
.deco-line {
    display: block;
    width: 48px; height: 3px;
    background: var(--color-primary);
    margin: var(--space-sm) auto var(--space-md);
    border-radius: 2px;
}

/* グリッド
     .grid-2 : PC・タブレット 2列 / SP 1列
     .grid-3 : PC 3列 / タブレット 2列 / SP 1列
     ※ レスポンシブはメディアクエリで上書き */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }

/* 3. 共通カード */
.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* カード内パディング */
.card-body { padding: var(--space-md); }
.card-header { padding: var(--space-md) var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-border); }

/* テキスト要素 */
.card-type { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--color-primary); text-transform: uppercase; margin-bottom: 0.25em; text-align: center; }
.card-icon { font-size: 2rem; line-height: 1; margin-bottom: var(--space-xs); text-align: center; margin-bottom: 1rem; }
.card-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-sub); margin-bottom: 0.25em; text-align: center; }
.card-title { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; line-height: 1.4; margin-bottom: var(--space-xs); text-align: center; }
.card-body-title { font-size: var(--text-sm); font-weight: 700; margin-bottom: 0.75em; color: var(--color-text-sub); }
.card-title.styles { font-size: var(--text-xl); }
.card-catch { font-size: var(--text-sm); font-weight: 600; font-family: var(--font-serif); font-style: italic; color: var(--color-primary); margin-bottom: var(--space-xs); }
.card-sub { font-size: var(--text-sm); color: var(--color-text-sub); line-height: 1.9; }
.card-author { font-size: var(--text-xs); color: var(--color-text-sub); font-weight: 600; border-top: 1px solid var(--color-border); padding-top: var(--space-xs); margin-top: var(--space-sm); }

/* モディファイア */
.card--center { text-align: center; }
.card--accent-border { position: relative; }
.card--accent-border::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--color-primary); }

/* pillarカード番号バッジ */
.card-number {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-primary); color: var(--color-white);
    font-family: var(--font-serif);
    font-size: var(--text-lg); font-weight: 700;
    margin-bottom: var(--space-sm);
}

/* testimonialカード引用符 */
.card--quote { position: relative; }
.card--quote::before {
    content: '\201C';
    position: absolute; top: 0.02em; left: 0.4em;
    font-family: var(--font-serif); font-size: 4rem;
    color: var(--color-accent); line-height: 1; pointer-events: none;
}
.card--quote .card-body { padding-top: var(--space-md); position: relative; z-index: 1; }

/* スタイルカード：参加費ボックス */
.card-fee {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: var(--color-bg-warm);
    border-radius: var(--radius-sm);
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--text-sm);
}
.card-fee strong { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-primary); }
.notes-on-price { font-size: var(--text-xs); font-family: var(--font-sans); font-weight: 400; }

/* スタイルカード：詳細リンクエリア */
.card-link-area { padding: 0 var(--space-md) var(--space-md); }

/* 4. 共通UI部品 */

/* バッジ */
.badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-white); border: 1px solid var(--color-border); border-radius: 100px; padding: 0.4em 1em; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.badge-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-start; margin-top: var(--space-md); }
@media (max-width: 1023px) {
    .badge-group { justify-content: center; }
}

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 2em; border-radius: 100px; font-size: var(--text-base); font-weight: 700; cursor: pointer; border: none; text-decoration: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
.btn--primary { background: var(--color-primary); color: var(--color-white)!important; box-shadow: 0 4px 16px rgba(196,113,74,0.35); }
.btn--primary:hover { background: var(--color-primary-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196,113,74,0.45); }
.btn--outline { background: transparent; color: var(--color-white); border: 2px solid var(--color-white); font-size: var(--text-md); padding: 1em 2.5em; }
.btn--outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn--line { background: #06C755; color: var(--color-white); box-shadow: 0 4px 16px rgba(6,199,85,0.3); font-size: var(--text-md); padding: 1em 2.5em; }
.btn--line:hover { background: #05a847; transform: translateY(-2px); }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-start; margin-top: var(--space-md); }
.btn-group.cta { justify-content: center; }
@media (max-width: 1023px) {
    .btn-group { justify-content: center; }
}
.btn.w100 { width: 100%!important; }

/* チェックリスト */
.check-list { display: flex; flex-direction: column; gap: 0.5em; }
.check-list li { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--text-sm); line-height: 1.7; }
.check-list li::before {
    content: '';
    display: inline-block;
    width: 18px; height: 18px; min-width: 18px; margin-top: 2px;
    background: var(--color-secondary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
}

/* 画像プレースホルダー（ヒーロー・ギャラリー共通） */
.img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-bg-accent) 0%, var(--color-accent) 100%);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    gap: var(--space-sm);
    color: var(--color-text-sub); font-size: var(--text-sm);
}
.img-placeholder svg { width: 48px; height: 48px; opacity: 0.4; }

/* 5. スクロールアニメーション */
.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); }
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }

/* 6. ヘッダー・ナビゲーション */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h); background: rgba(250,250,247,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); z-index: 1000; transition: box-shadow var(--transition); }
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); height: 100%; display: flex; align-items: center; justify-content: space-between; }
.header-logo { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); line-height: 1.4; }
.header-logo span { display: block; font-size: var(--text-xs); font-family: var(--font-sans); font-weight: 400; color: var(--color-text-sub); letter-spacing: 0.05em; }
.header-mascot { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }
.header-logo-text { display: flex; flex-direction: column; font-size: 0.9em!important; font-family: var(--font-serif)!important; font-weight: 700!important; }
.header-logo-text span { font-size: 0.65em; }

.nav-pc { display: flex; align-items: center; gap: var(--space-md); }
.nav-pc a { font-size: var(--text-sm); color: var(--color-text); font-weight: 500; position: relative; padding-bottom: 2px; }
.nav-pc a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--color-primary); transition: width var(--transition); }
.nav-pc a:hover::after { width: 100%; }
.nav-pc .btn { padding: 0.5em 1.25em; font-size: var(--text-sm); font-weight: 700; }
/* 申し込みボタンは下線アニメーションを無効にしてホバー色変更のみ */
.nav-pc .btn::after { display: none; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; z-index: 1100; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer { display: none; position: fixed; top: var(--header-h); left: 0; width: 100%; background: var(--color-bg); border-bottom: 1px solid var(--color-border); z-index: 999; padding: var(--space-md); flex-direction: column; gap: var(--space-sm); box-shadow: var(--shadow-md); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: transform var(--transition), opacity var(--transition); }
.nav-drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-drawer a { font-size: var(--text-base); font-weight: 500; padding: 0.75em 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.nav-drawer a:last-child { border-bottom: none; }

/* 7. ヒーローセクション */
.hero { padding: calc(var(--header-h) + var(--space-xl)) var(--space-sm) var(--space-xl); background-color: var(--color-bg-warm); background-image: radial-gradient(ellipse at 80% 20%, rgba(196,113,74,0.08) 0%, transparent 60%), radial-gradient(ellipse at 10% 80%, rgba(122,158,126,0.10) 0%, transparent 55%); min-height: 90vh; display: flex; align-items: center; }
.hero-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.hero-text { max-width: 540px; }
.hero-eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; color: var(--color-primary); margin-bottom: var(--space-sm); text-transform: uppercase; }
.hero-title { font-family: var(--font-serif); font-size: var(--text-hero); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: var(--space-md); }
.hero-sub { font-size: var(--text-md); color: var(--color-text); line-height: 2.2; margin-bottom: var(--space-md); }
.hero-note { font-size: var(--text-xs); color: var(--color-text-sub); margin-top: var(--space-xs); }
.hero-visual { position: relative; }
.hero-visual .img-placeholder { box-shadow: var(--shadow-lg); }
.hero-visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 1023px) {
    .hero-note { text-align: center; }
}

/* 8. ギャラリーセクション */
.gallery { padding: var(--space-lg) var(--space-sm); background: var(--color-bg); }
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.gallery-grid .img-placeholder { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.gallery-grid .img-placeholder svg { width: 32px; height: 32px; }
.gallery-grid img { aspect-ratio: 4/3; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); width: 100%; object-fit: cover; transition: transform var(--transition), box-shadow var(--transition); }
.gallery-grid .img-placeholder:hover,
.gallery-grid img:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
/* 全画像を均等サイズに統一（1枚目の大スロット指定なし） */

/* 9. コンセプトセクション */
.concept-block { max-width: 680px; margin: 0 auto; text-align: center; }
.concept-worry { background: var(--color-white); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-md); text-align: left; margin: var(--space-md) 0; font-size: var(--text-sm); color: var(--color-text-sub); line-height: 2.2; }
.concept-body { font-size: var(--text-md); line-height: 2.2; }

/* 10. FAQ（アコーディオン） */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 1.1em var(--space-md); background: none; border: none; cursor: pointer; text-align: left; font-size: var(--text-base); font-weight: 700; color: var(--color-text); font-family: var(--font-sans); }
.faq-question:hover { background: var(--color-bg-warm); }
.faq-q-label { color: var(--color-primary); font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; flex-shrink: 0; }
.faq-icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; border: 2px solid var(--color-border); border-radius: 50%; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: var(--color-text); border-radius: 2px; transform: translate(-50%,-50%); transition: transform var(--transition), opacity var(--transition); }
.faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer-inner { padding: var(--space-sm) var(--space-md) var(--space-md) calc(var(--space-md) + 1.5em); font-size: var(--text-sm); color: var(--color-text-sub); line-height: 2; border-top: 1px solid var(--color-border); }

/* 11. CTAセクション */
.cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, #B56540 100%); padding: var(--space-xl) var(--space-sm); text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%); pointer-events: none; }
.cta-title { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-sm); }
.cta-body { color: rgba(255,255,255,0.88); font-size: var(--text-md); line-height: 2.2; margin-bottom: var(--space-md); }
.cta-note { font-size: var(--text-xs); color: rgba(255,255,255,0.7); margin-top: var(--space-sm); }
.cta-icon { font-size: 3rem; animation: floating 3s ease-in-out infinite; z-index: 2; margin: 0 auto; max-width: 200px;}

/* 12. フッター */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-txt); padding: var(--space-lg) var(--space-sm) var(--space-md); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.footer-brand { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; color: var(--color-white); line-height: 1.3; margin-bottom: 0.5em; }
.footer-tagline { font-size: var(--text-xs); color: var(--color-footer-txt); line-height: 1.8; }
.footer-links { display: flex; flex-direction: column; gap: 0.75em; }
.footer-links a { font-size: var(--text-sm); color: var(--color-footer-txt); transition: color var(--transition); }
.footer-links a:hover { color: var(--color-white); }
.footer-sns { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }
.footer-sns a { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-sm); color: var(--color-footer-txt); transition: color var(--transition); }
.footer-sns a:hover { color: var(--color-white); }
.footer-bottom { margin-top: var(--space-md); text-align: center; font-size: var(--text-xs); color: rgba(200,188,168,0.6); }

/* 13. フローティングUI */
.floating-side { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900; }
.floating-side-btn { display: flex; align-items: center; gap: 0.6em; background: var(--color-primary); color: var(--color-white); writing-mode: vertical-rl; text-orientation: mixed; padding: 1.2em 0.5em; padding-right: 0.8em; margin-right: -0.3em; font-size: var(--text-md); font-weight: 700; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: var(--shadow-md); transition: background var(--transition), transform var(--transition); white-space: nowrap; letter-spacing: 0.2em; }
.floating-side-btn:hover { background: var(--color-primary-dk); transform: translateX(-4px); }

.back-to-top { position: fixed; right: var(--space-md); bottom: var(--space-md); width: 48px; height: 48px; background: var(--color-text); color: var(--color-white); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 900; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity var(--transition), transform var(--transition), background var(--transition); }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary); }
.back-to-top svg, .back-top-sp svg { width: 20px; height: 20px; }

.floating-bar-sp { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 20px rgba(44,36,22,0.12); z-index: 900; padding: 0.6em var(--space-sm); gap: var(--space-xs); align-items: center; }
.floating-bar-sp .btn { flex: 1; padding: 0.75em 1em; font-size: var(--text-sm); }
.back-top-sp { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--color-text); color: var(--color-white); border: none; border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--shadow-sm); }

/* 14. レスポンシブ */
@media (max-width: 1023px) {
    .nav-pc { display: none; }
    .nav-toggle { display: flex; }
    .nav-drawer { display: flex; }
    .floating-side { display: none; }
    .back-to-top { right: var(--space-sm); bottom: var(--space-sm); }
    .hero { min-height: auto; }
    .hero-inner { grid-template-columns: 1fr; gap: var(--space-md); }
    .hero-eyebrow { text-align: center; }
    .hero-title { font-size: var(--text-hero); text-align: center; line-height: 1.4; }
    .hero-visual { max-width: 560px; margin: 0 auto; }
    .grid-3 { grid-template-columns: 1fr 1fr; }     /* 3列 → 2列 */
    /* .grid-2 はそのまま 2列 */
    .gallery-grid { grid-template-columns: repeat(3,1fr); }
    .footer-top { flex-direction: column; }
}

/* スマホ（〜767px） */
@media (max-width: 767px) {
 :root {
    --header-h: 56px;
    --text-hero: 2.2rem;
    --text-2xl: 1.6rem;
    --space-xl: 3.5rem;
    --space-lg: 2.5rem;
    }
    body { padding-bottom: 64px; }
    .floating-bar-sp { display: flex; }
    .back-to-top { display: none; }
    .grid-2 { grid-template-columns: 1fr; }        /* 2列 → 1列 */
    .grid-3 { grid-template-columns: 1fr; }        /* 2列 → 1列 */
    .gallery-grid { grid-template-columns: repeat(2,1fr); }
    .section { padding: var(--space-lg) var(--space-sm); }
    .footer-links { flex-direction: row; flex-wrap: wrap; gap: 0.5em 1.5em; }
    .cta-body { font-size: var(--text-base); }
}

/* ── アイコンの設定 -- */

/* 1. アイコンの基本設定（あなたの独自クラス） */
.icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;     /* font-sizeに連動させるため1em */
    height: 1em;
    vertical-align: -0.125em; /* 本家の多くが採用している基準値。必要に応じて0.15emに。 */
    flex-shrink: 0;
    contain: layout; /* ブラウザの計算負荷を軽減 */
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    min-height: 1em; /* 高さが計算されるまで「0」にならないようにする */
    line-height: 1; /* 0でも良いですが、1にすると文字との親和性が上がります */
    overflow: hidden; /* 中身がはみ出してレイアウトを壊すのを防ぐ */
}

.icon-svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor; /* 文字色と同じ色にする */
    display: block;
}

/* 2. 本家互換：サイズ指定（必要な倍数だけ残してもOK） */
.is-1x { font-size: 1em; }
.is-2x { font-size: 2em; }
.is-3x { font-size: 3em; }
.is-4x { font-size: 4em; }
.is-5x { font-size: 5em; }
.is-6x { font-size: 6em; }
.is-7x { font-size: 7em; }
.is-8x { font-size: 8em; }
.is-9x { font-size: 9em; }
.is-10x { font-size: 10em; }
/* 6x以上を実際に使わないなら削除してOKです */

/* 3. 本家互換：微調整サイズ */
.is-2xs { font-size: .625em; line-height: .1em; vertical-align: .225em; }
.is-xs { font-size: .75em; line-height: .08333em; vertical-align: .125em; }
.is-sm { font-size: .875em; line-height: .07143em; vertical-align: .05357em; }
.is-lg { font-size: 1.25em; line-height: .05em; vertical-align: -.075em; }
.is-xl { font-size: 1.5em; line-height: .04167em; vertical-align: -.125em; }
.is-2xl { font-size: 2em; line-height: .03125em; vertical-align: -.1875em; }

/* 4. 固定幅（リスト等でアイコンの幅を揃えたい時用） */
.is-fw { text-align: center; width: 1.25em; }