@charset "UTF-8";

/* =========================================================
   01. 基本設定・共通パーツ
   ========================================================= */

.hp,
.hp * {
    box-sizing: border-box;
}

html:has(.hp) {
    scroll-behavior: smooth;
    scroll-padding-top: 150px;
}

.hp {
    font-size: 16px;
    margin: 0;
    color: #22160f;
    background: #160808;
    font-family: "Zen Kaku Gothic Antique", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.9;
}

.hp p,
.hp li,
.hp dt,
.hp dd,
.hp a,
.hp button,
.hp input,
.hp select,
.hp textarea {
    font-family: "Zen Kaku Gothic Antique", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 400;
}

.hp img {
    display: block;
    max-width: 100%;
}

.hp a {
    color: inherit;
}

.hp p {
    margin: 0 0 1em;
    text-align: justify;
}

.hp .m1100 {
    width: min(1200px, 92%);
    margin: auto;
}

.hp .center {
    text-align: center;
}

.hp .sp-only {
    display: none;
}

.hp .fadein_ {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s ease;
}

.hp .fadein_.scrollin_ {
    opacity: 1;
    transform: translateY(0);
}

.hp {
    --red: #7f1617;
    --red2: #4b0c0f;
    --gold: #d7b56d;
    --gold2: #fff0bc;
    --navy: #14234a;
    --cream: #fff7df;
    --paper: #fffaf0;
    --brown: #4c2917;
    --line: rgba(215, 181, 109, .45);
}

.hp .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 48px;
    padding: .72em 1.55em;
    border-radius: 999px;
    text-decoration: none;
    font-family: "Zen Kaku Gothic Antique", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: .25s ease;
}

.hp .btn.primary {
    color: #3c170c;
    background: linear-gradient(135deg, #fff0bc, #d2a54a);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
}

.hp .btn.ghost {
    color: #fff8dc;
    border: 1px solid rgba(255, 240, 188, .72);
    background: rgba(0, 0, 0, .18);
}

.hp .btn.large {
    font-size: 18.4px;
    margin: .75em 0;
}

.hp .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.hp section {
    position: relative;
}

.hp .section-kicker {
    margin: 0 0 9.6px;
    color: #9a751e;
    font-weight: 900;
    letter-spacing: .18em;
    font-size: 14.08px;
}

.hp .section-kicker.center {
    text-align: center;
}

.hp h2 {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    margin: 0 0 17.6px;
    color: #4b160f;
    font-size: clamp(28px, 3vw, 42.4px);
    line-height: 1.45;
    letter-spacing: .03em;
}

.hp h3 {
    margin: 14.4px 0 5.6px;
    color: #5a170f;
    font-weight: 700;
    font-size: 20px;
}

.hp .info {
    padding: 83.2px 0;
    background: linear-gradient(180deg, #7b1618, #4b0b0d);
    color: #fff;
}

.hp .info h2 {
    color: #fff4ce;
}

.hp .info .section-kicker {
    color: #f7d783;
}

.hp .info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.hp .info-card {
    padding: 21.6px;
    background: rgba(255, 248, 226, .96);
    color: #31140d;
    border: 1px solid rgba(255, 226, 147, .7);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.hp .info-card.wide {
    grid-column: span 2;
}

.hp .info-card dt {
    display: inline-block;
    margin-bottom: 8.8px;
    padding: .18em .75em;
    background: #7f1617;
    color: #fff;
    font-weight: 700;
}

.hp .info-card dd {
    margin: 0;
    font-weight: 700;
}

.hp .info-card dd span {
    font-size: 14.72px;
    font-weight: 500;
}

.hp .info-card strong {
    color: #8b1516;
    font-size: 1.18em;
}

.hp .badge-card {
    background: linear-gradient(135deg, #fff9dc, #e0b456);
}

.hp .notes {
    padding: 32px 0 40px 0;
    background: #f8f8f8;
}

.hp .notes h2 {
    font-size: 22.4px;
    margin-left: -.5em;
}

.hp .notes ul {
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 7.2px;
    list-style: none;
}

.hp .notes li {
    position: relative;
    padding-left: 1.2em;
    font-size: 14.72px;
    line-height: 1.75;
}

.hp .notes li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #8b1516;
    font-weight: 900;
}

.hp .info-card.badge-card dd strong {
    font-size: 1.35em;
}

.hp .plan-price,
.hp .number {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .05em;
}

@media (max-width: 900px) {

    .hp .info-card.wide {
        grid-column: auto;
    }

    .hp .sp-only {
        display: block;
    }

    .hp .pc-only {
        display: none;
    }
}

@media (max-width: 560px) {

    .hp {
        line-height: 1.8;
    }

    .hp .btn {
        width: 100%;
    }

    .hp h2 {
        font-size: 24px;
    }

    .hp .notes h2 {
        font-size: 20px;
    }
}

/* =========================================================
   02. ヘッダー・ナビゲーション
   ========================================================= */

.hp .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(25, 8, 8, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.hp .header-inner {
    width: min(1180px, 94%);
    height: 74px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.hp .brand {
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--gold2);
    text-decoration: none;
    font-size: 18.4px;
}

.hp .global-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hp .global-nav a {
    text-decoration: none;
    color: #fff6da;
    padding: .45em .85em;
    border-radius: 999px;
    font-size: 14.88px;
}

.hp .global-nav a:hover {
    background: rgba(255, 255, 255, .12);
}

.hp .local-nav {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 9.6px;
    flex-wrap: wrap;
    padding: 16px 4%;
    background: rgba(255, 247, 223, .97);
    border-bottom: 3px solid var(--gold);
}

.hp .local-nav a {
    padding: .55em 1.1em;
    border: 1px solid #9d7b35;
    border-radius: 999px;
    color: #55220d;
    text-decoration: none;
    font-weight: 700;
    background: #fff;
}

.hp .local-nav a:hover {
    background: #7f1617;
    color: #fff;
}

@media (max-width: 900px) {

    .hp .global-nav {
        display: none;
    }

    .hp .header-inner {
        height: 62px;
    }

  .hp .local-nav {
        top: 62px;
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding: 12px 4%;
    }

    .hp .local-nav a {
        white-space: nowrap;
        font-size: 14.4px;
    }
}

@media (max-width: 560px) {

    .hp .brand {
        font-size: 16px;
    }
  .hp .local-nav {
        display: none;
    }
}

/* =========================================================
   03. メインビジュアル
   ========================================================= */

.hp .hero {
    position: relative;
    min-height: calc(100svh - 74px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #140707;
}

.hp .hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hp .hero-bg-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    will-change: opacity, transform;
}

.hp .slide01 {
    background-image: url("../photo/entrance.webp");
    opacity: 1;
    animation: hero-slide01 18s ease-in-out infinite;
}

.hp .slide02 {
    background-image: url("../photo/christmas_hall.webp");
    animation: hero-slide02 18s ease-in-out infinite;
}

.hp .slide03 {
    background-image: url("../photo/diagon_main.webp");
    animation: hero-slide03 18s ease-in-out infinite;
}

.hp .hero-layer {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .15) 55%, rgba(15, 3, 4, .6)), linear-gradient(90deg, rgba(83, 10, 12, .2), rgba(83, 10, 12, .05) 40%, rgba(15, 5, 5, .2));
}

.hp .hero-inner {
    position: relative;
    z-index: 2;
    width: min(1040px, 92%);
    padding: 56px 0 40px;
    color: #fff;
    text-align: center;
}

.hp .anniversary {
    display: inline-block;
    margin: 0 0 24px;
    padding: .35em 1em;
    padding-right: 1.5em;
    color: #fff;
    font-size: clamp(22.4px, 4vw, 25.6px);
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
}

.hp .jtv20th {
    width: 65px;
    display: inline-block;
    position: relative;
    top: 1.5em;
}

.hp .venue {
    font-family: "Noto Serif JP", serif;
    margin: 0;
    color: #fff0bc;
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: .08em;
    text-shadow: 0 2px 15px rgba(0, 0, 0, .6);
    line-height: 1.5em;
    margin-bottom: .5em;
}

.hp .hero h1 {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    padding-top: .25em;
    margin: .1em 0 .25em 0;
    font-size: clamp(48px, 4vw, 56px);
    line-height: 1.2;
    letter-spacing: .05em;
    color: #fff6d9;
    text-shadow: 0 7px 26px rgba(0, 0, 0, .65), 0 0 4px rgba(255, 230, 170, .55);
}

.hp .hero-actions {
    margin: 32px 0 38.4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

/* 共通CSSの width:100% を確実に解除して横並びにする */
.hp .hero-actions > .btn {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
}

.hp .hero-date {
    display: inline-grid;
    gap: 3.2px;
    padding: 16px 32px;
    background: rgba(30, 4, 5, .72);
    border: 1px solid var(--line);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .05), 0 18px 40px rgba(0, 0, 0, .15);
}

.hp .hero-date span {
    color: #e7c66d;
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    line-height: 1em;
    position: relative;
    top: .25em;
}

.hp .hero-date strong {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(23.2px, 3vw, 39.2px);
    color: #fff;
}

.hp .hero-date b {
    font-size: clamp(32px, 3.6vw, 51.2px);
    font-weight: 700;
}

.hp .hero-title-area {
    position: relative;
    align-items: center;
    width: min(980px, 100%);
    margin: 0 auto 17.6px;
    padding: .2em 1em 1.8em 1em;
    background: rgba(58, 8, 10, .34);
    border-top: 1px solid rgba(255, 240, 188, .45);
    border-bottom: 1px solid rgba(255, 240, 188, .35);
}

.hp .hero-logo {
    margin: auto;
    width: min(320px, 100%);
    height: auto;
    padding: 32px 0 3.2px 0;
}

.hp .hero-title-copy {
    min-width: 0;
    text-align: center;
}

.hp .hero-title-copy .venue {
    text-align: center;
}

.hp .hero-title-copy h1 {
    margin-top: .1em;
    text-align: center;
}

.hp .entry-badge {
    position: absolute;
    right: 4em;
    top: 50%;
    transform: translate(36%, -50%);
    display: grid;
    place-items: center;
    width: 136px;
    min-height: 64px;
    margin: 0;
    padding: 9.6px 16.8px;
    color: #fff;
    font-family: "Noto Serif JP", serif;
    font-size: 20.8px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .45);
    background: transparent;
    isolation: isolate;
}

.hp .entry-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #fff;
    clip-path: polygon(
        15% 0,
        85% 0,
        100% 50%,
        85% 100%,
        15% 100%,
        0 50%
    );
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25));
}

.hp .entry-badge::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    background: linear-gradient(
        135deg,
        #253d8d 0%,
        #1f3684 48%,
        #14275f 100%
    );
    clip-path: polygon(
        15% 0,
        85% 0,
        100% 50%,
        85% 100%,
        15% 100%,
        0 50%
    );
}

html.translated-ltr .hp .entry-badge,
html.translated-rtl .hp .entry-badge,
html:not([lang="ja"]) .hp .entry-badge,
html[_mstroot] .hp .entry-badge {
    display: none !important;
}

.hp .hero-subtitle {
    margin: .15em 0 0;
    color: #fff6d9;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .08em;
    text-align: center;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .75);
}

.hp .lead {
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 2;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
    width: min(900px, 96%);
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(15.68px, 1.45vw, 18.08px);
    line-height: 1.9;
}
.hp .lead p {
    text-align: center !important;
}

@keyframes hero-slide01 {
    0%,
    22.22% {
        opacity: 1;
    }

    33.33%,
    88.89% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hero-slide02 {
    0%,
    22.22% {
        opacity: 0;
    }

    33.33%,
    55.56% {
        opacity: 1;
    }

    66.67%,
    100% {
        opacity: 0;
    }
}

@keyframes hero-slide03 {
    0%,
    55.56% {
        opacity: 0;
    }

    66.67%,
    88.89% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 900px) {

    .hp .hero {
        min-height: calc(100svh - 62px);
    }

    .hp .jtv20th {
        top: 0;
        margin: auto;
        display: block;
        position: relative;
        top: -10px;
    }

    .hp .anniversary {
        padding: 0;
    }

    .hp .venue {
        font-size: 19.2px;
    }

    .hp .hero-title-area {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
    }

    .hp .hero-logo {
        width: min(250px, 70vw);
    }

    .hp .entry-badge {
        display: none;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        transform: none;
        width: 131.2px;
        min-height: 69.6px;
        font-size: 19.2px;
    }

    .hp .hero-actions {
        margin-top: 52.8px;
    }
}

@media (max-width: 560px) {

    .hp .hero-inner {
        padding: 32px 0 24px;
    }

    .hp .venue {
        font-size: 3vw;
    }

    .hp .anniversary {
        font-size: 17.6px;
    }

    .hp .hero-date {
        width: 100%;
        padding: 14.4px 0;
    }

    .hp .hero-date strong {
        font-size: 5.8vw;
    }

    .hp .hero h1 {
        font-size: 7vw !important;
        font-size: 52px;
    }

    .hp .hero-title-area {
        width: 100%;
        margin-bottom: 12.8px;
    }

    .hp .hero-logo {
        width: 55vw;
    }

    .hp .entry-badge {
        width: 115.2px;
        min-height: 51.2px;
        font-size: 16px;
    }

    .hp .hero-actions {
        display: grid;
        margin-top: 48px;
    }

    .hp .hero-actions > .btn {
        width: 100% !important;
        white-space: normal;
    }

    .hp .hero-subtitle {
        font-size: 4.7vw;
    }

    .hp .lead {
        padding:1em 0;
        font-size: 3.55vw;
        text-align: left;
        width: 100%;        
        line-height: 1.6;
        text-align: left !important;
    }
    .hp .lead p {
        margin-top: 1em;
        text-align: left  !important;
}
}

/* =========================================================
   04. イントロ・スペシャルディナー
   ========================================================= */

.hp .intro,
.hp .point,
.hp .schedule,
.hp .gallery,
.hp .notes {
    padding: 83.2px 0;
    background: var(--paper);
}

.hp .intro-grid,
.hp .schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
}

.hp .intro p:not(.section-kicker),
.hp .schedule p,
.hp .entry p {
    font-size: 16.8px;
}

.hp .intro-photo {
    margin: 0;
    border: 8px solid #fff;
}

.hp .intro-photo img {
    object-fit: cover;
}

.hp .point {
    background: linear-gradient(#fffaf0, #f7ead1);
}

.hp .point-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.hp .point article {
    background: #fff;
    border: 1px solid rgba(110, 66, 25, .16);
    box-shadow: 0 14px 34px rgba(80, 32, 14, .12);
    border-radius: 18px;
    overflow: hidden;
}

.hp .point article img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.hp .point article h3,
.hp .point article p {
    padding-left: 21.6px;
    padding-right: 21.6px;
}

.hp .point article p {
    padding-bottom: 24px;
}

.hp .feature-photo {
    min-height: 560px;
    display: grid;
    place-items: center;
    background: url("../photo/christmas_table.webp") center/cover fixed no-repeat;
    color: #fff;
}

.hp .feature-photo:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(40, 4, 6, .35), rgba(40, 4, 6, .2), rgba(0, 0, 0, .15));
}

.hp .feature-copy {
    position: relative;
    width: min(1200px, 92%);
    font-feature-settings: "palt" 1;
}

.hp .feature-copy p {
    color: #ffe9a4;
    font-family: "Noto Serif JP", serif;
    font-size: 21.6px;
    text-align: left;
}

.hp .feature-copy h2 {
    color: #fff;
    text-shadow: 0 5px 22px rgba(0, 0, 0, .85);
}

.hp .menu {
    padding: 0;
    background: #120707;
}

.hp .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
}

.hp .menu figure {
    margin: 0;
    overflow: hidden;
}

.hp .menu img {
    width: 100%;
    height: 14vw;
    object-fit: cover;
    transition: transform .6s;
}

.hp .menuX figure:hover img {
    transform: scale(1.06);
}

.hp .intro-copy {
    min-width: 0;
}

.hp .intro-slider {
    padding-bottom: 54.4px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(40, 13, 8, .22);
}

.hp .intro-slider .intro-photo {
    border: 8px solid #fff;
    box-shadow: none;
}

.hp .intro-slider .intro-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.hp .intro-slider .slider-controls {
    bottom: 0;
    min-height: 54.4px;
    padding: 8.8px 12px;
    background: #fff;
    box-shadow: none;
}

@media (max-width: 900px) {

    .hp .intro-grid,
.hp .schedule-grid,
.hp .entry-box {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hp .point-grid,
.hp .info-grid {
        grid-template-columns: 1fr;
    }

    .hp .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp .menu img {
        width: 100%;
        height: 28vw;
        object-fit: cover;
    }

    .hp .feature-photo {
        background-attachment: scroll;
        min-height: 430px;
    }

    .hp .feature-photo:before {
        background: linear-gradient(90deg, rgba(40, 4, 6, .15), rgba(40, 4, 6, .2), rgba(0, 0, 0, .5));
    }
}

@media (max-width: 560px) {

    .hp .intro,
.hp .point,
.hp .schedule,
.hp .info,
.hp .gallery,
.hp .entry,
.hp .notes {
        padding: 56px 0;
    }

    .hp .point article img {
        height: 200px;
    }

    .hp .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp .feature-copy {
        position: absolute;
        top: 10%;
    }

    .hp .feature-copy p {
        text-align: left;
        font-size: 16.8px;
    }

    .hp .intro-slider-wrap {
        margin: 18.4px 0 21.6px;
    }
}

.hp .schedule {
    background: #2a0b0c;
    color: #fff;
}

.hp .schedule h2 {
    color: #fff4c7;
}

.hp .schedule .section-kicker,
.hp .schedule p {
    color: #ecd39b;
}

.hp .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(255, 250, 235, .96);
    color: #2b160f;
    border: 1px solid var(--line);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .26);
}

.hp .timeline li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 19.2px;
    padding: 16px 20.8px;
    border-bottom: 1px solid #ead9b8;
}

.hp .timeline li:last-child {
    border-bottom: 0;
}

.hp .timeline time {
    font-weight: 900;
    color: #8b1a19;
    font-size: 17.6px;
}

.hp .timeline span {
    font-weight: 700;
}

/* =========================================================
   05. イベント概要・スケジュール
   ========================================================= */

.hp .event-overview {
    padding: 83.2px 0;
    background: linear-gradient(180deg, #7b1618, #4b0b0d);
    color: #fff;
}

.hp .event-overview h2 {
    color: #fff4ce;
}

.hp .event-overview .section-kicker {
    color: #f7d783;
}

.hp .event-detail {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.hp .event-detail dt {
    margin: 0;
    padding: 7.2px 11.2px;
    color: #57170f;
    background: rgba(255, 245, 221, .94);
    font-size: 14.4px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.hp .event-detail dd {
    margin: 0;
    padding: 4px 0;
    color: #fff8e4;
    font-weight: 500;
    line-height: 1.7;
}

.hp .event-detail dd span {
    font-size: 14.72px;
    font-weight: 500;
}

.hp .event-detail dd strong {
    color: #ffe49d;
    font-size: 1.12em;
}

.hp .event-detail-reception dd strong {
    display: inline-block;
    padding: .2em .8em;
    color: #35120d;
    background: linear-gradient(135deg, #fff4bf, #d6aa50);
}

.hp .schedule-panel {
    padding: 19.2px 21.6px 21.6px;
    color: #2b160f;
    background: rgba(255, 250, 235, .97);
    border: 1px solid rgba(255, 226, 147, .72);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .26);
}

.hp .schedule-panel-title {
    margin: 0 0 8.8px;
    padding-bottom: 8.8px;
    color: #651615;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #d9bf8a;
}

.hp .event-overview .timeline {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hp .price-list .plan-name {
    display: inline-block;
    width: 6em;
}

.hp .event-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
    margin-top: 32px;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
}

.hp .event-detail-list {
    display: grid;
    gap: 20px;
    margin: 0;
    gap: 16px;
}

.hp .event-detail-plans {
    grid-template-columns: 142px minmax(0, 1fr);
}

.hp .price-caption {
    margin: 0 0 10.4px;
    color: #fff8e4;
    font-weight: 700;
    text-align: left;
}

.hp .price-caption span {
    display: inline-block;
    margin-left: .8em;
    font-size: 13.12px;
    font-weight: 500;
}

.hp .plan-table-wrap {
    margin-top: -.75em;
    overflow-x: auto;
    border: 1px solid rgba(255, 226, 147, .72);
}

.hp .plan-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    color: #32140e;
    background: rgba(255, 250, 235, .98);
}

.hp .plan-table th,
.hp .plan-table td {
    padding: 12.8px 13.6px;
    border-right: 1px solid #dfc693;
    border-bottom: 1px solid #dfc693;
    line-height: 1.65;
    text-align: left;
    vertical-align: middle;
}

.hp .plan-table thead th {
    color: #fff;
    background: #641315;
    font-size: 14.4px;
    text-align: center;
}

.hp .plan-table tbody th {
    width: 144px;
    color: #611416;
    background: #fff4d6;
    text-align: center;
}

.hp .plan-table tbody th span {
    font-size: 12.48px;
}

.hp .plan-table td:nth-child(2) {
    width: 152px;
    text-align: center;
    white-space: nowrap;
}

.hp .plan-table tr:last-child th,
.hp .plan-table tr:last-child td {
    border-bottom: 0;
}

.hp .plan-table th:last-child,
.hp .plan-table td:last-child {
    border-right: 0;
}

.hp .plan-table .vip {
    line-height: 1.2em;
}

.hp .plan-table .plan-price {
    color: #8b1516;
    font-size: 18.56px;
}

.hp .schedule-tabs {
    min-width: 0;
    box-sizing: border-box;
}

.hp .schedule-tab-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6.4px;
    margin-bottom: 7.2px;
    box-sizing: border-box;
}

.hp .schedule-tab {
    min-height: 46px;
    padding: 10.4px 12px;
    color: #fff1c4;
    background: rgba(52, 5, 7, .72);
    border: 1px solid rgba(255, 226, 147, .72);
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
    box-sizing: border-box;
}

.hp .schedule-tab:hover,
.hp .schedule-tab.is-active {
    color: #40110d;
    background: linear-gradient(135deg, #fff4bf, #d6aa50);
}

.hp .schedule-panel[hidden] {
    display: none;
}

.hp .schedule-note {
    margin: 12px 0 0;
    color: #6d5441;
    font-size: 12.8px;
    text-align: right;
}

.hp .event-notes {
    margin-top: 38.4px;
    padding: 23.2px 25.6px;
    color: #fff4dc;
    background: rgba(38, 4, 6, .34);
    border: 1px solid rgba(255, 226, 147, .38);
}

.hp .event-notes h3,
.hp .entry-notes h3 {
    margin: 0 0 13.6px;
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
}

.hp .event-notes ul,
.hp .entry-notes ul {
    display: grid;
    gap: 7.2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp .event-notes li,
.hp .entry-notes li {
    position: relative;
    padding-left: 1.2em;
    font-size: 14.72px;
    line-height: 1.6;
}

.hp .event-notes li::before,
.hp .entry-notes li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #f5d37c;
    font-weight: 900;
}

.hp .event-notes a {
    color: #fff0bc;
    text-underline-offset: .18em;
}

.hp .event-detail-plans > dd {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.hp .event-detail-plans .plan-table-wrap,
.hp .schedule-tabs,
.hp .schedule-panel,
.hp .event-overview .timeline {
    max-width: 100%;
    min-width: 0;
}

.hp .vip-detail-btn {
    display: table;
    margin: 4px auto 0;
    padding: .8em 2em;
    min-width: 9em;
    color: #fff;
    background: #7f1617;
    border-radius: 999px;
    font-size: 12.48px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.hp .vip-detail-btn:hover,
.hp .vip-detail-btn:focus-visible {
    color: #fff;
    filter: brightness(1.12);
}

.hp .event-overview .timeline li {
    padding: 13.12px 5.6px;
    padding-top: 9.92px;
    padding-bottom: 9.92px;
    line-height: 1.45;
}

@media (max-width: 900px) {

    .hp .schedule-panel {
        margin-top: 8px;
    }

    .hp .event-overview-grid {
        grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .hp .timeline li {
        grid-template-columns: 78px 1fr;
        gap: 11.2px;
        padding: 13.6px 14.4px;
    }

    .hp .event-overview-grid {
        gap: 27.2px;
        margin-top: 24px;
    }

    .hp .event-detail {
        grid-template-columns: 1fr;
        gap: 5.6px;
    }

    .hp .event-detail dt {
        width: 100%;
        text-align: left;
    }

    .hp .schedule-panel {
        padding: 16px 13.6px;
    }

    .hp .event-detail-plans {
        grid-template-columns: 1fr;
    }

    .hp .price-caption span {
        display: block;
        margin: 4px 0 0;
    }

    .hp .plan-table {
        min-width: 540px;
    }

    .hp .schedule-tab {
        font-size: 14.4px;
    }

    .hp .event-notes {
        margin-top: 27.2px;
        padding: 18.4px 16px;
    }

    .hp .event-notes h3,
.hp .entry-notes h3 {
        font-size: 17.6px;
    }

    .hp .event-notes li,
.hp .entry-notes li {
        font-size: 13.6px;
    }

    .hp .event-overview .m1100,
.hp .event-overview-grid,
.hp .event-detail-list,
.hp .event-detail,
.hp .event-detail dd,
.hp .plan-table-wrap,
.hp .schedule-tabs,
.hp .schedule-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hp .event-overview {
        padding: 56px 0;
        box-sizing: border-box;
        padding-right: 4%;
        padding-left: 4%;
    }

    .hp .event-detail dd {
        padding: 1.6px 2.4px 8.8px;
        padding-left: .75em;
    }

    .hp .event-detail-plans dd {
        padding-left: 0 !important;
    }

    .hp table.plan-table {
        display: block;
        width: 100%;
        min-width: 0;
        background: transparent;
    }

    .hp .plan-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .hp .plan-table tbody,
.hp .plan-table tr,
.hp .plan-table th,
.hp .plan-table td {
        display: block;
        width: 100% !important;
    }

    .hp .plan-table tr {
        margin-bottom: 12.8px;
        background: rgba(255, 250, 235, .98);
        border: 1px solid #dfc693;
    }

    .hp .plan-table tr:last-child {
        margin-bottom: 0;
    }

    .hp .plan-table th,
.hp .plan-table td {
        padding: 10.4px 12px;
        border-right: 0;
        border-bottom: 1px solid #dfc693;
        text-align: left !important;
        white-space: normal !important;
    }

    .hp .plan-table tbody th {
        background: #fff4d6;
        text-align: center !important;
    }

    .hp .plan-table td:nth-child(2)::before {
        content: "料金：";
        margin-right: .35em;
        color: #611416;
        font-weight: 700;
    }

    .hp .plan-table td:nth-child(3)::before {
        content: "含まれる内容";
        display: block;
        margin-bottom: 4px;
        color: #611416;
        font-weight: 700;
    }

    .hp .plan-table tr:last-child td:last-child {
        border-bottom: 0;
    }

    .hp .event-overview .timeline li {
        grid-template-columns: 70px 1fr;
        gap: 10.4px;
        padding: 12px 2.4px;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
        padding: 8.8px 1.6px;
    }

    .hp .event-overview .timeline time,
.hp .event-overview .timeline span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .hp .plan-table-wrap {
        overflow: visible;
        border: 0;
        box-shadow: none;
    }

    .hp .plan-table tr:last-child th,
.hp .plan-table tr:last-child td {
        border-bottom: 1px solid #dfc693;
    }

    .hp .plan-table tr th:last-child,
.hp .plan-table tr td:last-child,
.hp .plan-table tr:last-child td:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   06. VIPプラン
   ========================================================= */

.hp .vip-intro {
    padding: 83.2px 0;
    background: linear-gradient(180deg, #fffaf0, #f2dfbe);
}

.hp .vip-feature--reverse .vip-media-placeholder {
    order: 2;
}

.hp .vip-feature-copy h3,
.hp .vip-benefit-grid h3 {
    margin: 0 0 11.2px;
    color: #641315;
    font-family: "Noto Serif JP", serif;
    font-size: 21.6px;
    line-height: 1.5;
}

.hp .vip-feature-copy p,
.hp .vip-benefit-grid p {
    margin: 0;
    color: #4b2b1d;
    line-height: 1.9;
}

.hp .vip-feature-copy small {
    display: block;
    margin-top: 8.8px;
}

.hp .vip-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.hp .vip-benefit-grid article {
    padding: 23.2px;
    background: rgba(255, 255, 255, .82);
    border-top: 4px solid #8b1718;
    box-shadow: 0 12px 28px rgba(80, 32, 14, .1);
}

.hp .vip-benefit-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: default;
}

.hp .vip-feature-list {
    display: grid;
    gap: 25.6px;
    margin-top: 32px;
    grid-auto-rows: 1fr;
}

.hp .vip-feature {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
    gap: 1em;
    align-items: center;
    padding: 21.6px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(116, 63, 25, .16);
    box-shadow: 0 16px 36px rgba(80, 32, 14, .12);
    height: 100%;
    grid-template-columns: minmax(0, 36%) minmax(0, 64%);
    align-items: stretch;
}

.hp .vip-feature--reverse {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
}

.hp .vip-media-placeholder {
    display: grid;
    place-items: center;
    border: 6px solid #fff;
    box-shadow: 0 5px 10px rgba(30, 10, 8, .1);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    min-height: 240px;
}

.hp .vip-media-placeholder img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.hp .vip-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 900px) {

    .hp .vip-feature--reverse .vip-media-placeholder {
        order: initial;
    }

    .hp .vip-benefit-grid {
        grid-template-columns: 1fr;
    }

    .hp .vip-feature,
.hp .vip-feature--reverse {
        grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .hp .vip-media-placeholder {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 560px) {

    .hp .vip-intro,
.hp .jbasket-benefit {
        padding: 56px 0;
    }

    .hp .vip-feature {
        padding: 16px;
    }

    .hp .vip-feature-copy h3,
.hp .vip-benefit-grid h3 {
        font-size: 19.2px;
    }

    .hp .vip-benefit-grid {
        gap: 11.2px;
    }

    .hp .vip-benefit-grid article {
        padding: 0;
        overflow: hidden;
    }

    .hp .vip-benefit-grid h3 {
        margin: 0;
    }

    .hp .vip-benefit-toggle {
        position: relative;
        padding: 16px 48px 16px 16px;
        cursor: pointer;
    }

    .hp .vip-benefit-toggle::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 16px;
        display: grid;
        place-items: center;
        width: 26.4px;
        height: 26.4px;
        color: #fff;
        background: #7f1617;
        border-radius: 50%;
        font-family: Arial, sans-serif;
        font-size: 20px;
        line-height: 1;
        transform: translateY(-50%);
    }

    .hp .vip-benefit-grid article.is-open .vip-benefit-toggle::after {
        content: "−";
    }

    .hp .vip-benefit-content {
        display: none;
        padding: 0 16px 16px;
    }

    .hp .vip-benefit-grid article.is-open .vip-benefit-content {
        display: block;
    }

    .hp .vip-feature-list {
        grid-auto-rows: auto;
    }

    .hp .vip-feature,
.hp .vip-feature--reverse {
        height: auto;
        grid-template-rows: auto 1fr;
    }

    .hp .vip-media-placeholder {
        min-height: 180px;
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    .hp .vip-media-placeholder img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* =========================================================
   07. スタジオツアー
   ========================================================= */

.hp .gallery-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-auto-rows: 230px;
    gap: 16px;
    margin-top: 32px;
}

.hp .gallery figure {
    margin: 0;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 10px 28px rgba(60, 20, 10, .14);
}

.hp .gallery figure.large {
    grid-row: span 2;
}

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

.hp .simple-slider {
    position: relative;
    overflow: hidden;
}

.hp .slider-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .8s ease, visibility .8s ease;
}

.hp .slider-slide.is-active {
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hp .slider-controls {
    position: absolute;
    right: 0;
    bottom: .5em;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8.8px 12px;
}

.hp .slider-prev,
.hp .slider-next {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #fff;
    background: rgba(54, 11, 12, .4);
    border: 1px solid rgba(255, 240, 188, 0);
    border-radius: 50%;
    font-size: 24.8px;
    line-height: 1;
    cursor: pointer;
}

.hp .slider-dots {
    display: flex;
    align-items: center;
    gap: 7.2px;
}

.hp .slider-dots button {
    width: 10.4px;
    height: 10.4px;
    padding: 0;
    background: rgba(54, 11, 12, .4);
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 50%;
    cursor: pointer;
}

.hp .slider-dots button.is-active {
    background: var(--red);
}

.hp .photo-note {
    margin: 10.4px 0 0;
    color: #6d5441;
    font-size: .8em;
    line-height: 1.65;
}

.hp .gallery {
    background: #fff8ed;
    padding-top: 83.2px;
}

.hp .tour-lead {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.hp .tour-slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.hp .tour-slide figcaption {
    color: #5b4438;
    background: #fff;
    font-size: 14.4px;
    text-align: center;
}

.hp .tour-slider {
    width: min(920px, 100%);
    margin: 32px auto 0;
    background: #fff;
    border: 7px solid #fff;
    box-shadow: 0 16px 42px rgba(60, 20, 10, .2);
    display: grid;
    background: #fffaf0;
}

.hp .tour-slider .tour-slide,
.hp .tour-slider .tour-slide.is-active {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    width: 100%;
}

.hp .tour-slider .tour-slide:not(.is-active) {
    z-index: 0;
}

.hp .tour-slider .tour-slide.is-active {
    z-index: 1;
}

.hp .tour-slider .tour-slide {
    overflow: hidden;
    background: #fffaf0;
}

.hp .tour-slider .tour-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.hp .tour-slider .tour-slide figcaption {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 70.4px;
    margin: 0;
    padding: 12.8px 16px 64px;
    visibility: inherit;
    opacity: 1;
}

@media (max-width: 900px) {

    .hp .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 190px;
    }

    .hp .gallery figure.large {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (max-width: 560px) {

    .hp .gallery-grid {
        display: block;
    }

    .hp .gallery figure {
        margin-bottom: 16px;
    }

    .hp .gallery img {
        height: 230px;
    }

    .hp .photo-note {
        font-size: 12.16px;
    }

    .hp .tour-lead,
.hp .jbasket-lead {
        text-align: left;
    }

    .hp .tour-slide img {
        aspect-ratio: 4 / 3;
    }

    .hp .tour-slider {
        border-width: 4px;
        overflow: hidden;
        background: #fff;
        border-bottom-color: #fffaf0;
    }

    .hp .tour-slider .tour-slide img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .hp .tour-slider .tour-slide figcaption {
        min-height: 80px;
        padding: 12px 12.8px 54.4px;
        background: #fff;
        border-bottom: 0;
        text-align: left;
        line-height: 1.4;
    }

    .hp .tour-slider .slider-controls {
        bottom: 0;
        padding: 7.2px 12px 10.4px;
        background: #fff;
        box-shadow: none;
    }

    .hp .tour-slider .slider-prev,
.hp .tour-slider .slider-next,
.hp .tour-slider .slider-dots button {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hp .slider-slide {
        transition: none;
    }
}

/* =========================================================
   08. J-Basket会員特典
   ========================================================= */

.hp .jbasket-benefit {
    padding: 83.2px 0;
    background: linear-gradient(180deg, #f7f8fb, #e7edf8);
}

.hp .jbasket-benefit-box {
    padding: clamp(24px, 4vw, 48px);
    background: #fff;
    border: 1px solid #d7dce8;
    box-shadow: 0 18px 44px rgba(20, 46, 94, .13);
}

.hp .jbasket-heading {
    text-align: center;
}

.hp .jbasket-logo {
    width: min(180px, 34vw);
    height: auto;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    top: .12em;
}

.hp .jbasket-heading h2 {
    margin-bottom: 0;
}

.hp .jbasket-lead {
    margin: 22.4px 0 17.6px;
    font-size: 17.28px;
    text-align: center;
}

.hp .jbasket-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hp .jbasket-perks article {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 130px;
    padding: 20px;
    background: #f7f9fd;
    border: 1px solid #d9e0ef;
}

.hp .perk-number {
    display: grid;
    place-items: center;
    flex: 0 0 43.2px;
    width: 43.2px;
    height: 43.2px;
    color: #fff;
    background: #0c4598;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 900;
}

.hp .jbasket-perks p {
    margin: 0;
    font-weight: 700;
    text-align: left;
}

.hp .jpoint-perk {
    display: flex;
    align-items: center;
    gap: 14.4px;
    min-width: 0;
}

.hp .jpoint-logo {
    width: min(240px, 32vw);
    height: auto;
}

.hp .jpoint-perk strong {
    color: #d4071f;
    font-size: 32px;
    white-space: nowrap;
}

.hp .jpoint-perk span {
    display: block;
    font-size: 12.48px;
    font-weight: 500;
}

.hp .jbasket-link {
    margin: 18.4px 0 0;
    text-align: right;
}

.hp .jbasket-link a {
    margin-left: .35em;
    color: #0c4598;
    font-weight: 700;
    text-underline-offset: .2em;
}

@media (max-width: 900px) {

    .hp .jbasket-heading {
        justify-content: center;
        text-align: center;
    }

    .hp .jbasket-perks {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .hp .jbasket-benefit-box {
        padding: 20px;
    }

    .hp .jbasket-heading {
        display: grid;
        justify-items: center;
        gap: 12.8px;
    }

    .hp .jbasket-logo {
        width: 150px;
    }

    .hp .jbasket-perks article {
        align-items: flex-start;
        min-height: 0;
        padding: 16px;
    }

    .hp .jpoint-perk {
        display: grid;
        gap: 8.8px;
    }

    .hp .jpoint-logo {
        width: 60vw;
    }

    .hp .jbasket-link {
        text-align: center;
    }
}

/* =========================================================
   09. お申し込み
   ========================================================= */

.hp .entry {
    position: relative;
    padding: 83.2px 0;
    background: url("../photo/diagon_main.webp") center / cover no-repeat fixed;
    color: #fff;
}

.hp .entry:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(44, 5, 7, .92), rgba(44, 5, 7, .72));
}

.hp .entry h2 {
    color: #51170e;
}

.hp .deadline {
    display: inline-block;
    margin-top: 11.2px;
    padding: .35em .8em;
    color: #fff;
    background: #7f1617;
    font-weight: 700;
}

.hp .entry-action p {
    margin-top: 12.8px;
    color: #6b574c;
    font-size: 14.4px;
    text-align: center;
}

.hp .contact {
    display: inline-block;
    width: 1.6em;
    margin-right: .5em;
}

.hp .entry-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 43%);
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 32px;
    align-items: center;
    padding: clamp(38.4px, 4vw, 54.4px);
    color: #2b150e;
    background: rgba(255, 250, 235, .95);
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.hp .entry-copy {
    align-self: center;
    min-width: 0;
}

.hp .entry-copy > p:last-child {
    max-width: 592px;
    margin-bottom: 0;
}

.hp .application-period {
    align-self: center;
    width: 100%;
    margin: 0;
    padding: 20.8px 24px;
    background: #fff3d2;
    border-left: 5px solid #8a1718;
    box-shadow: 0 8px 20px rgba(92, 42, 18, .08);
}

.hp .application-period h3 {
    margin: 0 0 10.4px;
    color: #681618;
    font-family: "Noto Serif JP", serif;
    font-size: 19.2px;
}

.hp .application-period p {
    margin: 4px 0;
    font-size: 15.36px;
    line-height: 1.65;
    text-align: left;
}

.hp .entry-notes {
    grid-column: 1 / -1;
    margin: 2.4px 0 0;
    padding: 0;
    color: #4a2b1d;
    background: transparent;
    border: 0;
}

.hp .entry-notes-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 13.6px 54.4px;
    color: #fff8df;
    background: linear-gradient(135deg, #7f1617, #591013);
    border: 2px solid #d5ae58;
    border-radius: 4px;
    box-shadow: 0 5px 0 #3f0a0c, 0 10px 18px rgba(57, 12, 8, .18);
    font-family: "Noto Serif JP", serif;
    font-size: 18.4px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    cursor: default;
}

.hp .entry-notes-toggle > span:first-child {
    width: 100%;
    text-align: center;
}

.hp .entry-notes-icon {
    display: none;
}

.hp .entry-notes-content {
    padding: 20px 22.4px 19.2px;
    color: #4a2b1d;
    background: #fff9e9;
    border: 1px solid #d8c39a;
    border-top: 0;
}

.hp .entry-notes-content[hidden] {
    display: none;
}

.hp .entry-notes-content ul {
    gap: 10.4px;
}

.hp .entry-notes li::before {
    color: #b4832d;
}

.hp .entry-action {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
    width: min(900px, 100%);
    margin: 3.2px auto 0;
}

.hp .entry-action .btn {
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding-right: 24px;
    padding-left: 24px;
    text-align: center;
}

@media (max-width: 900px) {
    .hp .entry {
        background-attachment: scroll;
    }

    .hp .entry-box {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
        column-gap: 32px;
    }
}

@media (max-width: 700px) {
    .hp .entry-box {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .hp .application-period,
.hp .entry-notes,
.hp .entry-action {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .hp .entry-box {
        padding: 24px;
    }

    .hp .entry-copy > p:last-child {
        margin-bottom: 0;
    }

    .hp .application-period {
        padding: 16.8px 17.6px;
    }

    .hp .entry-notes {
        margin: 0;
    }

    .hp .entry-notes-toggle {
        font-size: 17.28px;
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .hp .entry-notes-toggle:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 #3f0a0c, 0 5px 10px rgba(57, 12, 8, .16);
    }

    .hp .entry-notes-toggle:focus-visible {
        outline: 3px solid rgba(127, 22, 23, .28);
        outline-offset: 4px;
    }

    .hp .entry-notes-toggle > span:first-child {
        width: 100%;
        text-align: center;
    }

    .hp .entry-notes-icon {
        position: absolute;
        top: 50%;
        right: 18.4px;
        display: block;
        width: 17.6px;
        height: 17.6px;
        transform: translateY(-50%);
    }

    .hp .entry-notes-icon::before,
.hp .entry-notes-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff0bc;
        transform: translateY(-50%);
        transition: transform .2s ease;
    }

    .hp .entry-notes-icon::after {
        transform: translateY(-50%) rotate(90deg);
    }

    .hp .entry-notes-toggle[aria-expanded="true"] .entry-notes-icon::after {
        transform: translateY(-50%) rotate(0);
    }

    .hp .entry-notes-content {
        padding: 18.4px 16px 17.6px;
    }

    .hp .entry-action {
        grid-template-columns: 1fr;
        gap: 13.6px;
        width: 100%;
        margin-top: 0;
    }

    .hp .entry-action .btn {
        min-height: 58px;
    }
    
}

/* =========================================================
   10. フッター・固定ボタン
   ========================================================= */

body:has(.hp) > .fixed-entry-btn {
    position: fixed;
    right: 96px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 58px;
    padding: .8em 1.5em;
    color: #3c170c;
    background: linear-gradient(135deg, #fff0bc, #d2a54a);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        filter .25s ease;
}

body:has(.hp) > .fixed-entry-btn.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

body:has(.hp) > .fixed-entry-btn.is-show:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

.hp .copyright {
    padding: 32px 4%;
    color: #5b4b43;
    background: #f8f8f8;
    font-size: 13.6px;
}

@media (max-width: 560px) {

    body:has(.hp) > .fixed-entry-btn {
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        min-height: 50px;
        padding: .65em 1.5em;
        font-size: 14.4px;
    }

    body:has(.hp) > footer {
        padding-bottom: 82px;
        background-color: #193C8D;
    }
}


/* =========================================================
   11. 共通CSS競合の調整
   ========================================================= */

.hp p,
.hp li,
.hp dt,
.hp dd {
    font-weight: 400;
}

.hp strong,
.hp b {
    font-weight: 700;
}

.hp h1,
.hp h2,
.hp h3,
.hp h4,
.hp h5,
.hp h6 {
    font-weight: 700;
}

.hp a:not(.btn):not(.vip-detail-btn):not(.fixed-entry-btn) {
    font-weight: inherit;
}

@media (min-width: 901px) {
    .hp .hero-inner {
        padding-top: 56px;
    }
}

.hp .btn:focus,
.hp .btn:focus-visible,
.hp button:focus,
.hp button:focus-visible,
body:has(.hp) > .fixed-entry-btn:focus,
body:has(.hp) > .fixed-entry-btn:focus-visible {
    outline: none !important;
}

/* 共通CSSの青いフォーカス用 box-shadow も解除 */
.hp .btn.primary:focus,
.hp .btn.primary:focus-visible {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .15) !important;
}

.hp .btn.ghost:focus,
.hp .btn.ghost:focus-visible {
    box-shadow: none !important;
}

body:has(.hp) > .fixed-entry-btn:focus,
body:has(.hp) > .fixed-entry-btn:focus-visible {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15) !important;
}


@media (min-width: 561px) {
    body:has(.hp) > .fixed-entry-btn {
        right: 180px !important;
        bottom: 24px !important;
    }
}

@media (max-width: 560px) {
    body:has(.hp) > .fixed-entry-btn {
        left: 50% !important;
        right: auto !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        width: min(320px, calc(100vw - 32px));
        min-width: 0;
        max-width: calc(100vw - 32px);
        transform: translate(-50%, 20px);
    }

    body:has(.hp) > .fixed-entry-btn.is-show {
        transform: translate(-50%, 0);
    }

    body:has(.hp) > .fixed-entry-btn.is-show:hover {
        transform: translate(-50%, -3px);
    }
}

body:has(.hp) #topBtn {
    display: none !important;
}

body:has(.hp) > .fixed-entry-btn {
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 220px;
    min-height: 58px;
    padding: .8em 1.5em;
    color: #3c170c;
    background: linear-gradient(135deg, #fff0bc, #d2a54a);
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    transform: translateY(20px) !important;
}

body:has(.hp) > .fixed-entry-btn.is-show {
    transform: translateY(0) !important;
}

body:has(.hp) > .fixed-entry-btn.is-show:hover {
    transform: translateY(-3px) !important;
}

.hp .slider-prev,
.hp .slider-next {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
}

.hp .slider-prev::before,
.hp .slider-next::before {
    content: "" !important;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    text-indent: 0;
}

.hp .slider-prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.hp .slider-next::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

@media (max-width: 560px) {
    body:has(.hp) > .fixed-entry-btn {
        left: auto !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        min-width: 220px;
        max-width: calc(100vw - 24px) !important;
        min-height: 50px;
        padding: .65em 1.5em;
        font-size: 14.4px;
        transform: translateY(20px) !important;
    }

    body:has(.hp) > .fixed-entry-btn.is-show {
        transform: translateY(0) !important;
    }

    body:has(.hp) > .fixed-entry-btn.is-show:hover {
        transform: translateY(-3px) !important;
    }
}