/*
Theme Name: studio-tachimachi-child
Template: arkhe
Description: STUDIO Tachimachi専用子テーマ
Version: 1.0.0
*/

@charset "utf-8";

/* ==============================================
   1. 基本設定・共通変数
   ============================================== */
:root {
    --color-primary: #4c6cb3;       /* メインカラー (青) */
    --color-primary-hover: #365299; /* 濃い青 */
    --color-primary-light: #eef2f9; /* 薄い青背景 */
    --color-secondary: #8d6e63;     /* 茶系（アクセント） */
    --color-accent: #f59e0b;        /* オレンジ（強調） */
    --bg-light: #fcfbf9;
    --text-main: #333333;
    --text-secondary: #595959;
    --font-display: "Noto Sans JP", "sans-serif";
}

/* --- リセット & 基本スタイル --- */
.l-main-content * {
    box-sizing: border-box;
}

.l-main-content {
    width: 100%;
    overflow-x: hidden;
    margin-top: 0;
}

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

/* Material Icons 調整 */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.u-d-block { display: block; }

/* PC/SP 切り替えユーティリティ */
@media (min-width: 768px) {
    .u-md-hidden { display: none !important; }
    .u-md-inline { display: inline !important; }
}
@media (max-width: 767px) {
    .u-md-hidden { display: inline !important; }
    .u-md-inline { display: none !important; }
}

/* 文字詰め（PC/SP共通で読みやすく） */
body {
    font-feature-settings: "palt";
}


/* ==============================================
   2. アニメーション定義 (共通)
   ============================================== */
/* スクロールアニメーション (.js-scroll-fade) */
.js-scroll-fade {
    opacity: 1; /* JS無効時対策 */
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-scroll-fade.is-hidden {
    opacity: 0;
    transform: translateY(40px);
}
.js-scroll-fade.is-active {
    opacity: 1;
    transform: translateY(0);
}


/* ==============================================
   3. ローディング画面
   ============================================== */
#loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: #ffffff; /* 白背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loading.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.p-loading__content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-loading__img {
    width: 120px;
    height: auto;
    display: block;
    opacity: 0;
    /* 回転＆バウンドアニメーション */
    animation: richEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes richEntrance {
    0% { opacity: 0; transform: scale(0.5) rotate(-30deg); }
    60% { opacity: 1; transform: scale(1.1) rotate(5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}


/* ==============================================
   4. ヘッダー周辺 (PCヘッダー・ナビゲーション)
   ============================================== */

/* --- ヘッダー右側のお問い合わせエリア (PC) --- */
.l-header__contact-area {
    display: none; /* SPでは非表示 */
}

@media (min-width: 1024px) {
    .l-header__contact-area {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: 24px;
    }

    /* 電話番号ボックス */
    .l-header__tel-box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.2;
    }
    .l-header__tel-box .label {
        font-size: 10px;
        font-weight: 700;
        color: var(--color-primary);
    }
    .l-header__tel-box .tel {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-main);
        text-decoration: none;
        font-family: sans-serif;
    }

    /* お問い合わせボタン */
    .l-header__btn-contact {
        display: flex;
        align-items: center;
        gap: 6px;
        background-color: var(--color-primary);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 4px;
        text-decoration: none;
        transition: opacity 0.3s;
    }
    .l-header__btn-contact:hover {
        opacity: 0.8;
        color: #fff;
    }
}

/* --- グローバルメニュー (.c-gnav) ホバーエフェクト --- */
@media (min-width: 1024px) {
    .c-gnav a {
        position: relative;
        display: inline-block;
        transition: color 0.3s ease;
        text-decoration: none;
        padding-bottom: 4px;
        font-weight: 700; 
    }
    .c-gnav a:hover {
        color: var(--color-primary);
    }
    /* 下線アニメーション */
    .c-gnav a::after {
        content: '';
        position: absolute;
        bottom: 8px; 
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: var(--color-primary);
        transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
    .c-gnav a:hover::after {
        width: 80%;
    }
}


/* ==============================================
   5. ドロワーメニュー (SPメニュー)
   ============================================== */
.p-drawer__inner {
    background-color: #fff;
    padding-top: 20px;
}

/* ロゴエリア */
.p-drawer__logo-area {
    padding: 10px 20px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.c-drawer-logo-link img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* メニューリスト */
.c-drawerNav .menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px solid #f9fafb;
    text-decoration: none;
}
.c-drawerNav .menu-item a::after {
    content: 'arrow_forward_ios';
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    color: #d1d5db;
}

/* フッター（お問い合わせエリア） */
.p-drawer__footer {
    margin-top: 32px;
    padding: 30px 20px 40px;
    background-color: #fcfbf9;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}
.p-drawer__telBox { margin-bottom: 20px; }
.p-drawer__telBox .label { font-size: 12px; font-weight: 700; color: var(--color-secondary); display: block; margin-bottom: 4px; }
.p-drawer__telBox .tel { font-size: 26px; font-weight: 700; color: var(--color-primary); text-decoration: none; display: block; line-height: 1.2; }
.p-drawer__telBox .note { font-size: 10px; color: var(--text-secondary); margin-top: 4px; display: block; }

.p-drawer__contactBtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #fff; font-weight: 700; border-radius: 4px;
    text-decoration: none; box-shadow: 0 4px 10px rgba(76, 108, 179, 0.3);
}

/* ==============================================
   6. トップページ: Hero Section (KV)
   ============================================== */
.p-hero {
    width: 100%;
    background-color: #f1f5f9;
    position: relative;
    overflow: hidden;
}

.p-hero__inner {
    position: relative;
    width: 100%;
    /* --- 修正: スマホの基本高さを高く変更 --- */
    height: 85vh; 
    min-height: 600px;
}
@media (min-width: 768px) { 
    .p-hero__inner { 
        height: 650px; 
        min-height: auto; /* PCは固定高さ */
    } 
}

/* 背景画像エリア */
.p-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kvZoom 20s infinite alternate linear;
}
@keyframes kvZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* オーバーレイ */
.p-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.85) 100%);
    z-index: 1;
}
@media (min-width: 768px) {
    .p-hero__overlay {
        background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.1) 100%);
    }
}

/* --- KV内 スクロールダウン表示 --- */
.p-scrolldown {
    position: absolute;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.p-scrolldown span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    writing-mode: horizontal-tb; /* 横書き強制 */
    animation: fadeBlink 2s infinite;
}

.p-scrolldown::after {
    content: '';
    width: 1px; height: 60px;
    background: rgba(76, 108, 179, 0.2);
    position: relative; overflow: hidden;
}

.p-scrolldown::before {
    content: '';
    position: absolute; bottom: 0; left: 50%;
    width: 1px; height: 60px;
    background: var(--color-primary);
    animation: scrollLine 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    50.1% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes fadeBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 下端のぼかし */
.p-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100px;
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1; pointer-events: none;
}
@media (min-width: 768px) { .p-hero::after { height: 150px; } }

/* コンテンツ */
.p-hero__content {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    max-width: 1120px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center;
}
@media (min-width: 768px) { .p-hero__content { padding: 0 32px; } }

.p-hero__text-box {
    width: 100%; max-width: 700px;
    margin-top: 40px; /* スマホ初期値 */
}
@media (min-width: 768px) { .p-hero__text-box { margin-top: 80px; } }

.p-hero__title {
    color: var(--text-main);
    font-size: 28px; font-weight: 700; line-height: 1.3;
    letter-spacing: 0.05em; margin: 10px 0 16px;
    text-shadow: 2px 2px 0px #fff;
}
@media (min-width: 768px) { .p-hero__title { font-size: 56px; margin: 80px 0 24px; line-height: 1.25; } }

.p-hero__title .text-line {
    display: block; opacity: 0; transform: translateY(20px);
    animation: fadeUp 0.8s forwards;
}
.p-hero__title .text-line:nth-child(1) { animation-delay: 0.2s; }
.p-hero__title .text-line:nth-child(2) { animation-delay: 0.5s; }

.p-hero__desc {
    color: var(--color-primary);
    font-size: 14px; font-weight: 700; line-height: 1.6; margin: 0;
    opacity: 0; transform: translateY(20px);
    animation: fadeUp 0.8s forwards; animation-delay: 0.8s;
    background: rgba(255, 255, 255, 0.8); padding: 8px 12px;
    border-radius: 4px; display: inline-block;
}
@media (min-width: 768px) { .p-hero__desc { font-size: 22px; background: transparent; padding: 0; } }

.p-hero__btn-wrapper {
    margin-top: 24px; opacity: 0; transform: translateY(20px);
    animation: fadeUp 0.8s forwards; animation-delay: 1.2s; text-align: center;
}
@media (min-width: 768px) { .p-hero__btn-wrapper { margin-top: 32px; text-align: left; } }

.c-btn-hero {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
    height: 50px; padding: 0 30px; border-radius: 50px;
    box-shadow: 0 4px 15px rgba(76, 108, 179, 0.4);
    transition: all 0.3s ease; width: 100%; max-width: 320px;
}
@media (min-width: 768px) { .c-btn-hero { width: auto; height: 56px; padding: 0 40px; } }
.c-btn-hero:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(76, 108, 179, 0.5); color: #fff; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* KV スマホ修正 */
@media (max-width: 767px) {
    .p-hero__content { justify-content: center; text-align: center; }
    .p-hero__text-box { margin: 80px auto 0; width: 100%; }
    .p-hero__title { font-size: 28px; line-height: 1.4; }
    .p-hero__desc { text-align: center; display: inline-block; }
    .p-hero__btn-wrapper { text-align: center; margin-top: 24px; }
    .c-btn-hero { margin: 0 auto; }
    
    /* --- 修正: 下部の余白とScroll位置の調整 --- */
    .p-hero__inner { 
        padding-bottom: 100px; /* Scrollと被らないよう余白確保 */
    }
    .p-scrolldown { bottom: 15px; }
    .p-scrolldown::after, .p-scrolldown::before { height: 35px; }
    .p-scrolldown span { font-size: 10px; margin-bottom: 5px; }
}

.p-hero__sub-title {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
    opacity: 0;
    animation: fadeUp 0.8s forwards;
}
@media (min-width: 768px) { .p-hero__sub-title { font-size: 18px; } }

/* --- トップKV修正用CSS --- */

/* 1. タイトル調整 */
.p-hero__title .title-sub {
    font-size: 16px; /* 小さく */
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}
@media (min-width: 768px) { 
    .p-hero__title .title-sub { font-size: 24px; margin-bottom: 10px; } 
}

.p-hero__title .title-main {
    font-size: 40px; /* 大きく！ */
    font-weight: 700;
    display: block;
    color: var(--color-primary); /* 必要なら色変更 */
    line-height: 1.2;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.8); /* 読みやすく */
}
@media (min-width: 768px) { 
    .p-hero__title .title-main { font-size: 64px; } 
}


/* 2. 3本柱（キャッチ）の強調 */
.hero-catch {
    font-size: 20px; /* 文字サイズアップ */
    font-weight: 700;
    color: #e67e22; /* 目立つオレンジ色に変更 */
    background: rgba(255, 255, 255, 0.9); /* 白背景を敷いて視認性アップ */
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
@media (min-width: 768px) { 
    .hero-catch { font-size: 28px; padding: 8px 16px; margin-bottom: 16px; } 
}

/* 運営会社表記を控えめに */
.hero-company {
    font-size: 0.8em;
    opacity: 0.9;
    display: block;
    margin-top: 10px;
}

/* 1. タイトル調整（サブ：地域共生不動産相談室） */
.p-hero__title .title-sub {
    display: inline-block;  /* または block */
    white-space: nowrap;    /* ★重要：絶対に折り返さない */
    
    /* 文字サイズ：基本16pxだが、画面が狭い時は自動で縮小してはみ出しを防ぐ */
    font-size: clamp(11px, 3.8vw, 16px); 
    
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.05em; /* 改行を防ぐため、文字間隔を少しだけ詰める */
    color: var(--text-main); /* 必要に応じて色を指定 */
}

/* PC（タブレット以上）の時のサイズ */
@media (min-width: 768px) { 
    .p-hero__title .title-sub { 
        font-size: 24px; /* PCなら大きいので固定サイズでOK */
        margin-bottom: 10px;
        letter-spacing: 0.1em; /* PCなら広げても大丈夫 */
    } 
}


/* ==============================================
   7. 固定ボタン (右下FAB)
   ============================================== */
.p-fixBtnWrap {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 16px; align-items: center;
}

.c-fixBtn {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    color: #fff; cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    position: relative;
    overflow: visible !important;
}
.c-fixBtn:active { transform: translateY(2px); }
.c-fixBtn .material-symbols-outlined { font-size: 28px; }

/* Phone */
.c-fixBtn.-phone { background: linear-gradient(135deg, #f59e0b, #d97706); }
.c-fixBtn.-phone .material-symbols-outlined { animation: phoneRinging 3s infinite ease-in-out; }
@keyframes phoneRinging {
    0%, 90% { transform: rotate(0); } 92% { transform: rotate(-15deg); }
    94% { transform: rotate(15deg); } 96% { transform: rotate(-15deg); }
    98% { transform: rotate(15deg); } 100% { transform: rotate(0); }
}

/* PageTop */
.c-fixBtn.-pagetop {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    opacity: 1 !important; visibility: visible !important;
}

/* PC/SP Switch */
@media (min-width: 768px) {
    .c-fixBtn.-phone { display: none; }
}
@media (max-width: 767px) {
    .c-fixBtn.-phone { display: flex; }
    .c-fixBtn__bubble {
        position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
        background-color: #333; color: #fff; font-size: 10px; font-weight: 700;
        padding: 4px 8px; border-radius: 4px; white-space: nowrap;
        opacity: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.2); pointer-events: none;
    }
    .c-fixBtn__bubble::after {
        content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
        border-style: solid; border-width: 4px 4px 0 4px;
        border-color: #333 transparent transparent transparent;
    }
}


/* ==============================================
   8. トップページ: セクション共通 (Intro / Philosophy...)
   ============================================== */

/* --- Intro Section --- */
.p-intro { 
    padding: 80px 20px 100px; 
    background-color: #ffffff; 
}
@media (min-width: 768px) { .p-intro { padding: 140px 32px; } }

.p-intro__inner { 
    width: 100%; max-width: 800px; margin: 0 auto; text-align: center; 
}

/* 画像アイコン装飾 */
.p-intro__icon-wrapper {
    display: inline-block;
    background: transparent; 
    padding: 0;
    border-radius: 0;
    margin-bottom: 24px;
}
.p-intro__icon-img {
    width: 80px;
    height: auto;
    display: block;
}

.p-intro__lead {
    font-size: 20px; font-weight: 700; color: var(--color-text-main);
    margin-bottom: 32px; line-height: 1.8;
}
@media (min-width: 768px) { .p-intro__lead { font-size: 28px; line-height: 1.6; } }

.p-intro__text { 
    font-size: 15px; line-height: 2.2; text-align: left; margin-bottom: 50px; 
    color: var(--color-text-main);
}
@media (min-width: 768px) { .p-intro__text { font-size: 16px; text-align: center; } }

.u-sp-only { display: block; }
@media (min-width: 768px) { .u-sp-only { display: none; } }


/* --- Intro CTA (Center Design) --- */
.p-intro__cta {
    display: flex;
    flex-direction: column; /* スマホは縦積み */
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary); /* ブランドカラー */
    color: #fff;
    padding: 32px 24px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(76, 108, 179, 0.25);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center; /* テキスト中央揃え */
    gap: 16px;
    max-width: 600px; /* 横に広がりすぎないように制限 */
    margin: 0 auto; /* 中央配置 */
}
@media (min-width: 768px) {
    .p-intro__cta {
        flex-direction: row; /* PCは横並び */
        padding: 40px;
        gap: 30px;
        text-align: left; /* PCのみ左揃えにするか、中央のままにするか */
        /* ご要望の「中央寄せデザイン」に合わせてPCも中央寄せ感を維持しつつ横並び */
        text-align: center; 
    }
}

.p-intro__cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(76, 108, 179, 0.35);
}

.p-intro__cta-content { 
    display: flex; flex-direction: column; align-items: center; 
}
@media (min-width: 768px) { 
    /* PCで横並びにする場合、テキストコンテンツとアイコンを並べる */
    .p-intro__cta-content { align-items: center; } 
    /* もしPCで「テキスト」と「アイコン」を横並びにするなら flex-direction: row ですが、
       テキスト中央寄せデザインなら縦積みorテキスト横アイコンのバランスが良いです。
       今回は「中央寄せ」を優先し、コンテンツ全体を中央に置きます。 */
}

.cta-head {
    font-size: 18px; font-weight: 700; margin: 0 0 8px;
    color: #fff;
    line-height: 1.4;
}
@media (min-width: 768px) { .cta-head { font-size: 22px; } }

.cta-desc {
    font-size: 14px; margin: 0; opacity: 0.9; line-height: 1.6;
    color: #fff;
}
@media (min-width: 768px) { .cta-desc { font-size: 15px; } }

.cta-icon {
    font-size: 28px;
    background: rgba(255,255,255,0.2);
    padding: 12px;
    border-radius: 50%;
    transition: background 0.3s;
    flex-shrink: 0;
}
.p-intro__cta:hover .cta-icon { background: rgba(255,255,255,0.3); }


/* --- Philosophy Section --- */
.p-philosophy { 
    padding: 100px 20px; 
    background-color: #f1f5f9; 
    position: relative; 
}
@media (min-width: 768px) { .p-philosophy { padding: 140px 32px; } }

.p-philosophy::before, .p-philosophy::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 60px; z-index: 1; pointer-events: none;
}
@media (min-width: 768px) { .p-philosophy::before, .p-philosophy::after { height: 100px; } }
.p-philosophy::before { top: 0; background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }
.p-philosophy::after { bottom: 0; background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }

.p-philosophy__inner { 
    max-width: 1120px; margin: 0 auto; width: 100%; position: relative; z-index: 2; 
}

.p-section-header { text-align: center; margin-bottom: 40px; }
.p-section-header span { 
    color: var(--color-primary); font-weight: 700; font-size: 12px; display: block; margin-bottom: 8px; letter-spacing: 0.1em; 
}
.p-section-header h2 { 
    font-size: 22px; font-weight: 700; color: var(--color-text-main); margin: 0; 
}
@media (min-width: 768px) { .p-section-header h2 { font-size: 32px; } }

.p-grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .p-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.c-card {
    background-color: #ffffff; padding: 32px 24px; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column;
    align-items: center; transition: transform 0.3s;
}
.c-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.c-card__icon { 
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; 
}
.c-card__icon.is-blue { background-color: #eff6ff; color: var(--color-primary); }
.c-card__icon.is-orange { background-color: #fff7ed; color: var(--color-secondary); }
.c-card__icon span { font-size: 32px; }

.c-card__title { 
    font-size: 18px; font-weight: 700; color: var(--color-text-main); margin-bottom: 16px; text-align: center; line-height: 1.4; 
}
.c-card__text { 
    font-size: 14px; line-height: 1.8; text-align: left; width: 100%; color: var(--color-text-sub); 
}


/* --- Service Teaser Section --- */
.p-service { 
    padding: 60px 20px; 
    background-color: #ffffff; 
    border-top: 1px solid rgba(0,0,0,0.05); 
}
@media (min-width: 768px) { .p-service { padding: 120px 32px; } }

.p-service__inner { 
    max-width: 1000px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; 
}
@media (min-width: 768px) { .p-service__inner { flex-direction: row; gap: 80px; align-items: center; } }

.p-service__img-box, .p-service__text-box { width: 100%; }
@media (min-width: 768px) { .p-service__img-box, .p-service__text-box { width: 50%; } }

.p-service__img { 
    width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
}

.p-service__label { 
    color: var(--color-primary); font-weight: 700; font-size: 12px; display: block; margin-bottom: 8px; 
}
.p-service__title { 
    font-size: 24px; font-weight: 700; color: var(--color-text-main); margin: 0 0 16px; 
}
@media (min-width: 768px) { .p-service__title { font-size: 36px; margin-bottom: 24px; } }

.p-service__desc { 
    color: var(--color-text-sub); line-height: 1.8; margin-bottom: 32px; font-size: 15px; 
}

.c-btn-arrow {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #fff; font-weight: 700; height: 50px; border-radius: 4px;
    box-shadow: 0 4px 10px rgba(76, 108, 179, 0.3); text-decoration: none; width: 100%;
}
@media (min-width: 768px) { .c-btn-arrow { display: inline-flex; width: auto; height: 56px; padding: 0 40px; } }
.c-btn-arrow:hover { transform: translateY(-2px); color: #fff; }


/* --- Company Section --- */
.p-company { 
    padding: 60px 20px; 
    background-color: #f1f5f9; 
    border-top: 1px solid rgba(0,0,0,0.05); 
}
@media (min-width: 768px) { .p-company { padding: 80px 32px; } }

.p-company__inner { max-width: 800px; margin: 0 auto; width: 100%; }

.p-company__title { 
    font-size: 22px; font-weight: 700; color: var(--color-text-main); margin: 0 0 32px; text-align: center; 
}
@media (min-width: 768px) { .p-company__title { font-size: 24px; margin-bottom: 40px; } }

.c-company-card { 
    background-color: #ffffff; padding: 32px 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
}
@media (min-width: 768px) { .c-company-card { text-align: center; padding: 56px; } }

.c-company-card__name { 
    font-size: 20px; font-weight: 700; color: var(--color-primary); margin: 0 0 8px; text-align: center; 
}
@media (min-width: 768px) { .c-company-card__name { font-size: 22px; } }

.c-company-card__license { 
    font-size: 13px; color: var(--color-text-sub); margin: 0 0 32px; text-align: center; 
}

.c-company-info-list { 
    display: flex; flex-direction: column; gap: 16px; color: var(--color-text-main); margin-bottom: 32px; 
}

.c-info-row { 
    display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; word-break: break-all; 
}
@media (min-width: 768px) { .c-info-row { justify-content: center; align-items: center; font-size: 16px; } }

.c-info-row span.material-symbols-outlined { color: var(--color-secondary); flex-shrink: 0; }

.c-info-divider { display: none; }
@media (min-width: 768px) { .c-info-divider { display: inline; color: #d1d5db; margin: 0 8px; } }

.c-btn-mail {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #333; color: #fff; font-weight: 700; height: 50px;
    border-radius: 4px; transition: all 0.3s; width: 100%; text-decoration: none;
}
@media (min-width: 768px) { .c-btn-mail { width: auto; display: inline-flex; height: 56px; padding: 0 48px; } }
.c-btn-mail:hover { background-color: #555; transform: translateY(-2px); color: #fff; }
/* ==============================================
   9. サービス紹介・お問い合わせ (Intro / List / CTA)
   ============================================== */
/* Intro Section (Shared Rich Style) */
.p-service-intro, .p-contact-intro {
    padding: 0px 20px 80px;
    background-color: #fff;
    background-image: radial-gradient(#eef2f9 1px, transparent 1px);
    background-size: 20px 20px;
    text-align: center;
}
.p-service-intro__inner, .p-contact-intro__inner { max-width: 800px; margin: 0 auto; }

.p-service-intro__heading, .p-contact-intro__heading {
    font-size: 26px; font-weight: 700; color: var(--color-text-main);
    line-height: 1.8; margin-bottom: 0;
}
.p-contact-intro__heading { font-size: 32px; margin-bottom: 40px; color: var(--color-primary); } /* Contact専用調整 */

.p-service-intro__heading .highlight {
    color: var(--color-primary);
    background: linear-gradient(transparent 70%, #dbeafe 70%);
    padding: 0 4px; display: inline-block;
}

/* Service Intro Box */
.p-intro-box, .p-contact-intro__box {
    position: relative; padding: 60px 40px; background: #fff;
    border-radius: 4px; box-shadow: 0 10px 40px rgba(73, 105, 175, 0.1);
    border-top: 4px solid var(--color-primary); text-align: center;
}
/* Contact Intro Box Adjustment */
.p-contact-intro__box {
    padding: 30px; border: 2px solid var(--color-primary-light);
    border-top: 2px solid var(--color-primary-light); /* Reset top border */
    border-radius: 12px;
}
.p-contact-intro__box::before {
    content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    border-style: solid; border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--color-primary-light) transparent;
}

.p-service-intro__divider {
    width: 60px; height: 3px; background-color: var(--color-accent);
    margin: 30px auto; border-radius: 2px;
}
.p-service-intro__text, .p-contact-intro__text {
    font-size: 16px; line-height: 2; color: var(--color-text-sub);
    display: inline-block; text-align: left;
}
.p-contact-intro__text { color: var(--color-text-main); margin-bottom: 40px; text-align: center; }

/* Service List */
.p-service-list { background-color: #f3f4f6; padding: 80px 20px 120px; }
.p-service-list__inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; }
.c-service-item {
    background: #fff; padding: 40px; border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); border: 1px solid #fff;
    display: flex; align-items: center; gap: 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.c-service-item.is-reverse { flex-direction: row-reverse; }
@media (min-width: 768px) {
    .c-service-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(73, 105, 175, 0.15); border-color: #eef2f9; }
}
.c-service-item__img-box { flex: 1; width: 50%; box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-radius: 12px; overflow: hidden; }
.c-service-item__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.c-service-item__content { flex: 1; width: 50%; }
.c-service-item__header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; border-bottom: 2px solid var(--color-bg-light); padding-bottom: 16px; }
.c-service-item__header .icon { font-size: 40px; color: var(--color-primary); background: #eef2f9; padding: 8px; border-radius: 8px; }
.c-service-item__header .title { font-size: 22px; font-weight: 700; color: var(--color-text-main); line-height: 1.4; margin-top: 4px; }
.c-service-item__desc { font-size: 15px; line-height: 1.8; color: var(--color-text-main); margin-bottom: 24px; }
.c-service-check-list { list-style: none; padding: 20px; margin: 0; background-color: var(--color-bg-light); border-radius: 8px; }
.c-service-check-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--color-primary); }
.c-service-check-list .check { font-size: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* Contact Info Cards */
.p-contact-info { padding: 0 20px 80px; background: transparent; }
.p-contact-info__inner { max-width: 900px; margin: 0 auto; }
.p-contact-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.c-contact-card {
    background: #fff; border-radius: 16px; padding: 40px 30px;
    text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.c-contact-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(73, 105, 175, 0.15); border-color: var(--color-primary-light); }
.c-contact-card__icon-box { width: 70px; height: 70px; background-color: var(--color-primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--color-primary); }
.c-contact-card .title { font-size: 16px; font-weight: 700; color: var(--color-text-sub); margin-bottom: 12px; }
.tel-link { font-size: 32px; font-weight: 700; color: var(--color-text-main); letter-spacing: 0.05em; font-family: sans-serif; text-decoration: none; }
.mail-link { font-size: 20px; font-weight: 700; color: var(--color-primary); word-break: break-all; text-decoration: none; }
.c-contact-card .note { font-size: 13px; color: var(--color-text-sub); margin-top: 12px; display: block; }

/* CTA Section */
.p-cta-section { padding: 80px 20px; background-color: #eef2f9; }
.p-cta-section__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.p-cta-section__title { font-size: 26px; font-weight: 700; color: var(--color-primary); margin-bottom: 24px; }
.p-cta-section__desc { font-size: 16px; line-height: 1.8; margin-bottom: 48px; display: inline-block; text-align: left; }
.p-cta-box {
    background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex; justify-content: space-between; align-items: center; gap: 40px;
}
.p-cta-box__tel { flex: 1; text-align: center; }
.p-cta-box__tel .tel-number { font-size: 32px; font-weight: 700; color: var(--color-text-main); text-decoration: none; display: block; pointer-events: none; }
.p-cta-box__btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #fff; text-decoration: none; padding: 16px 24px; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(73, 105, 175, 0.3); transition: transform 0.3s; height: 80px;
}
.p-cta-box__btn:hover { transform: translateY(-2px); }
.p-cta-box__btn .btn-text { font-size: 18px; font-weight: 700; margin: 0; }
.p-cta-box__btn .btn-sub { font-size: 12px; margin: 4px 0 0; }

/* Service & Contact - SP調整 */
@media (max-width: 767px) {
    .p-service-intro, .p-contact-intro { padding: 0px 16px; }
    .p-intro-box, .p-contact-intro__box { padding: 30px 20px; }
    .p-service-intro__heading { font-size: 20px; }
    .p-contact-intro__heading { font-size: 24px; }
    .p-service-intro__text, .p-contact-intro__text { font-size: 14px; text-align: justify; }
    .p-contact-intro__text br { display: none; }
    
    .p-service-list { padding: 60px 0 80px; }
    .p-service-list__inner { padding: 0 16px; gap: 60px; }
    .c-service-item { flex-direction: column; gap: 24px; padding: 24px 20px; border-radius: 16px; }
    .c-service-item.is-reverse { flex-direction: column; }
    .c-service-item__img-box, .c-service-item__content { width: 100%; }
    .c-service-item__header .title { font-size: 18px; }

    .p-contact-info__grid { grid-template-columns: 1fr; gap: 20px; }
    .c-contact-card { padding: 30px 20px; flex-direction: row; text-align: left; gap: 20px; justify-content: flex-start; }
    .c-contact-card__icon-box { width: 50px; height: 50px; margin-bottom: 0; flex-shrink: 0; }
    .c-contact-card__icon-box .icon { font-size: 24px; }
    .tel-link { font-size: 24px; } .mail-link { font-size: 16px; }

    .p-cta-section { padding: 60px 16px; }
    .p-cta-section__title { font-size: 20px; }
    .p-cta-box { flex-direction: column; padding: 30px 20px; gap: 30px; }
    .p-cta-box__tel .tel-number { font-size: 26px; pointer-events: auto; text-decoration: underline; color: var(--color-primary); }
    .p-cta-box__btn { width: 100%; height: auto; padding: 16px; }
}

/* お問い合わせ冒頭の強調表示 */
.p-contact-intro__heading .highlight {
    color: var(--color-primary); /* ブランドカラー */
    background: linear-gradient(transparent 60%, #fff7ed 60%); /* マーカー線 */
    padding: 0 4px;
}
.u-fw-bold { font-weight: 700; }

/* ==============================================
   10. コンタクトフォーム (CF7) & モーダル
   ============================================== */
.p-contact-form-section { background-color: #f3f4f6; padding: 80px 20px 100px; }
.p-contact-form-section__inner { max-width: 800px; margin: 0 auto; }
.p-contact-form-section__header { text-align: center; margin-bottom: 50px; }
.p-contact-form-section__header .title { font-size: 24px; font-weight: 700; color: var(--color-primary); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; }
.p-contact-form-section__header .title::before { content: 'mail'; font-family: 'Material Symbols Outlined'; font-size: 28px; font-weight: normal; }
.p-contact-form-section__header .desc { font-size: 15px; color: var(--color-text-sub); line-height: 1.8; }

/* --- フォーム枠組み --- */
.c-cf7-style { background: #fff; padding: 50px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
.p-form-group { margin-bottom: 32px; }
.p-form-label { font-size: 16px; font-weight: 700; color: var(--color-text-main); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.p-form-req { font-size: 11px; color: #fff; background-color: #ef4444; padding: 2px 8px; border-radius: 4px; }
.p-form-any { font-size: 11px; color: var(--color-text-sub); background-color: #e5e7eb; padding: 2px 8px; border-radius: 4px; }
.p-form-note { font-size: 13px; color: var(--color-text-sub); margin-bottom: 10px; }

/* --- テキスト入力フィールド --- */
.p-form-input input[type="text"], 
.p-form-input input[type="email"], 
.p-form-input input[type="tel"], 
.p-form-input textarea {
    width: 100%; padding: 16px; font-size: 16px; border: 2px solid #e5e7eb; border-radius: 8px; background-color: #f9fafb; transition: all 0.3s; box-sizing: border-box; font-family: inherit; appearance: none;
}
.p-form-input input:focus, .p-form-input textarea:focus { outline: none; border-color: var(--color-primary); background-color: #fff; box-shadow: 0 0 0 4px rgba(73, 105, 175, 0.1); }
.p-form-input textarea { height: 180px; resize: vertical; }


/* --- ラジオボタン & チェックボックス (ボタン風装飾) --- */

/* 1. デフォルトの丸ポチ・四角を消す */
.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

/* 2. リストアイテムの配置 */
.wpcf7-list-item { 
    display: inline-block; 
    margin: 0 10px 10px 0 !important; 
}

/* 3. ラベル（ボタンの見た目） */
.wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: #fff;
    border: 2px solid #e5e7eb; /* 薄いグレーの枠 */
    border-radius: 8px;
    color: var(--color-text-main);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 50px; /* タップしやすい高さ */
    box-sizing: border-box;
}

/* ホバー時 */
.wpcf7-list-item-label:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

/* 4. 選択された状態 (Checked) */
.wpcf7-list-item input:checked + .wpcf7-list-item-label {
    background-color: var(--color-primary-light); /* 薄い青背景 */
    border-color: var(--color-primary); /* 濃い青枠 */
    color: var(--color-primary);
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--color-primary); /* 枠線を太く見せる */
}

/* チェックマークアイコンを擬似要素で追加 */
.wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-size: 18px;
    margin-right: 6px;
    color: var(--color-primary);
}


/* --- チェックボックス専用レイアウト (縦積み) --- */
/* HTML側で付けた -checkbox クラスに対して適用 */
.p-form-input.-checkbox .wpcf7-list-item {
    display: block; /* 縦に積む */
    margin-right: 0 !important;
}

.p-form-input.-checkbox .wpcf7-list-item-label {
    width: 100%; /* 横幅いっぱい */
    justify-content: flex-start; /* 左寄せ */
    text-align: left;
    padding-left: 20px;
}


/* --- プライバシーポリシー同意 & 送信ボタン --- */
.p-form-privacy { text-align: center; margin-top: 40px; padding: 20px; background: #f9fafb; border-radius: 12px; }
.p-form-privacy__link { margin-bottom: 16px; font-size: 14px; }
.p-form-privacy__link button { background: none; border: none; padding: 0; font-size: 14px; font-weight: 700; color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.p-form-privacy__check { font-size: 16px; font-weight: 700; }

/* 同意チェックボックスのスタイル調整 */
.p-form-privacy__check input[type="checkbox"] {
    transform: scale(1.2); /* 少し大きく */
    margin-right: 8px;
    accent-color: var(--color-primary); /* ブラウザ標準の青色を変更 */
}

.p-form-submit { margin-top: 40px; text-align: center; position: relative; display: flex; justify-content: center; align-items: center; }
.p-form-submit input[type="submit"] {
    width: 100%; max-width: 320px; padding: 20px; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 15px rgba(73, 105, 175, 0.4); transition: transform 0.2s;
}
.p-form-submit input[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none !important; }
.p-form-submit input[type="submit"]:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(73, 105, 175, 0.5); }

/* モーダル (Privacy & Thanks) */
.p-modal { position: fixed; inset: 0; z-index: 10000; display: flex; justify-content: center; align-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.p-modal.is-active { opacity: 1; visibility: visible; }
.p-modal__overlay { position: absolute; inset: 0; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.p-modal__content { position: relative; width: 100%; max-width: 600px; max-height: 80vh; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px); transition: transform 0.3s; }
.p-modal.is-active .p-modal__content { transform: translateY(0); }
.p-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #eee; background-color: #f9fafb; }
.p-modal__header .title { font-size: 18px; font-weight: 700; margin: 0; }
.p-modal__header .close-btn { background: none; border: none; cursor: pointer; color: #999; }
.p-modal__body { padding: 24px; overflow-y: auto; font-size: 14px; line-height: 1.8; color: #444; }
.p-modal__body h3, .p-modal__body h4 { color: var(--color-primary); margin-top: 24px; margin-bottom: 12px; }
.p-modal__body h3:first-child { margin-top: 0; }
.p-modal__footer { padding: 16px; text-align: center; border-top: 1px solid #eee; }
.c-btn-modal { background: #333; color: #fff; border: none; padding: 10px 40px; border-radius: 4px; cursor: pointer; font-weight: 700; }

@media (max-width: 767px) {
    .c-cf7-style { padding: 30px 20px; }
    .p-form-group { margin-bottom: 24px; }
}

/* --- スピナー & 送信完了設定 --- */
.wpcf7-spinner { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; z-index: 10; pointer-events: none; }
.wpcf7-submitting { opacity: 0.8; }
.wpcf7-response-output { display: none !important; }

/* サンクスモーダル装飾 */
.p-modal__content.-thanks { max-width: 480px; text-align: center; }
.u-text-center { text-align: center; }
.p-thanks-icon { width: 80px; height: 80px; background-color: #eff6ff; color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.p-thanks-icon span { font-size: 40px; animation: popIcon 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIcon { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.p-thanks-title { font-size: 22px; font-weight: 700; color: var(--color-primary); margin-bottom: 16px !important; }
.p-thanks-text { font-size: 15px; line-height: 1.8; color: var(--color-text-main); margin-bottom: 20px; }
@media (max-width: 767px) {
    .p-thanks-icon { width: 60px; height: 60px; margin-bottom: 20px; }
    .p-thanks-icon span { font-size: 30px; }
    .p-thanks-title { font-size: 20px; }
    .p-thanks-text { font-size: 14px; }
}

/* --- オンライン相談フォーム用スタイル --- */
.p-contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-row {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}
@media (min-width: 768px) {
    .form-row { display: flex; align-items: flex-start; }
}

.form-label {
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
    width: 100%;
    color: var(--text-main);
}
@media (min-width: 768px) {
    .form-label { width: 240px; margin-bottom: 0; padding-top: 10px; }
}

.form-input {
    width: 100%;
    flex: 1;
}

.c-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
}

.u-badge-required {
    background: #e74c3c; color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 2px;
    margin-left: 8px; vertical-align: middle;
}

.u-badge-any {
    background: #95a5a6; color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 2px;
    margin-left: 8px; vertical-align: middle;
}

.u-note {
    font-size: 13px; color: #666; margin-top: 5px;
}
.u-mb-10 { margin-bottom: 10px; }

/* ラジオボタンを縦並びまたは適度な余白に */
.wpcf7-list-item { margin: 0 15px 10px 0; display: inline-block; }

/* 送信ボタン */
.c-btn-submit {
    display: block; width: 100%; max-width: 300px; margin: 40px auto 0;
    background: var(--color-primary); color: #fff;
    padding: 15px; border: none; border-radius: 50px;
    font-weight: 700; font-size: 16px; cursor: pointer;
    transition: opacity 0.3s;
}
.c-btn-submit:hover { opacity: 0.8; }

/* --- オンライン相談 CTAセクション --- */
.p-online-cta {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.p-online-cta__inner {
    background-color: #f0f7ff; /* 薄い青背景 */
    border: 2px solid #dbeafe;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
@media (min-width: 768px) {
    .p-online-cta__inner {
        flex-direction: row;
        text-align: left;
        padding: 40px;
        gap: 30px;
    }
}

.p-online-cta__icon span {
    font-size: 48px;
    color: var(--color-primary);
    background: #fff;
    padding: 16px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.p-online-cta__content { flex: 1; }

.p-online-cta__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}
@media (min-width: 768px) { .p-online-cta__title { font-size: 20px; } }

.p-online-cta__text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.c-btn-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
    white-space: nowrap;
}
.c-btn-online:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}


/* --- オンライン相談用モーダル (Popup) --- */
.p-modal-online {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
/* アクティブ時に表示 */
.p-modal-online.is-open {
    opacity: 1;
    visibility: visible;
}

.p-modal-online__overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.p-modal-online__content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px; /* フォームの幅 */
    max-height: 90vh; /* 画面からはみ出さない */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}

.p-modal-online__header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    border-radius: 12px 12px 0 0;
}
.p-modal-online__header .title {
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    color: var(--color-primary);
}
.p-modal-online__header .close-btn {
    background: none; border: none; cursor: pointer;
    color: #999; padding: 5px;
}
.p-modal-online__header .close-btn:hover { color: #333; }

.p-modal-online__body {
    padding: 30px;
    overflow-y: auto; /* 縦に長い場合はスクロール */
    -webkit-overflow-scrolling: touch;
}
/* スマホ調整 */
@media (max-width: 767px) {
    .p-modal-online__body { padding: 20px; }
}

/* ==============================================
   Contact Form 7 カスタマイズ (スピナー & メッセージ)
   ============================================== */

/* --- 1. スピナー(読込中マーク)のズレ解消 --- */
.p-form-submit {
    position: relative; /* 基準点にする */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpcf7-spinner {
    /* レイアウトの邪魔をしないように絶対配置にする */
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中に配置 */
    margin: 0 !important;
    z-index: 10;
    
    /* ボタンの上に重ねて表示（送信中はボタンが少し暗くなる想定） */
    pointer-events: none; 
}

/* 送信中はボタン文字が少し見えにくくなってもOK、あるいはスピナーを目立たせる */
.wpcf7-submitting {
    opacity: 0.8; 
}


/* --- 2. 標準の送信完了メッセージを消す --- */
/* "メッセージが送信されました" という枠線付きの箱を非表示に */
.wpcf7-response-output {
    display: none !important;
}

/* ==============================================
   送信完了モーダル専用デザイン
   ============================================== */

/* サンクスモーダルは少し幅を狭くして上品に */
.p-modal__content.-thanks {
    max-width: 480px;
    text-align: center;
}

.u-text-center { text-align: center; }

/* アイコン装飾 */
.p-thanks-icon {
    width: 80px;
    height: 80px;
    background-color: #eff6ff; /* 薄い青 */
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.p-thanks-icon span {
    font-size: 40px;
    animation: popIcon 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIcon {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* タイトルとテキスト */
.p-thanks-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 16px !important;
}

.p-thanks-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-main);
    margin-bottom: 20px;
}

/* スマホ調整 */
@media (max-width: 767px) {
    .p-thanks-icon { width: 60px; height: 60px; margin-bottom: 20px; }
    .p-thanks-icon span { font-size: 30px; }
    .p-thanks-title { font-size: 20px; }
    .p-thanks-text { font-size: 14px; }
}

/* ==============================================
   固定ページトップエリア (幾何学アニメーション)
   ============================================== */

/* --- エリア全体のベース設定 --- */
.p-topArea.-geometric-bg {
    position: relative;
    background-color: #4969af; /* テーマカラー */
    overflow: hidden; /* はみ出した図形を隠す */
    padding: 100px 0; /* 高さを確保 */
    z-index: 1;
}

/* スマホでの高さ調整 */
@media (max-width: 767px) {
    .p-topArea.-geometric-bg {
        padding: 80px 0;
    }
}

/* テキストカラー調整（白抜きにする） */
.p-topArea.-geometric-bg .c-pageTitle__main {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 5; /* 装飾より手前 */
}
.p-topArea.-geometric-bg .c-pageTitle__sub,
.p-topArea.-geometric-bg .p-topArea__excerpt {
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 5;
}


/* --- スラッグのあしらい (黄土色) --- */
.p-topArea__slug-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* 背景より前、タイトルより奥 */
    
    font-family: sans-serif; /* 英字フォント */
    font-size: 80px; /* 大きく配置 */
    font-weight: 900;
    color: #c5a035; /* 黄土色 (落ち着いたゴールド系) */
    opacity: 0.3; /* 透けさせて背景になじませる */
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
    
    /* 動きをつける場合（ゆっくり拡大など） */
    animation: slugFloat 10s ease-in-out infinite alternate;
}

@keyframes slugFloat {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.1); }
}

@media (max-width: 767px) {
    .p-topArea__slug-deco {
        font-size: 40px; /* スマホではサイズを抑える */
        opacity: 0.25;
    }
}


/* --- 幾何学模様のアニメーション背景 --- */
.p-topArea__geo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 図形共通設定 */
.geo-shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.07); /* 非常に薄い白 */
    backdrop-filter: blur(5px);
    border-radius: 50%; /* 基本は丸 */
}

/* 図形1: 左上の大きな円 */
.geo-shape.-shape1 {
    top: -10%;
    left: -10%;
    width: 400px;
    height: 400px;
    animation: floatShape1 20s infinite linear;
}

/* 図形2: 右下の四角（少し丸みあり） */
.geo-shape.-shape2 {
    bottom: -15%;
    right: -5%;
    width: 300px;
    height: 300px;
    border-radius: 40px; /* 角丸四角 */
    background: rgba(255, 255, 255, 0.05);
    animation: floatShape2 25s infinite ease-in-out alternate;
}

/* 図形3: 中央付近の小さな円 */
.geo-shape.-shape3 {
    top: 20%;
    right: 30%;
    width: 150px;
    height: 150px;
    background: rgba(197, 160, 53, 0.1); /* ここだけ薄い黄土色を混ぜる */
    animation: floatShape3 15s infinite ease-in-out;
}


/* --- アニメーション定義 --- */
@keyframes floatShape1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(50px, 40px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes floatShape2 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { transform: translate(-40px, -60px) rotate(-15deg) scale(1.1); }
}

@keyframes floatShape3 {
    0% { transform: translate(0, 0); }
    33% { transform: translate(30px, -50px); }
    66% { transform: translate(-20px, 20px); }
    100% { transform: translate(0, 0); }
}

/* ==============================================
   プライバシーポリシーページ (Privacy Policy)
   ============================================== */

/* --- 全体レイアウト --- */
.p-policy-section {
    /* 固定ページヘッダーとの余白調整 */
    padding: 80px 20px 120px;
    
    background-color: #fcfbf9; /* 背景は少し温かみのあるグレー */
    /* 薄いグリッド線を入れて質感を出す */
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
                      linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
    background-size: 40px 40px;
}

.p-policy-section__inner {
    max-width: 880px; /* 読みやすい幅 */
    margin: 0 auto;
}

/* --- 書類風の白いボックス --- */
.p-policy-paper {
    background-color: #fff;
    padding: 60px 80px; /* たっぷりとした余白 */
    border-radius: 4px; /* 紙っぽさを出すため角丸は小さめに */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.05); /* 柔らかく浮き上がる影 */
    border-top: 6px solid var(--color-primary); /* 上部にブランドカラーのライン */
    position: relative;
}

/* --- タイポグラフィ --- */
.p-policy-paper p {
    font-size: 16px;
    line-height: 2; /* 行間を広めに取って読みやすく */
    color: var(--color-text-main);
    margin-bottom: 24px;
    text-align: justify; /* 両端揃えで美しく */
}

/* 導入部 */
.p-policy-intro {
    margin-bottom: 40px;
}

/* セクション区切り */
.p-policy-block {
    margin-bottom: 50px;
}

/* 見出し (H3) */
.p-policy-head {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid #eef2f9; /* 薄い青の下線 */
    position: relative;
}
/* 下線のアクセント */
.p-policy-head::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--color-primary);
}

/* リスト (ul) */
.p-policy-list {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 20px 30px;
    background-color: #f9fafb; /* 薄いグレー背景 */
    border-radius: 8px;
}

.p-policy-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.8;
}
.p-policy-list li:last-child {
    margin-bottom: 0;
}
/* リストマーカー */
.p-policy-list li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}


/* --- お問い合わせ窓口エリア --- */
.p-policy-contact {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.p-policy-contact__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.u-mb-20 { margin-bottom: 20px; }

.p-policy-contact__box {
    background-color: #eef2f9; /* ブランドカラーの極薄版 */
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 4px solid var(--color-primary);
}

.p-policy-contact__box .company-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.contact-dl {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.contact-dl .row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}

.contact-dl dt {
    font-weight: 700;
    min-width: 80px;
    color: var(--color-text-sub);
}

.contact-dl dd {
    margin: 0;
    font-weight: 700;
}

.contact-dl dd a {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 20px; /* 電話番号を大きく */
    font-family: sans-serif;
    letter-spacing: 0.05em;
}
.contact-dl dd a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}


/* --- スマホ調整 (Privacy Page) --- */
@media (max-width: 767px) {
    .p-policy-section {
        padding: 40px 16px 80px;
        background-size: 20px 20px;
    }
    
    .p-policy-paper {
        padding: 40px 20px; /* 余白を減らす */
    }
    
    .p-policy-paper p {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えが無難 */
    }
    
    .p-policy-head {
        font-size: 18px;
    }
    
    .p-policy-list {
        padding: 20px;
    }
    .p-policy-list li {
        font-size: 14px;
    }

    /* お問い合わせ窓口 */
    .contact-dl .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .contact-dl dt {
        font-size: 12px;
    }
    .contact-dl dd a {
        font-size: 24px; /* タップしやすい大きさ */
        color: var(--color-primary);
    }
}