@charset "UTF-8";

/* ===== ベースリセット ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}



/* ====================================
MENU
==================================== */

.menu_cards_wrap{
    max-width:1000px;
    margin:40px auto;
}

/* グループ */

.menu_group{
    margin-bottom:70px;
    text-align:center;
}

/* タイトル */

.menu_group_title{
    display:inline-block;

    background:#267696;
    color:#fff;

    padding:12px 30px;

    border-radius:999px;

    font-size:1.8rem;
    font-weight:700;

    margin-bottom:30px;
}

/* カード */

.menu_card{
    background:linear-gradient(
        to bottom,
        #ffffff,
        #f8fcfe
    );

    border:3px solid #9fd9f1;

    border-radius:20px;

    padding:30px;

    margin-bottom:20px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.menu_card:hover{
    transform:translateY(-8px);

    box-shadow:
    0 16px 35px rgba(0,0,0,.15);
}

/* おすすめ */

.menu_card.recommend{
    border:4px solid #f6b44c;
    background:#fffdf8;
}

.menu_badge{
    display:inline-block;

    background:#f6b44c;
    color:#fff;

    font-size:18px;
    font-weight:700;

    padding:8px 20px;

    border-radius:999px;

    margin-bottom:18px;
}

/* 商品名 */

.menu_name{
    font-size:1.9rem;
    font-weight:700;

    color:#222;

    margin-bottom:10px;
}

/* 金額 */

.menu_price{
    font-size:2.7rem;
    font-weight:700;

    color:#267696;

    margin-bottom:15px;
}

/* 説明 */

.menu_description{
    color:#666;

    font-size:1rem;

    line-height:1.8;
}

/* 注意書き */

.menu_note_box{
    max-width:700px;

    margin:50px auto 0;

    background:#f5fbfe;

    border:3px solid #54afd3;

    border-radius:20px;

    padding:20px;

    color:#267696;

    font-size:16px;
    font-weight:700;

    line-height:2;

    box-shadow:
    0 4px 12px rgba(0,0,0,.10);
}



/* ====================================
料金表
==================================== */

.price_page{
    width:100%;
    margin:70px auto;
}

.price_container{
    width:90%;
    max-width:1000px;
    margin:0 auto;
    text-align:center;
}

/* カード並び */

.price_cards{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:30px;
    flex-wrap:wrap;
    margin-top:40px;
}

/* カード */

.price_card{
    width:100%;
    max-width:420px;

    background:#ffffff;

    border:3px solid #54afd3;
    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);

    transition:
    transform .3s ease,
    box-shadow .3s ease;
}

/* ホバー */

.price_card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.18);
}

/* 人気プラン */

.price_card.recommend{
    border:4px solid #f6b44c;

    box-shadow:
    0 10px 30px rgba(246,180,76,.25);
}

/* ヘッダー */

.price_card_header{
    background:linear-gradient(
        135deg,
        #54afd3,
        #79c9ea
    );

    color:#fff;

    padding:26px 20px;

    text-align:center;
}

/* プラン名 */

.price_card_header h3{
    font-size:2.6rem;
    font-weight:700;

    line-height:1.2;

    margin-bottom:12px;
}

/* 人気コメント */

.recommend_copy{
    display:inline-block;

    background:rgba(255,255,255,.18);

    border:1px solid rgba(255,255,255,.35);

    border-radius:999px;

    padding:8px 18px;

    font-size:1rem;
    font-weight:700;

    color:#fff;

    margin-bottom:14px;
}

/* 曜日・時間 */

.price_card_header p{
    font-size:1rem;
    margin:4px 0;
}

/* 本体 */

.price_card_body{
    background:#ffffff;
    padding:10px 20px;
}

/* 料金行 */


.price_item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:24px 40px;

    border-bottom:1px solid #e3edf5;
}


.price_item:last-child{
    border-bottom:none;
}

/* 人数 */

.persons{
    font-size:1.2rem;
    font-weight:700;
    color:#333333;
}

/* 金額 */

.price_item strong{
    font-size:1.6rem;
    font-weight:700;

    color:#267696;

    letter-spacing:1px;
}

/* 税込 */

.price_note{
    display:inline-block;

    margin-top:30px;

    background:#ffffff;

    color:#267696;

    font-size:15px;
    font-weight:700;

    padding:12px 24px;

    border-radius:999px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.10);
}


.persons{
    font-size:1.2rem;
    font-weight:700;
    color:#333;

    min-width:60px;
}



.price_item strong{
    font-size:1.6rem;
    font-weight:700;
    color:#267696;

    margin-right:10px;
}


/* ====================================
ACCESS
==================================== */

.access_info{

    max-width:900px;

    margin:40px auto;

    background:#fff;

    border:3px solid #54afd3;
    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);
}

/* 1行 */

.access_row{

    display:flex;

    border-bottom:1px solid #dcecf5;
}

.access_row:last-child{
    border-bottom:none;
}

/* 左側 */

.access_label{

    width:180px;
    min-width:180px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#54afd3;

    color:#fff;

    font-size:1.1rem;
    font-weight:700;

    padding:20px;
}

/* 右側 */

.access_value{

    flex:1;

    background:#fff;

    padding:20px;

    line-height:1.8;

    text-align:left;

    color:#333;
}


/* ====================================
営業時間
==================================== */

.hours_schedule{

    max-width:900px;

    margin:40px auto;

    background:#fff;

    border:3px solid #54afd3;
    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);
}

.hours_schedule_title{

    background:linear-gradient(
        135deg,
        #54afd3,
        #79c9ea
    );

    color:#fff;

    text-align:center;

    font-size:1.8rem;
    font-weight:700;

    padding:18px;
}

.hours_schedule_table{

    width:100%;

    table-layout:fixed;

    border-collapse:collapse;
}

.hours_schedule_table th{

    background:#f5fbfe;

    color:#267696;

    font-size:1.2rem;

    padding:15px;

    border:1px solid #dcecf5;
}

.hours_schedule_table td{

 
text-align:center;

    padding:20px;

    border:1px solid #dcecf5;

    font-size:2.2rem;
    font-weight:700;

}
.open{
    color:#1e88e5;
}

.close{
    color:#d0d0d0;
}

.hours_note{

  
 text-align:center;

    padding:20px;

    line-height:2;

    font-size:1.15rem;
    font-weight:700;

    color:#333;

}



@media screen and (max-width:768px){

    .hours_card{
        padding:20px 16px;
    }

    .hours_title{
        font-size:1.5rem;
    }

    .hours_day,
    .hours_time{
        font-size:1rem;
    }

}

.hours_card{

    max-width:500px;

    margin:30px auto 0;
}


/* ====================================
スマホ
==================================== */

@media screen and (max-width:768px){

    .price_cards{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .price_card{
        max-width:500px;
    }

    .price_card_header{
        padding:22px 16px;
    }

    .price_card_header h3{
        font-size:2rem;
    }

    .recommend_copy{
        font-size:0.9rem;
        padding:7px 14px;
    }

    .price_item{
        padding:18px 0;
    }

    .persons{
        font-size:1rem;
    }

    .price_item strong{
        font-size:1.3rem;
    }

    .price_note{
        display:block;
        width:fit-content;
        margin:20px auto 0;
    }

    .menu_group_title{
        font-size:1.6rem;
    }

    .menu_card{
        padding:18px;
    }

    .menu_name{
        font-size:1.2rem;
    }

    .menu_price{
        font-size:1.6rem;
    }

    .menu_description{
        font-size:0.9rem;
    }

    .menu_note_box{
        width:95%;
        font-size:14px;
    }
    .menu_group_title{
        font-size:1.4rem;
        padding:10px 22px;
    }

    .menu_card{
        padding:20px;
    }

    .menu_name{
        font-size:1.35rem;
    }

    .menu_price{
        font-size:2rem;
    }

    .menu_description{
        font-size:0.9rem;
    }

    .menu_badge{
        font-size:14px;
        padding:6px 14px;
    }

    .menu_note_box{
        width:95%;
        font-size:14px;
    }


    .access_row{
        flex-direction:column;
    }

    .access_label{
        width:100%;
        min-width:auto;
    }

    .hours_schedule_table th{
        font-size:0.9rem;
        padding:10px 4px;
    }

    .hours_schedule_table td{
        font-size:1rem;
        padding:12px 4px;
    }

}