/* ==========================================================================
  アセンソ商品紹介ページスタイスシート　Q＆Aアコーディオン対応
  2026．07
   ========================================================================== */


        /* 全体のリセット＆ベース設定 */
        .product-container,
        .product-container *,
        [class*="content"], [class*="detail"], [class*="main"] {
            box-sizing: border-box !important;
        }

        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            color: #000000;
            line-height: 1.6;
            margin: 0 !important;        
            padding: 20px 0 !important;  
        }

        :root {
            --ascenso-orange: #ff6600;
            --dark-gray: #222222;
            --light-bg: #f8f9fa;
            --text-color: #333333;
            --color-brand: #1db800;    /* Q&A */
            --color-accent-blue: #0b308a; /* Q&A */
            --color-text-dark: #333333; /* Q&A */
            --color-bg-blue: #e6f0ff; /* Q&A */
            --color-border: #ffffff; /* Q&A */
        }

        /* h2要素の枠線・完全リセット */
        .product-container h2 {
            border: none !important;

        }

        /* TRAコードリンク用オレンジ色設定 */
        a.link-orange:link, 
        a.link-orange:visited {
            color: #ff6600 !important;
            font-weight: bold; 
        }

        a.link-orange:hover {
            color: #ff6600 !important;
            text-decoration: underline;
        }
        /* リンク・画像基本設定 */
        img { 
            border: none; 
            transition: 0.5s; 
        }
        a:link, a:visited { color: #333333; text-decoration: none; }
        a:hover { color: #333333; text-decoration: underline; }
        a:hover img {
            opacity: .8;
            transform: translate(0, 3px);
        }
        /* ボタンコンテナ */
        .btn {
        width: 100%;
        text-align: center;
        margin: 30px 0 45px 0;
        }

        /* コンテナ全体の幅制限（読みやすい幅に調整） */
        .product-container {
            max-width: 900px;
            margin: 0 auto;
        }



        /* ★ カテゴリ間の黒の区切りライン ★ */
        .section-divider {
            box-sizing: border-box !important;
            border: none !important;
            border-top: 2px solid #000000 !important;
            margin: 50px 0 !important;
            height: 0 !important;
            display: block !important;
            clear: both !important;
        }


        /* --- 【修正】機体ヘッダー部分（下ぞろえの設定を追加） --- */
        .machine-header {
            display: flex;
            gap: 15px;
            margin-bottom: 40px;
            justify-content: flex-start;
            align-items: flex-end; /* ★ここを下ぞろえに変更 */
        }

        /* 個別の「アイコン＋機体名」を包むグループ */
        .machine-item {
            flex: 1;         
            min-width: 140px; 
            max-width: 180px; 
            text-align: center;
        }

        /* アイコン画像（.machine-item の中にある場合、幅いっぱいに） */
        .machine-item .machine-icon {
            display: block;
            width: 100%;    
            height: auto;
            margin: 0 auto 10px auto;
        }

        /* 機体名のオレンジ帯 */
        .machine-item .machine-tag {
            display: inline-block;
            background-color: #ff6600;
            color: #000000;
            font-weight: bold;
            padding: 5px 10px;
            font-size: 0.85rem;
            margin-bottom: 15px;
            width: 100%;
            text-align: center;
            box-sizing: border-box; /* パディングを含めて100%にする */
        }
            .machine-tag h3 {
            margin: 0;
            font-size: inherit; /* 親の文字サイズを引き継ぐ */
            font-weight: bold;
        }

        /* スペックテーブル全体のスタイル調整 */
        .spec-table {
            width: 100%;
            border-collapse: collapse; 
            margin: 15px 0;
            font-size: 0.95rem;
            table-layout: fixed; 
            word-break: break-all;
        }

        /* 見出し（ヘッダー）の装飾 */
        .spec-table th {
            background-color: #222222;
            color: #ffffff; 
            font-weight: bold;
            text-align: center;
            padding: 10px 12px;
            border: 1px solid #dddddd;
        }

        /* 通常のセルの装飾 */
        .spec-table td {
            padding: 10px 12px;
            border: 1px solid #dddddd;
            color: #555555;
            background-color: #ffffff;
            text-align: center;
            vertical-align: middle; 
        }

        .spec-table td.model-name {
            background-color: #FFFAF7; 
            color: #000000;
            font-weight: bold;
            font-size: 1.05rem;
        }




    /* 商品仕様・用途の白帯 */
        .machine-tag2 {
            display: inline-block;
            background-color: #ffffff;
            color: #000000;
            font-weight: bold;
            padding: 6px 15px;
            font-size: 1.1rem;
            margin-bottom: 15px;
            border: 4px solid #ff6600;
        }



    /* --- 機体情報テキスト --- */
        .kitais-text {
            font-size: 1.0rem;
            margin-bottom: 10px;
        }

        /* --- リード文 --- */
        .lead-text {
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 10px;
        }



        /* --- 各特長セクション --- */
        .features-list {
            display: flex;
            flex-direction: column;
            gap: 35px;
        }

        .feature-item {
            margin-bottom: 10px;
        }

        .feature-title {
            font-size: 1.1rem;
            font-weight: bold;
            margin: 0 0 15px 0;
            padding-bottom: 6px;
            display: inline-block;
            border-bottom: 4px solid #ff6600;
        }

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

        .feature-details li {
            position: relative;
            padding-left: 15px;
            margin-bottom: 8px;
            font-size: 1rem;
        }

        .feature-details li::before {
            content: "・";
            position: absolute;
            left: 0;
            top: 0;
        }




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






/* スマートフォン用の設定（レスポンシブ） */
        @media (max-width: 768px) {

            .lead-text {
                font-size: 1.2rem !important;
            }

            .features-grid {
                flex-direction: column;
                gap: 15px;
            }
            
            .feature-card {
                min-width: 0 !important;
                width: 100%;
            }

            .feature-card img {
                height: auto !important;    
            }

            /* スペックテーブルのスマホ最適化 */
            .spec-table {
                font-size: 0.75rem; /* スマホで文字が入りきるよう少し小さく設定 */
            }

            .spec-table th, 
            .spec-table td {
                padding: 6px 3px !important; /* 余白を詰めて幅を確保 */
            }

            /* 4列分の幅をパーセンテージで再割り当て（合計100%） */
            .spec-table th:nth-child(1),
            .spec-table td:nth-child(1) {
                width: 28% !important; /* パターン名 */
            }
            .spec-table th:nth-child(2),
            .spec-table td:nth-child(2) {
                width: 34% !important; /* サイズ */
            }
            .spec-table th:nth-child(3),
            .spec-table td:nth-child(3) {
                width: 18% !important; /* PR */
            }
            .spec-table th:nth-child(4),
            .spec-table td:nth-child(4) {
                width: 20% !important; /* TRAコード */
            }

            /* 【修正】スマホ時も下ぞろえをキープ */
            .machine-header {
                justify-content: center;
                gap: 10px;
                align-items: flex-end; /* ★スマホ時も下ぞろえに */
            }

            .machine-item {
                min-width: 0 !important; 
            }

            .machine-item .machine-tag {
                font-size: 0.7rem;      
                padding: 4px 2px;    
            }            
            .intro-section {
                flex-direction: column;
                gap: 15px;
            }

            .intro-img {
                min-width: 0 !important;
                width: 100%;
            }

            .intro-text {
                min-width: 0 !important;
                width: 100%;
            }

            .features-grid {
            flex-direction: column;
            gap: 15px; /* スマホ時の隙間を少し詰める */
            }
            
           .table-section {
            padding: 30px 0; /* 左右を0にして表を画面いっぱいにする */
            }
        .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;
        }

    }