/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap");

:root
{
    --color-bg-dark: #0d0e26;
    --color-text-main: #ffffff;

    --font-heading-en: 'Josefin Sans', sans-serif;
    --font-heading-jp: 'Noto Serif JP', serif;
    --font-body-jp: 'M PLUS Rounded 1c', sans-serif;
}

/* =========================================

Defoult Header 処理

============================================ */
/* Lifhtningテーマのデフォルトヘッダー非表示 */
#site-header-container 
{
    display: none;
}

/* 上記ヘッダーメニュー下部の空白を削除 */
.site-body
{
    padding-top: 0px;
}

/* =========================================

背景装飾（ノイズ + 光の粒）

============================================ */

/* ノイズレイヤー（SVGノイズ） */
.stack-section::before
{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'>\
        <filter id='n' x='0%' y='0%' width='100%' height='100%'>\
        <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/>\
        <feColorMatrix type='saturate' values='0'/>\
        <feBlend mode='multiply' in2='SourceGraphic'/>\
        </filter>\
        <rect width='100%' height='100%' filter='url(%23n)' opacity='0.08'/>\
        </svg>");
    background-size: 300px 300px;
    background-repeat: repeat;
    z-index: 0;
    pointer-events: none;
}

/* 光の粒レイヤー */
.stack-section::after
{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1200px 800px at 20% 30%, rgba(255,255,255,0.06), transparent 70%),
        radial-gradient(1000px 700px at 80% 70%, rgba(0,229,255,0.08), transparent 70%),
        radial-gradient(800px 600px at 50% 50%, rgba(255,200,100,0.05), transparent 70%);
    background-attachment: fixed; /* スクロールで奥行き感 */
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

/* 背景をカードの下に置くための調整 */
.stack-pin,
.stack-frame,
.stack-card
{
    position: relative;
    z-index: 1;
}

/* =========================================

First View スタイル

============================================ */

/* トップビュー */
.text-dynamic
{
    background: var(--color-bg-dark);
    height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    /* 画面いっぱいに広げるための修正 */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: 1;
}

html body h1.wp-block-heading.is-style-vk-heading-plain.main-word#dynamic-word
{
	font-family: var(--font-heading-en);
    font-size: 4rem;
    letter-spacing: 0.1em;
    color: var(--color-text-main);
    transition: opacity 0.6s ease;
    margin-bottom: 0 !important;
}

.sub-jp
{
    font-family: var(--font-heading-jp);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 2rem;
    transition: opacity 0.6s ease;
}

/* サービスリンクの表示エリア（スマホ：1件表示、PC：グリッド） */
.service-links
{
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden; /* 横スクロールではなく1件だけ見せる */
    width: 100vw;
    box-sizing: border-box;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
}

/* 各サービスアイテム */
.service-item
{
    flex: 0 0 100vw;
    max-width: 100vw;
    display: none; /* 初期状態では非表示（JSで制御） */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    text-align: center;
    scroll-snap-align: start;
    transition: opacity 0.5s ease;
}

/* 表示中のアイテム用クラス（JSが付ける） */
.service-item.active
{
    display: flex;
}

/* タイトル（和） */
.service-ja
{
    font-family: var(--font-heading-jp);
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

/* タイトル（英） */
.service-en
{
    font-family: var(--font-heading-en);
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* PC表示時：3列に戻す */
@media screen and (min-width: 768px)
{
    .main-word
    {
        font-size: 3.2rem;
        margin-bottom: 0.5rem !important; /* ← 間隔を縮める */
    }

    .sub-jp
    {
        font-size: 2rem;
        margin-top: 0;         /* ← 上の余白を削除 */
        margin-bottom: 1rem;   /* 必要なら少し下を空ける */
    }
	
    .service-links
    {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        justify-content: center;
        gap: 2rem;
    }

    .service-item
    {
        display: flex !important; /* JS制御を無視して全表示 */
        flex: 0 0 30%;
        max-width: 320px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* 右下の会社名（ロゴ風） */
.site-name-bottom
{
    position: absolute;
    bottom: 10vh;
    right: 2rem;
    font-family: var(--font-heading-jp);
    font-size: 2.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    text-align: right;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.scroll-indicator
{
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    animation: bounce 1.8s infinite;
    margin-top: 2rem;
    font-family: var(--font-heading-en);
    letter-spacing: 0.15em;
}

@keyframes bounce
{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

@media screen and (max-width: 768px)
{
    .text-dynamic
    {
        transform: translateY(-10%);
    }

    .site-name-bottom
    {
        bottom: 12vh;
    }
}

/* =========================================

ハンバーガーメニュー

============================================ */

/* Lightningテーマのモバイル用ハンバーガーアイコンを非表示に */
.vk-mobile-nav-menu-btn 
{
    display: none;
}

/* =========================================
 
事業紹介エリア（フルブリード + 背景グラデ）
フォント＆カラー変数対応版

======================================== */

/* --- サイト共通のフォント/カラー（このセクション内でも効く） --- */
html, body
{
    background: var(--color-bg-dark);
    color: var(--color-text-main);
    font-family: var(--font-body-jp);
}

/* 英文だけ英見出しフォントを優先（必要に応じて .en クラス併用） */
:lang(en), .en
{
    font-family: var(--font-heading-en) !important;
}

/* 見出し系のデフォルトを和文セリフに（Noto Serif JP） */
h1, h2, h3, h4, h5, h6
{
    font-family: var(--font-heading-jp);
}

/* --- 安定したフルブリード用のvw変数 --- */
:root
{
    --fullvw: 100vw; /* フォールバック */
}
@supports (width: 100dvw)
{
    :root
    {
        --fullvw: 100dvw; /* 動的ビューポートでズレ防止 */
    }
}

/* セクション全体：画面幅ぶち抜き + 背景はCSS変数で段階変化（GSAPで補間） */
.stack-section
{
    /* 初期カラー（Stage A） */
    --bg1: #0d0e26;
    --bg2: #2c2f4a;

    position: relative;
    min-height: 300vh;
    background: linear-gradient(135deg, var(--bg1), var(--bg2));

    /* ▼ ここを変更（calc方式→中央合わせ方式） */
    box-sizing: border-box;
    width: 100vw;              /* 端末幅にフィット */
    left: 50%;                 /* 親の中央に基準を置く */
    right: auto;
    margin-left: -50vw;        /* 左に半分引き戻す→ビューポートにピタッ */
    margin-right: -50vw;

    /* セクション内の左右余白（幅には内包される） */
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);

    z-index: 1;
}

/* ピンで固定する中身（stickyは使わない：ScrollTriggerでpin） */
.stack-pin
{
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch !important; /* ← 親flexの圧縮回避（Lightning対策） */
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* 見出し（英語なので英見出しフォントを明示） */
.stack-heading
{
    font-family: var(--font-heading-en), var(--font-body-jp);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0;
    color: var(--color-text-main); /* 背景が濃いので白推奨 */
}

/* カードを重ねるためのフレーム（高さ潰れ対策を強制） */
.stack-frame
{
    position: relative;
    width: min(980px, 100%);
    height: clamp(460px, 68vh, 760px) !important;
    margin: 0 auto;
    isolation: isolate;
}

/* 各カード（重ねるので absolute） */
.stack-card
{
    position: absolute;
    inset: 0;
    height: 100% !important;   /* ← 潰れ防止 */
    overflow: hidden;

    border-radius: 20px;
    background: #fff;
    color: #1c1f2b;

    /* 初期は控えめの影：GSAPで最前面カードだけ強化する */
    box-shadow: 0 8px 26px rgba(10, 20, 60, 0.12);

    transform-origin: center center;
    will-change: transform, opacity, box-shadow, filter;
}

/* 内部レイアウト：左=テキスト、右=画像（斜めカット） */
.stack-card .card-inner
{
    height: 100% !important;   /* ← グリッドの行が潰れるのを防止 */
    display: grid;
    grid-template-columns: 1.15fr 0.85fr; /* 左広め、右やや狭め */
}

/* テキスト側 */
.stack-card .card-content
{
    display: grid;
    align-content: center;
    gap: 14px;
    padding: clamp(24px, 4vw, 40px);
    color: #0f1220; /* 白背景上の文字色は濃色 */
    font-family: var(--font-body-jp);
}

/* 画像側（右） */
.stack-card .card-media
{
    position: relative;
    overflow: hidden;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    /* 右側を斜めカット（上が細く、下が太いウェッジ形状） */
    clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
    isolation: isolate;
}

/* 画像上の透明グラデで文字側に溶かす */
.stack-card .card-media::before
{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13,14,38,0.0) 0%, rgba(13,14,38,0.15) 60%, rgba(13,14,38,0.35) 100%),
        radial-gradient(1200px 600px at 60% 20%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* 斜めの境界に細いネオンアクセントラインを入れる */
.stack-card .card-media::after
{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 4px;
    background: linear-gradient(180deg, rgba(0,229,255,0.0), rgba(0,229,255,0.7), rgba(0,229,255,0.0));
    filter: blur(0.5px) drop-shadow(0 0 6px rgba(0,229,255,0.6));
    transform: skewX(-12deg);
    pointer-events: none;
    opacity: 0.85;
}

/* タイトル・本文（フォント統一） */
.stack-title
{
    /* 見出しは和文セリフを主に（英数字混在でも締まる） */
    font-family: var(--font-heading-jp), var(--font-heading-en), var(--font-body-jp);
    font-size: clamp(20px, 3.2vw, 28px);
    letter-spacing: 0.04em;
    margin: 0;
    color: #0f1220;
}
.stack-text
{
    font-family: var(--font-body-jp);
    font-size: clamp(14px, 2.2vw, 16px);
    line-height: 1.8;
    margin: 0;
    color: #222635;
}

/* 初期の奥行き（しっかり差をつける） */
.card-1 { transform: translateY(0px)   scale(1);    }
.card-2 { transform: translateY(60px)  scale(0.965); }
.card-3 { transform: translateY(120px) scale(0.93);  }

/* ホバー（PCのみ任意）：ほんのりズーム＆コントラスト */
@media (hover: hover)
{
    .stack-card:hover .card-media
    {
        filter: saturate(110%) contrast(105%);
        transition: filter 0.35s ease;
    }
}

/* 変なリセット対策（どこかでline-height:0が効いてる場合の保険） */
.stack-card,
.stack-card * { line-height: normal; }

/* -------- Lightning / WPブロック対策（高さ潰れ＆幅制限の潰し） -------- */
.wp-block-group .stack-frame,
.wp-block-columns .stack-frame
{
    height: clamp(460px, 68vh, 760px) !important;
}

/* 横スクロールの保険（100vw使用時の副作用を殺す） */
html, body { overflow-x: hidden; }

/* ============================
   モバイル最適化
   ============================ */
@media (max-width: 767px)
{
    .stack-pin
    {
        padding: 18px 14px;
        gap: 16px;
    }

    .stack-heading
    {
        font-size: clamp(18px, 5.6vw, 22px);
        letter-spacing: 0.06em;
    }

    .stack-frame
    {
        width: 100%;
        height: clamp(420px, 68vh, 560px) !important;
    }

    .stack-card
    {
        border-radius: 18px;
        box-shadow: 0 6px 20px rgba(10, 20, 60, 0.14);
    }

    /* 画像→テキストの縦積みへ。カットは下辺だけ斜めに緩和 */
    .stack-card .card-inner
    {
        grid-template-columns: 1fr;        /* 縦積み */
        grid-template-rows: 180px 1fr;     /* 画像 → テキスト */
    }

    .stack-card .card-media
    {
        clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 100%); /* 下辺のみ斜め */
    }

    .stack-card .card-media::after
    {
        top: auto;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 4px;
        width: auto;
        transform: skewX(0deg);
        background: linear-gradient(90deg, rgba(0,229,255,0.0), rgba(0,229,255,0.7), rgba(0,229,255,0.0));
        filter: blur(0.5px) drop-shadow(0 0 6px rgba(0,229,255,0.6));
    }

    /* 初期の奥行きを少し控えめに（窮屈感を防止） */
    .card-2 { transform: translateY(40px) scale(0.975); }
    .card-3 { transform: translateY(80px) scale(0.95);  }
}

/* ===== TOPビューと業務紹介の間の空白を消す処理（GSAPが原因） ===== */
@media (max-width: 767px)
{
    /* 必要に応じて数値だけ微調整。まずはこれで様子見 */
    .stack-section
    {
        margin-top: clamp(-200px, -12vh, -60px) !important;
    }
}

/* =========================================

about us エリア（フォント変数対応版／色・アニメは従来のまま）

============================================ */

/* ※ フォントの読み込みは全体の:root側で行う想定
   :root で
   --font-heading-en, --font-heading-jp, --font-body-jp
   が定義済みであること。 */

:root
{
    --bg-deep-1: #0d0e26;
    --bg-deep-2: #1a1f3d;

    --accent-1: #7dd3fc; /* cyan */
    --accent-2: #a78bfa; /* violet */
}

/* デモ用（本番はテーマ側にあわせてOK） */
html, body
{
    margin: 0;
    padding: 0;
    background: var(--bg-deep-1);
    color: #fff;
    font-family: var(--font-body-jp);
}

/* ===== プロフィール（斜めスプリット） ===== */
.profile-section.split
{
    position: relative;
    height: 100vh;                    /* 画面ジャック */
    min-height: 620px;                /* 小さすぎ対策 */
    display: flex;
    align-items: center;
    padding: 0 24px;
    overflow: hidden;
}

/* 背景グラデ＋ノイズ */
.profile-bg
{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bg-deep-1), var(--bg-deep-2));
    z-index: 0;
}
.profile-bg::before
{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg width='240' height='240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='24' r='1'/%3E%3Ccircle cx='140' cy='120' r='1'/%3E%3Ccircle cx='220' cy='60' r='1'/%3E%3Ccircle cx='90' cy='200' r='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 240px;
}

/* 斜めスプリットレイヤー（右側） */
.diagonal
{
    position: absolute;
    inset: 0;
    /* 最終形（表示時）はこのポリゴン。入場時にGSAPで0→1 */
    clip-path: polygon(42% 0%, 100% 0%, 100% 100%, 34% 100%);
    background: linear-gradient(135deg, #101435, #1a2150);
    opacity: 0;           /* GSAPで 0 → 1 */
    z-index: 0;
    will-change: clip-path, opacity;
}

/* コンテンツ */
.profile-inner
{
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* 左：テキスト / 右：ビジュアル */
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

/* テキスト側 */
.profile-text .profile-heading-en
{
    font-family: var(--font-heading-en);
    font-size: 14px;
    letter-spacing: 0.22em;
    margin: 0 0 10px 0;
    opacity: 0; /* GSAP */
}
.profile-text .profile-company
{
    /* 会社名＝和見出し寄りで風格を出す */
    font-family: var(--font-heading-jp), var(--font-heading-en), var(--font-body-jp);
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 36px);
    margin: 0;
    line-height: 1.2;
    opacity: 0; /* GSAP */
}
.profile-text .profile-sub
{
    font-family: var(--font-heading-en);
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #cbd5e1;
    margin: 6px 0 18px 0;
    opacity: 0; /* GSAP */
}
.profile-text .profile-info
{
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}
.profile-text .profile-info li
{
    font-size: 15px;
    margin-bottom: 6px;
    opacity: 0; /* GSAP */
    font-family: var(--font-body-jp);
}
.profile-text .profile-catch
{
    font-size: 15px;
    line-height: 1.7;
    color: #e5e7eb;
    opacity: 0; /* GSAP */
    font-family: var(--font-body-jp);
}

/* 会社名：グラデ流し（控えめキラッ） */
.profile-company.gradient-sweep
{
    background: linear-gradient(90deg, #ffffff 0%, var(--accent-1) 50%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 20px rgba(124, 58, 237, 0.15));
    background-size: 220% auto;
    animation: companySweep 6s ease-in-out infinite;
}
@keyframes companySweep
{
    0%
    {
        background-position: 0% 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0% 50%;
    }
}

/* ビジュアル側（ロゴ円） */
.profile-visual
{
    display: flex;
    justify-content: center;
}
.logo-wrapper
{
    perspective: 900px; /* 軽い3Dの土台（将来ティルトを足すなら残しておく） */
}
.logo-placeholder
{
    width: clamp(140px, 18vw, 200px);
    height: clamp(140px, 18vw, 200px);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading-en);
    color: rgba(255,255,255,0.7);
    background:
        radial-gradient(120px 80px at 30% 30%, rgba(255,255,255,0.08), rgba(255,255,255,0)),
        radial-gradient(160px 120px at 70% 70%, rgba(124,58,237,0.14), rgba(124,58,237,0)),
        url('https://gachakin.com/wp-content/uploads/2025/08/7a970a9edd40bcb1ad14db236533a91b.png') center/contain no-repeat;
    backdrop-filter: blur(2px);
}

/* モバイル */
@media (max-width: 767px)
{
    .profile-section.split
    {
        height: auto;
        min-height: 100vh;
        padding: 40px 20px;
    }

    .profile-inner
    {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    /* 斜めレイヤーは主張を少し抑える */
    .diagonal
    {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 0.35; /* フェードで存在感だけ */
    }
}

/* =========================================

contact エリア（フォント変数対応版／色は従来のまま）

============================================ */
/* ===== CONTACT styles ===== */
:root
{
    --bg1: #0d0e26;
    --bg2: #1a1f3d;
}

html, body
{
    margin: 0;
    font-family: var(--font-body-jp);
    color: #fff;
    background: #0b0f22;
}

.contact-section
{
    position: relative;
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--bg1), var(--bg2));
    color: #fff;
    overflow: hidden;
}

.contact-bg
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='240' height='240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='24' r='1'/%3E%3Ccircle cx='140' cy='120' r='1'/%3E%3Ccircle cx='220' cy='60' r='1'/%3E%3Ccircle cx='90' cy='200' r='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 240px;
    opacity: 0.35;
}

.contact-inner
{
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.contact-text .contact-heading-en
{
    font-family: var(--font-heading-en), var(--font-body-jp);
    font-size: 16px;
    letter-spacing: 0.18em;
    margin: 0 0 10px 0;
    opacity: 0; /* GSAPで出す */
}

.contact-lead
{
    font-family: var(--font-body-jp);
    font-size: 16px;
    line-height: 1.8;
    margin: 8px 0 18px 0;
    opacity: 0; /* GSAP */
}

.contact-ctas
{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    opacity: 0; /* GSAP */
}

/* ボタン */
.btn-primary,
.btn-secondary
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    will-change: transform;
    font-family: var(--font-body-jp);
}

.btn-primary
{
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    color: #0b0f22;
    box-shadow: 0 12px 40px rgba(96,165,250,0.22);
}
.btn-primary:hover
{
    transform: translateY(-1px);
    box-shadow: 0 16px 48px rgba(96,165,250,0.28);
}

.btn-secondary
{
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
}
.btn-secondary:hover
{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.18);
}

/* フォーム（デモでは非表示） */
.contact-form
{
    display: none;
    background: rgba(255,255,255,0.06);
    padding: 18px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    opacity: 0; /* GSAP対象にするなら display:block にして */
    font-family: var(--font-body-jp);
}
.contact-form input,
.contact-form textarea
{
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(13,14,38,0.35);
    color: #fff;
    outline: none;
    font-size: 14px;
    margin-bottom: 12px;
    font-family: var(--font-body-jp);
}
.contact-form button
{
    width: 100%;
}

/* レイアウト（モバイル） */
@media (max-width: 767px)
{
    .contact-inner
    {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .contact-section
    {
        padding: 56px 18px;
    }
	    .contact-ctas
    {
        justify-content: center; /* ボタンを中央に配置 */
    }
}