@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 34%;

    display: block;

    width: 82px;
    height: 82px;
    z-index: 5;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 30px;
    line-height: 1;

    opacity: .75;
    color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -60px;
}
[dir='rtl'] .slick-prev
{
    right: -50px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -60px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -50px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -36px;

    display: block;

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

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* COS×COS logo layout and mascot animation */
.logo.coscso-logo {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 60px auto 0;
}

.coscso-main {
    height: auto;
    min-height: 460px;
    padding-top: 40px;
}

.coscso-logo__main {
    display: block;
    width: 100%;
    height: auto;
}

.coscso-logo__side {
    --coscso-logo-offset-x: 0;
    position: absolute;
    bottom: -52px;
    max-width: 180px;
    width: 180px;
    height: auto;
    opacity: 0;
    transform: translate3d(var(--coscso-logo-offset-x), 40px, 0);
    animation: coscsoMascotIn 0.9s ease-out 0.3s forwards;
}

.coscso-logo__side--left {
    left: 0;
    --coscso-logo-offset-x: -160px;
}

.coscso-logo__side--right {
    right: 0;
    --coscso-logo-offset-x: 160px;
}

@keyframes coscsoMascotIn {
    0% {
        opacity: 0;
        transform: translate3d(var(--coscso-logo-offset-x), 40px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(var(--coscso-logo-offset-x), 0, 0);
    }
}

@keyframes coscsoLuxGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes coscsoStarPulse {
    0%, 100% {
        transform: translateY(-50%) rotate(18deg) scale(0.82);
        opacity: 0.55;
        filter: drop-shadow(0 0 16px rgba(255, 200, 240, 0.55));
    }
    45% {
        transform: translateY(-50%) rotate(18deg) scale(1.08);
        opacity: 1;
        filter: drop-shadow(0 0 26px rgba(255, 220, 250, 0.9));
    }
    70% {
        transform: translateY(-50%) rotate(18deg) scale(0.95);
        opacity: 0.78;
        filter: drop-shadow(0 0 20px rgba(255, 210, 244, 0.75));
    }
}

@keyframes coscsoTitleGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes coscsoHaloGlow {
    0%, 100% {
        transform: scale(0.94);
        opacity: 0.65;
    }
    45% {
        transform: scale(1.06);
        opacity: 1;
    }
    70% {
        transform: scale(1.02);
        opacity: 0.78;
    }
}

@keyframes coscsoGlowWave {
    0% {
        transform: scale(0.94) rotate(-1deg);
        opacity: 0.78;
    }
    42% {
        transform: scale(1.04) rotate(1deg);
        opacity: 0.96;
    }
    100% {
        transform: scale(0.97) rotate(0deg);
        opacity: 0.82;
    }
}

@keyframes coscsoSparkleSweep {
    0% {
        background-position: -40% -20%, 135% 120%, 0 0, 0 100%;
    }
    45% {
        background-position: 18% 22%, 70% 42%, 0 0, 0 100%;
    }
    100% {
        background-position: 120% 118%, -25% -18%, 0 0, 0 100%;
    }
}

@media (max-width: 1024px) {
    .logo.coscso-logo {
        max-width: 380px;
    }

    .coscso-logo__side {
        bottom: -46px;
        max-width: 160px;
        width: 160px;
    }

    .coscso-logo__side--left {
        --coscso-logo-offset-x: -140px;
    }

    .coscso-logo__side--right {
        --coscso-logo-offset-x: 140px;
    }

}

@media (max-width: 768px) {
    .logo.coscso-logo {
        margin: 110px auto 0;
        max-width: 340px;
    }

    .coscso-logo__side {
        bottom: -40px;
        max-width: 140px;
        width: 140px;
    }

    .coscso-logo__side--left {
        --coscso-logo-offset-x: -120px;
    }

    .coscso-logo__side--right {
        --coscso-logo-offset-x: 120px;
    }

    .coscso-gallery {
        width: min(640px, 92%);
        padding: 32px 0 8px;
    }

    .coscso-gallery__grid {
        gap: 16px;
    }

    .coscso-gallery__overlay {
        width: clamp(110px, 18vw, 170px);
    }

}

@media (max-width: 820px) {
    .logo.coscso-logo {
        margin: clamp(56px, 15vw, 80px) auto 0;
        max-width: clamp(240px, 72vw, 280px);
    }

    .coscso-logo__side {
        bottom: -28px;
        max-width: none;
        width: clamp(88px, 26vw, 112px);
    }

    .coscso-logo__side--left {
        --coscso-logo-offset-x: calc(-1 * clamp(36px, 15vw, 52px));
    }

    .coscso-logo__side--right {
        --coscso-logo-offset-x: clamp(36px, 15vw, 52px);
    }
}

@media (max-width: 400px) {
    .logo.coscso-logo {
        max-width: clamp(210px, 70vw, 240px);
    }

    .coscso-logo__side {
        bottom: -22px;
        width: clamp(76px, 24vw, 96px);
    }

    .coscso-logo__side--left {
        --coscso-logo-offset-x: calc(-1 * clamp(26px, 12vw, 38px));
    }

    .coscso-logo__side--right {
        --coscso-logo-offset-x: clamp(26px, 12vw, 38px);
    }
}

@media (max-width: 520px) {
    .coscso-gallery__overlay {
        display: none;
    }
}

.coscso-about {
    position: relative;
    margin-top: -40px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.coscso-note {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fef2a0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    margin-top: 4px;
    margin-bottom: 18px;
}

.coscso-note--hero {
    margin-top: 28px;
    margin-bottom: 24px;
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #e6002e;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.36em;
    flex-wrap: wrap;
    justify-content: center;
}

.coscso-note__lead {
    display: inline-block;
}

.coscso-note__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    padding: 0.1em 0.32em 0.1em 0.26em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.88);
    color: #e6002e;
    text-decoration: none;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.coscso-note__cta:hover,
.coscso-note__cta:focus {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.coscso-note__icon {
    display: block;
    width: clamp(14px, 0.9em, 18px);
    max-width: 18px;
    height: auto;
    flex: 0 0 auto;
}

.coscso-note__handle {
    white-space: nowrap;
}

/* removed body-wide tint overlay (kept video-only overlay) */

.coscso-about-disclaimer {
    margin-top: 4px;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: #ffe8e8;
}

.coscso-address-phone {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #200f0f;
    letter-spacing: 0.08em;
}

#about .coscso-preopen-date {
    margin: 8px 0 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em 0.6em;
    font-size: clamp(58px, 4.8vw, 72px);
    font-weight: 800;
    letter-spacing: 0.28em;
    font-family: 'Oswald', sans-serif;
    color: #FFD54A; /* vivid yellow */
    -webkit-text-fill-color: #FFD54A;
    text-align: center;
    line-height: 1.12;
    text-shadow: none;
    filter: none;
    /* Blur the moving video behind the text without covering glyphs */
    background: rgba(0, 0, 0, 0.01);
    -webkit-backdrop-filter: blur(8px) saturate(112%);
    backdrop-filter: blur(8px) saturate(112%);
    border-radius: 84px;
    --coscso-date-star-size: clamp(34px, 3.4vw, 48px);
    --coscso-date-star-offset: calc(var(--coscso-date-star-size) * 0.9 + 0.45em);
    overflow: visible;
    isolation: isolate;
    z-index: 2;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #about .coscso-preopen-date {
        /* Do not use gradient fill for the date text */
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: #FFD54A;
        -webkit-text-fill-color: #FFD54A;
        animation: none;
    }
}

#about .coscso-preopen-date::before,
#about .coscso-preopen-date::after {
    content: '';
    position: absolute;
    top: 50%;
    width: var(--coscso-date-star-size);
    height: var(--coscso-date-star-size);
    transform: translateY(-50%) rotate(18deg);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 210, 0.82) 32%, rgba(255, 190, 224, 0.5) 58%, rgba(255, 120, 210, 0.24) 75%, rgba(255, 120, 210, 0));
    box-shadow:
        0 0 18px rgba(255, 200, 240, 0.8),
        0 0 36px rgba(255, 160, 216, 0.55);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.9;
    z-index: -1;
    animation-fill-mode: both;
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    -webkit-clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 65,35 100,50 65,65 50,100 35,65 0,50 35,35' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 65,35 100,50 65,65 50,100 35,65 0,50 35,35' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
}

#about .coscso-preopen-date::before {
    left: calc(-1 * var(--coscso-date-star-offset));
    animation: coscsoStarPulse 3.6s ease-in-out infinite;
}

#about .coscso-preopen-date::after {
    right: calc(-1 * var(--coscso-date-star-offset));
    animation: coscsoStarPulse 2.8s ease-in-out infinite 0.9s;
}

.coscso-about h2 {
    margin: 12px auto 0;
    display: inline-block;
    position: relative;
    padding: 0.18em 0.4em 0.24em;
    font-size: clamp(56px, 5vw, 78px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.08em;
    color: #E6002E; /* SOD red */
    -webkit-text-fill-color: #E6002E;
    text-align: center;
    text-shadow: none;
    filter: none;
    /* Blur only the moving background; keep glyphs crisp */
    background: rgba(0, 0, 0, 0.01);
    -webkit-backdrop-filter: blur(8px) saturate(112%);
    backdrop-filter: blur(8px) saturate(112%);
    border-radius: 92px;
    isolation: isolate;
    z-index: 2;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .coscso-about h2 {
        /* solid red instead of gradient text */
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: #E6002E;
        -webkit-text-fill-color: #E6002E;
        animation: none;
    }
}

.coscso-about h2::before {
    content: '';
    position: absolute;
    inset: -18px -16%;
    border-radius: 120px;
    background:
        radial-gradient(circle at 52% 44%, rgba(255, 232, 246, 0.82) 0%, rgba(255, 190, 228, 0.5) 34%, rgba(255, 140, 208, 0.18) 64%, rgba(255, 140, 208, 0)),
        radial-gradient(circle at 18% 56%, rgba(255, 250, 218, 0.6) 0%, rgba(255, 250, 218, 0) 58%),
        radial-gradient(circle at 82% 36%, rgba(255, 198, 244, 0.55) 0%, rgba(255, 198, 244, 0) 56%);
    filter: blur(24px);
    opacity: 0.9;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -2;
    transform-origin: 50% 50%;
    animation: coscsoGlowWave 8s ease-in-out infinite;
    animation-fill-mode: both;
}

.coscso-about h2::after {
    content: '';
    position: absolute;
    left: -16%;
    right: -16%;
    top: -20px;
    bottom: -20px;
    border-radius: 110px;
    background:
        radial-gradient(circle at 12% 42%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 86% 58%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 247, 253, 0.92), rgba(255, 255, 255, 0)) top/100% 2px no-repeat,
        linear-gradient(90deg, rgba(255, 164, 228, 0.12), rgba(255, 255, 255, 0.85), rgba(255, 164, 228, 0.12)) bottom/100% 3px no-repeat;
    background-repeat: no-repeat;
    filter: drop-shadow(0 12px 28px rgba(255, 150, 210, 0.35));
    pointer-events: none;
    opacity: 0.96;
    z-index: -1;
    mix-blend-mode: screen;
    animation: coscsoSparkleSweep 12s linear infinite;
}

.coscso-about-copy {
    margin: 0;
    font-size: 24px;
    line-height: 1.55;
    letter-spacing: 0.06em;
    text-align: center;
    color: #101010;
    text-shadow: 0 0 12px rgba(255, 120, 160, 0.35);
}


.coscso-permit-banner {
    position: static;
    transform: translateY(4px);
    margin: 6px auto 12px;
    width: min(420px, 80%);
    padding: clamp(10px, 1.4vw, 14px) clamp(16px, 2.4vw, 22px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 1.1vw, 9px);
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 98, 126, 0.98), rgba(206, 0, 38, 0.95));
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 12px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 3px rgba(255, 255, 255, 0.16),
        inset 0 -2px 6px rgba(140, 0, 22, 0.26);
    color: #fff;
    opacity: 0;
    transition: opacity 0.75s ease 0.45s, transform 0.75s ease 0.45s;
    will-change: opacity, transform;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

.coscso-permit-banner::before,
.coscso-permit-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.coscso-permit-banner::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at 78% 78%, rgba(255, 160, 170, 0.3) 0%, rgba(255, 160, 170, 0) 68%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.coscso-permit-banner::after {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 6px);
    mix-blend-mode: overlay;
    opacity: 0.18;
}

.coscso-permit-banner__main {
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.coscso-permit-banner__note {
    max-width: 100%;
    font-size: clamp(7.5px, 0.9vw, 9px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    white-space: nowrap;
}

.coscso-permit-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.coscso-about-photo-wrap {
    position: relative;
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.coscso-about-photo-frame {
    position: relative;
    width: min(640px, 88vw);
    max-width: 100%;
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.coscso-gallery {
    margin: 2% auto 7%;
    padding: 40px 0 10px;
    width: 70%;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.coscso-gallery h2 {
    margin: 0;
}

.coscso-gallery__description {
    margin: 0;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    color: #ffe4e8;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.coscso-gallery__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 28px);
    position: relative;
    padding: clamp(28px, 3vw, 36px) clamp(26px, 3vw, 32px);
}
.coscso-gallery__grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    z-index: 0;
}

.coscso-gallery__item {
    position: relative;
    overflow: visible;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.08);
}

.coscso-gallery__item[data-scroll-fade] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: var(--gallery-fade-delay, 0s);
}

.coscso-gallery__item[data-scroll-fade].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.coscso-gallery__grid > .coscso-gallery__item:nth-of-type(1) {
    --gallery-fade-delay: 0s;
}

.coscso-gallery__grid > .coscso-gallery__item:nth-of-type(2) {
    --gallery-fade-delay: 0.12s;
}

.coscso-gallery__grid > .coscso-gallery__item:nth-of-type(3) {
    --gallery-fade-delay: 0.24s;
}

.coscso-gallery__grid > .coscso-gallery__item:nth-of-type(4) {
    --gallery-fade-delay: 0.36s;
}

.coscso-gallery__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.coscso-gallery__overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    width: clamp(120px, 18vw, 200px);
    z-index: 2;
}

.coscso-gallery__overlay-image {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .coscso-about {
        margin-top: -30px;
        padding-top: 50px;
        gap: 10px;
    }

    .coscso-note--hero {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: clamp(14px, 1.4vw, 17px);
        gap: 0.24em;
    }

    .coscso-note__cta {
        font-size: clamp(11px, 1.1vw, 14px);
        padding: 0.08em 0.26em 0.08em 0.2em;
    }

    #about .coscso-preopen-date {
        font-size: 48px;
        letter-spacing: 0.24em;
        padding: 0.18em 0.42em;
        --coscso-date-star-size: 34px;
        --coscso-date-star-offset: calc(var(--coscso-date-star-size) * 0.9 + 0.36em);
    }

    .coscso-about h2 {
        font-size: 48px;
        letter-spacing: 0.08em;
        padding: 0.16em 0.28em 0.22em;
    }

    .coscso-about h2::before {
        inset: -22px -20%;
    }

    .coscso-about h2::after {
        left: -14%;
        right: -14%;
        top: -16px;
        bottom: -16px;
    }

    .coscso-about-copy {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .coscso-about {
        margin-top: -20px;
        padding-top: 40px;
        gap: 8px;
    }

    .coscso-note--hero {
        margin-top: 16px;
        margin-bottom: 18px;
        font-size: clamp(13px, 1.9vw, 16px);
        gap: 0.22em;
    }

    .coscso-note__cta {
        font-size: clamp(11px, 1.8vw, 13.5px);
        padding: 0.08em 0.24em 0.08em 0.18em;
    }

    #about .coscso-preopen-date {
        font-size: 40px;
        letter-spacing: 0.2em;
        padding: 0.16em 0.32em;
        --coscso-date-star-size: 28px;
        --coscso-date-star-offset: calc(var(--coscso-date-star-size) * 0.9 + 0.3em);
    }

    .coscso-about h2 {
        font-size: 38px;
        letter-spacing: 0.06em;
        padding: 0.14em 0.24em 0.2em;
    }

    .coscso-about h2::before {
        inset: -18px -16%;
    }

    .coscso-about h2::after {
        left: -11%;
        right: -11%;
        top: -12px;
        bottom: -12px;
    }

    .coscso-about-copy {
        font-size: 21px;
    }

    .coscso-permit-banner {
        width: min(340px, 76%);
        margin: 4px auto 16px;
        padding: 12px 16px;
        gap: 6px;
        border-radius: 20px;
    }

    .coscso-permit-banner__main {
        font-size: clamp(13px, 1.8vw, 16px);
    }

    .coscso-permit-banner__note {
        font-size: clamp(7.5px, 1.1vw, 9.5px);
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .coscso-about {
        margin-top: -10px;
        padding-top: 30px;
        gap: 6px;
    }

    .coscso-note--hero {
        margin-top: 14px;
        margin-bottom: 16px;
        font-size: clamp(12px, 3.2vw, 14px);
        gap: 0.18em;
    }

    .coscso-note__cta {
        font-size: clamp(10px, 3vw, 12px);
        padding: 0.06em 0.2em 0.06em 0.16em;
    }

    #about .coscso-preopen-date {
        font-size: 32px;
        letter-spacing: 0.16em;
        padding: 0.14em 0.22em;
        --coscso-date-star-size: 24px;
        --coscso-date-star-offset: calc(var(--coscso-date-star-size) * 0.9 + 0.26em);
    }

    .coscso-about h2 {
        font-size: 30px;
        letter-spacing: 0.05em;
        padding: 0.12em 0.18em 0.18em;
    }

    .coscso-about h2::before {
        inset: -14px -12%;
    }

    .coscso-about h2::after {
        left: -9%;
        right: -9%;
        top: -10px;
        bottom: -10px;
    }

    .coscso-about-copy {
        font-size: 19px;
    }

    .coscso-about-copy__middle::after {
        content: '\A';
        white-space: pre;
    }

    .coscso-permit-banner {
        width: 90%;
        margin: -4px auto 32px;
        padding: 11px 14px;
        gap: 6px;
        border-radius: 20px;
    }

    .coscso-permit-banner__main {
        font-size: clamp(13px, 3.2vw, 16px);
        letter-spacing: 0.12em;
    }

    .coscso-permit-banner__note {
        font-size: clamp(8px, 2.6vw, 10px);
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .coscso-gallery {
        width: 94%;
        margin: 4px auto 32px;
        padding: 24px 0 6px;
        gap: 12px;
    }

    .coscso-gallery__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .coscso-open-heading {
        width: 92%;
        gap: 10px;
    }

    .coscso-open-heading__icon {
        width: clamp(90px, 35vw, 120px);
    }
}

.coscso-about-photo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.coscso-about-mascot {
    --coscso-about-mascot-offset-x: 52px;
    position: absolute;
    right: 0;
    bottom: -60px;
    width: 26%;
    max-width: 190px;
    min-width: 120px;
    opacity: 0;
    transform: translate3d(var(--coscso-about-mascot-offset-x), 40px, 0);
    transition: opacity 0.65s ease, transform 0.65s ease;
    z-index: 3;
    pointer-events: none;
}

.coscso-about-mascot.is-visible {
    opacity: 1;
    transform: translate3d(var(--coscso-about-mascot-offset-x), 0, 0);
}

.coscso-permit-note {
    margin: 12px auto 0;
    padding: 12px 16px;
    max-width: 320px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #4a3400;
    text-align: center;
    background: rgba(255, 245, 180, 0.95);
    border: 2px solid #f7c500;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.coscso-open-heading {
    width: min(960px, 86%);
    margin: clamp(12px, 4.4vw, 64px) auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(10px, 2vw, 20px);
}

.coscso-open-heading::before {
    display: none;
}

.coscso-open-heading__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.coscso-open-heading__text h2,
.coscso-open-heading__text h3 {
    margin: 0;
}

.coscso-open-heading__text h3 {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.coscso-open-heading__icon {
    width: clamp(90px, 12vw, 140px);
    height: auto;
    display: block;
    pointer-events: none;
    /* Lower the wine image to kiss the box border */
    margin-bottom: 0;
    transform: translateY(28px);
}

.coscso-price-box {
    position: relative;
    z-index: 3; /* ensure box overlays image if overlapping */
}

.coscso-main #open .box {
    margin: -184px auto 6%;
    padding: 0 0 26px;
}

.coscso-main #open h4 {
    margin: 12px auto 14px;
}

.coscso-main #open h5 {
    margin: 8px auto 14px;
}

.coscso-main #open p {
    margin: 4px auto;
}

.coscso-main #open p.coscso-permit-note {
    margin: 12px auto 0;
}

@media (max-width: 768px) {
    .coscso-open-heading {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        margin: 12px auto 6px; /* tighter spacing for mobile */
        position: static;
    }

    .coscso-open-heading::before {
        display: none;
    }

    .coscso-open-heading__text {
        text-align: center;
        transform: none; /* reset downward offset on mobile */
    }

    .coscso-open-heading__icon {
        width: clamp(100px, 36vw, 150px);
        position: static;
        transform: none;
        margin: 4px auto 0;
    }

    .coscso-main #open .box {
        margin: -18px auto 56px; /* overlap slightly to reduce gap */
        padding: 26px 0 34px;
    }
}

.coscso-social {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coscso-social__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    width: 100%;
}

.coscso-social-section {
    position: relative;
    overflow: visible;
}

.coscso-social__bunny {
    position: absolute;
    right: clamp(48px, 7vw, 160px);
    bottom: clamp(-98px, -6.6vw, -122px);
    width: clamp(120px, 13vw, 180px);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.coscso-social__bunny img {
    display: block;
    width: 100%;
    height: auto;
}

.coscso-social__bunny.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}

.coscso-social__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.coscso-social__icon {
    width: 54px;
    height: auto;
}

.coscso-social__handle {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #101010;
}

@media (max-width: 1024px) {
    .coscso-social__bunny {
        right: clamp(4px, 3.6vw, 80px);
        bottom: clamp(-90px, -7.2vw, -114px);
        width: clamp(120px, 20vw, 182px);
        transform: translateY(32px);
        transition: opacity 0.65s ease, transform 0.65s ease;
    }

    .coscso-social__bunny.is-visible {
        transform: translateY(0);
        transition-delay: 0.18s;
    }
}

@media (max-width: 820px) {
    .coscso-social-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(12px, 4vw, 20px);
    }

    .coscso-social {
        width: clamp(300px, 96vw, 460px);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(18px, 6vw, 28px);
        padding: clamp(24px, 6vw, 32px) clamp(20px, 6vw, 32px);
        box-sizing: border-box;
    }

    .coscso-social__list {
        flex-direction: column;
        align-items: center;
        gap: clamp(16px, 5vw, 24px);
        width: auto;
        flex: 1 1 auto;
    }

    .coscso-social__icon {
        width: clamp(44px, 14vw, 58px);
    }

    .coscso-social__handle {
        font-size: clamp(14px, 3.8vw, 16px);
    }

    .coscso-social__bunny {
        position: static;
        width: clamp(100px, 28vw, 150px);
        margin: 0;
        transform: none;
        opacity: 1;
        transition: none;
        flex: 0 0 auto;
    }

    .coscso-social__bunny.is-visible {
        transform: none;
        transition-delay: 0s;
    }
}

@media (max-width: 640px) {
    .coscso-social__bunny {
        margin: 0 0 0 clamp(8px, 4vw, 24px);
    }
}

@media (max-width: 768px) {
    .coscso-about-mascot {
        --coscso-about-mascot-offset-x: 12px;
        bottom: -26px;
        max-width: 150px;
        min-width: 108px;
    }

}

@media (max-width: 520px) {
    .coscso-about-mascot {
        --coscso-about-mascot-offset-x: 6px;
        bottom: -16px;
        max-width: 128px;
        min-width: 92px;
        width: 30%;
    }

}

.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #fff;
}

/*---TOPスライダー02追記 2207---*/
.l_slide .slick-prev:before
{
    font-size: 30px;
    color: #E6002E;
}
.l_slide .slick-next:before
{
    font-size: 30px;
    color: #E6002E;
}
.l_slide .slick-prev
{
    top: 50%;
}
.l_slide .slick-next
{
    top: 50%;
}

/* SP */
@media  screen and ( max-width:896px ){
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 18%;

    display: block;

    width: 84px;
    height: 84px;
    z-index: 5;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:before
{
    font-size: 25px;
    color: #fff;
}
.slick-next:before
{
    font-size: 25px;
    color: #fff;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 14px;
    height: 14px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
/*---TOPスライダー02追記 2207---*/
.l_slide .slick-prev:before
{
    font-size: 25px;
    color: #E6002E;
}
.l_slide .slick-next:before
{
    font-size: 25px;
    color: #E6002E;
}
.l_slide .slick-prev
{
    top: 50%;
}
.l_slide .slick-next
{
    top: 50%;
}

}
html {
    overflow-x: hidden;
}

body.coscso-tint {
    overflow-x: hidden;
    width: 100%;
}

/* Cos×Cos: body fixed overlay under content, above video */
body.coscso-tint::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(230, 0, 46, 0.06) 0%,
        rgba(230, 0, 46, 0.12) 20%,
        rgba(230, 0, 46, 0.2) 45%,
        rgba(230, 0, 46, 0.28) 70%,
        rgba(230, 0, 46, 0.34) 100%
    );
}