/**
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;
}

/* =========================================
   31. GAIKO LAB Article Design (Single Post)
   ========================================= */

/* ラッパー調整 */
.dp-article-wrapper {
    background: #fff;
    padding-bottom: 80px;
}

/* --- 1. 記事ヘッダー (Hero) --- */
.dp-article-header {
    padding: 60px 0 40px;
    text-align: center;
    background: #FAFAFA; /* 薄いグレーでエリアを分ける */
    border-bottom: 1px solid #eee;
    margin-bottom: 60px;
}

.dp-article-meta-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-family: 'Helvetica Neue', sans-serif;
}

.dp-article-cat {
    background: #1A2530;
    color: #fff;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dp-article-date {
    color: #888;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.dp-article-title {
    font-family: 'Noto Sans JP', sans-serif; /* タイトルは読みやすさ重視 */
    font-weight: 700;
    font-size: 32px;
    color: #1A2530;
    line-height: 1.4;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.dp-article-thumbnail {
    max-width: 960px;
    margin: 0 auto -80px; /* 下マージンをネガティブにして本文エリアに少し食い込ませる等の演出も可だが、今回はシンプルに */
    margin-bottom: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.dp-article-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 2. 記事本文レイアウト --- */
.dp-article-content-container {
    max-width: 840px !important; /* 読みやすさを考慮してLPより狭くする */
    margin: 0 auto;
    padding: 0 20px;
}

.dp-article-body {
    font-size: 16px;
    line-height: 1.9; /* ゆったりめの行間 */
    color: #444;
    font-family: 'Noto Sans JP', sans-serif;
}

.dp-article-body p {
    margin-bottom: 2em; /* 段落間を広めに */
}

/* --- 見出しデザイン (重要) --- */
/* H2: ネイビーの左線＋下線で構造を明確に */
.dp-article-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A2530;
    padding: 15px 0 15px 20px;
    border-left: 5px solid #1A2530;
    border-bottom: 1px solid #eee;
    margin: 60px 0 30px;
    background: linear-gradient(90deg, #FAFAFA 0%, #fff 100%);
}

/* H3: ゴールドのアクセント */
.dp-article-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1A2530;
    margin: 40px 0 20px;
    padding-left: 15px;
    position: relative;
}
.dp-article-body h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    width: 4px;
    background: #C5A059; /* Gold */
}

/* H4: シンプルに太字 */
.dp-article-body h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0 15px;
    color: #1A2530;
}

/* リスト */
.dp-article-body ul, 
.dp-article-body ol {
    margin-bottom: 30px;
    padding-left: 20px;
    background: #f9f9f9;
    padding: 30px 30px 30px 50px; /* 囲みデザイン */
    border-radius: 4px;
}
.dp-article-body li {
    margin-bottom: 10px;
}

/* 引用 (Blockquote) */
.dp-article-body blockquote {
    margin: 40px 0;
    padding: 30px;
    background: #fff;
    border-left: 4px solid #C5A059;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-style: italic;
    color: #555;
    font-family: 'Shippori Mincho', serif; /* 明朝体で上品に */
}

/* 画像 */
.dp-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* テーブル（前回の回答で使用したものもカバー） */
.dp-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 0.95em;
}
.dp-article-body th {
    background: #1A2530;
    color: #fff;
    padding: 15px;
    border: 1px solid #1A2530;
}
.dp-article-body td {
    border: 1px solid #ddd;
    padding: 15px;
}

/* --- 3. ナビゲーション --- */
.dp-article-nav-container {
    max-width: 840px;
    margin: 60px auto 0;
    padding: 40px 20px 0;
    border-top: 1px solid #eee;
}
.navigation.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.nav-previous, .nav-next {
    flex: 1;
    max-width: 50%;
}
.nav-previous a, .nav-next a {
    display: block;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}
.nav-previous a:hover, .nav-next a:hover {
    border-color: #1A2530;
    background: #FAFAFA;
}
.nav-subtitle {
    display: block;
    font-size: 11px;
    color: #C5A059;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}
.nav-title {
    display: block;
    font-weight: 700;
    color: #1A2530;
    font-size: 14px;
    line-height: 1.4;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .dp-article-header { padding: 40px 0 20px; }
    .dp-article-title { font-size: 24px; }
    .dp-article-body h2 { font-size: 20px; }
    .dp-article-body { font-size: 15px; }
    .navigation.post-navigation .nav-links { flex-direction: column; }
    .nav-previous, .nav-next { max-width: 100%; }
}

/* =========================================
   32. GAIKO LAB Article Components (Global)
   カスタムHTMLから分離・共通化したパーツ群
   ========================================= */

/* --- 記事幅の調整 (900pxに変更) --- */
.dp-article-content-container {
    max-width: 900px !important; /* 840px -> 900px */
    margin: 0 auto;
    padding: 0 20px;
}
.dp-article-title {
    max-width: 900px; /* タイトル幅も合わせる */
}
.dp-article-nav-container {
    max-width: 900px; /* ナビゲーション幅も合わせる */
}

/* =========================================
   GAIKO LAB Article Components - Table
   PCとスマホで自動可変するレスポンシブ・テーブル
   ========================================= */
.gl-article-table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    font-size: 15px;
    background: #fff;
}

.gl-article-table th {
    background-color: #FAFAFA;
    border: 1px solid #ddd;
    padding: 16px;
    text-align: left;
    font-weight: 700;
    color: #1A2530;
}

.gl-article-table td {
    border: 1px solid #ddd;
    padding: 16px;
    vertical-align: top;
    line-height: 1.6;
}

/* --- スマホ表示時のカード化 (768px以下) --- */
@media screen and (max-width: 768px) {
    /* テーブル本体の外枠線を強制リセット */
    .gl-article-table {
        border: none !important;
    }

    /* テーブルの基本構造をブロック要素に強制リセット */
    .gl-article-table, 
    .gl-article-table thead, 
    .gl-article-table tbody, 
    .gl-article-table th, 
    .gl-article-table td, 
    .gl-article-table tr { 
        display: block !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* PC用の見出し行(thead)は非表示にする */
    .gl-article-table thead { 
        display: none !important; 
    }
    
    /* 行(tr)を1つのカードとしてデザイン */
    .gl-article-table tr {
        margin-bottom: 24px !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
    }
    
    /* セル(td)のデザイン：元の枠線を完全に消去 */
    .gl-article-table td {
        border: none !important; /* ←ここで不要な線を消す */
        border-bottom: 1px dashed #eee !important;
        padding: 16px 20px !important;
        text-align: left !important;
    }
    
    .gl-article-table td:last-child {
        border-bottom: none !important;
    }
    
    /* 1つ目のセル(項目名など)をヘッダー風に強調して視認性を上げる */
    .gl-article-table td:first-child {
        background-color: #1A2530 !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        border-bottom: none !important;
    }
    
    /* 1つ目のセル内のstrongタグ等の色も白に強制 */
    .gl-article-table td:first-child strong,
    .gl-article-table td:first-child a {
        color: #fff !important;
    }
}

/* --- 2. 強調ボックス (プロのアドバイス等) --- */
.gl-info-box {
    background-color: #f9fbfd;
    border-left: 5px solid #1A2530; /* Navy */
    padding: 25px;
    margin: 40px 0;
    border-radius: 0 4px 4px 0;
}
.gl-info-box h3 {
    margin-top: 0 !important;
    padding-left: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 1.2em !important;
}
.gl-info-box h3::before { display: none !important; } /* 記事H3の装飾を消す */

/* --- 3. CTAボックス (シミュレーター誘導) --- */
.gl-cta-box {
    background-color: #fff;
    border: 2px solid #EEEEEE;
    border-radius: 8px;
    padding: 40px 30px;
    margin-top: 60px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.gl-cta-title {
    font-size: 1.6em;
    font-weight: 700;
    color: #1A2530; /* Navy */
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}
.gl-cta-text {
    font-size: 1em;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #555;
    text-align: left;
    display: inline-block; /* 中央寄せしつつ左揃え */
    max-width: 100%;
}
.gl-cta-btn {
    display: inline-block;
    background-color: #C5A059; /* Gold */
    color: #fff !important;
    padding: 18px 50px;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}
.gl-cta-btn:hover {
    background-color: #1A2530; /* Navy */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(26, 37, 48, 0.3);
    color: #fff !important;
}

/* スマホ調整 */
@media (max-width: 600px) {
    .gl-cta-box { padding: 30px 20px; }
    .gl-cta-title { font-size: 1.3em; }
    .gl-cta-btn { width: 100%; padding: 15px 0; box-sizing: border-box; }
}

/* =========================================
   33. GAIKO LAB Blog Index (外構の教科書)
   ========================================= */

/* --- 1. ヒーローエリア --- */
.dp-blog-hero {
    background-color: #1A2530; /* Navy */
    /* 薄いグリッド背景を入れるとラボ感が出ます */
    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: 30px 30px;
    padding: 100px 0 80px;
    text-align: center;
    color: #fff;
    margin-bottom: 60px;
}
.dp-blog-subtitle {
    display: block;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #C5A059; /* Gold */
    margin-bottom: 15px;
    font-weight: 700;
}
.dp-blog-title {
    font-family: 'Shippori Mincho', serif; /* 教科書らしい明朝体 */
    font-size: 42px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
}
.dp-blog-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
}

/* --- 2. グリッドレイアウト --- */
.dp-blog-container {
    padding-bottom: 100px;
}
.dp-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* 共通カードスタイル */
.dp-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    transition: transform 0.3s ease;
}
.dp-card-link:hover {
    transform: translateY(-5px);
}
.dp-card-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4 / 3; /* 4:3固定 */
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.dp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.dp-card-link:hover .dp-card-thumb img {
    transform: scale(1.05);
}

/* カテゴリラベル */
.dp-card-cat {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #1A2530;
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    font-weight: 700;
    z-index: 2;
}

/* テキスト部分 */
.dp-card-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    font-family: 'Helvetica Neue', sans-serif;
}
.dp-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1A2530;
    line-height: 1.5;
    margin-bottom: 0;
}

/* --- 3. Featured Post (最新記事・1件目) --- */
/* 1件目だけ横幅いっぱいに広げる */
.dp-card-featured {
    grid-column: 1 / -1; /* 全カラム使用 */
    margin-bottom: 40px;
}
.dp-card-featured .dp-card-link {
    display: flex; /* 横並びレイアウト */
    align-items: center;
    gap: 50px;
    background: #fff;
    border: 1px solid #eee;
    padding: 0;
    border-radius: 4px;
    overflow: hidden; /* 角丸用 */
}
/* サムネイル */
.dp-card-featured .dp-card-thumb {
    width: 55%;
    aspect-ratio: 16 / 9; /* 横長 */
    margin-bottom: 0;
    border-radius: 0;
}
/* テキストエリア */
.dp-card-featured .dp-card-body {
    width: 45%;
    padding: 40px;
}
.dp-card-featured .dp-card-title {
    font-size: 28px; /* タイトル大きく */
    margin-bottom: 15px;
}
.dp-card-excerpt {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dp-read-more {
    font-size: 12px;
    font-weight: 700;
    color: #C5A059;
    letter-spacing: 0.1em;
}

/* --- 4. ページネーション --- */
.dp-pagination {
    margin-top: 60px;
    text-align: center;
}
.dp-pagination .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid #ddd;
    color: #1A2530;
    text-decoration: none;
    border-radius: 2px;
    font-size: 14px;
    transition: 0.3s;
}
.dp-pagination .page-numbers.current,
.dp-pagination .page-numbers:hover {
    background: #1A2530;
    color: #fff;
    border-color: #1A2530;
}

/* --- レスポンシブ --- */
@media (max-width: 900px) {
    .dp-blog-grid {
        grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
        gap: 20px;
    }
    /* Featured記事も縦積みに戻す */
    .dp-card-featured .dp-card-link {
        flex-direction: column;
        border: none;
    }
    .dp-card-featured .dp-card-thumb {
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 4px;
    }
    .dp-card-featured .dp-card-body {
        width: 100%;
        padding: 0;
    }
    .dp-card-featured .dp-card-title {
        font-size: 22px;
    }
}
@media (max-width: 600px) {
    .dp-blog-hero { padding: 60px 0 40px; }
    .dp-blog-title { font-size: 28px; }
    .dp-blog-grid { grid-template-columns: 1fr; } /* スマホは1列 */
}

/* =========================================
   34. GAIKO LAB Article Tags
   ========================================= */
.dp-article-tags {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.dp-tags-label {
    font-size: 12px;
    font-weight: 700;
    color: #1A2530;
    letter-spacing: 0.1em;
    margin-right: 5px;
}
.dp-tag-link {
    display: inline-block;
    background-color: #f4f4f4;
    color: #555;
    font-size: 12px;
    padding: 6px 15px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.dp-tag-link:hover {
    background-color: #1A2530; /* Navy */
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================
   35. Archive Page Design (Tags & Categories)
   ========================================= */

.dp-archive-hero {
    background-color: #1A2530; /* Navy */
    background-image: linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.03) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    padding: 80px 0 60px;
    text-align: center;
    color: #fff;
    margin-bottom: 0; /* 下のナビとくっつけるため0に */
}

.dp-archive-label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #1A2530;
    background: #C5A059;
    padding: 5px 15px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-weight: 700;
}

.dp-archive-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}
.dp-archive-title:lang(ja) {
    font-family: 'Shippori Mincho', serif;
}

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

/* =========================================
   36. Category Navigation (Horizontal Scroll / Media Standard)
   ========================================= */

/* ナビゲーション帯 */
.dp-cat-nav-wrapper {
    border-bottom: 1px solid #eee;
    background: #fff;
    /* スクロール追従 */
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    z-index: 100;
    width: 100%;
    margin-top: 0;
    padding: 0; /* 余計な隙間を削除 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); /* わずかな影でレイヤー感を出す */
}

/* リスト本体（横スクロールコンテナ） */
ul.dp-cat-nav {
    display: flex !important;
    flex-wrap: nowrap !important; /* 絶対に折り返さない */
    justify-content: flex-start; /* 左詰めスタート */
    align-items: center;
    
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    
    /* スクロール設定 */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール有効化 */
    
    /* スクロールバー非表示（モダンブラウザ用） */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Chrome/Safari用スクロールバー非表示 */
ul.dp-cat-nav::-webkit-scrollbar {
    display: none;
}

/* リストアイテム */
ul.dp-cat-nav li {
    flex: 0 0 auto; /* 縮小させない */
    margin: 0;
    padding: 0;
    list-style: none !important;
}

/* リンクデザイン（タブ型） */
ul.dp-cat-nav a {
    display: block;
    padding: 18px 20px; /* タップしやすい領域確保 */
    font-size: 12px;
    font-weight: 700;
    color: #888 !important; /* 未選択はグレー */
    text-decoration: none !important;
    letter-spacing: 0.1em;
    position: relative;
    transition: color 0.3s;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* PC表示時は中央寄せにする（画面が広い場合） */
@media (min-width: 769px) {
    ul.dp-cat-nav {
        justify-content: center;
    }
    ul.dp-cat-nav a {
        padding: 20px 30px;
        font-size: 13px;
    }
}

/* --- アクティブ・ホバー状態 --- */

/* 選択中の文字色 */
ul.dp-cat-nav li.current a,
ul.dp-cat-nav a:hover {
    color: #1A2530 !important; /* ブランドネイビー */
}

/* 選択中の下線（ゴールド） */
ul.dp-cat-nav li.current a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px; /* 線の長さを調整（文字幅に合わせる感覚） */
    right: 15px;
    height: 3px;
    background: #C5A059; /* Gold */
    border-radius: 3px 3px 0 0;
}

/* スマホでの微調整 */
@media (max-width: 768px) {
    ul.dp-cat-nav {
        padding-left: 10px !important; /* 左端に少し余白 */
        padding-right: 20px !important; /* 右端も見切れ感を作る */
    }
    /* 最初のアイテムの余白 */
    ul.dp-cat-nav li:first-child a {
        padding-left: 15px;
    }
    ul.dp-cat-nav li:first-child.current a::after {
        left: 10px;
    }
    /* 最後のアイテムの余白（スクロール詰まり防止） */
    ul.dp-cat-nav li:last-child {
        padding-right: 20px; 
    }
}

/* =========================================
   37. Related Posts Section & Breadcrumbs
   ========================================= */

.dp-related-posts-section {
    background: #f9f9f9;
    padding: 60px 0;
    margin-top: 60px;
    border-top: 1px solid #eee;
}
.dp-related-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 40px;
    font-family: 'Shippori Mincho', serif;
}

.dp-breadcrumbs {
    font-size: 11px;
    color: #888;
    padding: 20px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-breadcrumbs a {
    color: #888;
    text-decoration: none;
    transition: 0.3s;
}
.dp-breadcrumbs a:hover {
    color: #C5A059;
}

/* =========================================
   修正：ブログ一覧コンテナの余白調整
   ========================================= */

.dp-blog-container {
    /* ナビゲーションとの間に余白を作る */
    padding-top: 60px !important; 
    padding-bottom: 100px;
}
@media (max-width: 768px) {
    .dp-blog-container {
        padding-top: 40px !important;
    }
}

/* =========================================
   GAIKO LAB V3 Layout (Simulator First)
   ========================================= */

.dp-lab-grid-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.dp-lab-card.media-card {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    padding: 0;
    border: none;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
}
.dp-card-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s;
    z-index: 1;
}
.dp-lab-card.media-card:hover .dp-card-bg-img {
    transform: scale(1.05);
}
.dp-card-overlay {
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 100%);
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.dp-card-overlay h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
}
.dp-card-overlay p {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    margin-bottom: 20px;
}
.dp-badge-new {
    background: #C5A059;
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: auto;
}

.dp-lab-card.simple-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
}
.dp-badge-client {
    font-size: 10px;
    background: #eee;
    color: #666;
    padding: 2px 6px;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 5px;
}

@media (max-width: 900px) {
    .dp-lab-grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .dp-lab-card.media-card {
        min-height: 240px;
    }
    .dp-lab-hero-text .dp-btn {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 5px;
    }
}

/* =========================================
   40. GAIKO LAB Article Design (Refined Header - 2026 Mobile Fix)
   ========================================= */

/* ヘッダー全体の余白バランス調整 */
.dp-article-header {
    padding: 80px 0 60px !important;
    text-align: center;
    background: #fff !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 1. タイトル (H1) */
.dp-article-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 36px !important;
    color: #1A2530 !important;
    line-height: 1.4 !important;
    margin-bottom: 25px !important;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.02em;
}

/* 2. メタ情報エリア (カテゴリ + 日付) */
.dp-article-meta-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* スマホで長くなっても折り返す */
    gap: 15px;
    margin-bottom: 60px !important;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

/* カテゴリ (リンク・ゴールドテキスト) - 鉄壁の指定 */
a.dp-meta-cat,
a.dp-meta-cat:visited,
a.dp-meta-cat:hover,
a.dp-meta-cat:active,
a.dp-meta-cat:focus {
    color: #C5A059 !important; /* Gold */
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid transparent;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* iOSの青色リンク強制書き換え防止 */
    -webkit-text-fill-color: #C5A059 !important; 
}

/* ホバー時のみ下線を表示 */
a.dp-meta-cat:hover {
    border-bottom-color: #C5A059;
    opacity: 0.8;
}

/* 区切り線 (スラッシュ) */
.dp-meta-sep {
    color: #ddd;
    font-weight: 300;
}

/* 日付 (グレー) */
.dp-meta-date {
    color: #999 !important;
    font-weight: 500;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .dp-article-header { 
        padding: 50px 20px 30px !important; /* 左右に余白を持たせる */
    }
    
    .dp-article-title { 
        font-size: 24px !important; /* スマホで見やすいサイズに調整 */
        line-height: 1.5 !important; 
        margin-bottom: 15px !important; 
    }
    
    .dp-article-meta-bottom { 
        margin-bottom: 40px !important; 
        gap: 10px; /* 隙間を少し詰める */
        font-size: 11px; /* スマホでは少し小さくして上品に */
    }
}

/* =========================================
   GAIKO LAB Search Bar (High-End Fix)
   ========================================= */

/* 1. コンテナ：中央寄せと配置調整 */
.dp-search-container-hero {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    position: relative;
    z-index: 10; /* 他の要素より手前に表示 */
}

/* 2. フォーム枠：ここを基準にボタンを配置 */
.dp-hero-search-form {
    position: relative;
    width: 100%;
    max-width: 640px; /* 程よいワイド幅 */
    display: block;
}

/* 3. 入力欄：カプセル型・浮遊シャドウ */
input.dp-hero-search-input {
    width: 100% !important;
    height: 64px !important; /* 指で押しやすい高さ */
    padding: 0 140px 0 35px !important; /* 右側にボタンが入るスペースを空ける */
    border-radius: 100px !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important; /* 高級感のある影 */
    font-size: 16px !important;
    color: #1A2530 !important; /* Navy Text */
    outline: none !important;
    transition: all 0.3s ease !important;
    
    /* iOSなどでのデフォルトスタイル削除 */
    -webkit-appearance: none;
    appearance: none;
}

/* フォーカス時の動き */
input.dp-hero-search-input:focus {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px); /* 少し浮き上がる */
}

/* プレースホルダーの色 */
input.dp-hero-search-input::placeholder {
    color: #999;
    font-weight: 500;
}

/* 4. 送信ボタン：入力欄の中に完全収納 */
button.dp-hero-search-submit {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important; /* 上下左右の隙間を均等に */
    
    width: auto !important;
    min-width: 120px !important;
    height: auto !important;
    
    background: #1A2530 !important; /* Navy Base */
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ホバー時のアクション */
button.dp-hero-search-submit:hover {
    background: #C5A059 !important; /* Gold Accent */
    transform: scale(1.05); /* 少し大きくなる */
}

/* 5. スマホ表示の微調整 */
@media (max-width: 600px) {
    /* 入力欄を少し小さく */
    input.dp-hero-search-input {
        height: 56px !important;
        font-size: 14px !important;
        padding-right: 100px !important; /* ボタン幅に合わせて調整 */
    }
    
    /* ボタンもコンパクトに */
    button.dp-hero-search-submit {
        min-width: 90px !important;
        font-size: 11px !important;
        top: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
    }
}



/* =========================================
   GAIKO LAB リデザイン CSS追加分
   2026年最新トレンド対応
   ========================================= */

/* =========================================
   1. ヒーロー改善版
   ========================================= */

.dp-lab-hero-enhanced {
    background: linear-gradient(135deg, #1A2530 0%, #2a3a4a 100%);
    position: relative;
    overflow: hidden;
}

.dp-lab-hero-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.dp-lab-hero-text {
    position: relative;
    z-index: 2;
}

.dp-lab-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dp-btn-primary {
    background: linear-gradient(135deg, #C5A059 0%, #d4b366 100%);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dp-btn-primary:hover {
    background: linear-gradient(135deg, #d4b366 0%, #C5A059 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.4);
}

/* =========================================
   2. 業界の問題点セクション
   ========================================= */

.dp-lab-section-problems {
    background: #FFFFFF;
    padding: 100px 0;
}

.dp-lab-section-header {
    text-align: center;
    margin-bottom: 80px;
}

.dp-lab-section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.dp-lab-section-header p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.dp-lab-problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.dp-lab-problem-card {
    background: linear-gradient(135deg, #FAFAFA 0%, #F4F5F7 100%);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dp-lab-problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #C5A059 0%, transparent 100%);
}

.dp-lab-problem-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #C5A059;
}

.dp-lab-problem-number {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #C5A059;
    margin-bottom: 20px;
    opacity: 0.8;
}

.dp-lab-problem-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 15px;
    line-height: 1.3;
}

.dp-lab-problem-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

.dp-lab-problem-card strong {
    color: #1A2530;
    font-weight: 700;
}

/* =========================================
   3. 3ステップセクション
   ========================================= */

.dp-lab-section-steps {
    background: #F4F5F7;
    padding: 100px 0;
}

.dp-lab-steps-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap;
}

.dp-lab-step {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    text-align: center;
    flex: 1;
    min-width: 280px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dp-lab-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #C5A059;
}

.dp-lab-step-number {
    display: inline-block;
    background: linear-gradient(135deg, #C5A059 0%, #d4b366 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.dp-lab-step-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #F4F5F7 0%, #eee 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #1A2530;
    transition: all 0.3s;
}

.dp-lab-step:hover .dp-lab-step-icon {
    background: linear-gradient(135deg, #C5A059 0%, #d4b366 100%);
    color: #fff;
    transform: scale(1.1);
}

.dp-lab-step h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 15px;
}

.dp-lab-step p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

.dp-lab-step-arrow {
    font-size: 24px;
    color: #C5A059;
    font-weight: 700;
    margin: 0 10px;
}

/* =========================================
   4. プロの提案ロジックセクション
   ========================================= */

.dp-lab-section-logic {
    background: #FFFFFF;
    padding: 100px 0;
}

.dp-lab-logic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.dp-lab-logic-card {
    background: linear-gradient(135deg, #FAFAFA 0%, #F4F5F7 100%);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dp-lab-logic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #C5A059 0%, transparent 100%);
}

.dp-lab-logic-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #C5A059;
}

.dp-lab-logic-label {
    display: inline-block;
    background: linear-gradient(135deg, #C5A059 0%, #d4b366 100%);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.dp-lab-logic-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 15px;
    line-height: 1.3;
}

.dp-lab-logic-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* =========================================
   5. 信頼構築セクション（改善版）
   ========================================= */

.dp-lab-section-trust {
    background: #F4F5F7;
    padding: 100px 0;
}

.dp-lab-trust-content-wide {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
}

.dp-lab-trust-text-wide h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: #1A2530;
    margin-bottom: 40px;
    line-height: 1.3;
}

.dp-lab-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 20px;
}

.dp-lab-trust-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dp-lab-trust-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: #C5A059;
    transform: translateY(-4px);
}

.dp-lab-trust-item-icon {
    font-size: 28px;
    min-width: 40px;
    text-align: center;
}

.dp-lab-trust-item strong {
    display: block;
    color: #1A2530;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
}

.dp-lab-trust-item p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.dp-lab-trust-image-wide {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
}

.dp-lab-trust-card-wide {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
    padding: 50px 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.dp-lab-trust-card-wide:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #C5A059;
}

.dp-lab-trust-icon-wide {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1A2530 0%, #2a3a4a 100%);
    color: #C5A059;
    font-size: 42px;
    font-weight: 900;
    font-family: 'Playfair Display', serif;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.dp-lab-trust-card-text p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

.dp-lab-trust-card-text strong {
    color: #1A2530;
    font-weight: 700;
}

/* =========================================
   レスポンシブ対応（信頼構築セクション）
   ========================================= */

@media (max-width: 1024px) {
    .dp-lab-trust-content-wide {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dp-lab-trust-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dp-lab-trust-text-wide h3 {
        font-size: 22px;
    }

    .dp-lab-trust-item {
        padding: 15px;
    }

    .dp-lab-trust-item-icon {
        font-size: 24px;
    }

    .dp-lab-trust-card-wide {
        padding: 40px 30px;
    }

    .dp-lab-trust-icon-wide {
        width: 70px;
        height: 70px;
        font-size: 36px;
    }

    .dp-lab-trust-card-text p {
        font-size: 13px;
    }
}


/* =========================================
   6. FAQ セクション
   ========================================= */

.dp-lab-section-faq {
    background: #FFFFFF;
    padding: 100px 0;
}

.dp-lab-faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.dp-lab-faq-item {
    border-bottom: 1px solid #eee;
    padding: 30px 0;
    transition: all 0.3s;
}

.dp-lab-faq-item:last-child {
    border-bottom: none;
}

.dp-lab-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
}

.dp-lab-faq-question:hover h3 {
    color: #C5A059;
}

.dp-lab-faq-question h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1A2530;
    margin: 0;
    transition: all 0.3s;
}

.dp-lab-faq-toggle {
    font-size: 24px;
    color: #C5A059;
    font-weight: 700;
    transition: transform 0.3s;
}

.dp-lab-faq-item.active .dp-lab-faq-toggle {
    transform: rotate(45deg);
}

.dp-lab-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dp-lab-faq-item.active .dp-lab-faq-answer {
    max-height: 500px;
}

.dp-lab-faq-answer p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin: 20px 0 0 0;
}

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

.dp-lab-section-cta {
    background: linear-gradient(135deg, #1A2530 0%, #2a3a4a 100%);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dp-lab-section-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.dp-lab-cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.dp-lab-section-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.dp-lab-section-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 40px;
}

.dp-lab-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.dp-lab-cta-buttons .dp-btn {
    padding: 16px 40px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================
   8. レスポンシブ対応
   ========================================= */

@media (max-width: 1024px) {
    .dp-lab-problems-grid {
        grid-template-columns: 1fr;
    }

    .dp-lab-logic-grid {
        grid-template-columns: 1fr;
    }

    .dp-lab-trust-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dp-lab-steps-container {
        flex-direction: column;
    }

    .dp-lab-step-arrow {
        transform: rotate(90deg);
        margin: -10px 0;
    }
}

@media (max-width: 768px) {
    .dp-lab-section-header h2 {
        font-size: 28px;
    }

    .dp-lab-section-header p {
        font-size: 14px;
    }

    .dp-lab-problem-card,
    .dp-lab-step,
    .dp-lab-logic-card {
        padding: 30px;
    }

    .dp-lab-problem-number {
        font-size: 36px;
    }

    .dp-lab-step-icon {
        width: 60px;
        height: 60px;
    }

    .dp-lab-section-cta h2 {
        font-size: 28px;
    }

    .dp-lab-cta-buttons {
        flex-direction: column;
    }

    .dp-lab-cta-buttons .dp-btn {
        width: 100%;
    }
}

/* =========================================
   9. アニメーション
   ========================================= */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* AOS（Animate On Scroll）ライブラリ用 */
[data-aos] {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-left"] {
    transform: translateX(30px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

/* =========================================
   GAIKO LAB - Icon Optimization (SVG Fix)
   Silent Luxury Tone & Manner
   ========================================= */

/* 信頼構築セクション（Section 5）のアイコンスタイル修正 */

.dp-lab-trust-item-icon {
    font-size: 0; /* 絵文字の影響を消す */
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 160, 89, 0.1); /* ゴールドの薄い背景 */
    border-radius: 50%; /* 完全な円形 */
    color: var(--dp-gold); /* アイコンの色をゴールドに統一 */
    margin-right: 15px;
    transition: all 0.3s ease;
}

/* SVG自体のサイズと線の設定 */
.dp-lab-trust-item-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor; /* 親要素の色（ゴールド）を継承 */
    stroke-width: 1.5;    /* 細めの線で上品に */
    fill: none;
}

/* ホバー時のエフェクト */
.dp-lab-trust-item:hover .dp-lab-trust-item-icon {
    background: var(--dp-gold);
    color: #fff; /* アイコンを白抜きに反転 */
    transform: scale(1.1);
}

/* グリッドカード（Section 8）のアイコンスタイル修正 */
.dp-lab-icon {
    /* 既存スタイルの調整 */
    background: #F4F5F7;
    color: var(--dp-navy); /* 基本はネイビー */
    width: 50px;
    height: 50px;
    border-radius: 8px; /* 少し角丸 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.dp-lab-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* カードホバー時 */
.dp-lab-card:hover .dp-lab-icon {
    background: var(--dp-navy);
    color: var(--dp-gold); /* ゴールドに変化 */
    transform: translateY(-3px);
}

/* Dapplesロゴ（D）の特別対応 */
.dp-lab-icon span {
    font-size: 24px;
    line-height: 1;
}

/* ── Astra scroll-to-top を完全非表示 ── */
.ast-scroll-top,
#ast-scroll-top,
[data-scroll-top],
.scrolltop,
#scroll-to-top,
.scroll-to-top,
.back-to-top,
#back-to-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}