/* =============================================================
   sac-soapland.org 共通スタイル(PC/SP統合版)

   レスポンシブ統合前はPC専用CSSとSP専用CSSの2ファイルに分かれており、
   サーバーサイドのUA判定でどちらか一方だけが読み込まれていた。
   統合に伴い、両方の内容をこの1ファイルに収めている。

   構成(見出しの番号はファイル内の各セクションと対応):
     先頭   @import(Webフォント)
     1.     全幅共通ルール
            PC用CSSとSP用CSSで宣言がまったく同一だったルールのみ。
            重複を排除してここに1回だけ記載している。
     2.     @media (max-width: 991.98px) … SP・タブレット幅
            統合前のSP専用CSSの内容(記述順そのまま)。
     3.     @media (min-width: 992px) … PC幅
            統合前のPC専用CSSの内容(記述順そのまま)。
     4.     @media (min-width: 576px) and (max-width: 991.98px)
            統合で新たに保証範囲となったタブレット幅向けの調整。
     5.     PC/SPフッター表示切り替え(境界: 992px)
     6.     concept.php: #reception_announcement のpadding-top
     7.     prof.php: スワイプヒントアイコン(.icon-swipe-fade)
     8.     @media (min-width: 992px) and (max-width: 1199.98px)
            iPad Pro幅(1024px)向けのオーバーフロー修正。

   なぜ1・2・3に分けているか:
     PC用とSP用は同じセレクタに対して別々のプロパティ集合を
     指定している箇所が多く、「SP側を無条件のベースにしてPC側を
     @mediaで上書きする」書き方にすると、PC側が指定していない
     プロパティ(例: SPだけが持つ padding-top)がPC幅に残ってしまい、
     統合前のPC表示と一致しなくなる。そのため両方を排他的な
     @media で囲み、各幅で統合前とまったく同じ宣言集合だけが
     効くようにしている。

   なぜ 991px ではなく 991.98px なのか(この .98 は消さないこと):
     ブラウザのCSSピクセル幅は整数に限らない(ブラウザズーム、
     OSの拡大縮小、端末のdevicePixelRatioが小数の場合など)。
     境界を (max-width: 991px) / (min-width: 992px) の整数ペアにすると、
     幅がちょうど 991px と 992px の間の小数値(例: 991.5px)になったとき
     どちらの @media にも一致せず、このファイルはほぼ全ての宣言を
     上記2ブロックのどちらかに入れているため、:root のCSS変数ごと
     すべてのレイアウト指定が失われて表示が崩壊する。
     上限側を 991.98px にすることでこの隙間を埋めている
     (Bootstrapが同じ理由で採用している手法)。
     下限側の (min-width: 992px) は変更してはいけない。992px 未満へ
     広げると 991.98px 側と二重に一致する幅が生まれてしまう。
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');


/* =============================================================
   1. 全幅共通(PC用CSS・SP用CSSで宣言が完全に一致していたルール)
   ============================================================= */

.cinzel {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.noto-serif-jp {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.noto-sans-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.eb-garamond-400-italic {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

.eb-garamond-400-roman {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: roman;
}

/*システム部金額*/
.eb-garamond-500 {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

a {
    color:#a77c50;
}

a:visited{
    color:#a77c50;
}

/*モーダル*/
dialog::backdrop {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(7px);
}

dialog.is-hidden {
    display: none;
}

body.is-modal {
    overflow: hidden;
}

.dialog[open] {
    animation-name: btn_fadeIn;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
}

.dialog[open]::backdrop {
    animation-name: btn_fadeIn;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
    animation-timing-function: ease-in;
}

/* 新着情報の本文の画像リンク（Staffy新着情報の画像リンク機能で挿入した写真）。
   ここから .dialog .dialog-img-row img までの4ルールは、統合後に新しく追加したもので、
   PC/SPで値が同一のため、ここに1回だけ記載する
   (2・3の .dialog { } 内に入れ子で書いた場合と同じ詳細度になるよう、先頭に .dialog を付けている)。 */

/* 写真がモーダルからはみ出さないようにする */
.dialog p.dialog-text img {
    max-width: 100%;
    height: auto;
}

/* 続いている画像リンクのまとまり（WrapImageLinkRow() で囲んだもの）。中央寄せ・2枚ずつ横並び */
.dialog .dialog-img-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.dialog .dialog-img-row a {
    width: calc(50% - 1rem);
    max-width: 280px;
}

.dialog .dialog-img-row img {
    display: block;
    width: 100%;
}

#casts_wrapper_ver2 .cast-box:hover{
    opacity: .8;
}

#schedule nav.calendar_table ul li.select_off a{
font-weight: 400;
}

#schedule nav.calendar_table ul li a{
display: block;
width: 100%;
height: 100%;
position: relative;
text-decoration: none;
color: #656565;
padding:0 0.5rem;
}

#schedule nav.calendar_table ul li a span{
font-size:1.4rem;
display: block;
width:100%;
}

/* 最終レビュー修正 Finding 2: 旧application/controllers/Top.phpの
   extra_head内インラインstyleにあった #top_slider .slide img。
   PC/SP両バージョンで値が完全に同一だったため、ここに1回だけ記載する
   (section#top_slider li img よりクラスセレクタの分だけ詳細度が高く、
   従来通り上書きする)。 */
#top_slider .slide img {
    width: 100%;
    height: auto;
    aspect-ratio: auto 30 / 17;
}


/* =============================================================
   2. SP・タブレット幅(991.98px以下)
      統合前のSP専用CSSの内容。記述順は変更していない。
   ============================================================= */
@media (max-width: 991.98px) {

    /* 共通使用変数設定 */
    :root {
        --head_height: 10vh;
        --header_bg_color: #fff;
        --main_bg_color: linear-gradient(#f6f6f6, #fff);
        --padding_space: 5%;
        --footer_bg_color: #000d05;
        --noto-serif-jp: font-family: "Noto Serif JP", YuMincho, "Hiragino Mincho ProN", serif;
        --noto-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        --eb-garamond: "EB Garamond", YuMincho, "Hiragino Mincho ProN", serif;
        --cinzel: "Cinzel", YuMincho, "Hiragino Mincho ProN", serif;
        --common_min_width: 100%;
    }

    html,
    body {
        width: 100%;
    }

    html {
        font-size: 62.5%;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        padding: 0;
        font-size: 1.6rem;
        font-family: "Noto Serif JP", YuMincho, "Hiragino Mincho ProN", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    .pc_only {
        display: none !important;
    }

    div.width_full {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
    }

    #common_header {
        background: var(--header_bg_color);
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: var(--head_height);

        h1 {
            margin: 0;
            padding: 0;
            width: 100vw;
            display: block;

            .hd_logo {
                width: 60vw;
                margin: 0 auto;
            }
        }
    }

    header#top_mv {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100svh;
        height: calc(100svh - 65px);
        .pattern {
            width: 100%;
            height: 100%;
            background: url(../images/line_wt_sp.webp);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
    }

    #myVideo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .top-header-logo {
        width: 80%;
        position: absolute;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;

        img {
            width: 100%;
        }
    }

    section#top_slider {
        /* margin-topなど3プロパティ、width、heightは最終レビュー修正
           Finding 2で追加。旧application/controllers/Top.php extra_head
           のSP版インラインstyle(#top_slider{margin:3rem auto 2rem;
           width:90vw; height:auto;})から移設。margin-bottomは元々
           このセレクタ(section#top_slider)側の値がインライン版より
           詳細度で勝っていたため5remのまま変更していない。 */
        margin-top: 3rem;
        margin-right: auto;
        margin-bottom: 5rem;
        margin-left: auto;
        width: 90vw;
        height: auto;
        padding-top: 1%;

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            margin: 0;
            padding: 0;
            list-style: none;

            img {
                width: 98.5%;
                aspect-ratio: 640 / 274;
                margin: 0 auto;
            }
        }

    }

    section#top_news {
        display: block;
        margin-top: 5rem;
        margin-bottom: 10rem;
        padding-left: var(--padding_space);
        padding-right: var(--padding_space);

        h2 {
            margin-bottom: 1rem;
            padding: 0;
            display: block;
            text-align: center;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 3.8rem;
        }

        .news-content {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;

            ul {
                width: 100%;
                list-style: none;
                margin: 0;
                padding: 0;

                a {
                    text-decoration: none;
                    color: #000;
                }
            }

            li {
                width: 100%;
                border-bottom: 1px solid #ccc;
                display: flex;
                align-items: center;
                height: 5rem;
                font-size: 1.4rem;
                font-weight: 400;
                padding-left: 0.2rem;
            }

            .time {
                width: 24%;
                font-size: 1.3rem;
                display: inline-block;
            }

            .type {
                width: 23%;
                font-size: 1.3rem;
                display: inline-block;
            }

            .txt {
                width: 53%;
                line-height: 1.2;
            }
        }
    }

    section#top_concept {
        display: block;
        margin-bottom: 10rem;
        overflow: hidden;
        box-sizing: border-box;

        .imgprt {
            width: 95%;

            .img-box {
                width: 100%;
                margin: 0;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(11, 1fr);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
            }

            .box-sq1 {
                grid-area: 1 / 1 / 8 / 7;
                aspect-ratio: 4 / 3;
                background-color: var(--footer_bg_color);
                box-sizing: border-box;

                h2 {
                    margin: 0;
                    font-family: "Cinzel", serif;
                    font-family: var(--cinzel);
                    color: #fff;
                    font-weight: lighter;
                    font-size: clamp(3rem, 4vw, 6rem);
                    padding-left: 10%;
                    padding-top: 4rem;
                    text-align: left;
                    letter-spacing: 0.3rem;
                    line-height: 1.2;
                }
            }

            .box-sq2 {
                grid-area: 5 / 1 / 12 / 6;
                aspect-ratio: 4 / 3;
                box-sizing: border-box;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .explanation {
            display: block;
            text-align: left;
            padding: 0 var(--padding_space);

            h2 {
                width: 100%;
                margin: 0;
                margin-top: 0;
                margin-bottom: 3rem;
                padding: 0;
                font-size: 6.5vw;
                font-weight: 400;
                font-family: "Noto Serif JP", serif;
                font-family: var(--noto-serif-jp);
                position: relative;
                display: inline-block;
            }

            h2::after {
                position: absolute;
                top: calc(50% + 1px);
                right: 5%;
                width: 25vw;
                height: 1px;
                content: '';
                border-top: solid 1px #000;
            }

            p {
                font-size: 1.6rem;
                line-height: 4rem;
                padding-bottom: 5rem;
                position: relative;
            }

            p::after {
                position: absolute;
                /*positionをabsoluteに指定*/
                content: "";
                background-color: #666;
                /*下線の色*/
                width: 70%;
                height: 1px;
                bottom: 0;
                left: 0;
            }

            p.eng {
                margin-top: 5rem;
                font-family: "EB Garamond", serif;
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: italic;
                border-bottom: none;
            }

            p.eng::after {
                all: initial;
            }

        }
    }

    footer {
        width: 100%;

        .footer-nav {
            padding: 3.6rem 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background: var(--footer_bg_color);
            color: #fff;

            .footer-logo {
                width: 50vw;
                margin-bottom: 0.5rem;
            }

            .footer-address {
                font-size: 1.2rem;
                letter-spacing: 0.1rem;
            }

            .footer-tel {
                font-size: 2.2rem;
                font-family: var(--cinzel);
                letter-spacing: 0.2rem;
            }

            a {
                text-decoration: none;
                color: #fff;
            }

            ul {
                display: none
            }


        }
        .footer_business_hours{
            margin-bottom: 2rem;
            font-size: 1.4rem;
        }
        .footer_reception_time{
            font-size: 1.4rem;
        }

        .copyright {
            font-family: "Noto Serif JP", serif;
            font-family: var(--noto-serif-jp);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            text-align: center;
            font-size: 1rem;
            padding-top: 0.5rem;
            padding-bottom: 80px;
        }
    }

    /*202507追加*/
    #menu_reception_announcement{
        margin: 1rem auto 4rem;
        padding:0 1%;
        width: 100%;
    }

    #top_reception_announcement{
        margin: 0 auto;
        padding:0 1%;
        width: 90vw;
    }

    #reception_announcement{
        margin: 0 auto;
        padding:0 1% 5rem;
        width: 90vw;
    }

    #menu_reception_announcement a, #top_reception_announcement a, #reception_announcement a{
       text-decoration: none;
    }

    .announcement_sp_box{
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: #000;
        color: #fff;
        border-radius: 5rem;
    }

    .announcement_sp_tel{
        padding:1.2rem 0 0.6rem;
    }

    .announcement_sp_form{
        padding:1rem 0 ;
    }

    .announcement_sp_tel p:first-child{
        width:100%;
        text-align: center;
        font-family: "Noto Serif JP", serif;
        font-size:1.6rem;
        letter-spacing: 0.15rem;
    }

    .announcement_sp_tel p:last-child{
        width:100%;
        font-family: "EB Garamond", serif;
        font-size:3.2rem;
        text-align: center;
        letter-spacing: 0.3rem;
        margin-top:-0.3rem
    }

    .announcement_sp_form p:first-child{
        width:100%;
        text-align: center;
        font-family: "Noto Serif JP", serif;
        font-size:2.3rem;
        letter-spacing: 0.15rem;
    }

    .announcement_sp_form p:last-child{
        width:100%;
        text-align: center;
        font-family: "EB Garamond", serif;
        font-size:1.2em;
        letter-spacing: 0.15rem;
    }

    section#casts_wrapper {
        margin-bottom: 10rem;
        width: 100%;

        h2 {
            display: none;
        }

        .cast-box:nth-child(odd) {
            .photo::before {
                background: linear-gradient(-90deg, #fff, transparent 30%, transparent);
            }
        }

        .cast-box {
            width: 100%;
            margin-bottom: 12rem;

            .photo {
                display: block;
                position: relative;
                width: 100%;
                aspect-ratio: 4 / 3;
                overflow: hidden;
            }

            .photo::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: linear-gradient(90deg, #ffffff, transparent 30%, transparent);
                pointer-events: none;
            }

            .photo img {
                width: 100%;
                height: auto;
                aspect-ratio: auto 2 / 3;
                object-fit: cover;
                object-position: top center;
            }

            .data {
                display: block;
                padding: var(--padding_space);

                h3 {
                    margin: 0;
                    padding: 0;
                    font-family: var(--eb-garamond);
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: roman;
                    font-size: 2.4rem;

                    span {
                        font-size: 1.4rem;
                        padding-left: 1rem;
                        color: #a8a8a8;
                        font-family: var(--noto-serif-jp);
                    }
                }

                p.size {
                    font-size: 2rem;
                    margin: 0;
                    padding: 0;
                }

                p.cast-explanation {
                    display: block;
                    margin: 0;
                    font-size: 1.6rem;
                    line-height: 3.2rem;
                    padding-top: 2rem;
                    white-space: pre-line;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 6;
                    line-clamp: 6;
                }

                a.button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 1;
                    text-decoration: none;
                    color: #ffffff;
                    border-radius: 3.2rem;
                    width: 100%;
                    margin: 2.5rem auto 0;
                    padding: 1.8rem 0;
                    font-family: var(--eb-garamond);
                    font-size: 1.8rem;
                    font-weight: 100;
                    font-style: roman;
                    letter-spacing: .2rem;
                    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
                    background-image: linear-gradient(180deg, rgba(0, 76, 20, 1), rgba(0, 40, 10, 1));
                }
            }

        }

        .view-link {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -8rem;

            a.view-all-casts{
                display: inline-block;
                text-align: center;
                width: 90%;
                padding: 2rem 0;
                margin: 0 auto 3rem;
                border: 1px solid #5f5f5f;
                text-decoration: none;
                color: black;
                background-color: white;
                transition: background-color 0.5s, color 0.5s;
                font-family: var(--cinzel);
                font-size: 1.8rem;
                letter-spacing: .4rem;
            }
        }
    }

    a.view-concept-more {
        display: inline-block;
        text-align: center;
        width: 100%;
        padding: 2rem 0;
        margin: 0 auto 3rem;
        border: 1px solid #5f5f5f;
        text-decoration: none;
        color: black;
        background-color: white;
        transition: background-color 0.5s, color 0.5s;
        font-family: var(--cinzel);
        font-size: 1.8rem;
        letter-spacing: .4rem;
    }

    section#top_system {
        margin-bottom: 10rem;

        h2 {
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-size: 3.8rem;
            margin: 0 auto;
            padding-bottom: 3rem;
            text-align: center;
            width: 100%;

        }

        p {
            margin: 0;
            padding: 0 var(--padding_space);
            font-size: 1.6rem;
            letter-spacing: .1rem;
            line-height: 2.8rem;
        }

        .system-price::before {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(8, 19, 11, 0.9);
        }

        .system-price {
            position: relative;
            width: 100%;
            margin-top: 3rem;
            padding: 5rem 0 7rem;
            background: url('../images/top/top_system-bg_pc.webp') no-repeat center center;
            background-size: cover;
            color: #fff;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            position: relative;

            h3 {
                font-size: 2.4rem;
                font-weight: 400;
                text-align: center;

                span {
                    font-family: var(--eb-garamond);
                }
            }

            .price-table {
                display: flex;
                justify-content: center;
                margin: 2rem auto 0;
                border: 0;

                th {
                    width: 50%;
                    font-size: 2.8rem;
                    text-align: left;
                    font-weight: 400;
                    letter-spacing: .2rem;
                    padding-right: 1rem;
                }

                td {
                    width: 50%;
                    text-align: right;
                    font-size: 2.8rem;
                    margin: 10px 0 30px;
                    letter-spacing: .2rem;
                    padding-left: 1rem;
                    /* 全角「～」の手前で改行されないようにする */
                    white-space: nowrap;
                }
            }

            .info {
                margin-top: 5rem;
                padding: 0;

                p {
                    margin: 0;
                    text-align: left;
                    font-size: 1.5rem;
                    line-height: 2.2rem;
                    font-weight: 400;
                    margin-bottom: 1.2rem;
                    text-indent: -1.5rem;
                    margin-left: 1rem;
                }
            }


            .note {
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                text-decoration: none;
                color: #000;
                width: 80%;
                border-radius: 30px;
                padding: 2rem 0;
                margin: 5rem auto 0;
                background-color: #fff;
                font-size: 1.6rem;
                cursor: pointer;
            }

        }
    }

    .dialog {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform-origin: center;
        padding: 0;
        width: 100%;
        margin: auto;
        animation-name: btn_fadeOut;
        animation-fill-mode: forwards;
        animation-duration: 200ms;
        animation-timing-function: ease-out;

        h3.dialog-title {
            display: block !important;
            text-align: center !important;
            font-size: 2.2rem !important;
            margin-bottom: 2rem !important;
            font-weight: 400 !important;
        }

        .dialog__inner {
            padding: 5rem 1rem 3rem !important;
            position: relative !important;

        }

        .right-position {
            position: absolute !important;
            top: 20px !important;
            right: 15px !important;
        }

        p.dialog-text {
            margin: 0 !important;
            font-size: 1.6rem !important;
            text-align: left !important;
        }

        .btn--close {
            display: block;
            width: 30px;
            height: 30px;
            position: relative;
            background: none;
            border: none;
            outline: none;
            border: 1px solid #666;
        }

        .btn--close::before,
        .btn--close::after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background: #333;
            transform: rotate(45deg);
            transform-origin: 0% 50%;
            position: absolute;
            top: 14%;
            left: 14%;
        }

        .btn--close::after {
            transform: rotate(-45deg);
            transform-origin: 100% 50%;
            left: auto;
            right: 14%;
        }

        .btn--close2 span {
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            text-decoration: none;
            color: #353535;
            width: 80%;
            padding: 1.5rem 0;
            margin: 5rem auto 2rem;
            background-color: #fff;
            font-size: 1.6rem;
            cursor: pointer;
            border: 1px solid #ddd;
        }

    }

    ul.caution-text {
        margin-bottom: 3rem;
        padding: 1rem;

        li {
            padding: 1rem 1.6rem;
            text-indent: -1.6rem;
            font-size: 1.5rem;

            span {
                display: block;
                padding: 0.6rem 0;
                text-indent: 0;
                font-size: 1.3rem;
            }
        }

        li::before {
            content: '';
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            background: #5f5f5f;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 1rem;
        }
    }

    section#top_contact {
        margin-bottom: 10rem;
        padding: 0 var(--padding_space);


        .contact-container {
            display: block;
            margin: 0 auto;
            width: 100%;
        }

        .contact-text {
            width: 100%;

            h2 {
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 3.8rem;
                margin-bottom: 2rem;
                padding: 0;
                text-align: center;
            }

            p {
                margin: 0;
                padding: 0;
                padding-bottom: 3.6rem;
                font-size: 1.6rem;
                line-height: 3rem;
                border-bottom: 1px solid #888;
            }

            p.eng {
                padding-top: 3.6rem;
                font-family: var(--eb-garamond);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: italic;
                border-bottom: none;
                font-size: 1.8rem;
            }
        }

    }

    .contact-form {
        width: 100%;

        form {
            margin: 0;
            padding: 0;
        }

        label {
            display: block;
            margin: 1.6rem 0 0.5rem;
            font-size: 1em;
        }

        input,
        textarea,
        select {
            display: block;
            box-sizing: border-box;
            width: 100%;
            padding: 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
            background-color: #fff;
        }


        select {
            -webkit-appearance: none;
            appearance: none;
            color: #b6b6b6;
        }




        input::placeholder,
        textarea::placeholder,
        select::placeholder {
            color: #b6b6b6;
        }

        .submit-button {
            border: 0;
            margin-top: 3rem;
            cursor: pointer;
            border-radius: 10px;
            background-color: #000;
            color: #fff;
            padding: 2rem 0;
            text-decoration: none;
            font-size: 1em;
            outline: 1px solid;
            outline-color: #000;
            outline-offset: 0;
            display: inline-block;
            transition: .3s;
            font-family: var(--eb-garamond);
            font-size: 2rem;
        }

        .submit-button:hover {
            color: #fff;
            background-color: #333;
            animation: light .8s infinite;
        }
    }

    section#top_access {
        margin-bottom: 10rem;
        text-align: center;

        h2 {
            margin: 0;
            padding: 0;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 3.8rem;
        }

        p.access {
            margin: 1.2rem 0;
            padding: 0;
        }

        .map-container {
            width: 100%;
            margin-top: 2rem;

            iframe {
                height: 40vh;
            }
        }
    }

    section#commomn_type {
        background: var(--main_bg_color);
        background: #fff;
        display: block;
        padding: 5rem var(--padding_space) 10rem;

        h2 {
            display: flex;
            flex-direction: column-reverse;
            font-size: 1.6rem;
            font-weight: lighter;
            width: 100%;
            margin-bottom: 5rem;
            padding: 0;
            line-height: 1;
        }

        h2 span {
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 3.2rem;
            display: block;
            padding-bottom: 1.6rem
        }

        .common-textprt {
            width: 100%;

            h3 {
                margin-top: 5rem;
                font-size: 1.8rem;
                font-weight: 500;
                margin-bottom: 1rem;
            }

            h3:first-child {
                margin-top: 0;
            }

            h3.news-h3 {
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 4rem;
                padding: 0;
                margin-top: 0;
                margin-bottom: 5rem;
            }

            p {
                font-size: 1.6rem;
                line-height: 1.8;
            }

            p.news-txt {
                font-size: 1.6rem;
                font-weight: 400;
                line-height: 3.2rem;
                white-space: pre-line;
                margin-bottom: 10rem;
            }

            p.common-txt {
                font-size: 1.6rem;
                font-weight: 400;
                line-height: 3.2rem;
                padding: 2rem 0;
            }

        }
    }

    /*section#commomn_type*/


    /*コンセプトページ用*/
    section#concept_mv {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100svh;

        .concept-header-movie {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
        }
        .pattern {
            width: 100%;
            height: 100%;
            background: url(../images/line_wt.webp);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .concept-header-logo {
            z-index: 2;
            img {
                max-inline-size: initial;
                width: 60vh;
                transform: rotate(90deg) translateX(calc((60vh)* -1));
                transform-origin: bottom left;
                position: absolute;
                left: 0;
                bottom: 67px;
            }
        }
    }

    section#concept_top {
        margin: 0;
        padding: 0;

        .txt-prt {
            width: 100%;
            padding-top: 5rem;
            padding-bottom: 3rem;
            padding: 5%;
            display: flex;
            flex-direction: column;

            h2 {
                text-align: left;
                margin: 0;
                padding: 0;
                font-size: 2.8rem;
                letter-spacing: .4rem;
                font-weight: 400;
                line-height: 4rem;
                margin-bottom: 1.8rem;
            }

            p.h2-sub {
                width: 100%;
                text-align: left;
                letter-spacing: .1rem;
                font-size: 1.4rem;
                color: #878787;
                font-style: roman;
            }

            p.main-txt {
                position: relative;
                display: block;
                padding-top: 4rem;
                padding-bottom: 4rem;
                font-size: 1.56rem;
                font-weight: 100;
                line-height: 3.6rem;
            }

            p.main-txt::before {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 40%;
                height: 1px;
                background-color: #666;
            }

            p.main-sub {
                display: block;
                margin: 0;
                font-family: var(--eb-garamond);
                font-style: italic;
                display: inline-block;
                padding-top: 5rem;
                font-size: 1.6rem;
                letter-spacing: .2rem;
                font-weight: 100;
                line-height: 3.2rem;
            }
        }

        .img-prt {
            max-width: 100%;
            margin-bottom: 5rem;
        }
    }

    section#concept_image {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr repeat(2, 0.5fr) 1fr;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        width: 90%;
        margin: 0 auto;

        .img-box1 {
            grid-area: 1 / 1 / 2 / 3;
            overflow: hidden;
            aspect-ratio: 3 / 2;
        }

        .img-box2 {
            grid-area: 2 / 1 / 3 / 2;
            overflow: hidden;
            aspect-ratio: 3 / 2;
        }

        .img-box3 {
            grid-area: 2 / 2 / 3 / 3;
            overflow: hidden;
            aspect-ratio: 3 / 2;
        }

        .img-box4 {
            grid-area: 3 / 1 / 4 / 2;
            overflow: hidden;
            aspect-ratio: 3 / 2;
        }

        .img-box5 {
            grid-area: 3 / 2 / 4 / 3;
            overflow: hidden;
            aspect-ratio: 3 / 2;
        }

        .img-box6 {
            grid-area: 4 / 1 / 5 / 3;
            overflow: hidden;
            aspect-ratio: 3 / 2;
        }

        .img-box1 img,
        .img-box2 img,
        .img-box3 img,
        .img-box4 img,
        .img-box5 img,
        .img-box6 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }

        .img-box1 video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }

    }

    #wrapper_contents {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #wrapper_contents .sec-article {
        content-visibility: auto;
        contain-intrinsic-size: 100svh;
        position: relative;
        width: 100%;
        transition: all 1s;

        .gradation {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(transparent 120vh, #13201b 160vh, #13201b 100%);
            opacity: .7;
            transition: all 1s;
            z-index: -1;
        }

        .video-wrapper {
            z-index: -2;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 1s;
            transform-origin: bottom
        }

        .video-wrapper__inner {
            position: relative;
            width: 100%;
            height: 100vh;
            height: 100svh;
            overflow: hidden
        }

        .sec-video {
            width: 100%;
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
            object-position: center top;
            transition: all 1s;
            transform-origin: bottom;
        }

        .wrapper-1000px {
            width: 100%;
            margin: 0 auto;
            padding: 0 2rem;
        }
    }

    section#concept_interior,
    section#concept_facility {
        h2 {
            text-align: left;
            font-size: 3.2rem;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-weight: 400;
            color: #fff;
            letter-spacing: .4rem;
            margin: 0;
            padding: 0;
            padding-bottom: 4rem;

            span {
                display: block;
                font-size: 2.2rem;
                color: #b2a083;
                font-family: "Noto Serif JP", serif;
                font-family: var(--noto-serif-jp);
                letter-spacing: .4rem;
                font-weight: 100;
            }
        }

        h3 {
            text-align: left;
            font-size: 2.6rem;
            font-family: "Noto Serif JP", serif;
            font-family: var(--noto-serif-jp);
            font-weight: 400;
            color: #fff;
            letter-spacing: .4rem;
            margin: 0;
            padding: 0;
            margin-top: 3.5rem;
            padding-bottom: 3rem;

            span {
                display: block;
                font-size: 2rem;
                color: #b2a083;
                font-family: var(--eb-garamond);
                font-weight: 100;
                font-style: italic;
                margin-top: 0.8rem;
                letter-spacing: 0;
            }
        }

        p.initial-txt {
            font-size: 1.6rem;
            color: #fff;
            letter-spacing: .2rem;
            line-height: 3.2rem;
            margin: 0;
            padding-bottom: 4rem;
            position: relative;
            font-weight: 400;
        }

        p.initial-txt::after {
            position: absolute;
            /*positionをabsoluteに指定*/
            content: "";
            background-color: #f2f2f2;
            /*下線の色*/
            width: 50%;
            height: 1px;
            bottom: 0;
            left: 0;
        }

        p.initial-txt-en {
            font-size: 1.8rem;
            font-family: "EB Garamond", serif;
            font-style: italic;
            color: #fff;
            font-weight: lighter;
            line-height: 3rem;
            margin: 0;
            padding-top: 4rem;
            padding-bottom: 20rem;
        }
    }

    /*CASTS部分*/

    section#casts_wrapper {
        p.casts-page-explanation {
            margin: 4rem 0;
            padding: 0 var(--padding_space);
        }
    }

    section#commomn_type.blog_post {
        .blog-wrapper {
            margin-top: 5rem;
            width: 100%;

        }

        .blog-wrapper ul {
            margin: 0;
            margin-bottom: 10rem;
            padding: 0;
            width: 100%;
            list-style: none;
        }


        .blog-wrapper ul li {
            margin-bottom: 5rem;
            padding: 5%;
            position: relative;
            border: 1px solid #ededed;
            background: #fff;
            box-shadow: 0px 4px 6px 0px rgba(212, 212, 212, 0.2);

            .blog-img {
                width: 100%;
                height: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                object-position: center top;
                margin-bottom: 2rem;
            }

            div {
                display: flex;
                align-items: center;

                img {
                    width: 12vw;
                    height: 12vw;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    object-position: center top;
                    border-radius: 50%
                }

                h3 {
                    margin-left: 1rem;
                    font-size: 2rem;
                    font-weight: 400;
                    font-family: var(--noto-sans-jp);

                    a {
                        text-decoration: none;
                        color: #000;
                    }

                }
            }

            div.blog-txt {
                font-family: var(--noto-sans-jp);
                font-size: 1.6rem;
                line-height: 1.8;
                white-space: normal;
                margin-top: 1.8rem;
                margin-bottom: 5rem;
                letter-spacing: 0.1rem;
                font-weight: 400;
            }

            div.blog-txt img {
                display: none;
            }

            p.blog-time {
                font-family: var(--noto-sans-jp);
                margin: 0;
                padding: 0;
                display: block;
                font-size: 1.6rem;
                text-align: right;
                color: #878787;
            }
        }
    }

    /*profile"部分*/
    section#profile {
        background: var(--main_bg_color);
        /* 旧優先予約フォーム(#order_contact)のmargin-bottomと同じ余白を確保する */
        margin-bottom: 20rem;

        .profile-wrapper {
            display: block;

        }

        .prof-prt-left {
            display: block;
            margin: 0;
            width: 100%;

            .photo {
                width: 100%;
                display: block;

                .slider_outer2 {
                    display: flex;
                    flex-direction: column;

                    ul {
                        margin: 0;
                        padding: 0;
                    }

                    li {
                        margin: 0;
                        padding: 0;
                    }
                }

                .key-slider,
                .slick-list,
                .slick-track {
                    height:100svh;
                }

                .slider_outer2 .slider1_2 {
                    width: 100%;
                    height:100svh;
                    margin: 0;
                    padding: 0;
                    aspect-ratio: 2 / 3;
                    overflow: hidden;
                }

                .slider_outer2 .slick-track {
                    width:100%;
                    height: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                }

                .slider_outer2 .slide-item img,
                .slider_outer2 .slide-item video {
                    width: 100%;
                    height: 100%;
                    /*一瞬表示乱れ用に100svh、不具合あったら100%に*/
                    height: 100svh;
                    aspect-ratio: 2 / 3;
                    object-fit: cover;
                    object-position: center top;
                }

                .slider_outer2 ul.slick-dots li{
                    font-size:16px !important;
                    width:20px !important;
                    bottom: 40px !important;

                }
                .slider_outer2 .thumb1_2 {
                    display: none;
                }
                /*以下は実際使用しないが万が一サムネ表示する場合*/
                .slider_outer2 .thumbnail-item {
                    height:100px;
                    box-sizing: border-box;
                    position: relative;
                    aspect-ratio: 2 / 3;
                    overflow: hidden;
                }

                .slider_outer2 .thumbnail-item:hover {
                    opacity: .8;
                    cursor: pointer;
                }


                .slider_outer2 .thumbnail-item img {
                    width: 100%;
                    margin: 0 auto;
                    object-fit: cover;
                    object-position: center top;
                    aspect-ratio: 2 / 3;
                }

                .slider_outer2 .thumbnail-item video {
                    width: 100%;
                    margin: 0 auto;
                    aspect-ratio: 2 / 3;
                }


                .slider_outer2 .thumbnail-item img.movie_btn {
                    position: absolute;
                    width:50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            /*photo*/

        }

        .prof-prt-right {
            display: block;
            width: 100%;
            margin-top: 0rem;
            padding: 0 var(--padding_space);
            padding-top: 4rem;

            .data {
                width: 100%;
                margin: 0;
            }

            .data h2 {
                position: relative;
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 3.2rem;
                margin-bottom: 1rem;
                padding: 0;

                span {
                    position: absolute;
                    top: -3.2rem;
                    left: 0;
                    font-weight: 400;
                    font-family: var(--noto-serif-jp);
                    font-size: 1.4rem;
                    color: #a8a8a8;
                }
            }

            .data p.size {
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 1.8rem;
                padding: 0;
                letter-spacing: .1rem;
            }

            .data p.next-schedule {
                margin-top: 3rem;
                padding: 0;

                span {
                    font-size: 2rem;
                }

                a {
                    text-decoration: none;
                    color: #000;
                }
            }

            .data a.reservation-button {
                display: block;
                margin-top: 2.5rem;
                width: 100%;
                padding: 1.6rem 0;
                background: #000;
                color: #fff;
                text-align: center;
                font-size: 1.8rem;
                font-weight: 400;
                letter-spacing: .4rem;
                text-decoration: none;

                span {
                    display: block;
                    width: 100%;
                    font-style: oblique;
                    font-size: 1.3rem;
                    color: #9e9e9e;
                }
            }

            .data ul {
                width: 100%;
                margin-top: 4rem;
                padding: 0;
                list-style: none;
            }

            .data li {
                width: 100%;
                border-bottom: 1px solid #ccc;
                text-align: left;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 1.2rem 0;
            }

            .data li div {
                width: 100%;
                padding: .4rem 0;
                display: flex;
                font-size: 1.6rem;
                text-align: left;

                span {
                    display: block;
                    text-align: left;
                    width: 65%;
                }

                span:first-of-type {
                    width: 35%;
                }
            }

            .data li div.eng {
                font-size: 1.4rem;
                color: #878787;

            }

            h3 {
                font-size: 20px;
                font-weight: 500;
                margin-top: 10rem;
                padding: 0;

                span {
                    display: inline-block;
                    font-family: "EB Garamond", serif;
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: italic;
                    margin-left: 2rem;
                    font-size: 1.6rem;
                    color: #878787;
                }
            }

            p.introduction {
                padding-bottom: 3rem;
                margin: 0;
                font-weight: 300;
                line-height: 3.2rem;
                white-space: pre-line;
                border-bottom: 1px solid #878787;

            }

            p.introduction_eng {
                margin: 0;
                padding: 0;
                padding-bottom: 3rem;
                font-family: var(--eb-garamond);
                font-weight: 400;
                font-style: italic;
                font-size: 1.4rem;
                line-height: 3.2rem;
                white-space: pre-line;
                color: #333;

            }

            div.blog-prt {


                h3 {
                    margin-top: 5rem;
                    margin-bottom: 3rem;
                    padding: 0;
                    font-size: 3.2rem;
                    font-family: "Cinzel", serif;
                    font-family: var(--cinzel);
                    font-weight: 400;
                }

                ul {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-wrap: wrap;
                    list-style: none;
                    gap: 3px;
                }

                li {
                    margin: 0;
                    padding: 0;
                    width: calc(100% / 2 - 1.5px);
                }

                li a {
                    display: flex;
                    /*隙間削除用*/
                }

                li img {
                    width: 100%;
                    object-fit: cover;
                    aspect-ratio: 1 / 1;
                }
            }
        }

        .prof-prt-movie {
            position: relative;
            padding-top: 5rem;
            width: 100%;
        }

        div#order_contact {
            margin-top: 10rem;
            margin-bottom: 20rem;
            padding: 0 var(--padding_space);

            .contact-container {
                margin: 0 auto;
                width: 100%;
            }

            .contact-text {
                width: 100%;

                h2 {
                    margin: 0;
                    margin-bottom: 2rem;
                    padding: 0;
                    font-family: "Cinzel", serif;
                    font-family: var(--cinzel);
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 3.2rem;
                }

                p {
                    margin: 0;
                    padding-bottom: 3rem;
                    font-size: 1.6rem;
                    line-height: 3rem;
                    border-bottom: 1px solid #888;
                }

                p.eng {
                    padding-top: 3rem;
                    font-family: "EB Garamond", serif;
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: italic;
                    border-bottom: none;
                    font-size: 1.6rem;
                    margin-bottom: 2rem
                }
            }

            .contact-form {
                width: 100%;

                h3 {
                    font-size: 2rem;
                    margin-bottom: 4rem;
                    font-weight: 400;
                }
                p.prof-form-caution{
                    margin: 0.5rem 0;
                    font-size:1.4rem;
                    color:#888;
                    span{
                        display: inline-block;
                        margin-top: 0.2rem;
                        font-size:1.3rem;
                    }
                }
                form {
                    margin: 0;
                    padding: 0;
                }

                label {
                    display: block;
                    margin: 1.6rem 0 0.6rem;
                    font-size: 1.6rem;
                }

                input,
                textarea {
                    box-sizing: border-box;
                    width: 100%;
                    padding: 1.2rem;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    font-size: 1.6rem;
                }

                input::placeholder,
                textarea::placeholder,
                select::placeholder {
                    color: #b6b6b6;
                }

                .submit-button {
                    border: 0;
                    margin-top: 3rem;
                    cursor: pointer;
                    border-radius: 10px;
                    background-color: #000;
                    color: #fff;
                    padding: 1.6rem;
                    text-decoration: none;
                    font-size: 1.6rem;
                    outline: 1px solid;
                    outline-color: #000;
                    outline-offset: 0;
                    display: inline-block;
                    transition: .3s;
                    font-family: var(--eb-garamond);
                    font-size: 2rem;
                }

                .submit-button:hover {
                    color: #fff;
                    background-color: #333;
                    animation: light .8s infinite;
                }
            }
        }
    }

    /*section#profile*/


    section#commomn_type.reservation {
        .pc-sticky p {
            margin: 0;
            padding: 0;
            width: 100%;
            padding-bottom: 2rem;
            font-size: 1.7rem;
            line-height: 3.4rem;
            border-bottom: 1px solid #888;
        }

        .pc-sticky p.eng {
            padding-top: 2rem;
            font-family: var(--eb-garamond);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: italic;
            border-bottom: none;
            font-size: 1.8rem;
        }
    }

    ul.blogs-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        box-sizing: border-box;

        li {
            width: calc((100% / 2) - (8px / 4));
            aspect-ratio: 1;
            position: relative;
        }

        li img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        li span {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            background-color: rgba(0, 0, 0, .4);
            color: #fff;
            font-size: 1.2rem;
            text-align: center;
            padding: 0.4rem 0;
        }
    }

    /*FAQ*/
    section#commomn_type.faq {
        .common-textprt h3 {
            padding: 1rem 1.8rem;
            border-left: 4px solid #c7bbaf;
            background: #f5f5f5;
        }
    }

    /*common*/
    a.blk-button {
        display: block;
        margin-top: 2.5rem;
        width: 100%;
        padding: 1.6rem 0;
        background: #000;
        color: #fff;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 400;
        letter-spacing: .4rem;
        text-decoration: none;
    }

    /*casts,schedule追加　20250401*/
    #casts .casts-header-h2 h2{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.2rem;
        margin-top: 8rem;
        margin-bottom: 2rem;
    }

    #casts .casts-header-h2 h2>span {
        font-family: "Cinzel", serif;
        display: block;
        font-size: 3.4rem;
        margin-bottom: 1rem;
        letter-spacing: 0;
    }

    #casts p.casts-page-explanation{
        font-size: 1.4rem;
        text-align: center;
        margin: 3rem 0;
        padding:0 1rem;
    }

    #casts_wrapper_ver2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 15rem;
        padding:0 1% ;
        box-sizing: border-box;
        justify-content:space-between; 
    }

    #casts_wrapper_ver2 .cast-box {
        width: calc((100% / 2) - 0.5%);
        aspect-ratio: 2 / 5;
        overflow: hidden;
        position: relative;
        transition: all 0.2s;
        margin-top:1%;
    }

    #casts_wrapper_ver2 .photo {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 5;
    }

    #casts_wrapper_ver2 .photo img{
        width:100%;
        height:100%;
        object-fit: cover;
    }

    #casts_wrapper_ver2 .photo::after {
        content: "";
        position: absolute;
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 5;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, #000000b7, transparent 40%, transparent);
    }

    #casts_wrapper_ver2 .data {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1.5rem 1rem;
        color:#fff;
        .newface{
            font-size:1.1rem;
            margin:0;
        }
        h3{
            font-weight: 400;
            font-size:1.84rem;
            margin:0;
            margin-bottom: 0.4rem;
            padding:0;
        }
        .size{
            font-size: 1.2rem;
        }
        .schedule{
            font-size: 1.3rem;
            margin-top:0.4rem;
            .time{
                margin-left:0.8rem;
            }
        }
    }

    #schedule .schedule-header-h2 h2{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.2rem;
        margin-top: 8rem;
        margin-bottom: 2rem;
    }

    #schedule .schedule-header-h2 h2>span {
        font-family: "Cinzel", serif;
        display: block;
        font-size: 3.4rem;
        margin-bottom: 1rem;
        letter-spacing: 0;
    }

    #schedule p.schedule-page-explanation{
        font-size: 1.6rem;
        text-align: center;
        margin: 3rem 0 5rem;
    }

    #schedule nav.calendar_table{width: 100%;}

    #schedule nav.calendar_table ul{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: end;
    margin:0 auto 3rem;
    list-style-type: none;
    }

    #schedule nav.calendar_table ul li{
    margin: 0 0.8rem;
    font-size: 1.8rem;
    color: #9b9b9b;
    vertical-align: bottom;
    padding: 0;
    text-align: center;
    line-height: 1.2;
    }

    #schedule nav.calendar_table ul li.select_on a{
    font-size: 2.6rem;
    color: #242424;
    pointer-events: none;
    }

    #schedule h3.sche_date_headline{
    margin:5rem auto 2rem;
    text-align: center;
    font-size:2.6rem;
    font-weight:400;
    padding-bottom: 0.5rem;
    width: 22.5rem;
    }

    #schedule h3.sche_date_headline span{
    display:block;
    font-size:1.6rem;
    font-weight:400;
    color:#939393;
    border-top:1px solid #cbcbcb;
    margin-top:1rem;
    letter-spacing: 0.2rem;
    }

    /* 最終レビュー修正 Finding 3: 旧application/controllers/Schedule.php
       extra_headのSP版インラインstyleにあったアンカーオフセット
       (固定ヘッダー下へのジャンプ時にa.cal自体をターゲットとして
       ヘッダー分だけ上にずらすトリック)。旧PC版のextra_headには
       このスタイルが存在しなかったためSP幅ブロックのみに追加する。
       parts/contents_schedule.htmの<a id="calendar1" class="cal">等が対象。 */
    a.cal {
        display: block;
        padding-top: 3.5rem;
        margin-top: -3.5rem;
    }

}

/* =============================================================
   3. PC幅(992px以上)
      統合前のPC専用CSSの内容。記述順は変更していない。
   ============================================================= */
@media (min-width: 992px) {

    /* 共通使用変数設定 */
    :root {
        --head_height: clamp(120px, 80px + 4.17vw, 160px);
        --header_bg_color: #fff;
        --main_bg_color: linear-gradient(#f6f6f6, #fff);
        --padding_space: clamp(50px, -40px + 9.38vw, 140px);
        --footer_bg_color: #000d05;
        --noto-serif-jp: "Noto Serif JP", YuMincho, "Hiragino Mincho ProN", serif;
        --noto-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        --eb-garamond: "EB Garamond", YuMincho, "Hiragino Mincho ProN", serif;
        --cinzel: "Cinzel", YuMincho, "Hiragino Mincho ProN", serif;
        --common_min_width: 1000px;
    }

    /* 最大幅1920pxで中央配置 */
    html,
    body {
        min-width: var(--common_min_width);
        max-width: 1920px;
        margin: 0 auto;
    }

    /* レスポンシブデザインの基本設定 */
    @media (max-width: 1920px) {
        body {
            width: 100%;
        }
    }

    html {
        font-size: 62.5%;
        scroll-behavior: smooth;
        scroll-padding-top: 30px;
    }

    body {
        font-size: 1.6rem;
        font-size: clamp(1.25rem, 0.9rem + 0.58vw, 1.6rem);
        font-family: "Noto Serif JP", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    /*common_header部分*/
    .set-mwidth {
        min-width: var(--common_min_width);
    }

    .sp_only {
        display: none !important;
    }

    .jump {
        padding-top: 80px;
        margin-top: -80px;
    }

    #common_header {
        background: var(--header_bg_color);

        .header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: var(--head_height);

            h1 {
                display: block;
                padding-left: clamp(30px, 3.13vw, 60px);

                img {
                    width: clamp(200px, 10px + 19.79vw, 390px);
                }
            }

            nav {
                display: flex;
                padding-right: 160px;
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: clamp(1.6rem, 1rem + 1vw, 2.2rem);
            }

            ul {
                display: flex;
                list-style: none;
                justify-content: center;

            }

            li {
                margin-left: 2.5rem;
                transition: 0.2s;
            }

            li a {
                padding-bottom: 2px;
                text-decoration: none;
                color: #000;
                background:
                    linear-gradient(currentColor 0 0) bottom /var(--d, 0) 1px no-repeat;
                transition: 0.2s;
            }

            li a:hover {
                --d: 100%;
                color: #878787;

            }

        }
    }

    header#top_mv {
        position: relative;
        width: 100%;
        height: 100vh;
        .pattern {
            width: 100%;
            height: 100%;
            background: url(../images/line_wt.webp);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
    }

    #myVideo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .top-header-logo {
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;


        img {
            width: clamp(720px, 370px + 36.46vw, 1070px);
        }
    }

    section#top_slider {
        /* margin-topなど4プロパティ、width、heightは最終レビュー修正
           Finding 2で追加。旧application/controllers/Top.php extra_head
           のPC版インラインstyle(#top_slider{margin:100px auto 20px;
           max-width:1920px; width:80vw; height:auto;})から移設。
           margin-bottomは元々このセレクタ(section#top_slider)側の値が
           インライン版より詳細度で勝っていたため100pxのまま変更していない。 */
        margin-top: 100px;
        margin-right: auto;
        margin-bottom: 100px;
        margin-left: auto;
        max-width: 1920px;
        width: 80vw;
        height: auto;
        padding-top: 10px;

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            margin: 0;
            padding: 0;
            list-style: none;

            img {
                width: 98.5%;
                aspect-ratio: 640 / 274;
                margin: 0 auto;
            }
        }

    }

    section#top_news {
        display: flex;
        margin-top: 100px;
        margin-bottom: 200px;
        padding-left: var(--padding_space);
        padding-right: var(--padding_space);

        h2 {
            margin: 0;
            padding: 0;
            display: block;
            width: 30%;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 4.8rem;
        }

        .news-content {
            display: block;
            width: 70%;
            margin: 0;
            padding: 0;

            ul {
                width: 100%;
                list-style: none;
                margin: 0;
                padding: 0;

                a {
                    text-decoration: none;
                    color: #000;
                }
            }

            li {
                width: 100%;
                border-bottom: 1px solid #ccc;
                display: flex;
                align-items: center;
                height: 7rem;
                font-size: 1.6rem;
                font-weight: 400;
            }

            .time {
                width: 18rem;
                font-size: 1.8rem;
                display: inline-block;
                letter-spacing: .2rem;
            }

            .type {
                width: 18rem;
                display: inline-block;
                letter-spacing: .2rem;
            }
        }
    }

    section#top_concept {
        display: flex;
        margin-bottom: 200px;
        overflow: hidden;
        box-sizing: border-box;

        .imgprt {
            width: 50%;

            .img-box {
                width: 100%;
                margin: 0;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(11, 1fr);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
            }

            .box-sq1 {
                grid-area: 1 / 2 / 8 / 7;
                aspect-ratio: 4 / 3;
                background-color: var(--footer_bg_color);
                box-sizing: border-box;

                h2 {
                    margin: 0;
                    font-family: "Cinzel", serif;
                    font-family: var(--cinzel);
                    color: #fff;
                    font-weight: lighter;
                    font-size: clamp(3rem, 4vw, 6rem);
                    padding-right: calc(var(--padding_space) + 20px);
                    padding-top: clamp(10px, -20px + 3.13vw, 40px);
                    text-align: right;
                    letter-spacing: 0.3rem;
                    line-height: 1.2;
                }
            }

            .box-sq2 {
                grid-area: 5 / 1 / 12 / 6;
                aspect-ratio: 4 / 3;
                box-sizing: border-box;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .explanation {
            display: block;
            width: 50%;
            text-align: left;
            padding-left: clamp(0px, -140px + 14.58vw, 140px);
            box-sizing: border-box;

            h2 {
                margin: 0;
                margin-top: 90px;
                margin-top: clamp(40px, 5.21vw, 90px);
                margin-bottom: 100px;
                padding: 0;
                padding-right: 15rem;
                font-size: clamp(1.8rem, 2.5vw, 3.6rem);
                font-weight: 400;
                font-family: "Noto Serif JP", serif;
                letter-spacing: clamp(0rem, -0.4rem + 0.67vw, 0.4rem);
                position: relative;
                display: inline-block;
            }

            h2::after {
                position: absolute;
                top: calc(50% + 1px);
                right: 0;
                width: 25%;
                height: 1px;
                content: '';
                border-top: solid 1px #000;
            }

            p {
                font-size: 1.8rem;
                line-height: 4.2rem;
                padding-bottom: 5rem;
                position: relative;
            }

            p::after {
                position: absolute;
                /*positionをabsoluteに指定*/
                content: "";
                background-color: #666;
                /*下線の色*/
                width: 60%;
                height: 1px;
                bottom: 0;
                left: 0;
            }

            p.eng {
                margin-top: 5rem;
                font-family: "EB Garamond", serif;
                font-family: var(--eb-garamond);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: italic;
                border-bottom: none;
            }

            p.eng::after {
                all: initial;
            }

        }
    }

    section#casts_wrapper {
        margin-bottom: 200px;

        h2 {
            display: none;
        }

        p.casts-page-explanation {
            text-align: center;
            padding: 5rem 0;
            font-size: 2rem;
        }

        .cast-box:nth-child(even) {
            flex-direction: row-reverse;

            .photo::before {
                background: linear-gradient(90deg, #fff, transparent 30%, transparent);
            }

            .data {
                padding-left: calc(var(--padding_space) + 60px);
            }
        }

        .cast-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            .photo {
                position: relative;
                width: 55%;
                aspect-ratio: 4 / 3;
                overflow: hidden;
            }

            .photo::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: linear-gradient(-90deg, #ffffff, transparent 30%, transparent);
                pointer-events: none;
            }
        }

        .photo img {
            width: 100%;
            height: auto;
            aspect-ratio: auto 2 / 3;
            object-fit: cover;
            object-position: center center;

        }

        .data {
            width: 45%;
            padding-right: 3.2rem;
            padding-left: calc(var(--padding_space));

            h3 {
                margin: 0;
                padding: 0;
                font-family: var(--eb-garamond);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: roman;
                font-size: clamp(2rem, 0.4rem + 2.67vw, 3.6rem);
                line-height: 6rem;

                span {
                    font-size: 1.4rem;
                    padding-left: 1rem;
                    color: #a8a8a8;
                    font-family: var(--noto-serif-jp);
                }
            }

            p.size {
                font-size: 2.4rem;
                margin: 0;
                padding: 0;
            }

            p.cast-explanation {
                font-size: clamp(1.4rem, 1rem + 0.67vw, 1.8rem);
                line-height: 3.8rem;
                padding-top: 3rem;
                white-space: pre-line;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                line-clamp: 5;
            }

            a.button {
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                text-decoration: none;
                color: #ffffff;
                border-radius: 4rem;
                width: 420px;
                margin-top: 6rem;
                padding: 2rem 0;
                font-family: var(--eb-garamond);
                font-optical-sizing: auto;
                font-size: 2rem;
                font-weight: 100;
                font-style: roman;
                letter-spacing: .2rem;
                transition: 0.3s;
                box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
                background-image: linear-gradient(180deg, rgba(0, 76, 20, 1), rgba(0, 40, 10, 1));
                transition-duration: 0.3s;
            }
            a.button:hover{
                opacity:.7;
            }
        }
    }

    .view-link {
        display: flex;
        justify-content: center;
        align-items: center;

        .view-all-casts {
            display: inline-block;
            text-align: center;
            width: 640px;
            padding: 3rem 0;
            margin-top: 10rem;
            border: 1px solid #242424;
            text-decoration: none;
            color: black;
            background-color: white;
            transition-duration: 0.3s;
            padding: 2rem 0;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-size: 2.4rem;
            letter-spacing: .4rem;
        }
        .view-all-casts:hover {
            background-color: rgba(0, 40, 10, .9);
            color: white;
        }
    }

    a.view-concept-more {
        display: inline-block;
        text-align: center;
        width:90%;
        max-width: 640px;
        padding: 3rem 0;
        margin-top: 5rem;
        margin-bottom: 7rem;
        border: 1px solid #242424;
        text-decoration: none;
        color: black;
        background-color: white;
        transition: background-color 0.3s, color 0.3s;
        padding: 2rem 0;
        font-family: "Cinzel", serif;
        font-family: var(--cinzel);
        font-size: 2.4rem;
        letter-spacing: .4rem;
    }

    a.view-concept-more:hover  {
        background-color: rgba(0, 40, 10, .9);
        color: white;
    }

    section#top_system {
        margin-bottom: 200px;

        h2 {
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 4.8rem;
            margin: 0 auto;
            padding-bottom: 5rem;
            text-align: center;
            width: 100%;
            letter-spacing: .8rem;
        }

        p {
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 1.8rem;
            line-height: 1.8;
            letter-spacing: .1rem;
        }

        .system-price::before {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(8, 19, 11, 0.9);
        }

        .system-price {
            position: relative;
            width: 100%;
            margin-top: 7rem;
            padding: 100px 0;
            background: url('../images/top/top_system-bg_pc.webp') no-repeat center center;
            background-size: cover;
            color: #fff;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;

            h3 {
                font-size: 3.2rem;
                font-weight: 400;
                text-align: center;

                span {
                    font-family: var(--eb-garamond);
                }
            }

            .price-table {
                display: flex;
                justify-content: center;
                margin: 3rem auto 0;
                border: 0;
                border-bottom: 1px solid #dddddd;
                padding-bottom: 6rem;

                th {
                    width: 50%;
                    font-size: clamp(2rem, 3.33vw, 4rem);
                    font-weight: 400;
                    letter-spacing: .8rem;
                    padding-right: clamp(100px, 50px + 5.21vw, 150px);

                }

                td {
                    width: 50%;
                    font-size: clamp(3rem, 1rem + 3.33vw, 5rem);
                    margin: 10px 0 30px;
                    letter-spacing: .6rem;
                    padding-left: 4rem;
                    /* 全角「～」の手前で改行されないようにする */
                    white-space: nowrap;
                }
            }

            .info {
                margin-top: 5rem;
                padding: 0 4rem;
            }

            .info p {
                margin: 0;
                text-align: left;
                font-size: clamp(1.6rem, 1.2rem + 0.67vw, 2rem);
                line-height: 4rem;
                font-weight: 400;
            }

            .note {
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                text-decoration: none;
                color: #000;
                width: 50%;
                border-radius: 60px;
                transition: 0.3s;
                padding: 30px 60px;
                margin: 100px auto 0;
                background-color: #fff;
                font-size: clamp(1.6rem, 1.2rem + 0.67vw, 2rem);
                cursor: pointer;
            }

        }
    }

    .dialog {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform-origin: center;
        padding: 2rem;
        width: 960px;
        margin: auto;
        animation-name: btn_fadeOut;
        animation-fill-mode: forwards;
        animation-duration: 200ms;
        animation-timing-function: ease-out;

        h3.dialog-title {
            display: block !important;
            text-align: center !important;
            font-size: 2.4rem !important;
            margin-top: 1rem;
            margin-bottom: 4rem !important;
            font-weight: 400 !important;
        }

        .dialog__inner {
            padding: 7rem 5rem !important;
            position: relative !important;
            background-image: url(../images/modal_bg_line01.png), url(../images/modal_bg_line01.png);
            background-position: center top, center bottom;
            background-repeat: no-repeat, no-repeat;
            background-size: 80% auto;
            min-height: 100%;

        }

        .right-position {
            position: absolute !important;
            top: 30px !important;
            right: 20px !important;
        }

        p.dialog-text {
            margin: 0 !important;
            font-size: 1.8rem !important;
            text-align: left !important;
        }


        .btn--close {
            display: block;
            width: 40px;
            height: 40px;
            position: relative;
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .btn--close::before,
        .btn--close::after {
            content: "";
            display: block;
            width: 100%;
            height: 3px;
            background: #333;
            transform: rotate(45deg);
            transform-origin: 0% 50%;
            position: absolute;
            top: 3px;
            left: 6px;
        }

        .btn--close::after {
            transform: rotate(-45deg);
            transform-origin: 100% 50%;
            left: auto;
            right: 5px;
        }

        .btn--close2 span {
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            text-decoration: none;
            color: #000;
            width: 40%;
            padding: 2rem 0;
            margin: 6rem auto 1rem;
            background-color: #fff;
            font-size: 1.6rem;
            cursor: pointer;
            border: 1px solid #ddd;
        }
    }

    /**アニメーション入れ子しない**/

    /* 【既知の既存不具合・意図的に現状維持】
       この btn_fadeIn / btn_fadeOut と、下の @keyframes light は
       @media (min-width: 992px) ブロックの中でしか定義されていないが、
       992px未満でも到達するルールから参照されている:
         - .dialog[open] / .dialog[open]::backdrop
           (このファイル冒頭の無条件セクション。全幅で btn_fadeIn を参照)
         - 991.98px以下ブロック内の btn_fadeOut 参照(1箇所)
         - 991.98px以下ブロック内の `animation: light .8s infinite` 参照(2箇所)
       @keyframes は @media の外側にスコープされないため、992px未満では
       これらのアニメーション名が未定義となり、該当アニメーションは
       単に何も起きない(要素自体の表示は影響を受けない)。

       これはレスポンシブ統合前のPC専用CSS/SP専用CSSに分かれていた時点から
       存在していた不具合をそのまま引き継いだもので(SP専用CSS側にこれらの
       @keyframes が無かった)、レスポンシブ統合で新たに生じたものではない。
       @keyframes をブロック外へ移動/複製すれば直るが、それは統合前後で
       見た目が変わる挙動変更になるため、計画外の変更を避けて現状のまま
       残している。修正する場合は別タスクとして影響範囲を確認すること。 */
    @keyframes btn_fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes btn_fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    ul.caution-text {
        margin-bottom: 2rem;
        padding: 1rem;

        li {
            padding: 1rem 1.6rem;
            text-indent: -1.6rem;

            span {
                display: block;
                padding: 0.6rem 0;
                text-indent: 0;
                font-size: 1.4rem;
            }
        }

        li::before {
            content: '';
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            background: #5f5f5f;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 1rem;
        }
    }

    section#top_contact {
        margin-bottom: 200px;
        padding-left: var(--padding_space);
        padding-right: var(--padding_space);


        .contact-container {
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            width: 100%;

        }

        .contact-text {
            width: 35%;
            position: -webkit-sticky;
            position: sticky;
            top: 40px;
            align-self: flex-start;

            h2 {
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 5rem;
                margin-bottom: 2rem;
                padding: 0;
            }

            p {
                margin: 0;
                padding: 0;
                padding-bottom: 3.6rem;
                font-size: 1.8rem;
                line-height: 3.6rem;
                border-bottom: 1px solid #888;
            }

            p.eng {
                padding-top: 3.6rem;
                font-family: var(--eb-garamond);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: italic;
                border-bottom: none;
                font-size: 2rem;
            }
        }

    }

    /* この @keyframes も992px未満から参照されているが未定義になる。
       詳細は上の @keyframes btn_fadeIn 直上のコメントを参照(既存不具合、現状維持)。 */
    @keyframes light {
        100% {
            outline-color: transparent;
            outline-offset: 10px;
        }
    }

    .contact-form {
        width: 50%;

        form {
            margin: 0;
            padding: 0;
        }
        p.prof-form-caution{
            font-size:1.25rem;
            color:#888;
            margin-top:-10px;
            margin-bottom:20px;
            span{
                font-size:1.2rem;
            }
        }
        label {
            display: block;
            margin: 15px 0 5px;
            font-size: 1em;
        }

        input,
        textarea,
        select {
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
            background: #fff;
        }

        select {
            -webkit-appearance: none;
            appearance: none;
            color: #b6b6b6;
        }

        input::placeholder,
        textarea::placeholder {
            color: #b6b6b6;
        }

        .prof-form-h3 {
            margin-bottom: 5rem;
        }

        .submit-button {
            border: 0;
            margin-top: 4rem;
            cursor: pointer;
            border-radius: 10px;
            background-color: #000;
            color: #fff;
            padding: 30px 0;
            text-decoration: none;
            font-size: 1em;
            outline: 1px solid;
            outline-color: #000;
            outline-offset: 0;
            display: inline-block;
            transition: .3s;
            font-family: var(--eb-garamond);
            font-size: 2rem;
        }

        .submit-button:hover {
            color: #fff;
            background-color: #333;
            animation: light .8s infinite;
        }
    }

    section#top_access {
        margin-bottom: 200px;
        padding-left: var(--padding_space);
        padding-right: var(--padding_space);
        text-align: center;

        h2 {
            margin: 0;
            padding: 0;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 7rem;
        }

        p.access {
            margin: 4rem 0;
            padding: 0;
        }

        .map-container {
            width: 100%;
            margin-top: 2rem;

            iframe {
                height: 600px
            }
        }

    }

    footer {
        padding-bottom: 10px;
        position: sticky;
        top: 100vh;
        width: 100%;

        .footer-nav {
            height: 250px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--footer_bg_color);
            padding-left: calc(var(--padding_space) + 30px);
            padding-right: calc(var(--padding_space) + 30px);
            color: #fff;



            ul {
                display: block;
            }

            li {
                display: block;
                width: 100%;
                text-align: right;
            }

            li.footer-address {
                letter-spacing: 0.1rem;
            }

            li.footer-tel {
                font-size: 2.3rem;
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                margin-top: 0.5rem;
                letter-spacing: 0.2rem;
            }
        }
        .footer_business_hours{
            letter-spacing: 0.1rem;
            margin-top: 1rem;

        }
        .footer_reception_time{
            letter-spacing: 0.1rem;
        }

        .copyright {
            font-family: "Noto Serif JP", serif;
            font-family: var(--noto-serif-jp);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            margin-top: 1rem;
            font-size: 11px;
            padding-left: calc(var(--padding_space) + 30px);
            padding-right: calc(var(--padding_space) + 30px);
        }
    }

    /*202507追加*/
    #top_reception_announcement{
        margin: -30px auto 50px;
        max-width: 1920px;
        width: 80vw;
        height: auto;
    }

    #reception_announcement{
        margin: -50px auto 100px;
        max-width: 1920px;
        width: 100%;
        padding-left: var(--padding_space);
        padding-right: var(--padding_space);
        height: auto;
    }

    .announcement_pc{
        width:100%;
        padding:0.8rem;
        padding-right:1.2rem;
        border:1px solid #929292;
        display: flex;
        justify-content:space-between;
        align-items: center;
    }

    .announcement_pc p:first-child{
        display: flex;
        width:55%;
        padding:1.2rem 0;
        text-align: center;
        align-items: center;
        flex-direction: column;
        font-family: "Noto Serif JP", serif;
        font-size:1.68rem;
        color:#252525;
        letter-spacing: 0.15rem;
    }

    .announcement_pc p:first-child span{
        font-family: "EB Garamond", serif;
        font-style: italic;
        color: #929292;
    }

    .announcement_pc p:last-child{
        width:45%;
        height: 100%;
        padding:1.2rem 0;
        background-color: #000;
        color:#fff;
        display: block;
        text-align: center;
        align-items: center;
        font-family: "Cinzel", serif;
        font-family: var(--cinzel);
        font-size:2.8rem;
        font-weight: 500;
        letter-spacing: 0.6rem;
    }

    .announcement_pc p:last-child span{
        font-size:2.2rem;
        font-weight:400;
        letter-spacing: 0.2rem;
    }

    .announcement_pc p:last-child span a{
        color:#fff;
        text-decoration: none;
    }

    .footer-tel_reception_time{
        font-size:1.4rem;
    }

    .footer-tel_reception_time span{
        font-size:1.8rem;
    }

    /*profile"部分*/
    section#profile {
        background: var(--main_bg_color);
        /* 直後の#reception_announcement(margin-top:-50px)が動画等に重ならないよう、
           旧優先予約フォーム(#order_contact)のmargin-bottomと同じ余白を確保する */
        margin-bottom: 200px;

        .profile-wrapper {
            display: flex;
            position: relative;

        }

        .prof-prt-left {
            display: block;
            width: auto;
            padding-right: 2rem;
            width: 45%;
            justify-content: center;
            position: -webkit-sticky;
            position: sticky;
            z-index: 1;
            top: 0;
            left: 0;
            margin: 0;
            height: 100vh;
            height: 100svh;
            min-height: 600px;
            max-height: 960px;
            overflow: hidden;

            .photo {
                width: 100%;
                height: 100vh;
                height: 100svh;
                overflow: hidden;
                display: block;

                .slider_outer2 {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    align-items: flex-start;

                    ul {
                        margin: 0;
                        padding: 0;
                    }

                    li {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                    }
                }

                .key-slider,
                .slick-list,
                .slick-track {
                    height: 100%;
                }

                .slider_outer2 .slider1_2 {
                    width: 85%;
                    height: auto;
                    margin: 0;
                    padding: 0;
                    aspect-ratio: 2 / 3;
                    overflow: hidden;
                }

                .slider_outer2 .slick-track {
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    align-items: flex-start;
                    align-content: center;
                }

                .slider_outer2 .slide-item img,
                .slider_outer2 .slide-item video {
                    width: auto;
                    height: 100%;
                    aspect-ratio: 2 / 3;
                    object-fit: cover;
                    object-position: center top;
                }

                .slider_outer2 .thumb1_2 {
                    width: 10%;
                    height: auto;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                }

                .slider_outer2 .thumbnail-item {
                    box-sizing: border-box;
                    position: relative;
                    aspect-ratio: 1 / 1;
                    overflow: hidden;
                }

                .slider_outer2 .thumbnail-item:hover {
                    opacity: .8;
                    cursor: pointer;
                }


                .slider_outer2 .thumbnail-item img {
                    width: 100%;
                    margin: 0 auto;
                    object-fit: cover;
                    object-position: center top;
                    aspect-ratio: 1 / 1;
                }

                .slider_outer2 .thumbnail-item video {
                    width: 100%;
                    margin: 0 auto;
                    object-fit: cover;
                    object-position: center top;
                    aspect-ratio: 1 / 1;
                }


                .movie_btn {
                    position: absolute;
                    top: 0;
                    width: 100%;
                }
            }

            /*photo*/

        }

        .prof-prt-right {
            display: block;
            width: 510px;
            margin-top: 50px;
            padding-bottom: 250px;
            padding-left: 0;
            margin-left: clamp(0px, -230px + 23.96vw, 230px);

            .data {
                width: 510px;
                margin-top: 150px;
                margin-right: clamp(10px, -330px + 31.25vw, 350px);
            }

            .data h2 {
                position: relative;
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 5rem;
                margin: 0;
                padding: 0;

                span {
                    position: absolute;
                    top: -4rem;
                    left: 0;
                    font-family: var(--noto-serif-jp);
                    font-size: 1.4rem;
                    color: #999996;
                }
            }

            .data p.size {
                font-family: "Cinzel", serif;
                font-family: var(--cinzel);
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 2.2rem;
                margin-top: 1rem;
                padding: 0;
                letter-spacing: .2rem;
            }

            .data p.next-schedule {
                margin-top: 50px;
                padding: 0;

                span {
                    font-size: 2.2rem;
                }

                a {
                    text-decoration: none;
                    color: #000;
                }
            }

            .data a.reservation-button {
                display: block;
                margin-top: 2.5rem;
                width: 100%;
                padding: 1.6rem 0;
                background: #000;
                color: #fff;
                text-align: center;
                font-size: 1.8rem;
                font-weight: 400;
                letter-spacing: .4rem;
                text-decoration: none;

                span {
                    display: block;
                    width: 100%;
                    font-style: oblique;
                    font-size: 1.4rem;
                    color: #9e9e9e;
                }
            }

            .data ul {
                width: 100%;
                margin-top: 90px;
                padding: 0;
                list-style: none;
            }

            .data li {
                width: 100%;
                border-bottom: 1px solid #ccc;
                text-align: left;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
            }

            .data li div {
                width: 100%;
                padding: .4rem 0;
                display: flex;
                font-size: 1.5rem;
                text-align: left;

                span {
                    display: block;
                    text-align: left;
                }

                span:first-of-type {
                    width: 200px;
                }

            }

            h3 {
                font-size: 20px;
                font-weight: 500;
                margin-top: 110px;
                padding: 0;

                span {
                    display: inline-block;
                    font-family: "EB Garamond", serif;
                    font-family: var(--eb-garamond);
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: italic;
                    margin-left: 2rem;
                }
            }

            p.introduction {
                padding-bottom: 3rem;
                margin: 0;
                font-weight: 300;
                line-height: 3.8rem;
                white-space: pre-line;
                border-bottom: 1px solid #878787;

            }

            p.introduction_eng {
                margin: 0;
                padding: 0;
                padding-bottom: 3rem;
                font-family: var(--eb-garamond);
                font-weight: 400;
                font-style: italic;
                font-size: 1.7rem;
                line-height: 3.6rem;
                white-space: pre-line;
                color: #333;

            }

            div.blog-prt {


                h3 {
                    margin-top: 5rem;
                    margin-bottom: 1rem;
                    padding: 0;
                    font-size: 4.8rem;
                    font-family: "Cinzel", serif;
                    font-family: var(--cinzel);
                    font-weight: 400;
                }

                ul {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-wrap: wrap;
                    list-style: none;
                    gap: 3px;
                }

                li {
                    margin: 0;
                    padding: 0;
                    width: calc(100% / 2 - 1.5px);
                }

                li a {
                    display: flex;
                    /*隙間削除用*/
                }

                li img {
                    width: 100%;
                    object-fit: cover;
                    aspect-ratio: 1 / 1;
                }
            }
        }

        .prof-prt-movie {
            position: relative;
            padding-top: 100px;
            width: 100%;
        }

        div#order_contact {
            margin-top: 250px;
            margin-bottom: 200px;
            padding-left: var(--padding_space);
            padding-right: var(--padding_space);

            .contact-container {
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                width: 100%;
                contain: paint;
            }

            .contact-text {
                width: 35%;
                position: -webkit-sticky;
                position: sticky;
                top: 40px;
                align-self: flex-start;

                h2 {
                    margin: 0;
                    margin-bottom: 3rem;
                    padding: 0;
                    font-family: "Cinzel", serif;
                    font-family: var(--cinzel);
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 5rem;
                }

                p {
                    margin: 0;
                    padding-bottom: 3.6rem;
                    font-size: 1.8rem;
                    line-height: 3.6rem;
                    border-bottom: 1px solid #888;
                }

                p.eng {
                    padding-top: 3.6rem;
                    font-family: "EB Garamond", serif;
                    font-family: var(--eb-garamond);
                    font-optical-sizing: auto;
                    font-weight: 400;
                    font-style: italic;
                    border-bottom: none;
                    font-size: 2rem;
                    padding-bottom: 0;
                    margin-bottom: 0;
                }
            }


        }
        div#order_contact::before {
            content:'';
            display: block;
            padding-top: 50px;
            margin-top: -50px;
          }
    }

    /*section#profile*/




    section#commomn_type {
        background: var(--main_bg_color);
        display: flex;
        align-items: flex-start;
        padding-top: 15rem;
        padding-bottom: 20rem;
        overflow: visible;

        div.pc-sticky {
            width: 48%;
            padding-left: clamp(50px, -120px + 17.71vw, 220px);
            position: -webkit-sticky;
            position: sticky;
            top: 40px;
        }

        h2 {
            display: flex;
            flex-direction: column-reverse;
            font-size: 2.5rem;
            font-weight: lighter;
            margin-bottom: 5rem;
        }

        h2 span {
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 3.8rem;
            display: block;
            padding-bottom: 3rem;
        }

        .common-textprt {
            width: 52%;
            padding-right: 4rem;
            padding-left: clamp(0.625rem, -2.5rem + 5.21vw, 3.75rem);

            h3 {
                margin-top: 5rem;
                margin-bottom: 2rem;
                font-weight: 500;
            }

            h3:first-child {
                margin-top: 0;
            }

            h3.news-h3 {
                font-weight: 500;
                font-size: 2.4rem;
                line-height: 4rem;
                padding: 0;
                margin-top: 0;
                margin-bottom: 5rem;
            }

            p.news-txt {
                font-size: 1.8rem;
                font-weight: 400;
                line-height: 4rem;
                white-space: pre-line;
                margin-bottom: 20rem;
            }

        }
    }

    /*section#commomn_type*/


    /*コンセプトページ用*/
    section#concept_mv {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100svh;

        .concept-header-movie {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;

        }
        .pattern {
            width: 100%;
            height: 100%;
            background: url(../images/line_wt.webp);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .concept-header-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;


            img {
                width: clamp(300px, 180px + 12.5vw, 420px);
            }
        }
    }

    section#concept_top {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        /* align-items: center;*/

        .txt-prt {
            max-width: 48%;
            padding-top: 150px;
            padding-bottom: 10rem;
            padding-left: clamp(20px, -150px + 17.71vw, 190px);
            display: flex;
            flex-direction: column;

            h2 {
                margin-bottom: 2rem;
                padding: 0;
                font-size: 3.6rem;
                letter-spacing: .4rem;
                font-weight: 400;
                line-height: 6rem;
            }

            p.h1-sub {
                font-weight: 100;
                letter-spacing: .4rem;
                font-size: clamp(1rem, 1.67vw, 2rem);
                color: #878787;
                font-style: roman;
            }

            p.main-txt {
                position: relative;
                display: block;
                padding-top: 5.5rem;
                padding-bottom: 4rem;
                font-size: 1.8rem;
                letter-spacing: .4rem;
                font-weight: 100;
                line-height: 4.2rem;
            }

            p.main-txt::before {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 80%;
                height: 1px;
                background-color: #666;
            }

            p.main-sub {
                display: block;
                margin: 0;
                font-family: var(--eb-garamond);
                font-style: italic;
                display: inline-block;
                padding-top: 4rem;
                padding-bottom: 4rem;
                font-size: 1.6rem;
                letter-spacing: .2rem;
                font-weight: 100;
                line-height: 4.2rem;
            }
        }

        .img-prt {
            max-width: 52%;
            text-align: left;
            padding-top: 150px;

            img {
                width: calc(100% - clamp(20px, -50px + 7.29vw, 90px));
            }
        }
    }

    section#concept_image {

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        height: 100vh;


        .img-box1 {
            grid-area: 1 / 1 / 3 / 3;
            overflow: hidden;
        }

        .img-box2 {
            grid-area: 1 / 3 / 2 / 4;
            overflow: hidden;
        }

        .img-box3 {
            grid-area: 2 / 3 / 3 / 4;
            overflow: hidden;
        }

        .img-box4 {
            grid-area: 3 / 1 / 4 / 2;
            overflow: hidden;
        }

        .img-box5 {
            grid-area: 3 / 2 / 4 / 3;
            ;
            overflow: hidden;
        }

        .img-box6 {
            grid-area: 3 / 3 / 4 / 4;
            overflow: hidden;
        }

        .img-box1 img,
        .img-box2 img,
        .img-box3 img,
        .img-box4 img,
        .img-box5 img,
        .img-box6 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }

        .img-box1 video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top right;
        }

    }

    #wrapper_contents .sec-article {
        content-visibility: auto;
        contain-intrinsic-size: 100vh;
        position: relative;
        width: 100%;
        transition: all 1s;

        .gradation {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(transparent 120vh, #13201b 160vh, #13201b 100%);
            opacity: .7;
            transition: all 1s;
            z-index: -1;
        }

        .video-wrapper {
            z-index: -2;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 1s;
            transform-origin: bottom
        }

        .video-wrapper__inner {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden
        }

        .sec-video {
            width: 100%;
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
            transition: all 1s;
            transform-origin: bottom
        }

        .wrapper-1000px {
            width: clamp(960px, 920px + 4.17vw, 1000px);
            margin: 0 auto;
            padding-bottom: 20rem;
        }
    }

    section#concept_interior,
    section#concept_facility {
        h2 {
            font-size: 4.8rem;
            font-family: "Cinzel", serif;
            font-family: var(--cinzel);
            font-weight: 400;
            color: #fff;
            letter-spacing: .4rem;
            margin: 0;
            padding: 0;
            padding-bottom: 7rem;

            span {
                display: block;
                font-size: 2.4rem;
                color: #b2a083;
                font-family: "Noto Serif JP", serif;
                font-family: var(--noto-serif-jp);
                letter-spacing: .4rem;
                font-weight: 100;
            }
        }

        h3 {
            font-size: 3rem;
            font-family: "Noto Serif JP", serif;
            font-family: var(--noto-serif-jp);
            font-weight: 400;
            color: #fff;
            letter-spacing: .4rem;
            margin: 0;
            padding: 0;
            margin-top: 3.5rem;
            padding-bottom: 3rem;

            span {
                display: block;
                font-size: 2rem;
                color: #b2a083;
                font-family: var(--eb-garamond);
                font-weight: 100;
                font-style: italic;
                margin-top: 0.8rem;
                letter-spacing: 0;
            }
        }

        p.initial-txt {
            font-size: 1.8rem;
            color: #fff;
            letter-spacing: .4rem;
            line-height: 3.6rem;
            margin: 0;
            padding-bottom: 4rem;
            position: relative;
        }

        p.initial-txt::after {
            position: absolute;
            /*positionをabsoluteに指定*/
            content: "";
            background-color: #f2f2f2;
            /*下線の色*/
            width: 35rem;
            height: 1px;
            bottom: 0;
            left: 0;
        }

        p.initial-txt-en {
            font-size: 1.8rem;
            font-family: "EB Garamond", serif;
            font-family: var(--eb-garamond);
            font-style: italic;
            color: #fff;
            font-weight: lighter;
            line-height: 3rem;
            margin: 0;
            padding-top: 4rem;
            margin-bottom: 20rem;
        }
    }

    section#commomn_type.blog_post {
        .blog-wrapper {
            margin: 0;
            width: 50%;
            padding-left: clamp(0px, -60px + 6.25vw, 60px);
        }

        .blog-wrapper ul {
            margin: 0;
            margin-bottom: 110px;
            padding: 0;
            width: 560px;
            list-style: none;
        }


        .blog-wrapper ul li {
            width: 100%;
            margin-bottom: 100px;
            padding: 25px;
            position: relative;
            border: 1px solid #ededed;
            background: #fff;
            box-shadow: 0px 4px 6px 0px rgba(212, 212, 212, 0.2);

            .blog-img {
                width: 100%;
                height: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                object-position: center top;
            }

            div {
                display: flex;
                align-items: center;
                padding: 1.5rem 0 1rem;

                img {
                    width: 55px;
                    height: 55px;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    object-position: center top;
                    border-radius: 50%
                }

                h3 {
                    margin-left: 2rem;
                    font-size: 2.4rem;
                    font-weight: 400;
                    font-family: var(--noto-sans-jp);

                    a {
                        text-decoration: none;
                        color: #000;
                    }
                }
            }

            div.blog-txt {

                font-family: var(--noto-sans-jp);
                font-size: 1.8rem;
                line-height: 2;
                white-space: normal;
                margin-top: 1rem;
                margin-bottom: 100px;
                letter-spacing: 0.1rem;
            }

            div.blog-txt img {
                display: none;
            }

            p.blog-time {
                font-family: var(--noto-sans-jp);
                margin: 0;
                padding: 0;
                display: block;
                font-size: 1.6rem;
                line-height: 2.7rem;
                text-align: right;
                color: #878787;
            }
        }
    }

    section#commomn_type.reservation {
        .pc-sticky p {
            margin: 0;
            padding: 0;
            width: 80%;
            padding-bottom: 3.6rem;
            font-size: 1.8rem;
            line-height: 3.6rem;
            border-bottom: 1px solid #888;
        }

        .pc-sticky p.eng {
            padding-top: 3.6rem;
            font-family: var(--eb-garamond);
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: italic;
            border-bottom: none;
            font-size: 2rem;
        }

        .reservation-wrapper {
            margin: 0;
            width: 50%;
            padding-left: clamp(0px, -60px + 6.25vw, 60px);
        }
    }

    /*ブログ一覧部分*/
    ul.blogs-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        li {
            width: calc((100% / 2) - (5px / 2));
            aspect-ratio: 1;
            position: relative;
        }

        li img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        li span {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            background-color: rgba(0, 0, 0, .4);
            color: #fff;
            font-size: 1.6rem;
            text-align: center;
            padding: 0.6rem 0;
        }
    }

    /*FAQ*/
    section#commomn_type.faq {
        .common-textprt h3 {
            padding: 1rem 1.8rem;
            border-left: 4px solid #c7bbaf;
            background: #f2f2f2;
        }
    }

    /*common*/
    a.blk-button {
        display: block;
        margin-top: 2.5rem;
        width: 100%;
        padding: 2.6rem 0;
        background: #000;
        color: #fff;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 400;
        letter-spacing: .4rem;
        text-decoration: none;
    }

    .pc-width-50 {
        width: 50%;
    }

    /*casts,schedule追加　20250401*/
    #casts .casts-header-h2 h2{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        font-size: 3.2rem;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.8rem;
        margin-top: 100px;
        margin-bottom: 80px;
    }

    #casts .casts-header-h2 h2>span {
        font-family: "Cinzel", serif;
        display: block;
        font-size: 6rem;
        margin-bottom: 35px;
        letter-spacing: 0;
    }

    #casts p.casts-page-explanation{
        font-size: 2rem;
        text-align: center;
        margin: 90px 0;
    }

    #casts_wrapper_ver2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 200px;
    }

    #casts_wrapper_ver2 .cast-box {
        width: calc(100% / 3);
        aspect-ratio: 1 / 1;
        overflow: hidden;
        position: relative;
        transition: all 0.2s;
    }

    #casts_wrapper_ver2 .photo {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    #casts_wrapper_ver2 .photo::after {
        content: "";
        position: absolute;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, #000000b7, transparent 40%, transparent);
    }

    #casts_wrapper_ver2 .data {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1.5rem 2rem;
        color:#fff;
        .newface{
            font-size:1.3rem;
            margin:0;
        }
        h3{
            font-weight: 400;
            font-size:2.6rem;
            margin:0;
            margin-bottom: 0.8rem;
            padding:0;
            letter-spacing: 0.05rem;
        }
        .size{
            font-size: 1.4rem;
        }
        .schedule{
            font-size: 1.7rem;
            margin-top:0.8rem;
            .time{
                margin-left:0.8rem;
            }
        }
    }

    #schedule .schedule-header-h2 h2{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        font-size: 3.2rem;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.8rem;
        margin-top: 100px;
        margin-bottom: 80px;
    }

    #schedule .schedule-header-h2 h2>span  {
        font-family: "Cinzel", serif;
        display: block;
        font-size: 6rem;
        margin-bottom: 35px;
        letter-spacing: 0;
    }

    #schedule p.schedule-page-explanation{
        font-size: 2rem;
        text-align: center;
        margin: 90px 0;
    }

    #schedule nav.calendar_table{width: 100%}

    #schedule nav.calendar_table ul{
    display: flex;
    justify-content: center;
    align-items: end;
    margin-bottom: 4.8rem;
    list-style-type: none;
    }

    #schedule nav.calendar_table ul li{
    margin: 0 2rem;
    font-size: 2.4rem;
    color: #9b9b9b;
    vertical-align: bottom;
    padding: 0;
    text-align: center;
    line-height: 1.2;
    }

    #schedule nav.calendar_table ul li.select_on a{
    font-size: 3.4rem;
    color: #242424;
    pointer-events: none;
    }

    #schedule h3.sche_date_headline{
    margin:8rem auto 3rem;
    text-align: center;
    font-size:3rem;
    font-weight:400;
    padding-bottom: 0.8rem;
    width: 29rem;
    }

    #schedule h3.sche_date_headline span{
    display:block;
    font-size:1.8rem;
    font-weight:400;
    color:#939393;
    border-top:1px solid #cbcbcb;
    margin-top:1rem;
    letter-spacing: 0.6rem;
    }

}

/* =============================================================
   4. タブレット幅(576px〜991.98px)の調整

   統合前、この幅にはPC/SPどちらのデザインも保証されていなかった。
   (UA判定でスマートフォン以外にはPC用CSSが出ており、PC用CSSは
   html,body に min-width:1000px を持っていたため、576〜991pxの
   ブラウザ幅では常に横スクロールが出る状態だった。)
   統合後はSP用デザインをこの幅まで引き伸ばす方針とし、
   引き伸ばしで1枚のカードが極端に間延びする一覧グリッドだけ、
   カード1枚の大きさがSP幅のときと同程度に収まるよう列数を増やす。

   ここで指定しているのは列数(1枚あたりの幅)と、それに伴う
   コンテナ側のflex配置(justify-content/column-gap)で、
   575px以下・992px以上の見た目には一切影響しない。
   ただし #casts_wrapper_ver2 という同じIDは /movies
   (parts/contents_movies.htm、子要素は .cast-box ではなく
   .movie-box)でも使われており、そちらのレイアウトは css/movies.css
   側で別管理。この列数調整は .cast-box のグリッド専用なので、
   下の#casts_wrapper_ver2ルールは:has(.cast-box)で.cast-boxを持つ
   コンテナ(/casts, /schedule)だけに限定し、/moviesには一切
   影響しないようにしている(詳細は下のルール直上のコメント)。
   実際の列数・数値はブラウザでの表示を見ながら調整する前提。
   ============================================================= */

@media (min-width: 576px) and (max-width: 991.98px) {

    /* キャスト一覧(SPは2列・カードは aspect-ratio 2/5 の縦長)。
       2列のまま991pxまで引き伸ばすとカード1枚が幅約490px・
       高さ約1225pxになり画面に収まらないため、3列にして
       カード幅をSP幅時(約190px)と同程度に保つ。
       gap を使うため justify-content: space-between は解除する
       (最終行のカードが左右に飛ばされるのを防ぐ)。
       行間は元の .cast-box の margin-top:1% をそのまま使う。

       :has(.cast-box) で限定している理由:
       #casts_wrapper_ver2 は /casts・/schedule(子が .cast-box)と
       /movies(子が .movie-box、レイアウトは css/movies.css 側で別管理)で
       共有されているIDで、この列数調整は .cast-box のグリッド専用。
       セレクタを .cast-box を持つコンテナに限定することで、
       /movies 側のflex配置に一切触れないことをセレクタレベルで保証する。
       (この限定を最初に入れた時点では /movies はタブレット幅でも
       PC専用CSSの2列レイアウト(.movie-box が50%)だったため、
       無条件に column-gap:1% が漏れると 50%+50%+1% > 100% となり
       2列→1列に崩れる実害があった。/movies のCSSを統合した現在は
       この幅で .movie-box が約100%の1列レイアウトになるため
       実害は消えているが、意図をセレクタで表明する意味と、
       将来 /movies の列数を変えたときの再発防止のため限定は残す。) */
    #casts_wrapper_ver2:has(.cast-box) {
        justify-content: flex-start;
        column-gap: 1%;
    }

    #casts_wrapper_ver2 .cast-box {
        width: calc((100% - 2%) / 3);
    }

    /* プライベート写真一覧(SPは2列の正方形グリッド、gap:4px)も同様に3列 */
    ul.blogs-wrapper li {
        width: calc((100% - 8px) / 3);
    }

}

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

    /* 768px以上では3列でもカードが広がりすぎるため4列にする
       (プライベート写真一覧は写真のみで4列だとスマホ並みに小さくなるため3列のまま) */
    #casts_wrapper_ver2 .cast-box {
        width: calc((100% - 3%) / 4);
    }

}

/* =============================================================
   5. PC/SPフッター表示切り替え(境界: 992px)

   parts/footer.htm は
   PC用(.footer-nav-pc / .reception-pc)とSP用(.footer-nav-sp /
   .reception-sp)のマークアップを常に両方出力するため、画面幅で
   どちらか一方のみを表示させる。css/hm_menu.css末尾の
   「PC/SPナビの表示切り替え」と同じ方針: 「表示する側」の
   display値は上記1〜3節の各定義のままで変更せず、ここでは
   「非表示にする側」だけを指定する。

   .footer-nav-pc/-sp側はfooter{ .footer-nav{ display:flex; ... } }
   というネストしたセレクタ(footer .footer-nav相当、詳細度0,1,1)で
   flexが設定されているため、ここの非表示ルールも同じ詳細度まで
   上げないと後勝ちにならず、非表示にならない(実際に両方表示され
   続けるバグがあったため修正: footer祖先を付けて詳細度を揃えた)。
   .reception-pc/-spは他にdisplayを設定するルールが無いため、
   従来通り単純なクラスセレクタのままで問題ない。
   ============================================================= */

@media (max-width: 991.98px) {
    footer .footer-nav-pc,
    .reception-pc {
        display: none;
    }
}

@media (min-width: 992px) {
    footer .footer-nav-sp,
    .reception-sp {
        display: none;
    }
}

/* =============================================================
   6. concept.php: #reception_announcement のpadding-top
      (旧PC版/旧SP版で異なっていた値をメディアクエリ化)

   注意: #reception_announcement はparts/footer.htm側のidで、
   フッターとして全ページ共通で出力される(concept.php専有のidでは
   ない)。移行前はconcept.phpテンプレート内だけに書かれた<style>
   ブロックだったため、この上書きはconcept.phpが描画された時だけ
   適用されていた。単純に#reception_announcementへ書くと全ページの
   フッターpadding-topが変わってしまうため、concept.php本文
   (parts/contents_concept.htm)の先頭にある#concept_mvとの
   一般兄弟関係(body直下で#concept_mv → … → #reception_announcementの
   順に並ぶ)を使い、concept.phpが描画された場合のみ効くようスコープする。

   セレクタは一般兄弟結合子「~」であり、隣接兄弟結合子「+」に
   置き換えてはいけない。#concept_mv と #reception_announcement は
   body直下で兄弟だが直後に隣り合っているわけではなく、間に
   concept.php本文の他のsectionが挟まる。「+」にすると直後の兄弟しか
   選べなくなり、この上書きが一切効かなくなる。
   ============================================================= */

#concept_mv ~ #reception_announcement {
    padding-top: 200px;
}

@media (max-width: 991.98px) {
    #concept_mv ~ #reception_announcement {
        padding-top: 10rem;
    }
}

/* =============================================================
   7. prof.php: スワイプヒントアイコン(.icon-swipe-fade)

   旧SP版のみに存在した機能。マークアップ/JSはPC版prof.phpにも
   追加したが、PC幅(992px以上)では今まで通り非表示のままにする。
   ============================================================= */

.icon-swipe-fade {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9999;
    width: 120px;
}

@media (min-width: 992px) {
    .icon-swipe-fade {
        display: none !important;
    }
}

/* =============================================================
   8. iPad Pro幅(1024px)向けのオーバーフロー修正
      (min-width: 992px) and (max-width: 1199.98px) に限定。
      デザインは変えず、狭いPC幅(≒iPad Pro)でだけ実際に
      オーバーフロー/はみ出しが起きる固定px値だけをmax-width:100%
      で頭打ちにする。1200px以上・SP幅(991.98px以下)には一切影響しない。
   ============================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* 全ページ共通フッターの営業案内バナー(#reception_announcement)。
       .announcement_pc p:first-child(幅55%、letter-spacing込みで実質
       1文字18px相当)が、1024px幅だと実際の中身の幅(約490px)に対し
       「ただ今の時間ご予約・お問い合わせはお電話で承っております」が
       収まりきらず、「ます」だけ孤立した行になる問題。全ページに
       共通する部品なのでここで直すと全ページに効く。 */
    .announcement_pc p:first-child {
        width: 62%;
    }

    .announcement_pc p:last-child {
        width: 38%;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        box-sizing: border-box;
    }

    /* p:last-child(電話番号/ボタン)の中の文字(2.2rem)は、38%幅+左右
       パディングだと「お問い合わせフォームはこちら」(営業時間外の
       ボタン文言)が収まりきらないため、少し縮小して余裕を作る。 */
    .announcement_pc p:last-child span {
        font-size: 2rem;
    }

    /* /topだけ#top_reception_announcementが width:80vw という独自指定で、
       他ページの#reception_announcement(padding:var(--padding_space)で
       実質約912px)より狭い(1024px幅で約819px)。同じ.announcement_pcでも
       /topだけ余計に窮屈になるため、他ページと同じ実効幅に揃える。 */
    #top_reception_announcement {
        width: 100%;
        padding-left: var(--padding_space);
        padding-right: var(--padding_space);
        box-sizing: border-box;
    }

    /* トップページ「more information」ボタン(width:420px固定)が
       .dataの実際の中身の幅(1024px幅で約373px)をはみ出す問題。
       max-width:100%だと.dataの縁いっぱいまで伸びて窮屈に見えるため、
       ビューポート幅基準のclamp()にして余白(15〜20px程度)を残す。 */
    section#casts_wrapper .cast-box .data a.button {
        /* margin-topを6rem→3remに減らす代わりにmargin-bottom:3remを足し、
           .data全体の高さ(=カードの行の高さ)は変えずにボタンだけ
           上に詰める(.dataの高さが変わると.photo側の余白も連動して
           縮んでしまうため)。 */
        width: clamp(220px, 29vw, 420px);
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    section#profile div#order_contact .contact-text {
        width: 43%;
    }

    section#profile div#order_contact .contact-text h2 {
        font-size: 4.2rem;
    }

    section#profile div#order_contact .contact-text p {
        font-size: 1.5rem;
    }

    /* トップページ#top_concept(コンセプト紹介)の.explanationの
       padding-left(clamp(0px, -140px + 14.58vw, 140px))が、1024px幅
       だと約9pxしかなく、画像側との間が極端に詰まって見える問題。
       1440px幅で約70px・1920pxで140pxなのに対して不自然に狭いため、
       この幅域だけ40pxに引き上げる。 */
    section#top_concept .explanation {
        padding-left: 40px;
    }

    /* section#top_concept .explanation p 内の<br class="sp_only">は
       PC幅では非表示(1行に収まる想定)だが、1024px幅では収まらず
       意図しない位置で自動折り返しされ、窮屈に見える。この幅域だけ
       スマホ用の改行位置をそのまま使う。 */
    section#top_concept .explanation p br.sp_only {
        display: inline !important;
    }

    /* プライベート写真詳細(/blog_post)のul(width:560px固定)が
       .blog-wrapperの実際の中身の幅(1024px幅で約508px)をはみ出す問題。 */
    section#commomn_type.blog_post .blog-wrapper ul {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* concept.htmの#concept_top本文(.main-txt、letter-spacing:.4rem込みで
       1文字あたり実質22px相当)が、.txt-prtの幅48%(1024px幅で約406px)だと
       pc_only改行の意図した位置より手前で折り返され、単語の途中で割れる
       (例:「ください」→「くださ」「い」)。画像側(.img-prt)の幅を減らし、
       文章側(.txt-prt)の幅を増やして折り返しの余裕を作る。 */
    section#concept_top .txt-prt {
        max-width: 65%;
    }

    section#concept_top .img-prt {
        max-width: 35%;
    }

    /* contact_form.htm/reservation.htm(共に.reservationクラス)の本文
       (.pc-sticky p、width:80%固定)が、1024px幅だと実際の中身の幅
       (約350px)に対して「お問い合わせの内容をフォームに記載の上、」が
       わずかに(10px程度)収まりきらず、「上、」だけ孤立した行になる問題。
       幅を90%に広げて余裕を作る。 */
    section#commomn_type.reservation .pc-sticky p {
        width: 90%;
    }

}