.header,
.footer,
.menu,
.menu_btn,
.alert {
    display: none;
}
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    /* --bg-color: #feecd4; */
    /* --bg-color: #2F3437; */
    --bg-color: #212222;
	background: var(--bg-color);
	perspective: 100vmin;
    font-family: "RocknRoll One", sans-serif;
    color: #0f304f;
}
.wrap {
	padding: 0;
	width: 100vw;
	height: 100vh;
    height: 100dvh;
	overflow: hidden;
}
img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    html {
        font-size: 10px;
        font-size: calc(100 / 780 * 1vw);;
        font-size: calc(100 / 780 * 1dvw);;
    }
}

/* 横持 */
.horizontal {
    display: none;
}
@media (max-width: 768px) {
    @media screen and (orientation: landscape) {
        .horizontal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .horizontal_icon {
            width: 150rem;
            display: block;
            margin: 0 auto;
        }
        .horizontal_txt {
            font-size: 24rem;
            color: #000;
            margin-top: 20rem;
        }
    }
}

/* op */
.op {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #fff;
    --delay: 0.1s;
    --duration: 4s;
    --delay-jump: calc(var(--duration) + (var(--delay)*14) + 0.5s);
    --delay-jump-span: 0.1s;
    /* display: none; */
}
.op_content {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    background: #feecd4 url(../img/birthday2026/op_deco.png) no-repeat center / 100% 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.op_txt_area {
    display: flex;
    align-items: center;
}
.op_illust {
    line-height: 0;
}
.op_txt {
    line-height: 1;
}
.op_txt_word {
    display: inline-block;
}
.animation_loaded .op_illust,
.animation_loaded .op_txt_word {
    offset-path: path("M693,58.562c0-27-163.38-117.07-347,0-184.346,117.531-333.424,27-346,0");
    offset-rotate: 0deg;
    animation: op_word var(--duration) linear forwards;
    transform-origin: left center;
}
.op_txt_word_inner,
.op_illust_inner {
    scale: 0;
    opacity: 0;
    display: inline-block;
}
.animation_loaded .op_txt_word_inner,
.animation_loaded .op_illust_inner {
    animation: op_word_inner var(--duration) linear forwards;
}
.op_txt .op_txt_word:nth-of-type(1),
.op_txt .op_txt_word:nth-of-type(1) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*1);
}
.op_txt .op_txt_word:nth-of-type(2),
.op_txt .op_txt_word:nth-of-type(2) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*2);
}
.op_txt .op_txt_word:nth-of-type(3),
.op_txt .op_txt_word:nth-of-type(3) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*3);
}
.op_txt .op_txt_word:nth-of-type(4),
.op_txt .op_txt_word:nth-of-type(4) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*4);
}
.op_txt .op_txt_word:nth-of-type(5),
.op_txt .op_txt_word:nth-of-type(5) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*5);
}
.op_txt .op_txt_word:nth-of-type(6),
.op_txt .op_txt_word:nth-of-type(6) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*6);
}
.op_txt .op_txt_word:nth-of-type(7),
.op_txt .op_txt_word:nth-of-type(7) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*7);
}
.op_txt .op_txt_word:nth-of-type(8),
.op_txt .op_txt_word:nth-of-type(8) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*8);
}
.op_txt .op_txt_word:nth-of-type(9),
.op_txt .op_txt_word:nth-of-type(9) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*9);
}
.op_txt .op_txt_word:nth-of-type(10),
.op_txt .op_txt_word:nth-of-type(10) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*10);
}
.op_txt .op_txt_word:nth-of-type(11),
.op_txt .op_txt_word:nth-of-type(11) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*11);
}
.op_txt .op_txt_word:nth-of-type(12),
.op_txt .op_txt_word:nth-of-type(12) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*12);
}
.op_txt .op_txt_word:nth-of-type(13),
.op_txt .op_txt_word:nth-of-type(13) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*13);
}
.op_txt .op_txt_word:nth-of-type(14),
.op_txt .op_txt_word:nth-of-type(14) .op_txt_word_inner {
    animation-delay: calc(var(--delay)*14);
}

@keyframes op_txt {
    0% {
        translate: 50% 0;
    }
    100% {
        translate: 0 0;
    }
}
@keyframes op_word {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
@keyframes op_word_inner {
    0% {
        scale: 0;
        opacity: 0;
    }
    25%, 100% {
        scale: 1;
        opacity: 1;
    }
}
.op_txt_word_jump,
.op_illust img {
    display: inline-block;
}
.animation_loaded .op_txt_word_jump,
.animation_loaded .op_illust img {
    animation: op_txt_word_jump 0.5s var(--delay-jump) forwards;
}
@keyframes op_txt_word_jump {
    0% {
        translate: 0 0;
        animation-timing-function: ease-in-out;
    }
    50% {
        translate: 0 -30px;
        animation-timing-function: ease-in-out;
    }
    100% {
        translate: 0 0;
        animation-timing-function: ease-in-out;
    }
}
.op_txt .op_txt_word:nth-of-type(1) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*1));
}
.op_txt .op_txt_word:nth-of-type(2) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*2));
}
.op_txt .op_txt_word:nth-of-type(3) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*3));
}
.op_txt .op_txt_word:nth-of-type(4) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*4));
}
.op_txt .op_txt_word:nth-of-type(5) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*5));
}
.op_txt .op_txt_word:nth-of-type(6) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*6));
}
.op_txt .op_txt_word:nth-of-type(7) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*7));
}
.op_txt .op_txt_word:nth-of-type(8) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*8));
}
.op_txt .op_txt_word:nth-of-type(9) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*9));
}
.op_txt .op_txt_word:nth-of-type(10) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*10));
}
.op_txt .op_txt_word:nth-of-type(11) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*11));
}
.op_txt .op_txt_word:nth-of-type(12) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*12));
}
.op_txt .op_txt_word:nth-of-type(13) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*13));
}
.op_txt .op_txt_word:nth-of-type(14) .op_txt_word_jump {
    animation-delay: calc(var(--delay-jump) + (var(--delay-jump-span)*14));
}
.op {
    transition: opacity 3s calc(var(--delay-jump) + (var(--delay-jump-span)*14) + 0.5s);
}
.animation_loaded .op {
    opacity: 0;
}
@media (min-width: 769px) {
    .op_txt_area {
        gap: 24px;
        translate: 0 -40px;
    }
    .op_illust {
        width: 80px;
        height: 80px;
        translate: 0 -20px;
    }
    .op_illust_inner {
        width: 100%;
        height: 100%;
    }
    .op_txt {
        font-size: 64px;
    }
    .op_txt_word {
        translate: 0 -28px;
    }
    .op_txt_word_inner {
        min-width: 16px;
    }
}
@media (max-width: 768px) {
    .op_txt_area {
        gap: 24rem;
        translate: 0 -40rem;
    }
    .op_illust {
        width: 80rem;
        height: 80rem;
        translate: 0 -20rem;
    }
    .op_illust_inner {
        width: 100%;
        height: 100%;
    }
    .op_txt {
        font-size: 64rem;
    }
    .op_txt_word {
        translate: 0 -28rem;
    }
    .op_txt_word_inner {
        min-width: 16rem;
    }
}

/* main */
.main {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.main_hole {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-block: auto;
    background: linear-gradient(90deg, rgba(247, 223, 99, 1) 0%, rgba(255, 249, 191, 1) 100%);
    box-shadow: 0 0 3px 2px rgba(255, 249, 191, 1);
    z-index: 2;
}
.main_hole::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
}
.ttl {
    aspect-ratio: 413 / 338;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.ttl img {
    position: absolute;
    bottom: 0;
    right: 0;
}
.main_img_wrap {
    position: relative;
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin-inline: auto;
}
.main_img_content {
    width: 100%;
    height: 100%;
    position: relative;
}
.main_img {
    width: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
}
.main_img::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 10px 15px var(--bg-color);
}
.main_img[data-num="1"] .main_img1,
.main_img[data-num="2"] .main_img2 {
    opacity: 1;
}
.main_img[data-num="2"] .main_img1,
.main_img[data-num="1"] .main_img2 {
    opacity: 0;
}
.main_img img {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    object-position: top center;
    object-fit: cover;
    transition: opacity 2s;
}
.main_img_center {
    top: 0;
    bottom: 0;
    margin-block: auto;
}
.main_img_wrap {
    translate: 0 400%;
    transition: translate 3s cubic-bezier(0.25, 1, 0.5, 1);
}
.main_start .main_img_wrap {
    translate: 0;
}
.ttl {
    scale: 0;
    transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.5s;
}
.main_start .ttl {
    scale: 1;
}
@media (min-width: 769px) {
    .main_hole {
        left: -2px;
        width: 120px;
        height: 240px;
        padding: 2px;
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .main_hole::after {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .ttl {
        width: calc(413/1920*100%);
        min-width: 300px;
    }
    .ttl img {
        width: calc(492/413*100%);
        height: calc(387/338*100%);
    }
    .main_img_wrap {
        padding: 0 40px;
    }
    .main_img {
        height: calc(100% - 160px);
    }
    .main_img img {
        top: 1px;
        height: calc(100% - 2px);
    }
    .main_img_top {
        bottom: calc(100% - 80px);
    }
    .main_img_over {
        bottom: calc(200% - 240px);
    }
    .main_img_over_2 {
        bottom: calc(300% - 400px);
    }
    .main_img_bottom {
        top: calc(100% - 80px);
    }
}
@media (max-width: 768px) {
    .main_hole {
        left: -2rem;
        width: 120rem;
        height: 240rem;
        padding: 2rem;
        border-top-right-radius: 16rem;
        border-bottom-right-radius: 16rem;
    }
    .main_hole::after {
        border-top-right-radius: 16rem;
        border-bottom-right-radius: 16rem;
    }
    .ttl {
        width: calc(413/780*100%);
    }
    .ttl img {
        width: calc(492/413*100%);
        height: calc(387/338*100%);
    }
    .main_img_wrap {
        padding: 0 40rem;
    }
    .main_img {
        height: 968rem;
    }
    .main_img img {
        top: 1rem;
        width: auto;
        left: 50%;
        height: calc(100% - 2rem);
        object-position: center;
        translate: -57% 0;
    }
    .main_img_top {
        bottom: calc(50dvh + 484rem);
    }
    .main_img_over {
        bottom: calc(50dvh + 484rem + 968rem);
    }
    .main_img_over_2 {
        bottom: calc(50dvh + 484rem + 968rem + 968rem);
    }
    .main_img_bottom {
        top: calc(50dvh + 484rem);
    }
}

/* noise */
.noise {
	width: 100vw;
	height: 100vh;
	position: absolute;
    top: 0;
    left: 0;
	overflow: hidden;
	--trsn: all 0.5s ease 0s;
}
.noise_bg {
	filter: invert(1)
}
.noise_bg, .noise_effect {
	width: 100%;
	height: 100%;
}
.noise_bg:after, .noise_effect:after {
	content: '';
	width: 120%;
	height: 100%;
    position: absolute;
	top: 0;
	left: 0;
	padding-left: 100px;
	opacity: 0.5;
	animation: noise_scratch 0.45s steps(1) infinite;
	background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
}
.noise_effect:after {
	left: 30%;
	animation: noise_effect_scratch 2s infinite;
}
.noise_grain {
	width: 100%;
	height: 100%;
}
.noise_grain:after {
	content: '';
	width: 110%;
	height: 110%;
    position: absolute;
	top: -5%;
	left: -5%;
	opacity: .25;
	background-image:
		repeating-conic-gradient(#000 0%, transparent .00003%, transparent .0005%, transparent .00095%),
		repeating-conic-gradient(#000 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
	animation: noise_grain 0.5s steps(1) infinite;
	filter: drop-shadow(0px 0px 1px black);
}
@keyframes noise_grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-1%, -1%); }
	20% { transform: translate(1%, 1%); }
	30% { transform: translate(-2%, -2%); }
	40% { transform: translate(3%, 3%); }
	50% { transform: translate(-3%, -3%); }
	60% { transform: translate(4%, 4%); }
	70% { transform: translate(-4%, -4%); }
	80% { transform: translate(2%, 2%); }
	90% { transform: translate(-3%, -3%); }
}
@keyframes noise_scratch {
	0%, 100% { transform: translateX(0); opacity: 0.5; }
	10% { transform: translateX(-1%); }
	20% { transform: translateX(1%); }
	30% { transform: translateX(-2%); opacity: 0.75; }
	40% { transform: translateX(3%); }
	50% { transform: translateX(-3%); opacity: 0.5; }
	60% { transform: translateX(8%); }
	70% { transform: translateX(-3%); }
	80% { transform: translateX(10%); opacity: 0.25; }
	90% { transform: translateX(-2%); }
}
@keyframes noise_effect_scratch {
	0% { transform: translateX(0); opacity: 0.75; }
	10% { transform: translateX(-1%); }
	20% { transform: translateX(1%); }
	30% { transform: translateX(-2%); }
	40% { transform: translateX(3%); }
	50% { transform: translateX(-3%); opacity: 0.5; }
	60% { transform: translateX(8%); }
	70% { transform: translateX(-3%); }
	80% { transform: translateX(10%); opacity: 0.25; }
	90% { transform: translateX(20%); }
	100% { transform: translateX(30%); }
}