/**
Theme Name: astra-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ここから下に、コーポレートサイトの style.css の内容をすべて貼り付けます */
/* :root { ... } から最後まで */

/* =========================================
   0. 基本設定
   ========================================= */
:root {
    --dp-navy: #1A2530;
    --dp-gold: #C5A059;
    --dp-bg-light: #FAFAFA;
    --dp-white: #FFFFFF;
    --dp-border: #EEEEEE;
    --header-height: 100px;
}

body {
    background-color: var(--dp-bg-light);
    color: var(--dp-navy);
    font-family: 'Helvetica Neue', 'Arial', 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
}

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


/* ★重要: トップページのコンテナ幅制限を解除 */
body.home .site-content > .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ★重要: ギャラリー詳細ページのコンテナ幅制限を強制解除 */
body.single-gallery .site-content > .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.single-gallery #primary,
body.single-gallery #main {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ★重要: 指定した固定ページ(dp-force-fullwidth)の幅制限をCSSで強制解除 */
/* functions.php でクラスを付与し、ここでスタイルを適用するダブルバインド */
body.dp-force-fullwidth .site-content > .ast-container,
body.dp-force-fullwidth #primary,
body.dp-force-fullwidth #main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 独自コンテナ（コンテンツの幅を制御） */
.dp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   1. ヘッダー (全ページ共通・中央配置・白背景)
   ========================================= */
.dp-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dp-border);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center; /* ★全体を中央寄せ */
    gap: 60px; /* ロゴとメニューの間隔 */
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    box-sizing: border-box;
}

/* ロゴ */
.dp-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.dp-logo img, .dp-logo .custom-logo {
    max-height: 40px;
    width: auto;
    height: auto;
}
.dp-logo a.site-title-text {
    font-weight: 900; font-size: 24px; letter-spacing: 0.1em;
    font-family: 'Playfair Display', serif; text-decoration: none; color: var(--dp-navy);
}

/* ナビゲーション */
.dp-nav ul {
    display: flex; gap: 30px; align-items: center; list-style: none; margin: 0; padding: 0;
}
.dp-nav li { position: relative; }
.dp-nav a {
    font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
    text-decoration: none; padding: 10px 0; display: block;
    color: var(--dp-navy); /* 黒文字 */
    transition: 0.3s;
}
.dp-nav a:hover, .dp-nav a.active { color: var(--dp-gold); }

/* ドロップダウンメニュー */
.dp-dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
    background: #fff; min-width: 240px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 4px; opacity: 0; visibility: hidden; transition: all 0.3s;
    padding: 10px 0; border: 1px solid var(--dp-border);
    display: flex; flex-direction: column;
}
.dp-nav li:hover .dp-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dp-dropdown a { color: var(--dp-navy) !important; padding: 12px 20px; text-align: left; }
.dp-dropdown a:hover { background: var(--dp-bg-light); color: var(--dp-gold) !important; }

/* CONTACTボタン */
a.dp-btn-nav {
    background: var(--dp-gold); color: #fff !important;
    padding: 10px 25px !important; border-radius: 2px;
}
a.dp-btn-nav:hover { background: var(--dp-navy) !important; }

/* =========================================
   2. コンテンツ共通スタイル
   ========================================= */
/* セクションベース */
.dp-section {
    padding: 120px 0; /* 最新トレンドに合わせて余白を広めに */
    position: relative;
    width: 100%;
}

/* 背景色ユーティリティ */
.dp-bg-white { background-color: #FFFFFF; }
.dp-bg-gray { background-color: #F5F5F5; }
.dp-bg-navy { background-color: #1A2530; color: #fff; }

/* 見出し */
.dp-sec-title { margin-bottom: 60px; color: var(--dp-navy); text-align: left; }
.dp-sec-title.center { text-align: center; }
.dp-sec-title .en {
    display: block; font-size: 13px; letter-spacing: 0.3em; color: var(--dp-gold);
    margin-bottom: 15px; font-weight: 600; font-family: 'Playfair Display', serif;
}
.dp-sec-title .jp {
    display: block; font-size: 38px; font-weight: 900; line-height: 1.3;
}

/* Bento Grid */
.dp-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.dp-bento-card {
    background: var(--dp-white); padding: 40px; border: 1px solid var(--dp-border); border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; display: flex; flex-direction: column;
    text-decoration: none; color: inherit; height: 100%; box-sizing: border-box;
}
.dp-bento-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.dp-bento-icon { font-size: 40px; color: var(--dp-gold); margin-bottom: 20px; }
.dp-bento-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: var(--dp-navy); }
.dp-bento-card p { font-size: 15px; color: #555; margin-bottom: auto; line-height: 1.8; }

/* ボタン */
.dp-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 16px 45px;
    text-decoration: none; transition: 0.3s; font-weight: 700; border-radius: 2px; font-size: 14px;
    cursor: pointer;
}
.dp-btn-gold { background: var(--dp-gold); color: #fff; border: 1px solid var(--dp-gold); }
.dp-btn-gold:hover { background: var(--dp-navy); border-color: var(--dp-navy); color: #fff; }
.dp-btn-outline { border: 1px solid var(--dp-navy); color: var(--dp-navy); background: transparent; }
.dp-btn-outline:hover { background: var(--dp-navy); color: #fff; }

/* Works Grid */
.dp-works-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.dp-work-card-v2 {
    background: var(--dp-white); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.4s; display: block; text-decoration: none; color: inherit;
}
.dp-work-card-v2:hover { transform: translateY(-8px); }
.dp-work-thumb-v2 { height: 260px; position: relative; overflow: hidden; }
.dp-work-thumb-v2 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.dp-work-card-v2:hover .dp-work-thumb-v2 img { transform: scale(1.1); }
.dp-work-tag { position: absolute; top: 20px; left: 20px; background: rgba(26,37,48,0.9); color: #fff; font-size: 11px; padding: 6px 14px; border-radius: 2px; font-weight: 600; z-index: 2; }
.dp-work-price { position: absolute; bottom: 0; right: 0; background: var(--dp-gold); color: #fff; font-weight: 700; padding: 8px 20px; font-size: 14px; z-index: 2; }
.dp-work-body { padding: 25px; }
.dp-work-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--dp-navy); }

/* スプリットレイアウト */
.dp-split { display: flex; align-items: center; gap: 60px; justify-content: space-between; }
.dp-split-img { flex: 1; max-width: 50%; }
.dp-split-img img { width: 100%; border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.dp-split-text { flex: 1; max-width: 50%; }

/* CTAセクション（リッチ）修正版 */
.dp-cta-rich {
    background-image: url('http://exterior.dapples.jp/wp-content/uploads/allcta2r-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* パララックス効果で奥行きを出す */
    color: #fff;
    text-align: center;
    padding: 160px 0;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dp-cta-rich::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 修正前: background: rgba(26,37,48,0.85); */
    /* 修正後: 少し明るくし、青みを強調して写真を活かす */
    background: rgba(26, 37, 48, 0.65);
    /* オプション: すりガラス効果で文字を読みやすくする（モダンな処理） */
    backdrop-filter: blur(2px); 
    z-index: 1;
}

.dp-cta-content {
    position: relative;
    z-index: 2;
}

/* タイトルにアクセントを追加 */
.dp-cta-rich h2 {
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* CTAセクション修正 */
.dp-cta-rich h2 {
    /* 文字色をゴールドに変更して視認性確保 */
    color: var(--dp-gold) !important; 
    /* 読みやすくするための強い影 */
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    font-size: 42px; /* 少しサイズアップ */
}

/* 本文は白のままで、影を落として読みやすくする */
.dp-cta-rich p {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    font-weight: 500;
}

/* フッター */
.dp-footer { background: var(--dp-navy); color: #fff; padding: 60px 0; text-align: center; width: 100%; }

/* ページヘッダー (下層) */
.dp-page-header { background-color: var(--dp-navy); color: #fff; padding: 100px 0; text-align: center; background-size: cover; background-position: center; width: 100%; }
.dp-page-title { font-size: 48px; font-family: 'Playfair Display', serif; color: var(--dp-gold); margin-bottom:10px; }
.dp-page-desc { font-size: 16px; opacity: 0.9; }

/* 詳細ページ系 */
.dp-service-detail-hero { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; background-size: cover; color: #fff; margin-bottom: 80px; }
.dp-detail-content { display: flex; gap: 50px; align-items: flex-start; margin-bottom: 80px; }
.dp-detail-text, .dp-detail-img { flex: 1; }

/* レスポンシブ */
@media (max-width: 1024px) {
    .dp-bento-grid, .dp-works-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .dp-container { padding: 0 25px; }
    .dp-split, .dp-detail-content { flex-direction: column; }
    .dp-split-img, .dp-split-text { max-width: 100%; }
}
@media (max-width: 768px) {
    .dp-container, .ast-container { padding: 0 3% !important; }
    .dp-bento-grid, .dp-works-grid-v2 { grid-template-columns: 1fr; }
    .dp-header { padding: 0 20px; }
    .dp-nav { display: none; } 
    .dp-sec-title.center { text-align: left; }
}

/* =========================================
   フッターデザインの刷新 (Silent Luxury)
   ========================================= */

/* フッター全体の背景をネイビーにし、余白を広げる */
.site-footer {
    background-color: #1A2530 !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 0 !important;
}

/* 著作権テキストのデザイン */
.ast-footer-copyright {
    color: rgba(255, 255, 255, 0.6) !important; /* 少しグレーがかった白で上品に */
    font-size: 13px !important;
    letter-spacing: 0.05em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* リンクがある場合のホバー色（念のため） */
.site-footer a {
    color: #ffffff !important;
}
.site-footer a:hover {
    color: #C5A059 !important; /* ホバー時にゴールド */
}

/* Astraのデフォルトの区切り線などを消す */
.ast-small-footer-section-1 {
    border: none !important;
}

/* =========================================
   Astra標準の余白（隙間）を強制削除
   ========================================= */
@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-bottom: 0 !important;
        /* もし上部の隙間も気になる場合は下記も有効化してください */
        /* margin-top: 0 !important; */
    }
}

/* =========================================
   Astraのページビルダー用デフォルト余白を強制削除
   ========================================= */
.ast-single-post.ast-page-builder-template .site-main > article, 
.ast-page-builder-template .post-navigation,
.ast-page-builder-template .entry-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================
   Contact Form 7 デザイン (Silent Luxury)
   ========================================= */

/* フォーム全体の幅調整（スマホで見やすく） */
.dp-form-container {
    width: 100%;
    max-width: 100%;
}

/* 行ごとのレイアウト */
.dp-form-row {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* ラベルデザイン */
.dp-form-label {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;
    color: #1A2530; /* ネイビー */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 必須・任意バッジ */
.dp-required, .dp-any {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 500;
}
.dp-required { background: #C5A059; color: #fff; } /* ゴールド */
.dp-any { background: #eee; color: #666; }

/* 入力フィールド共通 */
.dp-form-control, .dp-form-select {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 16px;
    background: #FAFAFA;
    transition: 0.3s;
    box-sizing: border-box; /* 枠からはみ出さない設定 */
}

/* フォーカス時（入力中） */
.dp-form-control:focus, .dp-form-select:focus {
    background: #fff;
    border-color: #1A2530; /* ネイビー */
    outline: none;
    box-shadow: 0 0 0 1px #1A2530;
}

/* テキストエリア */
textarea.dp-form-control {
    height: 180px;
    line-height: 1.6;
}

/* 送信ボタンエリア */
.dp-form-submit {
    text-align: center;
    margin-top: 40px;
}
.dp-form-submit .wpcf7-submit {
    width: 100%;
    max-width: 300px;
    padding: 18px 0;
    cursor: pointer;
}

/* プライバシーポリシーチェック */
.dp-privacy-row {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
}
.dp-privacy-check input {
    margin-right: 10px;
    transform: scale(1.2);
}

/* エラーメッセージの美化 */
.wpcf7-not-valid-tip {
    font-size: 12px;
    color: #d9534f;
    margin-top: 5px;
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (min-width: 769px) {
    /* PCではラベルと入力を横並びにしたい場合（今回は縦並び推奨ですが、横にしたい場合はここを調整） */
    /* 現在のデザインは縦積み（Stack）で、モダンかつスマホファーストな設計にしています */
}

/* =========================================
   お気に入りボタンの状態変化
   ========================================= */

/* ボタン自体のスタイル（詳細ページ用） */
.dp-like-btn {
    display: inline-flex; 
    align-items: center; 
    gap: 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #1A2530;
    color: #1A2530;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.dp-like-btn:hover {
    background: #1A2530;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* アイコン */
.dp-like-icon {
    font-size: 18px;
    color: #ccc;
    transition: 0.3s;
}
.dp-like-btn:hover .dp-like-icon {
    color: #fff;
}

/* アクティブ（登録済み）の時 */
.dp-like-btn.active {
    border-color: #e0245e;
    color: #e0245e;
    background: #fff0f5;
}

.dp-like-btn.active .dp-like-icon {
    color: #e0245e; /* ピンクレッド */
    font-weight: 900; /* ハートを塗りつぶし風に見せる（フォントによる） */
    animation: heartPop 0.3s ease-out;
}
.dp-like-btn.active:hover {
    background: #e0245e;
    color: #fff;
}
.dp-like-btn.active:hover .dp-like-icon {
    color: #fff;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/* ついでに、タグリンクのスタイルも定義（ショートコード用） */
.dp-tag-list .dp-tag-link {
    display: inline-block;
    background: #f0f0f0;
    color: #666;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: 0.3s;
}
.dp-tag-list .dp-tag-link:hover {
    background: #ddd;
    color: #333;
}

/* =========================================
   施工事例詳細ページ (V3.0 FIXED + 4:3 Ratio)
   ========================================= */

/* 全体ラッパー */
.dp-case-wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    color: #333;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

/* セクション共通 */
.dp-case-section { margin-bottom: 100px; }

/* 見出し（英語サブタイトル付き） */
.dp-case-heading {
    font-size: 24px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dp-case-heading::before {
    content: attr(data-en);
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    color: #C5A059;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    display: block;
}

/* 1. ページ内ナビゲーション (目次) */
.dp-page-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.dp-nav-link {
    font-size: 14px;
    color: #888;
    padding: 5px 0;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.05em;
    border: none;
    background: none;
}
.dp-nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
    background: #C5A059; transition: 0.3s;
}
.dp-nav-link:hover { color: #1A2530; }
.dp-nav-link:hover::after { width: 100%; }
.dp-nav-link::before { content: '↓'; font-size: 10px; margin-right: 5px; opacity: 0.5; }

/* 2. ストーリー（課題・要望） */
.dp-story-box {
    background: #F9F9F9;
    padding: 60px;
    border-radius: 4px;
    text-align: center;
}
.dp-story-title { font-weight: 700; font-size: 18px; margin-bottom: 20px; color: #1A2530; }
.dp-story-text { font-size: 16px; line-height: 1.8; color: #555; }

/* 3. コンセプト (画像設定：4:3比率固定・レスポンシブ対応) */
.dp-concept-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* ★ここで縦横比を4:3に固定 */
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: block;
    object-fit: cover; /* 枠に合わせてトリミング（歪ませない） */
    object-position: center 60%; /* 中心よりやや下を基準 */
}
.dp-concept-text {
    font-size: 16px;
    line-height: 2.0;
    text-align: center;
    margin-bottom: 40px;
}

/* 4. こだわり (スプリットレイアウト - 画像設定：4:3比率固定) */
/* 標準レイアウト用 */
.dp-split { display: flex; align-items: center; gap: 50px; margin-bottom: 60px; }
.dp-split-img, .dp-split-text { flex: 1; }
.dp-split-img img { 
    width: 100%; 
    height: auto;
    aspect-ratio: 4 / 3; /* ★4:3固定 */
    border-radius: 4px; 
    display: block;
    object-fit: cover; /* トリミング */
}
.dp-point-title { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: #1A2530; }

/* カスタムレイアウト用 (.dp-split-custom) - HTML側でよく使用されるクラス */
.dp-split-custom figure { margin: 0; width: 100%; }
.dp-split-custom figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* ★4:3固定 */
    display: block;
    border-radius: 8px;
    object-fit: cover; /* トリミング */
}

/* .dp-split-custom のPC/SPレイアウト調整 */
@media (min-width: 768px) {
    .dp-split-custom {
        display: flex;
        align-items: center;
        gap: 50px;
        margin-bottom: 60px;
    }
    /* 交互配置用: flex-direction: row-reverse を style属性で入れた場合も効くように */
    .dp-split-custom[style*="row-reverse"] {
        flex-direction: row-reverse;
    }
    .dp-split-custom > figure,
    .dp-split-custom > .dp-split-custom-text {
        flex: 1; /* 1:1 分割 */
    }
}
@media (max-width: 767px) {
    .dp-split-custom {
        display: block;
        margin-bottom: 40px;
    }
    .dp-split-custom > figure {
        margin-bottom: 20px;
    }
}

/* 5. Micro CTA (WEB閲覧タイプ) */
.dp-micro-cta {
    background: #fff;
    border: 2px solid #1A2530;
    padding: 60px 40px;
    margin: 80px auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 800px;
    width: 100%;
    
    /* 中身を中央揃え */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dp-micro-cta::before {
    content: 'FREE ACCESS';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #1A2530;
    color: #fff;
    padding: 5px 25px;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
    white-space: nowrap;
}

/* ボタンの幅調整 */
.dp-micro-cta .dp-btn {
    min-width: 300px;
    max-width: 100%;
}

/* 6. お客様の声 */
.dp-voice-box {
    border: 1px solid #eee;
    padding: 50px;
    position: relative;
    background: #fff;
    border-radius: 4px;
}
.dp-voice-icon {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    background: #C5A059; color: #fff; width: 40px; height: 40px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}

/* 7. 担当者 */
.dp-staff-box {
    display: flex; gap: 40px; align-items: flex-start;
    border-top: 1px solid #eee; padding-top: 40px; margin-top: 40px;
}
.dp-staff-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* 8. タグ・お気に入り */
.dp-tags-area {
    margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}

/* 9. スマホ対応 (メディアクエリ) */
@media (max-width: 768px) {
    .dp-split { flex-direction: column !important; gap: 30px !important; }
    .dp-split-img, .dp-split-text { width: 100% !important; flex: auto !important; }
    .dp-staff-box { flex-direction: column; text-align: center; align-items: center; gap: 20px; }
    .dp-tags-area { flex-direction: column; text-align: center; }
    .dp-nav-link { font-size: 12px; width: 45%; text-align: center; }
    .dp-page-nav { justify-content: space-between; gap: 10px; }
    .dp-micro-cta { padding: 40px 20px; margin: 60px 0; }
    .dp-micro-cta .dp-btn { width: 100%; min-width: 0; }
}

/* =========================================
   10. Swiperデザイン (ギャラリー画像 4:3 固定修正版)
   ========================================= */
.swiper-pagination-bullet-active {
    background: var(--dp-gold) !important;
}

/* ▼▼▼ 修正：ギャラリー画像の比率を4:3に強制統一 ▼▼▼ */
.dp-works-slider img,
.dp-gallery-slider img, /* 念のため別クラス名も想定して追加 */
#gallery img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important; /* ★ここで縦横比を4:3に固定 */
    object-fit: cover !important;   /* 枠に合わせてトリミング（歪み防止） */
    border-radius: 4px;             /* 他の画像と合わせて角丸に */
}

/* ▼▼▼ 修正：スマホ表示時の設定 ▼▼▼ */
@media (max-width: 768px) {
    /* 以前の height: 300px !important; を削除し、アスペクト比指定を優先 */
    .dp-works-slider img {
        height: auto !important;        /* 固定高さを解除 */
        aspect-ratio: 4 / 3 !important; /* スマホでも4:3を維持 */
    }
}

/* ▼▼▼ リフォーム事例専用スタイル (Minimal & Luxury) ▼▼▼ */

/* 1. 概要セクション（シンプルに） */
.dp-reform-intro {
    margin-bottom: 50px;
    border-bottom: 1px solid #E1E4E8;
    padding-bottom: 30px;
}
.dp-reform-intro h2 {
    font-size: 24px;
    color: #1A2530; /* Navy */
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.4;
}
.dp-reform-intro p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
}

/* 2. ポイントセクション（スペック表風リストデザイン） */
.dp-point-list {
    margin-bottom: 50px;
}
.dp-point-row {
    display: flex;
    border-top: 1px solid #E1E4E8;
    padding: 25px 0;
    align-items: baseline;
}
.dp-point-row:last-child {
    border-bottom: 1px solid #E1E4E8;
}

/* ナンバリング */
.dp-point-num {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #C5A059; /* Gold */
    font-weight: bold;
    width: 40px;
    flex-shrink: 0;
    padding-top: 2px;
}

/* 見出しと本文のラッパー */
.dp-point-content {
    width: 100%;
}

/* ポイントの見出し */
.dp-point-head {
    font-size: 18px;
    font-weight: bold;
    color: #1A2530;
    margin-bottom: 10px;
    display: block;
}

/* ポイントの本文 */
.dp-point-text {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* 3. CTAエリア（リフォーム用） */
.dp-reform-cta {
    background-color: #F5F7FA;
    border: 1px solid #E1E4E8;
    border-radius: 4px; 
    padding: 40px 30px;
    text-align: center;
    margin-bottom: 40px;
}
.dp-reform-cta h3 {
    font-size: 20px;
    color: #1A2530;
    font-weight: bold;
    margin-bottom: 15px;
}
.dp-btn-contact {
    display: inline-block;
    background: #1A2530; 
    color: #fff;
    font-weight: bold;
    padding: 16px 45px;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 15px;
    letter-spacing: 0.05em;
}
.dp-btn-contact:hover {
    background: #C5A059;
    opacity: 1;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .dp-point-row { flex-direction: column; }
    .dp-point-num { margin-bottom: 5px; }
    .dp-reform-cta { padding: 30px 20px; }
}

/* =========================================
   DESIGN GALLERY STYLES (一覧用)
   ========================================= */

/* フィルターナビ */
.dp-gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}
.dp-gallery-filter a {
    color: #888;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 15px;
    border-radius: 50px;
    transition: 0.3s;
    border: 1px solid transparent;
}
.dp-gallery-filter a:hover,
.dp-gallery-filter a.active {
    color: #1A2530;
    border-color: #1A2530;
    background: #f0f0f0;
}

/* ギャラリーグリッド（一覧） */
.dp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}
.dp-gallery-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 4px; /* 角丸を少し控えめに */
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.dp-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* 画像エリア */
.dp-gallery-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* 4:3比率固定 */
}
.dp-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.dp-gallery-card:hover .dp-gallery-thumb img {
    transform: scale(1.05);
}

/* ホバー時のオーバーレイ */
.dp-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 37, 48, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}
.dp-gallery-card:hover .dp-gallery-overlay {
    opacity: 1;
}
.dp-view-btn {
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 0.1em;
    background: rgba(0,0,0,0.2);
}

/* カード情報 */
.dp-gallery-info {
    padding: 20px;
}
.dp-gallery-title {
    font-size: 16px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 8px;
    line-height: 1.4;
}
.dp-gallery-cat {
    font-size: 12px;
    color: #C5A059;
    font-weight: 500;
}

/* 詳細ページ (一覧用) */
.dp-gallery-single-header {
    text-align: center;
    margin-bottom: 40px;
}
.dp-gallery-tags .dp-tag {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 15px;
    font-size: 12px;
    margin: 0 5px;
    border-radius: 50px;
}
.dp-gallery-content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}
.dp-gallery-content img {
    max-width: 100%;
    height: auto;
    margin: 30px 0;
    border-radius: 4px;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .dp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .dp-gallery-grid { grid-template-columns: 1fr; gap: 40px; }
    .dp-gallery-info { padding: 15px; }
}

/* =========================================
   11. DESIGN GALLERY 詳細ページ用拡張 (New - 上記既存に追加)
   ========================================= */

/* 詳細ページ用グリッドレイアウト（既存の dp-gallery-grid とは別物として定義） */
.dp-gallery-grid-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 60px;
}
@media (min-width: 768px) {
    .dp-gallery-grid-detail {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* 全幅表示アイテム */
.dp-g-item.wide {
    grid-column: 1 / -1;
}

/* 詳細画像の装飾 */
.dp-g-item {
    margin: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.dp-g-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: zoom-in; /* クリック可能を示唆 */
}
.dp-g-item:hover img {
    transform: scale(1.03);
}

/* 画像キャプション */
.dp-g-item figcaption {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #666;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.05em;
    text-align: right;
}

/* 詳細ページ内の本文テキスト */
.dp-g-text {
    grid-column: 1 / -1;
    max-width: 800px;
    margin: 20px auto 40px;
    line-height: 2.2;
    color: #444;
    font-size: 1rem;
    text-align: justify;
}

/* ライトボックス (Design Gallery用) */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
#lightbox-img {
    max-height: 85vh;
    max-width: 100%;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
#lightbox-caption {
    position: absolute;
    bottom: 30px;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.1em;
    text-align: center;
    width: 100%;
}
#lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
}

/* ▼ 送信ボタンの位置ズレ修正 ▼ */

/* 1. CF7が勝手に挿入するpタグを強制的に中央揃えにする */
.dp-lp-right .wpcf7 form p {
    text-align: center !important;
    width: 100%;
}

/* 2. ボタンを囲むラッパーも念のため中央揃え属性を持つ */
.dp-form-submit {
    display: flex;
    justify-content: center !important; /* Flexboxでの中央寄せ */
    text-align: center !important;      /* テキストとしての中央寄せ */
    width: 100%;
}

/* 3. ボタン本体に左右自動マージンを与えて強制的に真ん中へ */
.dp-lp-right input[type="submit"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================
   12. GAIKO LAB 専用レイアウト調整 (Astra Child)
   ========================================= */

/* コンテンツエリアの強制中央寄せと幅制限 */
/* dp-force-fullwidth が効いている状態で、中身を中央に寄せる設定 */
.dp-force-fullwidth .site-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dp-force-fullwidth .ast-container {
    width: 100%;
    max-width: 100%; /* コンテナ自体は全幅 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素を中央寄せ */
}

.dp-force-fullwidth #primary {
    width: 100%;
    max-width: 1200px; /* ★ここでコンテンツの最大幅を決定 */
    margin: 0 auto;
    padding: 40px 20px; /* 上下の余白とスマホ用の左右余白 */
}

/* 記事タイトル（固定ページタイトル）のデザイン統一 */
.entry-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: var(--dp-navy);
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

/* =========================================
   13. Forminator デザインカスタマイズ (Silent Luxury)
   ========================================= */

/* Forminator全体のラッパー調整 */
.forminator-ui {
    max-width: 1100px !important; /* フォームの最大幅 */
    margin: 0 auto !important;   /* 中央寄せ */
    padding: 40px !important;
    background: #fff;
    border: 1px solid var(--dp-border);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 入力フィールド (Contact Form 7のデザインを移植) */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui .forminator-select2 + .select2-container .select2-selection {
    background-color: #FAFAFA !important;
    border: 1px solid #ddd !important;
    border-radius: 2px !important;
    padding: 15px !important;
    font-size: 16px !important;
    color: var(--dp-navy) !important;
    transition: 0.3s !important;
    height: auto !important; /* 高さ自動調整 */
}

/* フォーカス時 */
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
    background: #fff !important;
    border-color: var(--dp-navy) !important;
    box-shadow: 0 0 0 1px var(--dp-navy) !important;
}

/* ラベル (項目名) */
.forminator-ui .forminator-label {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--dp-navy) !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.05em;
}

/* ラジオボタン・チェックボックスのデザイン */
.forminator-ui .forminator-radio .forminator-radio-label,
.forminator-ui .forminator-checkbox .forminator-checkbox-label {
    color: var(--dp-navy) !important;
    font-weight: 500 !important;
}

/* 送信ボタン (コーポレートサイトのゴールドボタンと統一) */
.forminator-ui .forminator-button-submit {
    background-color: var(--dp-gold) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 16px 45px !important;
    border-radius: 2px !important;
    font-size: 16px !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3) !important; /* ゴールドの影 */
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0 !important;
    display: block !important;
    cursor: pointer !important;
}

.forminator-ui .forminator-button-submit:hover {
    background-color: var(--dp-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 37, 48, 0.2) !important;
}

/* 「次へ」「前へ」ボタン (マルチステップフォーム用) */
.forminator-ui .forminator-button-next {
    background-color: var(--dp-navy) !important;
    color: #fff !important;
}
.forminator-ui .forminator-button-back {
    background-color: transparent !important;
    color: var(--dp-navy) !important;
    border: 1px solid var(--dp-navy) !important;
}

/* エラーメッセージ */
.forminator-ui .forminator-error-message {
    font-size: 12px !important;
    color: #e0245e !important;
    margin-top: 5px !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .dp-force-fullwidth #primary {
        padding: 20px 15px; /* スマホでは余白を詰める */
    }
    .forminator-ui {
        padding: 25px 15px !important;
        border: none !important; /* スマホでは枠線を消してスッキリさせる */
        box-shadow: none !important;
    }
}

/* style.css に追記（ヘッダーを強制的に中央揃え・ボーダー調整） */
.site-header {
    border-bottom: 1px solid var(--dp-border); /* 上品な区切り線 */
    background-color: #fff;
}

.ast-builder-grid-row {
    justify-content: center !important; /* 強制中央寄せ */
}

.site-branding {
    margin: 0 auto !important;
}

/* ============================================================
   14. Forminator Refined CSS (Silent Luxury Edition)
   統合・最適化版
   ============================================================ */

/* --- 1. ベースリセット --- */
.forminator-floating--input {
    transform: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto !important;
}
.forminator-input--wrap { padding-top: 0 !important; }
.forminator-label.forminator-floating--input { margin-bottom: 8px !important; }

/* --- 2. タイポグラフィ --- */
/* ラベル：ブランドネイビーを使用 */
.forminator-field .forminator-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--dp-navy) !important; /* ★変更 */
    margin-bottom: 10px !important;
    letter-spacing: 0.05em !important;
}

/* 説明文 */
.forminator-field .forminator-description {
    display: block !important;
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 6px !important;
    line-height: 1.6 !important;
}

/* ステップ見出し：ゴールドのアクセント */
.forminator-step-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--dp-navy) !important; /* ★変更 */
    border-bottom: 2px solid var(--dp-border) !important;
    padding-bottom: 15px !important;
    margin-bottom: 30px !important;
    letter-spacing: 0.1em !important;
}

/* 項目間の余白 */
.forminator-field { margin-bottom: 40px !important; }

/* --- 3. 入力フィールド (Elegant Input) --- */
.forminator-input,
.forminator-select,
.forminator-textarea,
.forminator-select2 + .select2-container .select2-selection {
    background-color: #FAFAFA !important;
    border: 1px solid var(--dp-border) !important; /* ★変更 */
    border-radius: 2px !important; /* ★変更：8pxだと丸すぎるため、ブランドに合わせて2pxへ */
    color: var(--dp-navy) !important;
    font-size: 16px !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* フォーカス時：ネイビーで引き締め */
.forminator-input:focus,
.forminator-select:focus,
.forminator-textarea:focus,
.forminator-select2 + .select2-container.select2-container--open .select2-selection {
    background-color: #fff !important;
    border-color: var(--dp-navy) !important; /* ★変更 */
    box-shadow: 0 0 0 1px var(--dp-navy) !important;
}

/* --- 4. ボタンエリア (Strategy & Branding) --- */
.forminator-pagination-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-top: 50px !important;
    width: 100% !important;
}

/* 共通設定 */
.forminator-pagination-footer button {
    width: 100% !important;
    max-width: 320px !important;
    padding: 18px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 2px !important; /* ★変更：ブランドに合わせて四角く */
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* メインボタン（次へ・送信）：ゴールド */
.forminator-pagination-footer .forminator-button-next,
.forminator-pagination-footer .forminator-button-submit {
    background: var(--dp-gold) !important; /* ★変更：黒ではなくゴールド */
    color: #fff !important;
    border: 1px solid var(--dp-gold) !important;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3) !important;
    order: 1 !important;
}

.forminator-pagination-footer .forminator-button-next:hover,
.forminator-pagination-footer .forminator-button-submit:hover {
    background: var(--dp-navy) !important; /* ★変更：ホバーでネイビー */
    border-color: var(--dp-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(26, 37, 48, 0.2) !important;
}

/* サブボタン（戻る）：シンプル */
.forminator-pagination-footer .forminator-button-prev,
.forminator-pagination-footer .forminator-button-back {
    background: transparent !important;
    color: #888 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    order: 2 !important;
    padding: 14px 0 !important;
    font-size: 14px !important;
    max-width: 200px !important;
}

.forminator-pagination-footer .forminator-button-prev:hover,
.forminator-pagination-footer .forminator-button-back:hover {
    border-color: var(--dp-navy) !important;
    color: var(--dp-navy) !important;
}

/* ゴースト対策 */
.forminator-button-submit:disabled,
.forminator-pagination-footer [style*="display: none"] {
    display: none !important;
}

/* =========================================
   15. Modern Bento Grid (トップページ新デザイン)
   ========================================= */

/* グリッドレイアウト */
.dp-bento-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr; /* 中央を少し広く強調 */
    gap: 24px;
    align-items: stretch;
}

/* カード共通スタイル */
.dp-modern-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    border-radius: 4px; /* ブランドに合わせて少し角ばらせる */
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    border: 1px solid transparent;
}

/* カードの中身 */
.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 1 & 3: ライトカード (白背景) */
.card-light {
    background: #fff;
    border-color: #eee;
    color: var(--dp-navy);
}
.card-light:hover {
    border-color: var(--dp-navy);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

/* 2: ダークカード (ネイビー背景・中央) */
.card-dark {
    background: var(--dp-navy);
    color: #fff;
    box-shadow: 0 20px 50px rgba(26, 37, 48, 0.3);
}
.card-dark:hover {
    transform: translateY(-8px) scale(1.02); /* ふわりと浮き上がる */
    box-shadow: 0 30px 60px rgba(26, 37, 48, 0.4);
}

/* アイコンボックス */
.card-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
    background: #f4f4f4;
    color: var(--dp-navy);
    transition: 0.3s;
}
.dp-svg-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.5px;
}

/* ダークカード用のアイコン */
.card-dark .card-icon-box {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.card-dark .card-icon-box.gold-icon {
    color: var(--dp-gold); /* アイコンだけゴールドに光らせる */
}

/* テキストエリア */
.card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #999;
    margin-bottom: 8px;
    display: block;
    font-weight: 600;
}
.dp-modern-card h3 {
    font-size: 24px;
    font-weight: 700; /* Playfair Displayがあれば適用される */
    font-family: 'Playfair Display', serif;
    margin-bottom: 15px;
    line-height: 1.2;
}
.dp-modern-card p {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
    margin-bottom: 30px;
}

/* アクションエリア (矢印など) */
.card-action {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
    transition: 0.3s;
}
.card-dark .card-action {
    border-top-color: rgba(255,255,255,0.1);
    color: var(--dp-gold);
}

/* 矢印アニメーション */
.arrow {
    font-size: 16px;
    transition: transform 0.3s;
}
.dp-modern-card:hover .arrow {
    transform: translateX(5px);
}

/* BETAバッジ */
.beta-badge {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 10px;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 3px 8px;
    border-radius: 50px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.1em;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .dp-bento-grid-modern {
        grid-template-columns: 1fr; /* スマホは縦積み */
        max-width: 500px;
        margin: 0 auto;
    }
    .card-dark {
        order: -1; /* スマホでは詳細版（本命）を一番上に持ってくる */
    }
}

/* =========================================
   18. GAIKO LAB Portal Design (The Cockpit)
   ========================================= */

/* --- 全体設定 --- */
.dp-lab-wrapper {
    background-color: #F4F5F7; /* ツールらしい薄いグレー背景 */
    min-height: 100vh;
    font-family: 'Noto Sans JP', sans-serif;
}

/* --- 1. ヒーローダッシュボード (FV) --- */
.dp-lab-hero {
    position: relative;
    background-color: #1A2530;
    color: #fff;
    padding: 120px 0 80px;
    overflow: hidden;
}
/* 背景に幾何学模様やグリッドを入れて「設計・ラボ」感を出す */
.dp-lab-bg-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}
.dp-lab-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* 左側：コピーライティング */
.dp-lab-hero-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}
.dp-lab-hero-text p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
}
.dp-lab-tag {
    display: inline-block;
    background: rgba(197, 160, 89, 0.2);
    border: 1px solid #C5A059;
    color: #C5A059;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    font-weight: 600;
}

/* 右側：メインツールカード (詳細シミュレーターへの直通) */
.dp-lab-main-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}
.dp-lab-main-card:hover {
    transform: translateY(-5px);
    border-color: #C5A059;
}
.dp-lab-card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- 2. 機能グリッド (Bento Grid Style) --- */
.dp-lab-grid-section {
    max-width: 1200px;
    margin: -60px auto 80px; /* ヒーローに重ねる */
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
.dp-lab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 共通カードスタイル */
.dp-lab-card {
    background: #fff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none !important;
    color: #1A2530 !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    height: 100%;
}
.dp-lab-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: #C5A059;
}

/* アイコン装飾 */
.dp-lab-icon {
    width: 48px;
    height: 48px;
    background: #F4F5F7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #1A2530;
}
.dp-lab-card:hover .dp-lab-icon {
    background: #1A2530;
    color: #C5A059;
}

/* カード内テキスト */
.dp-lab-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}
.dp-lab-card p {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 24px;
}
.dp-lab-link-text {
    font-size: 13px;
    font-weight: 700;
    color: #C5A059;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 将来機能（図面購入）のスタイル */
.dp-lab-card.coming-soon {
    background: #EAECEF;
    border: 1px dashed #ccc;
    cursor: default;
    opacity: 0.8;
}
.dp-lab-card.coming-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: #ccc;
}
.dp-badge-future {
    background: #999;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
}

/* --- 3. 相談票セクション (横長) --- */
.dp-lab-consultation {
    grid-column: 1 / -1; /* 全幅 */
    background: #fff;
    border-left: 4px solid #1A2530; /* アクセント */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- レスポンシブ --- */
@media (max-width: 900px) {
    .dp-lab-hero-inner {
        grid-template-columns: 1fr;
        padding-top: 40px;
    }
    .dp-lab-hero-text { text-align: center; }
    .dp-lab-hero-text h1 { font-size: 36px; }
    .dp-lab-grid { grid-template-columns: 1fr; }
    .dp-lab-consultation { flex-direction: column; text-align: center; gap: 20px; }
}

/* =========================================
   20. Emergency Fix (巨大な余白の強制削除)
   ========================================= */

/* 1. ラッパーの高さをコンテンツに合わせる */
.dp-lab-wrapper {
    min-height: auto !important; /* 100vhを解除 */
    height: auto !important;
    overflow: visible !important;
}

/* 2. Astraのメインコンテナの高さバグを修正 */
/* Flexboxなどが悪さをして縦に伸びているのを解除します */
.dp-force-fullwidth .site-content {
    display: block !important; /* Flexを解除 */
    min-height: 0 !important;
}

.dp-force-fullwidth #primary,
.dp-force-fullwidth #main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* 3. WordPressの自動挿入タグ（空のpタグ）を無効化 */
.dp-lab-wrapper p:empty {
    display: none !important;
}

/* =========================================
   22. Footer & Copyright Gap Fix (最終修正)
   ========================================= */

/* 1. コンテンツエリアの高さ強制リセット */
/* コピーライトが存在する時、コンテンツが画面高さいっぱいに広がろうとするのを防ぐ */
body .site-content,
body.home .site-content,
body.dp-force-fullwidth .site-content {
    min-height: 0 !important; /* autoではなく0にすることで中身の高さに合わせる */
    height: auto !important;
    display: block !important; /* Flexboxによる縦伸長を解除 */
    margin-bottom: 0 !important;
}

/* 2. フッターエリアのマージンリセット */
.site-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. コピーライトエリア（原因の箇所）の修正 */
/* ここにマージンが含まれている場合があるため強制排除 */
.site-below-footer-wrap {
    margin-top: 0 !important;
    padding-top: 20px !important; /* 適切な余白は残す */
    padding-bottom: 20px !important;
    background-color: #1A2530 !important; /* 背景色を確実に指定 */
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 4. コピーライト内の要素の余白削除 */
.ast-footer-copyright {
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}
.ast-footer-copyright p {
    margin-bottom: 0 !important;
}

/* 5. ページラッパー（#page）のFlex解除 */
/* Astraは#pageに flex をかけてフッターを下に押し込むことがあるため、これを解除 */
#page {
    display: block !important;
    min-height: auto !important;
}

/* =========================================
   23. Footer Compact Fix (60px強制化)
   ========================================= */

/* 1. コピーライトエリアの外枠を圧縮 */
.site-below-footer-wrap {
    padding-top: 15px !important;    /* 上の余白を詰める */
    padding-bottom: 15px !important; /* 下の余白を詰める */
    min-height: 60px !important;     /* 最小高さを60pxに指定 */
    height: auto !important;         /* 中身に合わせて伸縮 */
}

/* 2. 内部のグリッド（行）の高さ制限を解除 */
/* ここが意外と高さを持っていることが多いです */
.site-below-footer-wrap .ast-builder-grid-row {
    min-height: 0 !important;
    grid-row-gap: 0 !important;
    padding: 0 !important;
}

/* 3. コピーライトテキスト自体の余白削除 */
.ast-footer-copyright,
.ast-footer-copyright p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important; /* 行間も詰める */
    font-size: 12px !important;  /* フォントサイズも控えめに */
}

/* 4. フッター全体の余白を念のためゼロに */
.site-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* =========================================
   24. Remove Footer Borders (区切り線削除)
   ========================================= */

/* コピーライトエリア上の線を消す */
.site-below-footer-wrap {
    border-top: none !important;
}

/* フッター内にあるすべての区切り線を消す */
.site-footer,
.site-primary-footer-wrap,
.ast-builder-grid-row {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* 万が一、以前のCSSが残っている場合の対策 */
.site-footer {
    border-top: 0 !important;
}
/* =========================================
   25. Button Hover Color Fix (文字色同化の修正)
   ========================================= */

/* すべてのカスタムボタンのホバー時の文字色を「白」に強制固定 */
/* !important をつけて、Astraのリンク色設定を上書きします */

.dp-btn-gold:hover,
.dp-btn-outline:hover,
.forminator-button-submit:hover,
.forminator-button-next:hover,
.dp-lab-main-card:hover {
    color: #ffffff !important;
}

/* -------------------------------------------
   ボタンの使い分け定義 (白背景用・黒背景用)
   ------------------------------------------- */

/* A. 通常の枠線ボタン (白背景用) */
/* トップページ下部や詳細ページで使用 */
.dp-btn-outline {
    border: 1px solid var(--dp-navy) !important;
    color: var(--dp-navy) !important;
    background: transparent !important;
}

.dp-btn-outline:hover {
    background: var(--dp-navy) !important;
    color: #ffffff !important;
    border-color: var(--dp-navy) !important;
}

/* B. 白抜きの枠線ボタン (黒背景・ヒーローエリア用) */
/* トップページFVなどの暗い背景で使用する場合は、HTML側でクラスを追加してください */
/* 例: class="dp-btn dp-btn-outline dp-btn-white" */
.dp-btn-white {
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
}

.dp-btn-white:hover {
    background: #ffffff !important;
    color: var(--dp-navy) !important;
    border-color: #ffffff !important;
}

/* =========================================
   26. Brand Section (運営会社セクション) - v2 Fix
   ========================================= */

.dp-brand-section {
    background-color: #1A2530;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(45deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #fff;
    padding: 50px 60px; /* 横のパディングを少し増やす */
    border-radius: 4px;
    
    /* ▼ 修正: 左右に広げず、左寄せで配置 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左詰めにする */
    gap: 60px; /* テキストとボタンの距離を固定（離れすぎ防止） */
    
    box-shadow: 0 20px 50px rgba(26, 37, 48, 0.2);
    position: relative;
    overflow: hidden;
}

/* 左端のゴールドアクセントバー */
.dp-brand-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #C5A059;
}

.dp-brand-content {
    flex: 1; /* テキストエリアは伸びるが、ボタンを押し出さない */
    max-width: 700px; /* テキストが横に広がりすぎないように制限 */
}

.dp-brand-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #C5A059;
    margin-bottom: 15px;
    font-weight: 700;
}

.dp-brand-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    line-height: 1;
}

.dp-brand-desc {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ボタンエリア */
.dp-brand-action {
    flex-shrink: 0; /* ボタンが潰れないように */
}

/* スマホ対応 */
@media (max-width: 900px) {
    .dp-brand-section {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        gap: 30px;
    }
    .dp-brand-section::before {
        width: 100%;
        height: 4px;
        bottom: auto;
    }
    .dp-brand-action {
        width: 100%;
    }
    .dp-brand-action .dp-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================
   27. Main Card Visibility Fix (視認性確保)
   ========================================= */

/* メインカード内の全テキスト・アイコンを白に強制統一 */
.dp-lab-main-card,
.dp-lab-main-card h2,
.dp-lab-main-card p,
.dp-lab-main-card .dp-lab-card-title,
.dp-lab-main-card svg {
    color: #ffffff !important;
    fill: transparent; /* SVGの塗りつぶし防止 */
    stroke: #ffffff !important; /* SVGの線を白に */
}

/* ボタン内のテキストも白に */
.dp-lab-main-card .dp-btn-gold {
    color: #ffffff !important;
}

/* ホバー時の枠線のみゴールドに変化（テキストは白のまま） */
.dp-lab-main-card:hover {
    border-color: #C5A059 !important;
}

/* =========================================
   28. Forminator Wide Layout (1100px化)
   ========================================= */

/* ラッパー幅の拡張 */
.forminator-ui {
    max-width: 1100px !important;
    margin: 0 auto !important;
    
    /* 幅が広がった分、内部の余白も増やして「ゆとり（Luxury）」を持たせる */
    padding: 60px 50px !important; 
}

/* スマホ対応（スマホではパディングを戻す） */
@media (max-width: 768px) {
    .forminator-ui {
        padding: 30px 20px !important;
        max-width: 100% !important;
    }
}

/* 入力欄が長くなりすぎないようにする保険（任意） */
/* ※これをやると左寄せになります。全幅使いたい場合は不要です */
/* .forminator-input, .forminator-select {
    max-width: 100%; 
}
*/

/* =========================================
   29. Mobile First Column Fix (スマホ縦並び強制)
   ========================================= */

@media (max-width: 768px) {
    
    /* フォームの行（Row）のFlex設定を解除 */
    .forminator-ui .forminator-row {
        display: block !important; /* 横並びを解除 */
        margin-bottom: 0 !important;
    }

    /* カラム（Column）を強制的に幅100%にする */
    .forminator-ui .forminator-col {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important; /* 上下の要素がくっつかないように余白確保 */
        padding: 0 !important; /* 横並び用の余白をリセット */
    }

    /* ついでに、スマホでの入力欄の高さを確保（指で押しやすく） */
    .forminator-ui .forminator-input,
    .forminator-ui .forminator-select {
        height: 50px !important; /* PCより少し高さを出してタップしやすく */
        font-size: 16px !important; /* iOSでズームされないサイズ */
    }
}

/* =========================================
   30. Forminator Clean Vertical (妥協案)
   グリッドを諦め、美しいリスト表示にする
   ========================================= */

body .forminator-ui .forminator-has_image .forminator-option {
    display: flex !important;       /* 画像とテキストを横並びに */
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    border: 1px solid #eee !important;
    padding: 15px !important;
    border-radius: 4px !important;
    background: #fff !important;
}

/* 画像を左側に小さく表示 */
body .forminator-ui .forminator-has_image .forminator-option img {
    width: 80px !important;  /* サムネイルサイズ */
    height: 80px !important;
    object-fit: cover !important;
    margin-right: 20px !important;
    border-radius: 4px !important;
}