<style>
    .clickable {
        color: #007bff;
        text-decoration: underline;
        cursor: pointer;
        font-weight: bold;
    }
    .ipMenu_json{}
    .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%;
        }
    }
</style>