/* ==========================================================================
   PRODUCT DETAIL PAGE
   index(5).html と統一したデザイン
   ========================================================================== */

/* =================================
   パンくず
================================= */
.breadcrumb-container {
    max-width: 1200px;
    margin: 120px auto 0;
    padding: 0 24px;
}

.breadcrumb {
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary);
}

/* =================================
   HERO
================================= */
.detail-hero {
    min-height: auto;
    background: #fff;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-lg);
    align-items: center;
}

.hero-content h1 {
    margin-bottom: var(--space-sm);
}

.hero-graphic img {
    width: 100%;
    display: block;
}

/* =================================
   共通カード
================================= */
.page-product-detail .card,
.card-outline,
.industry-item {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.03);
    transition: all .3s ease;
}
.gateway-section .section-inner {
   content: "";
    display: block;
    clear: both;
}

/* =================================
   上部ボーダー
================================= */
.border-top-green {
    border-top: 6px solid var(--secondary);
}

.border-top-blue {
    border-top: 6px solid var(--primary);
}

.inner-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(100px, 12vh, 140px) 24px;
    position: relative;
}
/* =================================
   バッジ
================================= */
.badge {
    display: inline-block;
    margin-bottom: var(--space-sm);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.badge-green {
    background: rgba(118,199,36,.12);
    color: var(--secondary);
}

.badge-blue {
    background: rgba(37,194,204,.12);
    color: var(--primary);
}

/* =================================
   カード内
================================= */
.card-lead {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.card-footer-text {
    margin-top: auto;
    padding-top: var(--space-sm);
    font-weight: 600;
}

/* =================================
   警告ボックス
================================= */
.warning-box {
    background: #fff8f8;
    border-radius: 20px;
    padding: 24px;
}

.warning-box h4 {
    color: #d93838;
    margin-bottom: 12px;
}

.conclusion-box {
    background: #f4fbfc;
    border-radius: 20px;
    padding: 24px;
    margin-top: auto;
    text-align: center;
}

/* =================================
   リスト
================================= */
.icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.icon-list li {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 999px;
    padding: 8px 16px;
    margin: 0;
}

.bullet-list {
    padding: 0;
}

/* =================================
   文章専用セクション（可読性特化）
================================= */
/* 1. 文字が入るエリアの最大幅を「読みやすい760px」に制限して中央寄せ */
.narrow-content {
    max-width: 760px !important;
    margin: 0 auto !important;
}


/* 4. 一般の段落（長文を読ませるための余白と行間設計） */
.text-document p {
    font-size: 1.05rem; /* 小さすぎず大きすぎない絶妙なサイズ */
    color: var(--text);
    line-height: 1.95 !important; /* 行間を少し広めにして目の疲れを軽減 */
    margin-bottom: 1.8rem !important; /* 段落と段落の間をしっかり空ける */
    text-align: justify; /* 両端を綺麗に揃えて本のような美しい見た目に */
}

/* 最後の段落の下マージンはリセット */
.text-document p:last-child {
    margin-bottom: 0 !important;
}
/* =================================
   共通問題セクション
================================= */
.common-problem .grid-3 {
    align-items: stretch;
}

.card-outline {
    padding: 30px;
}

.highlight-box {
    background: #fffdf7;
    border: 2px solid rgba(229,164,0,.2);
    box-shadow: 0 8px 24px rgba(229,164,0,.1);
}

/* =================================
   ゲートウェイセクション（縦並び・ジグザグ修正）
================================= */
/* 1. 古いclear:bothの指定を無効化し、ブロック自体を縦並びのフレックスに変更 */
.gateway-section {
    display: flex;
    flex-direction: column;
}

.gateway-section .section-inner.feature {
    display: grid !important;       /* ブロックの「中身」だけを左右2カラムのグリッドにする */
    grid-template-columns: 1fr 1fr; /* 左にテキスト、右に画像（デフォルト） */
    gap: var(--space-lg);
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto var(--space-xs) !important; /* 下側に大きな余白を作って次のブロックと離す */
}

/* 一番最後のブロックだけは、下の余白をゼロにする */
.gateway-section .section-inner.feature:last-child {
    margin-bottom: 0 !important;
}


/* 2つ目のブロック（偶数番目）のテキストと画像の左右を反転させてジグザグにする */
@media (min-width: 1025px) {
    .gateway-section .section-inner.feature:nth-of-type(2) .feature-content {
        order: 2; /* テキストを右側に */
    }
    .gateway-section .section-inner.feature:nth-of-type(2) .feature-image {
        order: 1; /* 画像を左側に */
    }
}

/* スマホ・タブレット表示（画面幅1024px以下）の時は、各ブロックの中身も縦1列にする */
@media (max-width: 1024px) {
    .gateway-section .section-inner.feature {
        grid-template-columns: 1fr !important; /* 1カラムにする */
        text-align: center;
        gap: var(--space-sm);
        margin-bottom: var(--space-lg) !important;
    }
    
    /* スマホ時は画像が上、テキストが下になるように綺麗に整列 */
    .gateway-section .section-inner.feature .feature-image {
        order: -1; 
    }
    .gateway-section .section-inner.feature .feature-content {
        order: 1;
    }
}
/* =================================
   ミニフロー
================================= */
.flow-mini {
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.flow-mini span {
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 1.2rem;
    font-weight: 700;
}

.alert-text {
    color: #d93838;
    font-weight: 700;
    font-size: 1.2rem;
}


/* =================================
   ワークフロー
================================= */
.bg-light-blue {
    background: #f4fbfc !important;
}

.tag {
    display: inline-block;
    background: rgba(37,194,204,.12);
    color: var(--primary);
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 700;
}

.ai-reply {
    border-left: 4px solid var(--primary);
    padding-left: 16px;
    font-weight: 600;
}

/* =================================
   業界一覧
================================= */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--space-sm);
}

.industry-item {
    padding: 32px 20px;
    text-align: center;
}

.industry-item span {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.industry-item p {
    font-weight: 700;
    text-align: center;
}

/* =================================
   CTA
================================= */
.bottom-cta {
    background: #f8fafc !important;
}

.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.cta-text-left h2 {
    text-align: left;
    color: var(--text);
    /* 確実に下に隙間を空けたい場合は、h2の下マージンを縛るのも有効です */
    margin-bottom: var(--space-xs); 
}

/* ★ 効いていなかったpタグへの指定を明示的に追加・強化します */
.page-product-detail .cta-text-left p {
    display: block;
    margin-top: var(--space-sm) !important; /* !important をつけて確実に最優先で適用します */
    color: var(--text-muted);
}

.cta-buttons-right {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* =================================
   レスポンシブ
================================= */
@media (max-width: 960px) {

    .hero-grid,
    .cta-flex {
        grid-template-columns: 1fr;
        display: grid;
        text-align: center;
    }

    .cta-text-left h2 {
        text-align: center;
    }

    .industry-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 768px) {

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .industry-grid {
        grid-template-columns: 1fr;
    }

    .card-outline {
        padding: 28px;
    }
}