/* h */
/* rsv / reservation */
/* form */



/* ▼ ====================
    h 
=================== ▼ */
h1 {
    text-align: center; 

    font-size: 24px;
    font-weight: 500; /* 太さ */
    line-height: 1.45; /* 行間 */
    letter-spacing: 0.03em; /* 文字間 */

    color: #fff;
}

h2 {
    text-align: center; 

    font-size: 30px;
    font-weight: 500; /* 太さ */
    line-height: 1.35; /* 行間 */
    letter-spacing: 0.04em; /* 文字間 */
}

h3 {
    
}

 /* ▼ ========== .s_title ========== ▼ */
.s_title_1{
    margin: 0 auto 30px;

    font-size: 30px;
    font-weight: 500; /* 太さ */
    line-height: 1.25; /* 行間 */
    letter-spacing: 0.06em; /* 文字間 */
}

.s_title_2{
    font-size: 16px;
    font-weight: 500; /* 太さ */
    line-height: 1.65; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}
 /* ▲ ---------- .s_title ---------- ▲ */

 /* ▼ ========== .t_title ========== ▼ */
.t_title{
    margin: 0 auto 30px;
    padding:    20px;

    font-size: 22px;
    font-weight: 500; /* 太さ */
    line-height: 1.5; /* 行間 */
    letter-spacing: 0.03em; /* 文字間 */

    color: #fff;
    background: var(--color-main);
}
 /* ▲ ---------- .t_title ---------- ▲ */ 

/* ▲ ---------- h ---------- ▲ */


.pc_only_br{ 
    display: none; /* sp:非表示 */
}


/* ▼ ====================
    h1
==================== ▼ */
/* h1のフォント設定は↑ h 参照 */
.products_title {
    padding: 50px 0;

    background-color: #f38296;
    background-image: url("../../img/scene/eve_2_illust_sp_001.svg");
    background-repeat: no-repeat;
    background-position: right center;
}
/* ▲ ---------- h1 ---------- ▲ */

/* ▼ ====================
    rsv / reservation
==================== ▼ */
#rsv {
    position: relative;
    padding: 60px 15px 0;
}

.rsv_inner {
    margin: 0 auto;
    width: 100%;
}

.rsv_block {
    margin-bottom: 60px
}

/* ===== アコーディオン 見出し ===== */
.rsv_title.accordion_btn {
    all: unset;  /* h3/button のデフォルトスタイルをリセット */
    cursor: pointer;   /* クリック可の明示 */

    display: flex; /* テキストとアイコンを横並び */
    align-items: center; /* 縦中央揃え */
    justify-content: space-between; /* 左：タイトル / 右：アイコン */

    padding: 10px 30px;
    margin-bottom: 20px;

    background: var(--color-sub-2);
    border-radius: 999px; /* 半円角（ピル型） */

    font-size: 20px;
    font-weight: 500; /* 太さ */
    line-height: 1.55; /* 行間 */
    letter-spacing: 0.025em; /* 文字間 */
}

/* 右端のアイコン */
.rsv_title.accordion_btn::after {
    content: ""; /* 疑似要素としてSVGを表示 */
    width: 40px;
    height: 40px;

    background: url(../../img/base/icon_accordion_down.svg) no-repeat center / contain;
    flex-shrink: 0; /* テキストが長くても縮まない */

}

/* ===== アコーディオン開閉部分 ===== */
.rsv_accordion_content {
    max-height: 0; /* 初期状態は閉じる */
    opacity: 0; /* 視覚的にも非表示 */
    overflow: hidden; /* はみ出し防止 */

    margin-bottom: 40px;

    transform: translateY(-18px); /* 少し上から降りてくる */
    transition:
    max-height 0.8s ease,
    opacity 0.55s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

 /* 空いた状態 */
.rsv_accordion_content.open {
    max-height: 1500px; /* 中身の最大高 */
    opacity: 1;
    transform: translateY(0);
}

/* アコーディオン中身 */
.rsv_accordion_content p {
    margin-bottom: 20px;

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

.rsv_accordion_content h4 {
    padding-bottom: 10px;

    font-size: 20px;
    font-weight: 500; /* 太さ */
    line-height: 1.55; /* 行間 */
    letter-spacing: 0.025em; /* 文字間 */

    color: var(--color-sub-4);
}

/* リスト部分 */
.rsv_accordion_content li {
    display: flex; /* アイコン＋テキストを横並び */
    align-items: flex-start; /* 複数行時も上揃え */
    gap: 10px; /* 記号と文字の間隔 */
    margin-bottom: 5px;
    padding-left: 15px;

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

 /* リスト記号 */
.rsv_accordion_content li::before {
    content: ""; /* 装飾用アイコン */
    width: 16px;
    height: 16px;
    background: url(../../img/base/icon_circle_gray.svg) no-repeat center / contain;
    flex-shrink: 0; /* 折り返し時もサイズ固定 */
    margin-top: 6px;
}

/* ===== ボタン ===== */
.rsv_box2{
    display: grid;
    gap: 20px;
}

.rsv_box2 .btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9em 3em 0.9em 1.2em;
    border: 1px solid var(--color-sub-1);
    text-decoration: none;
    text-align: center;

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */

    color: var(--color-main);
}

.rsv_btn_title {
    font-size: 20px;
    font-weight: 500; /* 太さ */
    line-height: 1.55; /* 行間 */
    letter-spacing: 0.025em; /* 文字間 */

    color: var(--color-sub-4);
}

.rsv_box2 .btn::after {
    content: "";
    position: absolute;
    right: 1.2em;
    top: 50%;
    transform: translateY(-50%);

    width: 0.9em;
    height: 0.9em;

    background: url("../../img/base/icon_arrow_r.svg") no-repeat center / contain;
}

.rsv_box2 .btn:hover {
    background: var(--color-sub-3);
}

.rsv_box2 .btn > span {
    display: block;/* 他のcss干渉防止 */
}

/* ===== block2 ===== */
.rsv_block2 {
    padding-bottom: 40px;
}

.rsv_block2 .t_title{
    margin: 0 auto 40px;
    padding:    20px; /* 枠の内側余白 */
}

 /* 電話 */
.rsv_tel {
    text-align: center;

    font-size: 30px;
    font-weight: 500; /* 太さ */
    line-height: 1.35; /* 行間 */
    letter-spacing: 0.04em; /* 文字間 */
}

.rsv_tel_sub {
    margin-top: 5px;
    text-align: center;
    
    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

 /* sns （LINE Instagram）*/
.rsv_box_sns{
    text-align: center;

    margin: 0 auto;
}

.rsv_sns_text{
    margin-top: 20px;
    
    font-size: 14px;
    font-weight: 400; /* 太さ */
    line-height: 1.75; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

 /* =============== form =============== */
.rsv_form_p {
    margin-bottom: 40px;
    text-align: center;

    font-size: 16px;
    font-weight: 500; /* 太さ */
    line-height: 1.65; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

.form_attend {
    margin-bottom: 40px;
    padding: 0 20px;
}

.inner-wrap {
    margin-bottom: 40px;
}

.inner-wrap:last-child { /* 最後は下余白：0 */
    margin-bottom: 0;
}
.form_row {
    display: block; /* 縦並び */
}

.form_label {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 文字下揃え */
    margin-bottom: 10px;

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

.form_req {
    padding: 2px 10px;
    background: var(--color-main);
    color: #fff;

    font-size: 18px;
    font-weight: 500; /* 太さ */
    line-height: 1.6; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */

    white-space: nowrap;
}

.form_input input,
textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid var(--color-sub-1);
    padding: 20px;

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

/* ラジオ全体 */
input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
}

.inner-wrap input[type="radio"] {/* ラジオボタンと文字の間 */
  margin-right: 5px;
}


/* その他入力欄 */
.inner-wrap_radio input[name="contact_type_other"] {
    width: 60%;
    margin: 5px 0;
    padding: 10px;
    border: 1px solid var(--color-sub-1);
}

/* 問い合わせ区分エリア */
.inner-wrap_radio {
    border: 1px solid var(--color-sub-1);
    padding: 20px 30px 10px;
    margin: 10px 0;
}

.inner-wrap_radio label {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}

/* ボタン */
.btn_submit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 0.9em 3em 0.9em 1.2em;

    border: 1px solid var(--color-sub-1);
    /* input:疑似要素（::before / ::after）使用不可のためbackgroundで矢印表示 */
    background:url("../../img/base/icon_arrow_r.svg") no-repeat right 1.2em center,transparent;
    background-size: 0.5em;
    text-align: center;

    font-size: 16px;
    font-weight: 400; /* 太さ */
    line-height: 1.7; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
    color: var(--color-main);

    cursor: pointer;
}

.btn_submit:hover {
    background: var(--color-sub-3);
}

.form_kojin{
    padding: 0 20px;    
}

.form_text_mail,
.form_text_kojin {
    margin-top: 10px;

    font-size: 12px;
    font-weight: 400; /* 太さ */
    line-height: 1.2; /* 行間 */
    letter-spacing: 0.02em; /* 文字間 */
}

/* ▲ ---------- rsv / reservation ---------- ▲ */

/* ▼ ===================================================
    @media
=================================================== ▼ */
 /* ========== pc ========== */
@media screen and (min-width: 768px) { /* タブレット・PC用 */

 /* ▼ ====================
    h 
 =================== ▼ */
    h1 {
        font-size: 33px;
        font-weight: 500; /* 太さ */
        line-height: 1.3; /* 行間 */
        letter-spacing: 0.04em; /* 文字間 */
    }

    h2{
        margin:0px auto 80px;

        font-size: 40px;
        font-weight: 500; /* 太さ */
        line-height: 1.25; /* 行間 */
        letter-spacing: 0.05em; /* 文字間 */
    }

 /* ▼ ========== .s_title ========== ▼ */
    .s_title_1{
        margin: 0 auto 30px;

        font-size: 40px;
        font-weight: 500; /* 太さ */
        line-height: 1.15; /* 行間 */
        letter-spacing: 0.08em; /* 文字間 */
    }

    .s_title_2{
        font-size: 16px;
        font-weight: 500; /* 太さ */
        line-height: 1.65; /* 行間 */
        letter-spacing: 0.02em; /* 文字間 */
    }
 /* ▲ ---------- .s_title ---------- ▲ */ 

 /* ▼ ========== .t_title ========== ▼ */
    .t_title{
        margin: 0 auto 80px;
        padding:    20px;

        font-size: 25px;
        font-weight: 500; /* 太さ */
        line-height: 1.45; /* 行間 */
        letter-spacing: 0.03em; /* 文字間 */

        color: #fff;
        background: #5f5f5f;
    }
 /* ▲ ---------- .t_title ---------- ▲ */ 

 /* ▼ ========== .t_title_2 ========== ▼ */
    .t_title_2{
        height: 170px;
        background: url("../../img/scene/eve_2_illust_005.svg") no-repeat 12% center / contain;    

        font-size: 28px;
        font-weight: 500; /* 太さ */
        line-height: 1.4; /* 行間 */
        letter-spacing: 0.035em; /* 文字間 */
    }

 /* ▲ ---------- .t_title_2 ---------- ▲ */ 

 /* ▲ ---------- h ---------- ▲ */


    .sp_only_br{ display: none; } /* pc:非表示 */
    .pc_only_br{ display: block; } /* pc:表示 */


 /* ▼ ====================
    h1
 ==================== ▼ */
 /* h1のフォント設定は↑ h 参照 */
    .products_title {
        background-image: url("../../img/scene/eve_2_illust_001.svg");
        background-repeat: no-repeat;
        background-position: right center;

        padding: 100px 0;
    }
 /* ▲ ---------- h1 ---------- ▲ */

 /* ▼ ====================
    rsv / reservation
 ==================== ▼ */
    #rsv{
        padding: 100px 0 0;
    }

    .rsv_inner{
        max-width: 1100px;
    }

    .rsv_block {
        margin-bottom: 150px
    }

 /* ===== アコーディオン 見出し ===== */
    .rsv_title.accordion_btn {
        padding: 10px 40px;
        margin-bottom: 40px;

        font-size: 22px;
        font-weight: 500; /* 太さ */
        line-height: 1.5; /* 行間 */
        letter-spacing: 0.03em; /* 文字間 */
        
    }

 /* ===== アコーディオン開閉部分 ===== */
    .rsv_accordion_content ul{
        margin-bottom: 80px;
    }

 /* アコーディオン内見出し */
    .rsv_accordion_content h4 {
        padding-bottom: 20px;
    }

 /* ボタン */
    .rsv_box2 .btn {
        width: 500px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }


 /* 電話 */
    .rsv_tel {
        text-align: center;

        font-size: 50px;
        font-weight: 500; /* 太さ */
        line-height: 1.2; /* 行間 */
        letter-spacing: 0.06em; /* 文字間 */
    }

 /* 電話発信　不可 */
    .rsv_tel .phonenumber a[href^="tel:"]{
        pointer-events: none;/* 電話発信不可 */
    }


    .rsv_form_p {
        margin-bottom: 80px;
    }

 /* ===== form ====== */
    .form_attend{
        margin: 0 auto 80px;
        padding: 0;
        max-width: 800px;
    }

.form_input input,
textarea {
    padding: 20px 40px;
}

    .inner-wrap_radio {
        flex-wrap: nowrap;
        align-items: center;
        padding: 10px 30px;
    }

/* その他入力欄 */
    .inner-wrap_radio input[name="contact_type_other"] {
        width: 200px;
        padding: 10px 20px;
    }

  /* ボタン */
    .btn_submit {
        width: 500px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    .form_kojin{
        margin: 0 auto;
        max-width: 800px;
    }


 /* ▲ ---------- rsv ---------- ▲ */

}
/* ▲ ---------- pc ---------- ▲ */
/* ▲ ---------- media ---------- ▲ */