/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black: #111111;
    --red: #B2182B;
    --red-dark: #8B1020;
    --white: #FFFFFF;
    --gray-50: #F8F8F8;
    --gray-100: #F0F0F0;
    --gray-400: #AAAAAA;
    --gray-600: #666666;
    --gray-800: #333333;
    --border: #E5E5E5;
    --beat-pink: #ff4d72;
    --beat-magenta: #d61757;
    --beat-wine: #6f0d18;
    --beat-soft: #FAF7F4;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-gutter: stable;
}

body {
    overflow-x: hidden;
    position: relative;
    color: var(--black);
    background: #080808;
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', 'Yu Gothic', sans-serif;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.38) 100%),
        url('../img/beat_bg_aurora.webp'),
        url('../img/beat_bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

body.is-loading {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 10px 16px;
    color: #fff;
    background: #111;
    border-radius: 8px;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid #ff4d72;
    outline-offset: 4px;
}

/* ===== LAYOUT ===== */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 100px 0;
}

/* ===== TYPE ===== */
.label {
    display: block;
    margin-bottom: 10px;
    color: #c91632;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.heading {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .01em;
}

.subtext {
    margin-top: 16px;
    color: #5f5f5f;
    font-size: 15px;
    line-height: 2;
}

.sec-head {
    margin-bottom: 60px;
    text-align: left;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-red {
    color: var(--white);
    background: linear-gradient(135deg, #B2182B, #d51f36);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 14px 34px rgba(178,24,43,.34);
}

.btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(178,24,43,.44);
}

.btn-white {
    color: var(--white);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.28);
}

.btn-white:hover {
    color: var(--black);
    background: var(--white);
    transform: translateY(-2px);
}

/* ===== LOADING ===== */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(6,6,6,.95), rgba(10,10,10,.98)),
        url('../img/beat_bg.webp') center center / cover no-repeat;
    transition: opacity .5s ease;
}

#loading-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#loading-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(240,24,50,.24), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 18%);
    pointer-events: none;
}

.loading-inner {
    position: relative;
    z-index: 1;
    width: min(92vw, 560px);
    padding: 40px 24px;
    text-align: center;
}

.loading-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.loading-logo::before {
    content: '';
    position: absolute;
    inset: -18px -28px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 22% 50%, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 38% 50%, rgba(240,24,50,.30), transparent 40%);
    filter: blur(20px);
    pointer-events: none;
}

.loading-logo-mark-wrap {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 76px;
    aspect-ratio: 202.38531 / 298.9137;
    overflow: visible;
    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.10))
        drop-shadow(0 0 22px rgba(240,24,50,.22));
}

.loading-logo-mark {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    animation: none;
    filter:
        drop-shadow(0 0 18px rgba(255,255,255,.14))
        drop-shadow(0 0 28px rgba(240,24,50,.30));
}

.loading-logo-word {
    position: relative;
    display: block;
    width: auto;
    height: 24px;
    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.12))
        drop-shadow(0 0 18px rgba(240,24,50,.18));
}

.loading-record-disc {
    position: absolute;
    z-index: 5;
    height: auto;
    opacity: 1;
    mix-blend-mode: normal;
    pointer-events: none;
    /* top/left は円盤の中心座標なので、アニメーション開始前から中央基準に固定する */
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    will-change: transform;
    animation-name: beatRecordSpinAccel;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.10))
        drop-shadow(0 0 10px rgba(240,24,50,.24));
}

.loading-record-disc-top {
    top: 26.1%;
    left: 43.2%;
    width: 60%;
}

.loading-record-disc-bottom {
    top: 69.7%;
    left: 45.8%;
    width: 85%;
}

/* 旧ローディング構造が残っていても非表示にする */
.loading-record,
.loading-center-logo {
    display: none;
}

.loading-record-b {
    animation: none;
}

.loading-copy {
    margin-bottom: 12px;
    color: rgba(255,255,255,.86);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
}

.loading-sub {
    color: rgba(255,255,255,.50);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.loading-dots {
    display: inline-flex;
    gap: 8px;
    margin-top: 20px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff233e;
    box-shadow: 0 0 14px rgba(240,24,50,.55);
    animation: dotPulse 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: .16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: .32s;
}

@keyframes beatRecordSpinAccel {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    5%   { transform: translate(-50%, -50%) rotate(14deg); }
    10%  { transform: translate(-50%, -50%) rotate(56deg); }
    15%  { transform: translate(-50%, -50%) rotate(127deg); }
    20%  { transform: translate(-50%, -50%) rotate(226deg); }
    25%  { transform: translate(-50%, -50%) rotate(353deg); }
    30%  { transform: translate(-50%, -50%) rotate(508deg); }
    45%  { transform: translate(-50%, -50%) rotate(1016deg); }
    60%  { transform: translate(-50%, -50%) rotate(1525deg); }
    75%  { transform: translate(-50%, -50%) rotate(2033deg); }
    90%  { transform: translate(-50%, -50%) rotate(2542deg); }
    100% { transform: translate(-50%, -50%) rotate(2880deg); }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        opacity: .45;
        transform: scale(.7);
    }
    40% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ===== FIXED HEADER ===== */
#header,
#header.scrolled {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    height: 70px;
    background: linear-gradient(90deg, rgba(8,8,10,.96), rgba(22,4,10,.94) 48%, rgba(8,8,10,.96));
    border-bottom: 1px solid rgba(255,77,114,.24);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow .3s ease, background .3s ease;
}

.hd-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.hd-logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(4px);
}

.hd-logo::before {
    content: '';
    position: absolute;
    inset: -10px -14px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 24px 50%, rgba(255,255,255,.16), transparent 45%),
        radial-gradient(circle at 38px 50%, rgba(240,24,50,.30), transparent 58%);
    filter: blur(14px);
    opacity: .9;
    pointer-events: none;
}

.hd-logo > img {
    position: relative;
    width: auto;
    height: 46px;
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,.192))
        drop-shadow(-1px 0 0 rgba(255,255,255,.192))
        drop-shadow(0 1px 0 rgba(255,255,255,.192))
        drop-shadow(0 -1px 0 rgba(255,255,255,.192))
        drop-shadow(2px 0 0 rgba(255,255,255,.172))
        drop-shadow(-2px 0 0 rgba(255,255,255,.172))
        drop-shadow(0 2px 0 rgba(255,255,255,.172))
        drop-shadow(0 -2px 0 rgba(255,255,255,.172))
        drop-shadow(0 0 10px rgba(255,255,255,.16))
        drop-shadow(0 0 20px rgba(255,255,255,.10))
        drop-shadow(0 0 26px rgba(240,24,50,.24));
}

.hd-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.hd-logo-text .n {
    display: block;
    width: 88px;
    transform: translateY(3px);
}

.hd-logo-text .n img {
    width: 100%;
    max-width: none;
    height: auto;
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,.192))
        drop-shadow(-1px 0 0 rgba(255,255,255,.192))
        drop-shadow(0 1px 0 rgba(255,255,255,.192))
        drop-shadow(0 -1px 0 rgba(255,255,255,.192))
        drop-shadow(2px 0 0 rgba(255,255,255,.172))
        drop-shadow(-2px 0 0 rgba(255,255,255,.172))
        drop-shadow(0 2px 0 rgba(255,255,255,.172))
        drop-shadow(0 -2px 0 rgba(255,255,255,.172));
}

.hd-logo-text .t {
    margin-top: 7px;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    letter-spacing: .06em;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0,0,0,.85);
}

.hd-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    transform: translateY(2px);
}

.hd-nav a {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: color .2s ease;
}

.hd-nav a:hover {
    color: var(--white);
}

.hd-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(2px);
}

.instagram-link,
.instagram-placeholder {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: linear-gradient(135deg, #833ab4, #e1306c 55%, #f77737);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.instagram-link:hover,
.instagram-link:focus-visible,
.instagram-placeholder:hover,
.instagram-placeholder:focus-visible {
    opacity: .88;
    transform: translateY(-2px);
    box-shadow: 0 11px 24px rgba(0, 0, 0, .26);
}

.instagram-link:focus-visible,
.instagram-placeholder:focus-visible {
    outline: 3px solid rgba(225, 48, 108, .30);
    outline-offset: 3px;
}

.instagram-link svg,
.instagram-placeholder svg {
    width: 21px;
    height: 21px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.instagram-link .instagram-link-dot,
.instagram-placeholder .instagram-placeholder-dot {
    fill: currentColor;
    stroke: none;
}

.instagram-link--header,
.instagram-placeholder--header {
    width: 36px;
    height: 36px;
}

.btn-hd-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--red), #f01832);
    box-shadow: 0 8px 22px rgba(178,24,43,.30);
    font-size: 12px;
    font-weight: 700;
    transform: translateY(2px);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn-hd-contact:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(178,24,43,.38);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: all .3s ease;
}

.mobile-nav {
    position: fixed;
    top: 70px;
    right: 0;
    left: 0;
    z-index: 999;
    display: none;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: rgba(10,10,10,.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav a {
    padding: 10px 0;
    color: rgba(255,255,255,.82);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 15px;
    font-weight: 500;
}

.mobile-nav a:hover {
    color: var(--white);
}

/* ===== PANEL BACKGROUNDS ===== */
#about,
#trust,
#features,
#services,
#target,
#blog,
#flow,
#faq,
#access,
#facility {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.965), rgba(250,247,244,.945)),
        radial-gradient(circle at 8% 12%, rgba(255,77,114,.18), transparent 30%),
        radial-gradient(circle at 88% 24%, rgba(65,185,255,.14), transparent 32%),
        radial-gradient(circle at 58% 96%, rgba(180,90,255,.12), transparent 30%);
}

#about::before,
#trust::before,
#features::before,
#services::before,
#target::before,
#blog::before,
#flow::before,
#faq::before,
#access::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%),
        radial-gradient(circle at 0% 50%, rgba(178,24,43,.070), transparent 28%),
        radial-gradient(circle at 100% 30%, rgba(70,190,255,.065), transparent 30%);
    pointer-events: none;
}

#about > .container,
#trust > .container,
#features > .container,
#services > .container,
#target > .container,
#blog > .container,
#flow > .container,
#faq > .container,
#access > .container,
#facility > .container {
    position: relative;
    z-index: 1;
}

/* ===== HERO ===== */
#hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: auto;
    margin-top: 70px;
    padding: 28px 0 0;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 100% 68%, rgba(255,77,114,.22), transparent 24%),
        radial-gradient(circle at 2% 86%, rgba(255,77,114,.20), transparent 18%),
        linear-gradient(90deg, rgba(5,5,8,.96), rgba(10,10,14,.86) 48%, rgba(5,5,8,.94)),
        url('../img/beat_bg_aurora.webp'),
        url('../img/beat_bg.webp');
    background-size: cover;
    background-position: center center;
}

#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.28), transparent 52%),
        radial-gradient(circle at 92% 74%, rgba(255,77,114,.35), transparent 16%);
    pointer-events: none;
}

#hero::after {
    content: '';
    position: absolute;
    right: -10%;
    bottom: -32px;
    left: -10%;
    height: 120px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,77,114,.35), transparent 52%),
        linear-gradient(90deg, transparent, rgba(255,77,114,.80), transparent);
    opacity: .9;
    transform: rotate(-1deg);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: calc(100vh - 70px);
    padding: 56px 0 72px;
}

.hero-content {
    width: 100%;
    text-align: left;
}

.hero-tag {
    display: inline-block;
    margin-bottom: 28px;
    padding: 7px 16px;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,77,114,.50);
    border-radius: 999px;
    box-shadow: 0 0 28px rgba(255,77,114,.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.hero-title {
    max-width: 100%;
    margin: 0 0 32px;
    font-size: clamp(36px, 5vw, 66px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: .02em;
    text-shadow: 0 10px 38px rgba(0,0,0,.65);
}

.hero-title .accent {
    color: var(--beat-pink);
    text-shadow: 0 0 24px rgba(255,77,114,.45);
}

.hero-movie {
    position: relative;
    width: 100%;
    margin: 0 auto 34px;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    box-shadow:
        0 28px 70px rgba(0,0,0,.46),
        0 0 38px rgba(178,24,43,.13);
}

.hero-movie::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,10,12,.18), transparent 35%, transparent 65%, rgba(10,10,12,.18));
    pointer-events: none;
}

.hero-movie img,
.hero-movie video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-desc {
    max-width: 100%;
    margin: 0 0 40px;
    color: rgba(255,255,255,.88);
    font-size: 16px;
    line-height: 2;
}

.hero-btns {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 100%;
    margin: 44px auto 0;
}

.hero-stat {
    padding: 16px 15px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.hero-stat .num {
    color: #ff1d38;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.hero-stat .lbl {
    margin-top: 7px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    line-height: 1.5;
}

/* ===== SCHEDULE ===== */
#schedule {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: transparent;
}

#schedule::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 20%, rgba(240,24,50,.12), transparent 24%),
        linear-gradient(90deg, rgba(255,255,255,.02), transparent 35%);
    pointer-events: none;
}

#schedule > .container {
    position: relative;
    z-index: 1;
}

/* セクション全体の見出し */
#schedule > .container > .sec-head:first-child {
    margin-bottom: 56px;
}

#schedule .sec-head .heading {
    color: var(--white);
}

#schedule .sec-head .subtext {
    color: rgba(255,255,255,.55);
}

/* 各シフト */
.schedule-block {
    max-width: 760px;
    margin: 0 auto 88px;
}

.schedule-block:last-child {
    margin-bottom: 0;
}

.schedule-block .sec-head {
    margin-bottom: 20px;
    text-align: center;
}

.schedule-heading {
    margin-bottom: 8px;
    color: var(--white);
    font-size: clamp(24px, 3vw, 34px);
}

.schedule-time {
    margin: 0;
    color: var(--red);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
}

/* タイムライン */
.timeline {
    max-width: 700px;
    margin: 0 auto;
}

.tl-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 28px;
    align-items: start;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255,255,255,.128);
}

.tl-item:last-child {
    border-bottom: 0;
}

.tl-time {
    padding-top: 2px;
    color: var(--red);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.tl-title {
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
}

.tl-desc {
    color: rgba(255,255,255,.5);
    font-size: 13px;
    line-height: 1.75;
}

/* シフト終了行を少し強調 */
.tl-item:last-child .tl-title {
    color: var(--white);
    font-size: 16px;
    font-weight: 800;
}

/* スマホ */
@media (max-width: 640px) {
    #schedule > .container > .sec-head:first-child {
        margin-bottom: 40px;
    }

    .schedule-block {
        margin-bottom: 64px;
    }

    .schedule-block .sec-head {
        margin-bottom: 10px;
    }

    .tl-item {
        grid-template-columns: 68px 1fr;
        gap: 18px;
        padding: 22px 0;
    }

    .tl-time {
        font-size: 19px;
    }

    .tl-title {
        font-size: 14px;
    }

    .tl-desc {
        font-size: 12px;
        line-height: 1.7;
    }
}

/* ===== FEATURES ===== */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.feat-card {
    padding: 30px 26px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(178, 24, 43, .10);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .06);
}

.feat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.feat-icon img,
.feat-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feat-card h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 900;
}

.feat-card p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.9;
}
/* ===== SERVICES ===== */

.services-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 15%, rgba(255, 77, 114, .10), transparent 30%),
        radial-gradient(circle at 92% 85%, rgba(70, 190, 255, .09), transparent 30%),
        #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    overflow: hidden;
    border: 1px solid rgba(20, 20, 25, .10);
    border-radius: 22px;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 45px rgba(20, 20, 25, .08);

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

    grid-column: span 2;
}

.service-card:nth-child(5) {
    grid-column: 2 / span 2;
}

.service-card:nth-child(6) {
    grid-column: 4 / span 2;
}

.service-card:nth-child(7) {
    grid-column: 6 / span 2;
}


.service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 77, 114, .32);
    box-shadow: 0 25px 55px rgba(20, 20, 25, .14);
}

.service-card:focus-visible {
    outline: 3px solid rgba(255, 77, 114, .45);
    outline-offset: 4px;
}

.service-card-image {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #ececec;
}

.service-card-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.service-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(10, 10, 14, .28)
    );
}

.service-card:hover .service-card-image img {
    transform: scale(1.045);
}

.service-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px 25px;
}

.service-card-number {
    display: inline-block;
    margin-bottom: 10px;
    color: #ff4d72;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.service-card h3 {
    margin: 0 0 11px;
    color: #18181d;
    font-size: 1.35rem;
    line-height: 1.35;
}

.service-card p {
    margin: 0;
    color: #66666e;
    font-size: .92rem;
    line-height: 1.8;
}

.service-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 20px;
    color: #18181d;
    font-size: .82rem;
    font-weight: 700;
}

.service-more::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #ff4d72;
    transition: width .3s ease;
}

.service-card:hover .service-more::after {
    width: 40px;
}


/* ===== SERVICE MODAL ===== */

.service-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.service-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.service-modal-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: rgba(10, 10, 14, .76);
    backdrop-filter: blur(7px);
}

.service-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    width: min(940px, 100%);
    max-height: calc(100vh - 60px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
    transform: translateY(20px) scale(.98);
    transition: transform .35s ease;
}

.service-modal.is-open .service-modal-dialog {
    transform: translateY(0) scale(1);
}

.service-modal-image {
    min-height: 470px;
    background: #e8e8e8;
}

.service-modal-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.service-modal-content {
    overflow-y: auto;
    padding: 65px 55px 55px;
}

.service-modal-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #ff4d72;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.service-modal-content h3 {
    margin: 0 0 24px;
    color: #18181d;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.3;
}

.service-modal-text p {
    margin: 0;
    color: #55555e;
    font-size: .98rem;
    line-height: 2;
}

.service-modal-text p + p {
    margin-top: 12px;
}

.service-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(20, 20, 25, .08);
    transition:
        background .25s ease,
        transform .25s ease;
}

.service-modal-close:hover {
    background: rgba(255, 77, 114, .15);
    transform: rotate(4deg);
}

.service-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 2px;
    border-radius: 10px;
    background: #18181d;
}

.service-modal-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.service-modal-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.modal-open {
    overflow: hidden;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 960px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-modal-dialog {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .service-modal-image {
        min-height: auto;
        aspect-ratio: 16 / 8;
    }

    .service-modal-content {
        overflow: visible;
        padding: 42px 35px 40px;
    }
}

@media (max-width: 600px) {
    .services-section {
        padding: 75px 0;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 34px;
    }

    .service-modal {
        align-items: flex-end;
        padding: 0;
    }

    .service-modal-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
    }

    .service-modal.is-open .service-modal-dialog {
        transform: translateY(0);
    }

    .service-modal-image {
        aspect-ratio: 16 / 9;
    }

    .service-modal-content {
        padding: 35px 24px 38px;
    }

    .service-modal-close {
        top: 14px;
        right: 14px;
        background: rgba(255, 255, 255, .9);
    }
}
/* ===== TARGET ===== */
.tg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 52px;
}

.tg-card {
    padding: 32px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(178,24,43,.10);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0,0,0,.055);
}

.tg-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
}

.tg-card h3::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 4px;
    height: 18px;
    background: var(--red);
    border-radius: 2px;
}

.tg-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 0;
    color: var(--gray-600);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.6;
}

.tg-list li:last-child {
    border-bottom: 0;
}

.tg-list li::before {
    content: '✓';
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--red);
    font-weight: 700;
}

/* ===== TRUST ===== */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.trust-card {
    position: relative;
    padding: 30px 26px;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(178,24,43,.11);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(0,0,0,.06);
}

.trust-card::after {
    content: '';
    position: absolute;
    top: -36px;
    right: -36px;
    width: 100px;
    height: 100px;
    background: rgba(178,24,43,.055);
    border-radius: 50%;
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    color: #fff;
    background: linear-gradient(135deg, #111, #4d0610 65%, #a51627);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(178,24,43,.16);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
}

.trust-card h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.55;
}

.trust-card p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.9;
}

/* ===== FAQ ===== */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(178,24,43,.10);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0,0,0,.055);
}

.faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    color: var(--black);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.faq-q:hover {
    background: var(--gray-50);
}

.faq-q-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #fff;
    background: var(--red);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.faq-arrow {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--gray-400);
    transition: transform .3s ease;
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    padding: 0 24px 22px 68px;
}

.faq-item.open .faq-a {
    display: block;
}

.faq-a p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.9;
}

.faq-a p span {
    margin-right: 6px;
    color: var(--red);
    font-weight: 700;
}

/* ===== ACCESS ===== */
.ac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 52px;
}

.ac-map {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
}

.ac-map p {
    color: var(--gray-400);
    font-size: 13px;
    line-height: 1.8;
}

.ac-map small {
    font-size: 11px;
}

.map-frame {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
}

.map-frame iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 0;
}

.ac-info h3 {
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: 900;
}

.ac-table {
    width: 100%;
    border-collapse: collapse;
}

.ac-table tr {
    border-bottom: 1px solid var(--border);
}

.ac-table th {
    width: 90px;
    padding: 14px 0;
    color: var(--gray-600);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.ac-table td {
    padding: 14px 0;
    font-size: 14px;
    line-height: 1.75;
}

/* ===== FACILITY ===== */
#facility {
    padding: 76px 0;
}

.facility-gallery {
    margin-top: 38px;
}

.facility-main {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(0,0,0,.10);
    background: #15151a;
}

.facility-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .18s ease;
}

.facility-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72));
    pointer-events: none;
}

.facility-main span {
    position: absolute;
    bottom: 14px;
    left: 16px;
    z-index: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.facility-thumbnail-navigation {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.facility-thumbnails {
    display: flex;
    gap: 12px;
    padding: 2px 2px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.facility-scroll-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0 0 3px;
    color: #fff;
    background: rgba(21, 21, 26, .92);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.facility-scroll-button:hover:not(:disabled),
.facility-scroll-button:focus-visible {
    background: var(--red);
    border-color: var(--red);
    transform: scale(1.06);
}

.facility-scroll-button:focus-visible {
    outline: 3px solid rgba(226, 25, 44, .28);
    outline-offset: 3px;
}

.facility-scroll-button:disabled {
    opacity: .28;
    cursor: default;
}

.facility-thumbnail {
    position: relative;
    flex: 0 0 178px;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #15151a;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    scroll-snap-align: start;
    opacity: .72;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.facility-thumbnail:hover,
.facility-thumbnail:focus-visible,
.facility-thumbnail.is-active {
    opacity: 1;
    border-color: var(--red);
}

.facility-thumbnail:hover {
    transform: translateY(-2px);
}

.facility-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.74));
    pointer-events: none;
}

.facility-thumbnail span {
    position: absolute;
    right: 8px;
    bottom: 7px;
    left: 8px;
    z-index: 1;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== FLOW ===== */
#flow {
    padding: 88px 0 96px;
}

#flow > .container > .sec-head {
    width: 100%;
    max-width: 1052px;
    margin-inline: auto;
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.flow-card {
    position: relative;
    min-height: 280px;
    padding: 28px 26px 26px;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(178,24,43,.12);
    border-radius: 20px;
    box-shadow: 0 16px 42px rgba(0,0,0,.07);
}

.flow-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red-dark), var(--beat-pink));
}

.flow-card::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -52px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(178,24,43,.08), rgba(178,24,43,0) 68%);
    border-radius: 50%;
    pointer-events: none;
}

.flow-card-head {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.flow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    color: #fff;
    background: linear-gradient(135deg, #111, #4d0610 65%, #a51627);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(178,24,43,.18);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
}

.flow-step {
    color: rgba(178,24,43,.68);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.flow-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    color: var(--black);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.45;
}

.flow-card h3 span {
    margin-left: 5px;
    font-size: 13px;
    font-weight: 700;
}

.flow-card > p {
    position: relative;
    z-index: 1;
    color: var(--gray-600);
    font-size: 16px;
    line-height: 1.9;
}

.flow-card .flow-note {
    margin-top: 14px;
    padding: 10px 12px;
    color: #5b4246;
    background: rgba(178,24,43,.055);
    border-left: 3px solid rgba(178,24,43,.45);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.7;
}

.flow-card-final {
    color: #fff;
    background:
        radial-gradient(circle at 92% 12%, rgba(255,77,114,.22), transparent 34%),
        linear-gradient(135deg, #111 0%, #31070d 62%, #74111e 100%);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 18px 44px rgba(77,6,16,.22);
}

.flow-card-final::before {
    background: linear-gradient(90deg, var(--beat-pink), #fff);
}

.flow-card-final::after {
    background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 68%);
}

.flow-card-final .flow-number {
    color: var(--red-dark);
    background: #fff;
}

.flow-card-final .flow-step,
.flow-card-final h3,
.flow-card-final > p {
    color: #fff;
}

.flow-card-final > p {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.75;
}

/* ===== BLOG ===== */
#blog {
    padding: 84px 0 92px;
}

.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-card {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, .08);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .09);
    transition: transform .25s ease, box-shadow .25s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .14);
}

.blog-card-link {
    display: block;
    height: 100%;
    color: #171717;
}

.blog-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 77, 114, .22), transparent 34%),
        radial-gradient(circle at 80% 76%, rgba(70, 190, 255, .18), transparent 36%),
        #f3f0ed;
}

.blog-card-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.blog-card:hover .blog-card-image > img {
    transform: scale(1.035);
}

.blog-card-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.blog-card-placeholder img {
    width: 78px;
    height: 78px;
    opacity: .62;
}

.blog-card-body {
    position: relative;
    min-height: 155px;
    padding: 20px 20px 50px;
}

.blog-card-date {
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.blog-card-title {
    display: -webkit-box;
    overflow: hidden;
    color: #171717;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog-card-category {
    position: absolute;
    bottom: 18px;
    left: 20px;
    display: inline-flex;
    padding: 4px 10px;
    color: #b2182b;
    background: #fff0f2;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.blog-more {
    margin-top: 42px;
    text-align: center;
}

.blog-empty {
    padding: 38px 24px;
    color: #555;
    text-align: center;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(20, 20, 20, .08);
    border-radius: 16px;
}

/* ===== ORIGIN ===== */
#origin {
    position: relative;
    padding: 84px 0;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(12,12,14,.96), rgba(28,8,15,.94)),
        radial-gradient(circle at 16% 18%, rgba(255,77,114,.24), transparent 32%),
        radial-gradient(circle at 86% 24%, rgba(65,185,255,.14), transparent 34%),
        radial-gradient(circle at 62% 100%, rgba(180,90,255,.12), transparent 32%);
}

#origin::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 54px 54px;
    opacity: .24;
    pointer-events: none;
}

#origin > .container {
    position: relative;
    z-index: 1;
}

.origin-card {
    display: grid;
    grid-template-columns: minmax(190px, .36fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    padding: clamp(30px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(42,30,36,.96), rgba(22,20,24,.94));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.origin-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 260px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    padding: 10px;
    overflow: hidden;
    border-radius: 14px;
}

.origin-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    max-width: 100%;
    max-height: 100%;
}

.origin-body {
    min-width: 0;
    background: transparent;
    text-align: left;
}

.origin-body .heading {
    margin-bottom: 24px;
    color: var(--white);
}

.origin-body p {
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 2.1;
}

.origin-body p + p {
    margin-top: 14px;
}

.origin-body p:first-of-type {
    color: var(--white);
    font-size: clamp(18px, 2.3vw, 24px);
    font-weight: 900;
    line-height: 1.7;
}

/* ===== CTA ===== */
#cta {
    margin: 0;
    color: var(--white);
    background:
        radial-gradient(circle at 94% 12%, rgba(110,70,255,.34), transparent 28%),
        linear-gradient(135deg, #d61757, #b2182b 48%, #5a0b16);
    text-align: center;
}

#cta .label {
    color: rgba(255,255,255,.6);
}

#cta .heading {
    color: var(--white);
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.22;
}

#cta .container {
    min-width: 0;
}

.cta-desc {
    width: 100%;
    max-width: 560px;
    margin: 20px auto 0;
    color: rgba(255,255,255,.85);
    font-size: 16px;
    line-height: 2;
    text-align: left;
}

.cta-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 880px;
    margin: 52px auto 0;
}

.cta-method {
    padding: 32px 20px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0,0,0,.055);
    transition: background .2s ease;
}

.cta-method:hover {
    background: rgba(255,255,255,.2);
}

.cta-method-ico {
    margin-bottom: 12px;
    font-size: 30px;
}

.cta-method-lbl {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: .8;
}

.cta-method-val {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 900;
}

.cta-method-btn {
    display: block;
    padding: 10px;
    color: var(--red);
    background: var(--white);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    transition: opacity .2s ease;
}

.cta-method-btn:hover {
    opacity: .85;
}

.cta-method-btn.is-disabled {
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.12);
    cursor: default;
}

.cta-instagram-ico {
    display: inline-grid;
    width: 34px;
    height: 34px;
    margin-inline: auto;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045);
    border-radius: 10px;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.tg-note {
    display: block;
    margin-top: 5px;
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
}

.cta-method-btn.green {
    color: #fff;
    background: #06C755;
}

.cta-note {
    margin-top: 36px;
    color: rgba(255,255,255,.6);
    font-size: 12px;
}

/* ===== FOOTER ===== */
footer {
    position: relative;
    padding: 64px 0 28px;
    overflow: hidden;
    color: rgba(255,255,255,.65);
    background:
        radial-gradient(circle at 0% 100%, rgba(110,70,255,.28), transparent 28%),
        linear-gradient(180deg, rgba(10,10,14,.96), rgba(6,6,9,.98));
    border-top: 1px solid rgba(255,77,114,.22);
}

footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(240,24,50,.10), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.015), transparent 28%);
    pointer-events: none;
}

footer .container {
    position: relative;
    z-index: 1;
}

.ft-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ft-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ft-logo-mark {
    width: auto;
    height: 42px;
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,.92))
        drop-shadow(-1px 0 0 rgba(255,255,255,.92))
        drop-shadow(0 1px 0 rgba(255,255,255,.92))
        drop-shadow(0 -1px 0 rgba(255,255,255,.92))
        drop-shadow(2px 0 0 rgba(255,255,255,.72))
        drop-shadow(-2px 0 0 rgba(255,255,255,.72))
        drop-shadow(0 2px 0 rgba(255,255,255,.72))
        drop-shadow(0 -2px 0 rgba(255,255,255,.72));
}

.ft-logo-word {
    width: auto;
    height: 20px;
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,.92))
        drop-shadow(-1px 0 0 rgba(255,255,255,.92))
        drop-shadow(0 1px 0 rgba(255,255,255,.92))
        drop-shadow(0 -1px 0 rgba(255,255,255,.92));
}

.ft-logo span {
    color: var(--white);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .1em;
}

.ft-tagline {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.9;
}

.ft-type {
    color: rgba(255,255,255,.35);
    font-size: 11px;
}

.ft-nav h4,
.ft-contact h4 {
    margin-bottom: 18px;
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ft-nav ul li {
    margin-bottom: 12px;
}

.ft-nav ul li a {
    color: rgba(255,255,255,.5);
    font-size: 13px;
    transition: color .2s ease;
}

.ft-nav ul li a:hover {
    color: var(--white);
}

.ft-tel {
    margin-bottom: 4px;
    color: var(--white);
    font-size: 24px;
    font-weight: 900;
}

.ft-hours {
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.7;
}

.instagram-link--footer,
.instagram-placeholder--footer {
    display: grid;
    margin-top: 16px;
}

.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    font-size: 12px;
}

/* ===== SCROLL FADE ===== */
.fade {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
}

.fade.in {
    opacity: 1;
    transform: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    body::before {
        background-position: center center;
    }

    .hd-nav {
        display: none;
    }

    .hd-actions {
        margin-left: auto;
    }

    .hd-actions .btn-hd-contact {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .hd-logo {
        transform: translateY(2px);
    }

    .hero-inner {
        min-height: auto;
        padding: 52px 0 66px;
    }

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

    .tg-grid,
    .ac-grid {
        grid-template-columns: 1fr;
    }

    .feat-grid,
    .trust-grid,
    .cta-methods {
        grid-template-columns: 1fr;
    }

    .ft-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ft-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 820px) {
    #origin {
        padding: 64px 0;
    }

    .origin-card {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .origin-mark {
        width: min(100%, 220px);
        aspect-ratio: 1 / 1;
    }

    .origin-mark img {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 767px) {
    .hero-inner {
        padding: 44px 0 58px;
    }

    .hero-tag {
        margin-bottom: 20px;
    }

    .hero-title {
        margin-bottom: 24px;
        font-size: clamp(30px, 10vw, 44px);
    }

    .hero-movie {
        margin-bottom: 26px;
        aspect-ratio: 16 / 8;
        border-radius: 16px;
    }

    .hero-desc {
        font-size: 14px;
        line-height: 1.9;
    }
}

@media (max-width: 640px) {
    .loading-logo {
        gap: 10px;
    }

    .loading-logo-mark-wrap {
        width: 64px;
    }

    .loading-logo-word {
        height: 20px;
    }
}

@media (max-width: 620px) {
    body::before {
        background:
            linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
            url('../img/beat_bg_aurora.webp'),
            url('../img/beat_bg.webp');
        background-position: center center;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .origin-card {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .origin-body p {
        font-size: 14px;
        line-height: 2;
    }
}

@media (max-width: 540px) {
    section {
        padding: 72px 0;
    }

    .container {
        padding: 0 18px;
    }

    .hero-btns .btn {
        width: 100%;
    }

    .tl-item {
        grid-template-columns: 74px 1fr;
        gap: 18px;
    }

    .tl-time {
        font-size: 20px;
    }

    .faq-q {
        padding: 18px;
    }

    .faq-a {
        padding: 0 18px 20px 60px;
    }

    .ac-map,
    .map-frame {
        width: 100%;
    }
}
/* ========================================================================== */
/* RESPONSIVE FINAL OVERRIDES                                                  */
/* 既存セクションの見た目を維持しつつ、タブレット・スマホ表示を最終調整       */
/* ========================================================================== */

/* 可変幅コンテンツ・埋め込み要素のはみ出し防止 */
iframe,
video,
svg {
    max-width: 100%;
}

.ac-map > div,
.ac-map iframe {
    width: 100%;
    height: 100%;
}

.ac-map > div {
    display: flex;
    flex-direction: column;
}

.ac-map > div > svg {
    display: none;
}

/* 固定ヘッダーへのアンカー移動位置を調整 */
section {
    scroll-margin-top: 70px;
}

/* タブレット横～小型PC */
@media (max-width: 1100px) {
    .container {
        max-width: 100%;
        padding-inline: clamp(22px, 4vw, 40px);
    }

    .hd-nav {
        gap: 18px;
    }

    .hd-nav a {
        font-size: 12px;
    }

    .btn-hd-contact {
        padding-inline: 14px;
    }

    .hero-title {
        font-size: clamp(38px, 5.6vw, 58px);
    }

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

    .service-card,
    .service-card:nth-child(5),
    .service-card:nth-child(6),
    .service-card:nth-child(7) {
        grid-column: auto;
    }

}

/* タブレット縦 */
@media (max-width: 900px) {
    section {
        padding-block: 84px;
    }

    .sec-head {
        margin-bottom: 44px;
    }

    .mobile-nav {
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: 4px;
        padding: 16px clamp(22px, 5vw, 40px) 24px;
    }

    .mobile-nav a {
        padding: 13px 0;
    }

    .hamburger {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .hero-inner {
        min-height: auto;
    }

    .hero-desc br,
    .origin-body br,
    .cta-desc br {
        display: none;
    }

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

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

    .feat-card:last-child,
    .trust-card:last-child {
        grid-column: 1 / -1;
    }

    .ac-grid {
        gap: 36px;
    }

    .ac-map {
        aspect-ratio: 16 / 9;
    }

    .ft-inner {
        grid-template-columns: 1.3fr 1fr;
    }

    .ft-contact {
        grid-column: 1 / -1;
    }
}

/* スマホ共通 */
@media (max-width: 767px) {
    html {
        font-size: 15px;
        scrollbar-gutter: auto;
    }

    #header,
    #header.scrolled {
        height: 56px;
    }

    .hd-logo {
        gap: 8px;
        transform: translateY(4px);
    }

    .hd-logo > img {
        height: 40px;
    }

    .hd-logo-text .n {
        width: 76px;
        transform: translateY(4px);
    }

    .hd-logo-text .t {
        margin-top: 5px;
        font-size: 9px;
    }

    .mobile-nav {
        top: 64px;
        max-height: calc(100dvh - 64px);
        
    }

    section {
        padding-block: 72px;
        scroll-margin-top: 64px;
    }

    .container {
        padding-inline: 20px;
    }

    .heading {
        font-size: clamp(25px, 7.4vw, 34px);
        line-height: 1.35;
    }

    #cta .heading {
        font-size: clamp(22px, 6.2vw, 30px);
        line-height: 1.2;
    }

    .subtext {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.85;
    }

    .sec-head {
        margin-bottom: 36px;
    }

    #hero {
        margin-top: 64px;
        padding-top: 0;
    }

    .hero-inner {
        padding: 42px 0 56px;
    }

    .hero-tag {
        max-width: 100%;
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: .08em;
        white-space: normal;
    }

    .hero-title {
        font-size: clamp(31px, 9.8vw, 44px);
        line-height: 1.22;
    }

    .hero-movie {
        aspect-ratio: 16 / 8.5;
        border-radius: 16px;
    }

    .hero-desc {
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.9;
    }

    .hero-btns {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-btns .btn {
        width: 100%;
        min-height: 50px;
    }

    .hero-stats {
        margin-top: 32px;
    }

    .hero-stat {
        padding: 15px 12px;
    }

    .hero-stat .num {
        font-size: 22px;
    }

    .origin-card {
        gap: 22px;
    }

    .origin-mark {
        width: min(100%, 200px);
        aspect-ratio: 1 / 1;
        height: auto;
        max-height: none;
    }

    .origin-mark img {
        width: 100%;
        height: 100%;
    }

    .origin-body .heading {
        margin-bottom: 18px;
    }

    .feat-grid,
    .trust-grid,
    .services-grid,
    .tg-grid,
    .cta-methods {
        grid-template-columns: 1fr;
    }

    .feat-card:last-child,
    .trust-card:last-child,
    .ft-contact {
        grid-column: auto;
    }

    .feat-card,
    .trust-card,
    .tg-card {
        padding: 24px 21px;
    }

    .service-card-body {
        padding: 22px 20px 23px;
    }

    .service-card-image {
        aspect-ratio: 16 / 9;
    }

    .schedule-block {
        margin-bottom: 58px;
    }

    .tl-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 15px;
        padding: 20px 0;
    }

    .tl-time {
        font-size: 18px;
    }

    .faq-q {
        align-items: flex-start;
        gap: 12px;
        padding: 18px 16px;
        font-size: 14px;
        line-height: 1.65;
    }

    .faq-q-badge {
        margin-top: 1px;
    }

    .faq-arrow {
        margin-top: 5px;
    }

    .faq-a {
        padding: 0 16px 19px 56px;
    }

    .faq-a p {
        font-size: 13px;
    }

    .ac-grid {
        margin-top: 36px;
    }

    .ac-map {
        aspect-ratio: 4 / 3;
    }

    .ac-info h3 {
        margin-bottom: 14px;
    }

    .ac-table,
    .ac-table tbody,
    .ac-table tr,
    .ac-table th,
    .ac-table td {
        display: block;
        width: 100%;
    }

    .ac-table tr {
        padding: 13px 0;
    }

    .ac-table th,
    .ac-table td {
        padding: 0;
    }

    .ac-table th {
        margin-bottom: 4px;
        color: var(--red);
    }

    .ac-table td {
        overflow-wrap: anywhere;
    }

    .facility-main {
        aspect-ratio: 16 / 10;
    }

    .facility-thumbnail-navigation {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 7px;
    }

    .facility-scroll-button {
        width: 38px;
        height: 38px;
        font-size: 25px;
    }

    .facility-thumbnail {
        flex-basis: 148px;
    }

    .cta-desc {
        font-size: 14px;
    }

    .cta-methods {
        gap: 14px;
        margin-top: 36px;
    }

    .cta-method {
        padding: 25px 18px;
    }

    .cta-method-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer {
        padding-top: 52px;
    }

    .ft-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 36px;
    }

    .ft-bottom {
        align-items: flex-start;
        text-align: left;
    }
}

/* 小型スマホ */
@media (max-width: 480px) {
    .container {
        padding-inline: 16px;
    }

    .hd-logo > img {
        height: 36px;
    }

    .hd-logo-text .n {
        width: 68px;
    }

    .hd-logo-text .t {
        font-size: 8px;
    }

    .hero-inner {
        padding-top: 34px;
    }

    .hero-title {
        font-size: clamp(29px, 10.3vw, 40px);
    }

    .hero-movie {
        aspect-ratio: 16 / 9;
        margin-bottom: 22px;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .origin-card {
        padding: 24px 18px;
    }

    .origin-mark {
        width: min(100%, 180px);
        aspect-ratio: 1 / 1;
    }

    .tl-item {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
    }

    .tl-time {
        font-size: 17px;
    }

    .faq-a {
        padding-left: 16px;
    }

    .cta-method-val,
    .ft-tel {
        font-size: 20px;
        overflow-wrap: anywhere;
    }
}

/* ホバー操作がない端末では浮き上がりを無効化 */
@media (hover: none) {
    .btn:hover,
    .service-card:hover,
    .cta-method:hover {
        transform: none;
    }

    .service-card:hover .service-card-image img {
        transform: none;
    }
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .fade {
        opacity: 1 !important;
        transform: none !important;
    }

    .loading-dots span {
        animation: none !important;
    }

    /* 初回ローディングは指定どおり3秒回転後に0.5秒で切り替える */
    #loading-screen {
        transition: opacity .5s ease !important;
    }

    .service-card,
    .cta-method,
    .btn {
        transition: none !important;
    }
}

/* ============================================================
   CATCH COPY AUTO FIT
   指定した改行以外では折り返さず、狭い画面ではJSで文字を自動縮小する
============================================================ */
.hero-title,
.sec-head > .heading:not(.schedule-heading),
.origin-body > .heading,
#cta .heading {
    max-width: 100%;
    white-space: nowrap;
}

/* 自動縮小前の一瞬のはみ出しを隠す */
.hero-content,
.sec-head {
    min-width: 0;
}

/* ============================================================
   SECTION HEADING CONTENT ALIGNMENT
   見出しの開始位置を各セクションの実コンテンツ幅に揃える
============================================================ */
#schedule > .container > .sec-head:first-child {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

#faq > .container > .sec-head {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

#cta > .container > .label,
#cta > .container > .heading {
    display: block;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    text-align: left;
}

/* ===== MAINTENANCE CLASSES ===== */
.hamburger {
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.mobile-nav-cta {
    color: var(--red) !important;
    font-weight: 700 !important;
}

.schedule-section-heading {
    color: var(--white);
}

.ac-map-icon {
    display: block;
    margin: 0 auto 12px;
}

.ft-contact-btn {
    padding: 10px 20px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .blog-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 640px) {
    #flow {
        padding: 68px 0 72px;
    }

    #flow > .container > .sec-head {
        margin-bottom: 36px;
    }

    .flow-grid {
        position: relative;
        grid-template-columns: 1fr;
        gap: 16px;
        padding-left: 10px;
    }

    .flow-grid::before {
        content: '';
        position: absolute;
        top: 28px;
        bottom: 28px;
        left: 47px;
        width: 2px;
        background: linear-gradient(180deg, var(--red), rgba(178,24,43,.18));
    }

    .flow-card {
        min-height: 0;
        padding: 22px 20px 22px 78px;
    }

    .flow-card-head {
        position: absolute;
        top: 20px;
        left: 14px;
        margin: 0;
    }

    .flow-number {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 14px;
    }

    .flow-step {
        display: none;
    }

    .flow-card h3 {
        margin-bottom: 8px;
        font-size: 19px;
    }

    .flow-card h3 span {
        display: block;
        margin: 2px 0 0;
        font-size: 12px;
    }

    .flow-card > p {
        font-size: 15px;
        line-height: 1.8;
    }

    .flow-card .flow-note {
        font-size: 13px;
    }

    .flow-card-final > p {
        font-size: 17px;
    }

    #blog {
        padding: 68px 0 72px;
    }

    .blog-card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .blog-card-body {
        min-height: 142px;
        padding: 18px 18px 48px;
    }

    .blog-card-category {
        bottom: 16px;
        left: 18px;
    }
}
/* =========================================================
   MAIN PAGE FONT SIZE ADJUSTMENT
   本文を読みやすいサイズに統一
========================================================= */

/* セクション導入文 */
.subtext {
    font-size: 17px;
    line-height: 2;
}

/* ヒーロー説明文 */
.hero-desc {
    font-size: 17px;
    line-height: 2;
}

/* 各カードの見出し */
.feat-card h3,
.trust-card h3,
.tg-card h3 {
    font-size: 18px;
}

/* 各カード・リストの本文 */
.feat-card p,
.trust-card p,
.service-card p,
.tg-list li,
.faq-a p {
    font-size: 16px;
    line-height: 1.9;
}

/* サービスカード */
.service-card h3 {
    font-size: 22px;
}

.service-more {
    font-size: 14px;
}

/* スケジュール */
.tl-title {
    font-size: 17px;
}

.tl-desc {
    font-size: 15px;
    line-height: 1.9;
}

/* FAQの質問 */
.faq-q {
    font-size: 16px;
    line-height: 1.7;
}

/* BEATの由来 */
.origin-body p {
    font-size: 16px;
    line-height: 2.1;
}

/* アクセス情報 */
.ac-table td {
    font-size: 16px;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .subtext,
    .hero-desc {
        font-size: 16px;
    }

    .feat-card p,
    .trust-card p,
    .service-card p,
    .tg-list li,
    .faq-a p,
    .origin-body p,
    .ac-table td {
        font-size: 15px;
    }

    .feat-card h3,
    .trust-card h3,
    .tg-card h3 {
        font-size: 17px;
    }

    .tl-title,
    .faq-q {
        font-size: 16px;
    }

    .tl-desc {
        font-size: 14px;
    }
}