<style>
    .clickable {
        color: #007bff;
        text-decoration: underline;
        cursor: pointer;
        font-weight: bold;
    }
    .ipMenu_json{
        --dev-thumb-w: 80px; /* 横幅 */
        --dev-thumb-h: auto; /* 高さ */
    }
    .ipMenu_json ul{
        display: flex;
        flex-wrap: wrap;
        position: relative;
        left:10px;
    }
    .ipMenu_json ul li{
        width: 24%;
        margin-bottom:10px;
        margin-right:10px;
        background:#fff;
        border:1px solid #009AD7;
        border-radius: 30px;
        position: relative;
    }
    .ipMenu_json ul li:hover{
        background:#d4edf6;
    }
    .ipMenu_json ul li:after{
        content: "▶︎";
        position: absolute;
        top: 35%;
        right: 30px;
        font-size: 70%;
        color:#009AD7;
    }
    .ipMenu_json ul.opp1 li:after{
        right: 20px;
    }
    .ipMenu_json ul.opp1.o2 li:after{
        right: 12px;
    }
    .ipMenu_json ul li a{
        text-decoration:none;
        color:#009AD7;
        display: block;
        padding: 15px 0 15px 50px;
        box-sizing: border-box;
    }
    .ipMenu_json ul.opp1 li a{
        padding: 15px 0 15px 30px;
    }
    
    /* ★モーダル背景（フェード用設定） */
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.7); 
        z-index: 99999;
        display: flex; justify-content: center; align-items: center;
        /* 初期状態：隠して透明に */
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    /* ★表示中クラス：透明度を1にして表示 */
    .modal-overlay.is-open {
        opacity: 1; visibility: visible;
    }
    
    /* モーダル本体（PC版） */
    .modal-content {
        background: #fff; width: 90%; max-width: 600px; padding: 30px 20px;
        border-radius: 12px; position: relative; max-height: 85vh; 
        display: flex; flex-direction: column;
        box-sizing: border-box;
        /* ★ふわっと浮き上がる動き */
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }
    
    /* ★表示中の本体の動き：元の位置へ戻す */
    .modal-overlay.is-open.modal-content {
        transform: translateY(0);
    }
    
    /* スクロールエリア（中身が長い場合用） */
    .modal-body { overflow-y: auto; flex-grow: 1; }
    
    /* 閉じるボタン */
    .modal-close-btn {
        width: 98%;
        margin-top:-20px;
        margin-bottom:-20px;
        font-size: 30px;
        cursor: pointer;
        border: none;
        background: transparent;
        color: #aaa;
        line-height: 1;
        text-align:right;
        z-index: 99999;
    }
    .modal-close-btn i{ background: #fff;}
    
    /* 予約ボタン（モーダル内） */
    .modal-footer { text-align: center; }
    .reserve-btn {
        display: block;
        padding: 1em;
        margin: 0 auto;
        background: linear-gradient(to right,#e86d3c 0%,#fdb406 80%,#fdb406 100%);
        font-size: 1.6rem;
        font-weight: 500;
        border-radius: 60px;
        color: #fff;
        text-align: center;
        text-decoration:none;
    }
    .reserve-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1e7e34; }
    
    /* テーブルスタイル */
    table.ppList { width: 99.9%; border-collapse: collapse; margin-top: 10px; }
    table.ppList th, table.ppList td { border: 1px solid #ddd; padding: 10px; text-align: left; font-size: 14px; vertical-align:middle; }
    table.ppList td em{ font-size:10px;}
    table.ppList th { background: #f8f9fa; }
    table.ppList td sup{ color:red; font-size:80%;}
    table.ppList caption{
        font-size:80%;
        caption-side: bottom;
        margin-top:10px;
    }
    table.ppList caption em{ color:red;}
    table.ppList thead th sup{ color:red;}
    
    table.ppList thead th:nth-child(1){ width:60%;}
    table.ppList thead th:nth-child(2){ width:25%;}
    table.ppList thead th:nth-child(3){ width:15%;}
    
    table.ppList thead th:nth-child(2), 
    table.ppList thead th:nth-child(3), 
    table.ppList tbody#modal-table-body td:nth-child(2),
    table.ppList tbody#modal-table-body td:nth-child(3){
        position: relative;
        text-align: center;
    }
    table.ppList thead th:nth-child(1), 
    table.ppList tbody#modal-table-body td:nth-child(1){
        padding-left: 2em;
    }
    table.ppList tbody#modal-table-body td:nth-child(2){
        text-align: right;
    }
    table.ppList tbody#modal-table-body td:nth-child(2) span{
        position: relative;
        left: -10px;
    }
    table.ppList tbody#modal-table-body td:nth-child(2) strong {
        font-size: 1.8rem;
        padding-right: .2em;
    }
    table.ppList tbody#modal-table-body td:nth-child(2) sup,
    table.ppList tbody#modal-table-body td:nth-child(3) sup{
        position: absolute;
        top: 1px;
        right: 6px;
    }

    /* モバイル表示（スマホ）の設定 */
    @media screen and (max-width: 960px){
        .ipMenu_json ul li{
            width: 32%;
        }
        .ipMenu_json ul li:nth-child(3),
        .ipMenu_json ul li:nth-child(6),
        .ipMenu_json ul li:nth-child(9),
        .ipMenu_json ul li:nth-child(12),
        .ipMenu_json ul li:nth-child(15),
        .ipMenu_json ul li:nth-child(18),
        .ipMenu_json ul li:nth-child(21),
        .ipMenu_json ul li:nth-child(24),
        .ipMenu_json ul li:nth-child(27),
        .ipMenu_json ul li:nth-child(30),
        .ipMenu_json ul li:nth-child(33){
            margin-right:0;
        }
        .ipMenu_json ul li a{ padding-left: 25px;}
        .ipMenu_json ul li:after{ right: 25px;}
    }
    
    @media screen and (max-width: 768px) {
        .modal-overlay { align-items: flex-start; } /* スマホでは上端合わせ */
        .modal-content {
            width: 100%; height: 100%; max-width: none; max-height: none;
            border-radius: 0; padding: 60px 20px 30px;
            transform: translateY(0); /* スマホ全画面時は移動アニメをオフにするかお好みで */
        }
        .modal-close-btn { width: 100%; top: 0; right: 10px; }
        table.ppList th, table.ppList td { padding: 8px; font-size: 13px; }
        .reserve-btn { padding: 18px; }
    }
    
    @media screen and (max-width: 480px) {
        .modal-body {   
            padding: 15px 0;
        }
        .ipMenu_json ul{
            position: inherit;
            justify-content: space-between;
        }
        .ipMenu_json ul li{
            width: 49%;
            margin-right:0;
            border-radius: 5px;
        }
        .ipMenu_json ul li:after{
            top: 38%;
            right: 8px;
            font-size: 50%;
        }
        .ipMenu_json ul.opp1 li:after,
        .ipMenu_json ul.opp1 li:after{
            right: 12px;
        }
        .ipMenu_json ul li a{
            /*padding: 15px 0 15px 10px;*/
            padding: 10px 0 10px 15px;
            font-size:80%;
            height:50px;
            display: flex;
            align-items:center;
            justify-content:left;
        }
        .ipMenu_json ul.opp1 li a{
            padding: 10px 0 10px 20px;
        }
        table.ppList thead th:nth-child(1){ width:50%;}
        table.ppList thead th:nth-child(2){ width:34%;}
        table.ppList thead th:nth-child(3){ width:16%;}
        
        table.ppList thead th:nth-child(1), 
        table.ppList tbody#modal-table-body td:nth-child(1){
            padding-left: 10px;
        }
        table.ppList tbody#modal-table-body td:nth-child(2) span{
            left: -8px;
        }
        table.ppList tbody#modal-table-body td:nth-child(2) sup,
        table.ppList tbody#modal-table-body td:nth-child(3) sup{
            top:5px;
            right:3px;
            font-size:70%;
        }
    }

    /* ==========================================================
       ★SP（スマホ）用：機種一覧を「機種画像＋機種名」の1カラムリストへ
       ========================================================== */
    /* PCでは画像を表示しない */
    .ipMenu_json ul li a img.dev-thumb{ display:none !important; }
    .ipMenu_json .sp-only-note{ display:none; }

    @media screen and (max-width: 480px) {
        .ipMenu_json .sp-only-note{
            display:block;
            font-size:1.3rem;
            color:#333;
            margin:0 0 6px;
        }
        .ipMenu_json ul{
            display:flex;
            flex-direction:column;
            position:inherit;
            left:0;
        }
        .ipMenu_json ul li,
        .ipMenu_json ul.opp1 li{
            width:100%;
            margin:0;
            border:none;
            border-top:1px solid #6fcdf0;
            border-radius:0;
            background:#fff;
        }
        .ipMenu_json ul li:last-child{ border-bottom:1px solid #6fcdf0; }
        .ipMenu_json ul li:hover{ background:#fff; }
        .ipMenu_json ul li:after,
        .ipMenu_json ul.opp1 li:after,
        .ipMenu_json ul.opp1.o2 li:after{ content:none; }   /* ▶︎ を非表示 */

        .ipMenu_json ul li a,
        .ipMenu_json ul.opp1 li a{
            display:flex;
            align-items:center;
            justify-content:flex-start;
            padding:0;
            height:auto !important;
            min-height:var(--dev-thumb-h);
            font-size:1.8rem;          /* ← 機種名の文字サイズ調整はここ */
            font-weight:600;
            color:#333;
            text-decoration:none;
        }
        .ipMenu_json ul li a img.dev-thumb{
            display:block !important;
            flex:0 0 var(--dev-thumb-w) !important;
            width:var(--dev-thumb-w) !important;
            min-width:var(--dev-thumb-w) !important;
            max-width:var(--dev-thumb-w) !important;
            height:var(--dev-thumb-h) !important;
            min-height:var(--dev-thumb-h) !important;
            max-height:var(--dev-thumb-h) !important;
            object-fit:cover;
            object-position:center top;
            margin:0 !important;
            padding:0 !important;
            vertical-align:top;
        }
        /* 機種名は1行表示にするのでPC用の改行タグは殺す */
        .ipMenu_json .dev-name{
            flex:1 1 auto;
            padding-left:14px;
            line-height:1.25;
        }
    }
</style>