/* ==========================================================================
   【EG】アセンソ（ASCENSO）商品詳細ページ用スタイルシート　Q＆Aアコーディオン対応
   2026.09.10
   ========================================================================== */

/* --- CSS変数（カラー・汎用値）定義 --- */
:root {
    --ascenso-orange: #ff6600;
    --dark-gray: #222222;
    --light-bg: #f8f9fa;
    --text-color: #333333;
    
    /* Q&A・アクセントカラー */
    --color-brand: #1db800;
    --color-accent-blue: #0b308a;
    --color-bg-blue: #e6f0ff;
    --color-border: #dddddd;
}

/* --- レアウト・リセット --- */
.asenso-syohin .product-container,
.asenso-syohin .product-container * {
    box-sizing: border-box;
}

.asenso-syohin .product-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 15px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

/* 画像およびリンク基本指定 */
.asenso-syohin .product-container img { 
    border: none; 
    max-width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

.asenso-syohin .product-container a { 
    color: var(--text-color); 
    text-decoration: none; 
}

.asenso-syohin .product-container a:hover { 
    text-decoration: underline; 
}

.asenso-syohin .product-container a:hover img {
    opacity: 0.85;
}

.asenso-syohin .product-container a.link-orange {
    color: var(--ascenso-orange);
    font-weight: bold; 
}

/* --- ヘッダー・リードテキスト --- */
.asenso-syohin .product-header {
    margin-bottom: 20px;
}

.asenso-syohin .lead-text {
    font-size: 1.35rem;
    font-weight: bold;
    color: var(--dark-gray);
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.asenso-syohin .section-title .section-subtitle {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--dark-gray);
    margin: 0 0 10px 0;
}

.asenso-syohin .kitais-text {
    font-size: 0.95rem;
    color: #666666;
    margin: 0 0 15px 0;
}

.asenso-syohin .kitais-note {
    font-size: 0.85rem;
    color: #555555;
    margin: 10px 0 20px 0;
    line-height: 1.5;
}

.asenso-syohin .product-description {
    margin: 20px 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- 機体ヘッダー表示 --- */
.asenso-syohin .machine-header {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: flex-start;
    align-items: flex-end;
}

.asenso-syohin .machine-item {
    flex: 0 0 160px; 
    text-align: center;
}

.asenso-syohin .machine-item .machine-icon {
    width: 100%;    
    height: auto;
    margin: 0 auto 8px auto;
}

.asenso-syohin .machine-item .machine-tag {
    background-color: var(--ascenso-orange);
    font-weight: bold;
    padding: 6px 10px;
    font-size: 0.85rem;
    text-align: center;
    border-radius: 2px;
}

/* --- スペックテーブル --- */
.asenso-syohin .table-responsive {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 10px;
}

.asenso-syohin .spec-table {
    width: 100%;
    border-collapse: collapse; 
    font-size: 0.95rem;
    table-layout: fixed; 
}

.asenso-syohin .spec-table caption {
    sr-only: true;
    display: none;
}

.asenso-syohin .spec-table th {
    background-color: var(--dark-gray);
    color: #ffffff; 
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
}

.asenso-syohin .spec-table td {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    color: #555555;
    background-color: #ffffff;
    text-align: center;
    vertical-align: middle; 
}

.asenso-syohin .spec-table td.model-name {
    background-color: #FFFAF7; 
    color: var(--dark-gray);
    font-weight: bold;
    font-size: 1.05rem;
}

/* --- 特長・詳細リスト --- */
.asenso-syohin .features-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.asenso-syohin .feature-item {
    margin-bottom: 5px;
}

.asenso-syohin .feature-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--dark-gray);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    display: inline-block;
    border-bottom: 3px solid var(--ascenso-orange);
}

.asenso-syohin .machine-tag2 {
    display: inline-block;
    background-color: #ffffff;
    color: var(--dark-gray);
    font-weight: bold;
    padding: 6px 15px;
    font-size: 1.05rem;
    margin-bottom: 15px;
    border: 3px solid var(--ascenso-orange);
}

.asenso-syohin .feature-details {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.asenso-syohin .feature-details li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.asenso-syohin .feature-details li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: var(--ascenso-orange);
}

.asenso-syohin .btn {
    width: 100%;
    text-align: center;
    margin: 40px 0 20px 0;
}

.asenso-syohin .btn img {
    margin: 0 auto;
}

/* --- レスポンシブ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    .asenso-syohin .product-container {
        padding: 15px 10px;
    }

    .asenso-syohin .lead-text {
        font-size: 1.15rem;
    }

    .asenso-syohin .section-title .section-subtitle {
        font-size: 1.0rem;
    }

    .asenso-syohin .spec-table {
        font-size: 0.8rem;
    }

    .asenso-syohin .spec-table th, 
    .asenso-syohin .spec-table td {
        padding: 8px 4px;
    }

    .asenso-syohin .machine-item {
        flex: 0 0 130px;
    }

    .asenso-syohin .feature-title {
        font-size: 1.0rem;
    }
}

   /* ==========================================================================
        Q&A アコーディオン（details / summary）関連スタイル
        ========================================================================== */
        .wrap a:link, .wrap a:visited { color: #333333; text-decoration: none; font-weight: bold; }
        .wrap a:hover { color: #333333; text-decoration: underline; font-weight: bold; }
        .red { color: #d71618; }


        /* 2. アコーディオン全体のレイアウトと枠 */
        .qa-accordion {
        margin-bottom: 10px;
        width: 100%;
        display: block;
        }

        /* 3. 質問部分（アコーディオンのヘッダー） */
        .qa-accordion summary {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin: 0;
        cursor: pointer;
        list-style: none; /* デフォルトの黒矢印を非表示に */
        
        /* 元の背景色のブレンド設定（または --color-bg-blue 直接指定でも可） */
        background-color: color-mix(in srgb, var(--color-bg-blue) 55%, transparent);
        padding: 15px 20px;
        border-radius: 8px;
        transition: background-color .2s ease;
        position: relative; /* 右側の「＋」「ー」配置用 */
        }

        /* 質問ホバー時のアクション */
        .qa-accordion summary:hover {
        background-color: var(--color-bg-blue);
        }

        /* Safariなど一部のブラウザ用のデフォルト矢印非表示対策 */
        .qa-accordion summary::-webkit-details-marker {
        display: none;
        }

        /* 開いている（open）時のスタイル：質問と回答の間に少しマージンを設ける */
        .qa-accordion[open] summary {
        margin-bottom: 15px;
        }

        /* 4. 開閉マーク（＋ / －）の表示設定 */
        .qa-accordion summary::after {
        content: "＋";
        margin-left: auto; /* 右端に寄せる */
        color: var(--color-accent-blue);
        font-size: 1.4rem;
        font-weight: bold;
        padding-top: 5px;
        flex-shrink: 0;
        }

        .qa-accordion[open] summary::after {
        content: "－";
        }

        /* 5. 回答部分（展開される中身） */
        .qa-accordion .qa-row:not(summary) {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin: 0;
        padding: 0 15px 10px;
        scroll-margin-top: 100px;
        }

        /* 6. アイコンとテキストの幅調整（フレックス比率） */
        .qa-accordion summary > .qa-icon-col,
        .qa-accordion .qa-row:not(summary) > .qa-icon-col {
        flex: 0 0 60px; /* アイコンを幅60pxに固定 */
        }

        .qa-accordion summary > .qa-icon-col img,
        .qa-accordion .qa-row:not(summary) > .qa-icon-col img {
        width: 100%;
        height: auto;
        }

        .qa-accordion summary > .qa-text-col,
        .qa-accordion .qa-row:not(summary) > .qa-text-col {
        flex: 1; /* テキスト部分を広く取る */
        font-size: 1rem;
        line-height: 1.6;
        }

        /* 質問側テキストのフォント装飾 */
        .qa-accordion summary > .qa-text-col {
        font-weight: bold;
        color: var(--color-accent-blue);
        font-size: 1.1rem;
        padding-top: 5px;
        }

        /* 7. アコーディオン展開時のフェードインアニメーション */
        .qa-accordion[open] .qa-row:not(summary) {
        animation: qa-fade-in .4s ease-out forwards;
        }

        @keyframes qa-fade-in {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
        }

        /* 8. 質問同士を区切るライン */
        .line {
        height: 1px;
        background-color: var(--color-border);
        margin: 15px 0;
        clear: both;
        }




/* ==========================================================================
   レスポンシブ（スマートフォン表示 768px以下）
   ========================================================================== */
@media (max-width: 768px) {
    
     .product-container .lead-text {
        font-size: 1.1rem;
    }

    .product-container .intro-section,
    .product-container .features-grid {
        flex-direction: column;
        gap: 15px;
    }
    
    .product-container .feature-card,
    .product-container .intro-img,
    .product-container .intro-text {
        min-width: 0;
        width: 100%;
    }

    .product-container .feature-card img {
        height: auto;    
    }

    /* スペックテーブル最適化 */
    .product-container .spec-table {
        font-size: 0.75rem;
    }

    .product-container .spec-table th, 
    .product-container .spec-table td {
        padding: 6px 3px;
    }

    .product-container .spec-table th:nth-child(1),
    .product-container .spec-table td:nth-child(1) { width: 28%; }
    .product-container .spec-table th:nth-child(2),
    .product-container .spec-table td:nth-child(2) { width: 34%; }
    .product-container .spec-table th:nth-child(3),
    .product-container .spec-table td:nth-child(3) { width: 18%; }
    .product-container .spec-table th:nth-child(4),
    .product-container .spec-table td:nth-child(4) { width: 20%; }

    /* 機体ヘッダー */
    .product-container .machine-header {
        gap: 10px;
        align-items: flex-end;
    }

    .product-container .machine-item {
        min-width: 0; 
    }

    .product-container .machine-item .machine-tag {
        font-size: 0.7rem;      
        padding: 4px 2px;    
    }            

    .product-container .table-section {
        padding: 30px 0;
    }

    .product-container .btn {
        margin: 20px 0 30px 0;
    }

/* ==========================================================================
   Q&A アコーディオン（details / summary）関連スタイルスマホ幅：768px以下用）
   ========================================================================== */
        .qa-accordion summary,
        .qa-accordion .qa-row:not(summary) {
            gap: 12px;
        }
            .wrap {
                font-size: 14px;
                margin: 10px auto;
            }

        .qa-accordion summary > .qa-icon-col,
        .qa-accordion .qa-row:not(summary) > .qa-icon-col {
            flex: 0 0 40px; /* スマホではアイコンを幅40pxに縮小 */
        }
        
        .qa-accordion summary > .qa-text-col {
            font-size: 1.05rem;
            padding-top: 2px;
        }
        
        .qa-accordion summary::after {
            font-size: 1.2rem;
        }

    
}