/* =========================================
   Importance Section (スタイル写真の重要性)
   ========================================= */
.importance {
    background-color: #f9f9f9;
}

.importance-heading {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.4;
}

.importance-lead {
    font-size: 18px;
    margin-bottom: 30px;
}

/* 重要性チャート（画像） */
.importance-chart {
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 0 20px;
    text-align: center;
}

.importance-chart img {
    max-width: 700px;
    width: 100%;
    height: auto;
    padding: 20px;
}

/* プラットフォーム別ブロック */
.platform-blocks {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.platform-block {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.platform-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.platform-title::before {
    content: '';
    display: inline-block;
    width: 45px;
    height: 45px;
    margin-right: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* アイコン画像を importance_icon_XX.webp に設定 */
.icon-hpb::before { background-image: url('../img/importance_icon_01.webp'); }
.icon-insta::before { background-image: url('../img/importance_icon_02.webp'); }
.icon-google::before { background-image: url('../img/importance_icon_03.webp'); }

.platform-desc {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* メイン画像エリア */
.platform-main-image {
    margin-bottom: 40px;
    text-align: center;
}

.platform-main-image img {
    max-width: 100%;
    height: auto;
}

/* プレースホルダー（グレー画像） */
.placeholder {
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    border-radius: 10px;
    min-height: 250px; /* 最小の高さを指定 */
}
.platform-main-image.placeholder {
    min-height: 300px; /* メイン画像は少し高さを確保 */
}

/* マーカー強調 */
.marker {
    background: linear-gradient(transparent 60%, #ffeb3b 60%);
    font-weight: bold;
    padding: 0 2px;
}

/* プラットフォーム詳細（画像とテキストの横並び） */
.platform-detail {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px dashed #eee;
}
.platform-detail:first-of-type {
    border-top: none;
    padding-top: 0;
}
.platform-detail.reverse {
    flex-direction: row-reverse;
}
.detail-text { flex: 1; }
.detail-image { flex: 1; text-align: center; }

/* Importanceセクションの詳細画像（背景グレーあり） */
.detail-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    background-color: #f5f5f5;
}

.detail-text h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}
.detail-text p {
    font-size: 16px;
    line-height: 1.8;
}

/* 出典元注釈テキスト */
.source-note {
    display: block;
    font-size: 11px;
    color: #888;
    margin: 13px 0 -20px;
    text-align: right;
    line-height: 1.3;
}

/* ポイントリスト（今回は未使用だが残しておく） */
.point-list {
    text-align: left;
    display: inline-block;
}
.point-list li {
    font-size: 18px;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}
.point-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #e60012;
    font-weight: bold;
}

/* 結論ブロック */
.importance-conclusion {
    margin-top: 80px;
    padding: 60px 20px;
}

/* 追加: PCでのフォントサイズ上書き */
.importance-conclusion .importance-heading {
    font-size: 60px;
}

.highlight-text {
    font-size: 24px;
    background: linear-gradient(transparent 70%, #ffeb3b 70%);
}

/* =========================================
   #detail03 セクションの画像配置調整（横並び）
   ========================================= */
.detail-visual-row.icons-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 2%; /* 画像間の隙間 */
    width: 100%;
}

.detail-visual-row.icons-row .detail-icon-box {
    width: 32% !important; /* 3等分強制 */
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.detail-visual-row.icons-row .detail-icon-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: none;
}

/* =========================================
   Utility Classes
   ========================================= */
/* PCで非表示 */
.sp-only {
    display: none;
}
/* PCのみ表示 */
.pc-only {
    display: inline;
}

/* レスポンシブ対応 (スマホ) */
@media screen and (max-width: 768px) {
    /* SPで表示 */
    .sp-only {
        display: inline;
    }
    .pc-only {
        display: none;
    }

    .importance-heading { font-size: 24px; }
    .importance-lead { font-size: 16px; }
    /* .data-list 関連は削除 */

    .platform-blocks { gap: 40px; margin-top: 50px; }
    .platform-block { padding: 30px 20px; }
    .platform-title { font-size: 22px; }
    .platform-desc { font-size: 16px; }
    
    .platform-main-image { margin-bottom: 30px; }
    .placeholder { min-height: 200px; font-size: 16px; }

    .platform-detail, .platform-detail.reverse {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
        padding-top: 30px;
    }
    .detail-image { width: 100%; }
    .detail-text h5 { font-size: 20px; }

    .point-list li { font-size: 16px; padding-left: 25px; }

    .importance-conclusion { padding: 40px 20px; margin-top: 50px; }
    
    /* 追加: スマホでのフォントサイズ上書き */
    .importance-conclusion .importance-heading {
        font-size: 40px;
    }
    
    .highlight-text { font-size: 20px; }
    
    /* 追加：Importance_00.webpの余白削除（スマホ時のみ） */
    .importance-chart {
        margin-top: 0;
        margin-bottom: 0;
		padding: 0;
    }
    .importance-chart img {
        padding: 0;
    }
}