@charset "utf-8";

/*既存スタイルの表示リセット*/
main{ padding: 0; }
.header{ display: none; }
.inner-container{ padding: 0; }
.inner-container .c-headings{ display: none; }
.c-breadcrumb{ display: none; }
br.pc{ display: block; }
br.sp{ display: none; }
@media screen and (max-width: 767.5px) {
	br.pc{ display: none; }
	br.sp{ display: block; }
}



/*スタイルここから*/
#lp-body{  }
#lp-body .opening{ width: 100%; height: 100vh; height: 100dvh; position: fixed; z-index: 5000; }
#lp-body .opening .logo-body{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: 50; }
#lp-body .opening .logo-body .logo{ width: 204px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#lp-body .opening .logo-body .logo img{ width: 100%; height: auto; }
#lp-body .opening .transition-body{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../image/opening/bg01.webp) center center no-repeat; background-size: cover; }
#lp-body .opening .transition-body .panel{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; padding-top: 78.2142%; }
#lp-body .opening .transition-body .panel .photo{ width: 31.4286%; position: absolute; }
#lp-body .opening .transition-body .panel.left .photo{ left: 0; }
#lp-body .opening .transition-body .panel.center .photo{ left: 0; margin-left: 34.2857%; }
#lp-body .opening .transition-body .panel.right .photo{ right: 0; }
#lp-body .opening .transition-body .panel.top .photo{ top: 0; }
#lp-body .opening .transition-body .panel.middle .photo{ top: 50%; }
#lp-body .opening .transition-body .panel.middle .photo img{ transform: translateY(-50%); }
#lp-body .opening .transition-body .panel.bottom .photo{ bottom: 0; }
#lp-body .opening .transition-body .panel01{ z-index: 28; }
#lp-body .opening .transition-body .panel02{ z-index: 27; }
#lp-body .opening .transition-body .panel03{ z-index: 26; }
#lp-body .opening .transition-body .panel04{ z-index: 25; }
#lp-body .opening .transition-body .panel05{ z-index: 24; }
#lp-body .opening .transition-body .panel06{ z-index: 23; }
#lp-body .opening .transition-body .panel07{ z-index: 22; }
#lp-body .opening .transition-body .panel08{ z-index: 21; }
#lp-body .opening .transition-body .panel09{ z-index: 20; }
#lp-body .opening .transition-body .panel10{ z-index: 19; }
#lp-body .opening .transition-body .panel11{ z-index: 18; }
#lp-body .opening .transition-body .panel12{ z-index: 17; }
#lp-body .opening .transition-body .panel13{ z-index: 16; }
#lp-body .opening .transition-body .panel14{ z-index: 15; }
#lp-body .opening .transition-body .panel15{ z-index: 14; }
#lp-body .opening .transition-body .panel16{ z-index: 13; }
#lp-body .opening .transition-body .panel17{ z-index: 12; }
#lp-body .opening .transition-body .panel18{ z-index: 11; }
#lp-body .opening .transition-body .panel19{ z-index: 10; }
#lp-body .opening .transition-body .panel20{ z-index: 9; }
#lp-body .opening .transition-body .panel21{ z-index: 8; }
#lp-body .opening .transition-body .panel22{ z-index: 7; }
#lp-body .opening .transition-body .panel23{ z-index: 6; }
#lp-body .opening .transition-body .panel24{ z-index: 5; }
#lp-body .opening .transition-body .panel25{ z-index: 4; }
#lp-body .opening .transition-body .panel26{ z-index: 3; }
#lp-body .opening .transition-body .panel27{ z-index: 2; }
#lp-body .opening .transition-body .panel28{ z-index: 1; }
#lp-body .opening .transition-body .year-body{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; width: 285px; z-index: 30; }
#lp-body .opening .transition-body .year-body .past{ padding-top: 22.8070%; position: relative; }
#lp-body .opening .transition-body .year-body .past .head{ position: absolute; left: 0; top: 0; width: 100%; text-align: right; }
#lp-body .opening .transition-body .year-body .past .mid{ position: absolute; left: 0; top: 0; width: 100%; text-align: right; }
#lp-body .opening .transition-body .year-body .past .tail{ position: absolute; left: 0; top: 0; width: 100%; }
#lp-body .opening .transition-body .year-body .now{ padding-top: 22.8070%; position: absolute; width: 66.6667%; margin-left: 16.6666%; top: 0; }
#lp-body .opening .transition-body .year-body .now .head{ position: absolute; left: 0; top: 0; width: 100%; text-align: right; }
#lp-body .opening .transition-body .year-body .now .mid{ position: absolute; left: 0; top: 0; width: 100%; text-align: right; }
#lp-body .intro{ padding-top: 100px; position: relative; border-top: 1px solid transparent; overflow: hidden; }
#lp-body .intro .logo-store{ position: absolute; left: 0; top: 0; margin: 24px 0 0 24px; width: 130px; }
#lp-body .intro .split-view{ display: flex; display: -ms-flex; justify-content: center; align-items: center; position: relative; z-index: 5; max-width: 996px; margin: 0 auto; }
#lp-body .intro .logo{ width: 32.0281%; }
#lp-body .intro .countdown{ display: none; width: 48.8955%; margin: 0 -10.0401% 0 7.0281%; }
#lp-body .intro .countdown.active{ display: block; }
#lp-body .intro .txt-body{ margin: 90px auto 0; text-align: center; position: relative; z-index: 5; }
#lp-body .intro .txt-body .copy{ font-size: 27px; line-height: 1.81; font-weight: bold; color: #2f2929; }
#lp-body .intro .txt-body .copy~.copy{ margin-top: 80px; }
#lp-body .intro .txt-body .txt{ font-size: 16px; line-height: 2.375; margin: 30px auto 0; }
#lp-body .intro .photo{ margin-top: -148px; }
#lp-body .intro .photo img{ width: 100%; height: auto; }
#lp-body .history{ position: relative; height: 500vh; height: 500dvh; }
#lp-body .history .sticky-screen{ position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#lp-body .history .sticky-screen .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../image/history/bg01.webp) center center no-repeat; background-size: cover; }
#lp-body .history .sticky-screen .timeline{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-left: 5%; }
#lp-body .history .sticky-screen .timeline .line{ position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: rgba(255,255,255,0.5); transform: translateY(-50%); }
#lp-body .history .sticky-screen .timeline .wide-view{ display: flex; display: -ms-flex; align-items: center; width: 3015px; position: relative; z-index: 5; padding-right: 5vw; box-sizing: content-box; }
#lp-body .history .sticky-screen .timeline .wide-view .ttl-body{ width: 516px; height: 530px; position: relative; }
#lp-body .history .sticky-screen .timeline .wide-view .ttl-body .ttl .word{ color: #ffffff; font-family: "Roboto Condensed", sans-serif; display: block; }
#lp-body .history .sticky-screen .timeline .wide-view .ttl-body .ttl .word01{ font-size: 61px; font-weight: 200; line-height: 1; letter-spacing: 0.1em; }
#lp-body .history .sticky-screen .timeline .wide-view .ttl-body .ttl .word02{ font-size: 98px; font-weight: 500; line-height: 0.7; text-align: right; }
#lp-body .history .sticky-screen .timeline .wide-view .ttl-body .sub{ color: #ffffff; letter-spacing: 0.1em; font-family: "Roboto Condensed", sans-serif; font-size: 12px; font-weight: 200; line-height: 1.5; margin-top: 10px; text-align: right; }
#lp-body .history .sticky-screen .timeline .wide-view .ttl-body .txt{ color: #ffffff; font-size: 16px; line-height: 1.7; margin-top: 15px; text-align: right; }
#lp-body .history .sticky-screen .timeline .wide-view .year .photo{ position: absolute; left: 0; top: 0; }
#lp-body .history .sticky-screen .timeline .wide-view .year .txt-body{ position: absolute; left: 0; top: 50%; padding-top: 60px; width: 344px; }
#lp-body .history .sticky-screen .timeline .wide-view .year .txt-body::before{ content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40px; background-color: rgba(255,255,255,0.5); transform: translateX(-50%); }
#lp-body .history .sticky-screen .timeline .wide-view .year .txt-body::after{ content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; background-color: #ffffff; border-radius: 50%; transform: translate(-50%,-50%); }
#lp-body .history .sticky-screen .timeline .wide-view .year .txt-body .txt{ color: #ffffff; font-size: 16px; line-height: 2.06; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936{ width: 1326px; height: 474px; margin-left: 80px; position: relative; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936 .photo01{ width: 380px; z-index: 2; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936 .photo02{ width: 327px; margin: -72px 0 0 356px; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936 .photo03{ width: 427px; margin: -24px 0 0 828px; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936 .photo04{ width: 266px; left: auto; right: 0; margin-top: 330px; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936 .num{ width: 245px; position: absolute; right: 100%; bottom: 0; margin-right: 10px; }
#lp-body .history .sticky-screen .timeline .wide-view .year-1936 .txt-body{ margin-left: 438px; }
#lp-body .history .sticky-screen .timeline .wide-view .year-2026{ width: 1013px; height: 474px; margin-left: 80px; position: relative; }
#lp-body .history .sticky-screen .timeline .wide-view .year-2026 .photo01{ width: 588px; left: auto; right: 0; }
#lp-body .history .sticky-screen .timeline .wide-view .year-2026 .num{ width: 250px; position: absolute; right: 0; top: 0; margin-right: 598px; }
#confetti{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#confetti-spot{ position: absolute; left: 50%; top: 0; width: 740px; height: 100%; max-width: 90%; transform: translateX(-50%); pointer-events: none; }



@media screen and (max-width: 1400px){ /*1400px以下のcss*/
}
@media screen and (max-width: 920px) {

}
@media screen and (max-width: 767.5px) {
	#lp-body .opening .transition-body .panel{ width: 200%; padding-top: 156.4284%; }
	#lp-body .opening .transition-body .panel28{ width: 150%; padding-top: 117.3213%; }
	#lp-body .intro{ padding-top: 18vh; }
	#lp-body .intro .logo-store{ margin: 3% 0 0 3%; width: 150px; }
	#lp-body .intro .logo-store img{ width: 100%; height: auto; }
	#lp-body .intro .split-view{ display: block; }
	#lp-body .intro .logo{ width: 60%; max-width: 319px; margin: 0 auto; }
	#lp-body .intro .countdown{ width: 80%; max-width: 487px; margin: 5% auto 0; }
	#lp-body .intro .txt-body{ margin: 10% auto 0; padding: 0 5%; }
	#lp-body .intro .txt-body .copy{ font-size: 20px; text-align: left; }
	#lp-body .intro .txt-body .copy~.copy{ margin-top: 15%; }
	#lp-body .intro .txt-body .txt{ font-size: 14px; margin-top: 5%; text-align: left; }
	#lp-body .intro .photo{ margin-top: 0; }
	#confetti-spot{ width: 0; }
}









/*animation*/
#lp-body .opening.remove{ opacity: 0; transition: opacity 1s; }
#lp-body .opening::before{ content: ""; opacity: 0; background-color: #ffffff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
#lp-body .opening.hide::before{ opacity: 1; transition: opacity 1s; }
#lp-body .opening .logo-body.hide{ opacity: 0; transition: opacity 1s; }
#lp-body .opening .transition-body .year-body{ transform: translate(-50%,-50%) scale(0.5);  }
#lp-body .opening .transition-body .year-body.zoom{ transform: translate(-50%,-50%) scale(1); transition: 6s ease-out; }
#lp-body .opening .transition-body .year-body .past{ /*transition: opacity 0.5s;*/ }
#lp-body .opening .transition-body .year-body .past .head{ transition: transform 0.5s; }
#lp-body .opening .transition-body .year-body .past .mid{ transition: transform 0.5s; }
#lp-body .opening .transition-body .year-body .now{ transition: opacity 0.5s; opacity: 0; }
#lp-body .opening .transition-body .year-body .now .mid{ transition: transform 2s; }
#lp-body .opening .transition-body .year-body.trans01 .past .mid{ transform: translateY(-20%); }
#lp-body .opening .transition-body .year-body.trans02 .past .mid{ transform: translateY(-40%); }
#lp-body .opening .transition-body .year-body.trans03 .past .mid{ transform: translateY(-60%); }
#lp-body .opening .transition-body .year-body.trans04 .past .head,
#lp-body .opening .transition-body .year-body.trans05 .past .head,
#lp-body .opening .transition-body .year-body.trans06 .past .head{ transform: translateY(-50%); }
#lp-body .opening .transition-body .year-body.trans04 .past .mid,
#lp-body .opening .transition-body .year-body.trans05 .past .mid,
#lp-body .opening .transition-body .year-body.trans06 .past .mid{ transform: translateY(-80%); }
#lp-body .opening .transition-body .year-body.trans05 .past,
#lp-body .opening .transition-body .year-body.trans06 .past{ opacity: 0; }
#lp-body .opening .transition-body .year-body.trans05 .now,
#lp-body .opening .transition-body .year-body.trans06 .now{ opacity: 1; }
#lp-body .opening .transition-body .year-body.trans06 .now .mid{ transform: translateY(-50%); }
#lp-body .opening .transition-body .panel{ opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
#lp-body .opening .transition-body .panel.zoom{ animation: op_panel_zoom01 3s ease-in; }
@keyframes op_panel_zoom01{
	0%{ opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
	10%{ opacity: 1; }
	80%{ opacity: 1; }
	100%{ opacity: 0; transform: translate(-50%,-50%) scale(2); }
}
#lp-body .opening .transition-body .panel28.zoom{ animation: op_panel_zoom02 4s ease-in-out forwards; }
@keyframes op_panel_zoom02{
	0%{ opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
	10%{ opacity: 1; }
	100%{ opacity: 1; transform: translate(-50%,-50%) scale(2.5); }
}
#lp-body .intro .txt-body .copy,
#lp-body .intro .txt-body .txt{ opacity: 0; }
#lp-body .intro .txt-body .copy.show,
#lp-body .intro .txt-body .txt.show{ opacity: 1; transition: opacity 1s; }
#lp-body .intro .countdown{ transform: translateY(80px); opacity: 0; }
#lp-body .intro .countdown.show{ transform: translateY(0); opacity: 1; transition: opacity 1s, transform 1s; }