@charset "UTF-8";
/* --- Reset & Basic Settings --- */
:root {
	--color-navy: #262069;
}



@media screen and (max-width: 680px) {
	.header { position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 92px; padding: 0 30px; z-index: 200; opacity: 0; }
	.header__sitettl img { width: 112px; }
	.header__logo img { width: 130px; }
}
@media screen and (min-width: 681px) {
	.header { display: none; }
}

.l-body { margin: 0;
/*  background: linear-gradient(135deg, rgba(184,67,129,1) 0%,rgba(112,43,89,1) 100%);*/
}



/* full screen frame */
#app { position: relative; width: 100%; height: 100vh; z-index: 50; }

.bg-spiral-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10; overflow: hidden; pointer-events: none; }
.bg-spiral { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; max-width: none; width: 1951px; }
.bg-gra { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100vh; background: linear-gradient(135deg, rgba(184,67,129,1) 0%,rgba(112,43,89,1) 100%); z-index: 0; pointer-events: none; }

/*----------
Scroll Area
same size with #app
----------*/
.scroll-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; }

/* Trigger for scroll height */
.scroll-trigger { height: 100vh; }
#trigger-1 { height: 200vh; }
#trigger-2 { height: 100vh; }
/*.above-scr { position: relative; z-index: 300; pointer-events: auto; }*/

@media screen and (max-width: 680px) {
	#trigger-1 { height: 100vh; }
	.content-viewer { overflow: hidden; }/* pointer-events: none;*/
	.scroll-trigger:not(:first-of-type) { display: none; }
	
}
@media screen and (min-width: 681px) {
	#app { height: 100vh; overflow: hidden; }
	.bg-spiral-wrap { height: 100vh; }
	/* Viewer of Contents */
	.content-viewer { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; pointer-events: none; } /* pass scroll event to .scroll-area */
	
	.content-item { position: absolute; width: 100%; height: 100%; text-align: center; pointer-events: auto;  opacity: 0; }
	
	/*	#trigger-1 { height: 200vh; }*/
	#trigger-2 { height: 200vh; }
}

/*  for Under iPhone 15~ */
@media screen and (max-width: 394px) and (max-height: 670px) {
	
}

/*  for Under iPhone 12~14 */
@media screen and (max-width: 390px) and (max-height: 670px) {
	
}

/*  for Under iPhone SE2 SE3  */
@media screen and (max-width: 375px) and (max-height: 600px) {
	
}
/*  for short Android  */
@media screen and (max-width: 360px) and (max-height: 670px) {
	
}

@media print, screen and (max-width:680px) {
	
}

@media print, screen and (min-width:681px) {
	
}

@media print, screen and (min-width:1921px) {
	.bg-spiral { max-width: none; width: 100%; }
}


.menu-btn._off { opacity: 0; }
.menu-btn { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); display: block; width: 77px; height: 75px; z-index: 400; transition: opacity .4s; }
.menu-btn::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url("../img/txt_menu_btn_open.png") no-repeat center/contain; content: ""; }
.menu-btn.is-opened::before { background-image: url("../img/txt_menu_btn_close.png"); }
.l-navi { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; overflow-y: scroll; z-index: 350; }
.l-navi::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to right, rgba(112,43,89,1) 0%,rgba(184,67,129,1) 100%); content: ""; opacity: .7; }
.l-navi__inner { display: flex; justify-content: center; align-items: center; width: calc(100% - 70px); height: 100%; margin-left: auto; margin-right: auto; }
.navi { position: relative; width: 100%; z-index: 50; }
.navi__item:not(:first-of-type) { margin-top: 4vw; }
.navi__item > a,
.navi__item > button { display: block; width: 100%; text-align: center; }
.navi__item img { max-width: none; width: auto; height: 5.63vw; }


@media print, screen and (max-width:680px) {
	.navi__item > button { display: none; }
	.navi__item--sp2l img { height: 10.94vw; }
	.navi__item:nth-of-type(1) { margin-right: 8vw; }
	.navi__item:nth-of-type(2) { margin-left: 18vw; }
	.navi__item:nth-of-type(3) { margin-right: 25vw; }
	.navi__item:nth-of-type(4) { margin-left: 10vw; }
	.navi__item:nth-of-type(5) { margin-right: 17vw; }
	.navi__item:nth-of-type(6) { margin-left: 22vw; }
	.navi__item:nth-of-type(7) { margin-right: 29vw; }
	.navi__item:nth-of-type(8) { margin-left: 1vw; }
	.navi__item:nth-of-type(9) { margin-left: -12vw; }
	.navi__item:nth-of-type(10) { margin-left: 13vw; }
}

@media print, screen and (min-width:681px) {
	.menu-btn { bottom: 46px; width: 105px; height: 102px; }
	.l-navi__inner { width: 772px; }
	.navi__item:not(:first-of-type) { margin-top: 20px; }
	.navi__item > a { display: none; }
	.navi__item img { height: 35px; }
	.navi__item:nth-of-type(1) { margin-right: 220px; }
	.navi__item:nth-of-type(2) { margin-left: 315px; }
	.navi__item:nth-of-type(3) { margin-right: 220px; }
	.navi__item:nth-of-type(4) { margin-left: 312px; }
	.navi__item:nth-of-type(5) { margin-right: 230px; }
	.navi__item:nth-of-type(6) { margin-left: 318px; }
	.navi__item:nth-of-type(7) { margin-right: 216px; }
	.navi__item:nth-of-type(8) { margin-left: 237px; }
	.navi__item:nth-of-type(9) { margin-left: -360px; }
	.navi__item:nth-of-type(10) { margin-left: 310px; }
}



/* sub item */
.sub-item__obj { position: relative; margin-top: 10vw; transition: 1.0s; }
.sub-item__obj__label { position: absolute; top: -6.5vw; left: 50%; transform: translateX(-50%); text-align: center; }
.sub-item__obj__label img { max-width: none; width: 48vw; }
.sub-item__obj__inner { background: url("../img/bg_rumor_sp.png") no-repeat center/100% 100%; padding: 12vw 6vw 8vw; }
.sub-item__obj__txt { font-size: 2.95vw; font-weight: 400; line-height: 1.7; text-align: justify; }
.sub-item__obj__deco { position: absolute; width: auto; height: 55.8vw; }
.sub-item__obj__deco._horse { bottom: 2vw; left: 50%; transform: translateX(-113%); }
.sub-item__obj__deco._cat { bottom: -9vw; left: 50%; transform: translateX(-107%); }
#content-9 .sub-item__obj__deco._cat { bottom: -14vw; }
.sub-item__obj__deco._owl { bottom: -14vw; left: 50%; transform: translateX(-130%); }
.sub-item__obj__deco._bear { bottom: -1vw; left: 50%; transform: translateX(-90%); }
#content-5 .sub-item__obj__deco._bear { bottom: -8vw; }
.sub-item__obj__deco._wolf { bottom: -0.2vw; left: 50%; transform: translateX(-82%); }
.sub-item__obj__deco._rabbit { bottom: -12vw; left: 50%; transform: translateX(-153%); }
.sub-item__obj__deco._squid { bottom: -14vw; left: 50%; transform: translateX(-133%); }


.sub-content-container { width: calc(100% - 72px); margin-left: auto; margin-right: auto; }
.sub-item__inner {  }
.sub-item__ttl { margin-bottom: 10px; }
.sub-item__ttl__inner { position: relative; display: flex; align-items: flex-end; }
.sub-item__ttl__inner:not(:first-of-type) { margin-top: 5px; }
.sub-item__ttl__inner._nomt { margin-top: 0 !important; }
.sub-item__ttl__txt { display: inline-block; background: var(--color-navy); padding: 4px 6px 6px; font-size: 2.3rem; font-weight: 700; line-height: 1; color: #fff; }
.sub-item__ttl__txt:nth-child(2) { margin-left: -5px; padding-left: 0; }
.sub-item__ttl__txt._emp,
.sub-item__ttl__txt._emp2 { position: relative; background-color: transparent; }
.sub-item__ttl__txt._emp::before,
.sub-item__ttl__txt._emp2::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: var(--color-navy); content: ""; z-index: -1; }
.sub-item__ttl__txt._emp { font-size: 3.5rem; font-weight: 700; line-height: 1; }
.sub-item__ttl__txt._emp2 { font-size: 2.99rem; font-weight: 700; line-height: 1; }
.sub-item__ttl__txt._mllesser { margin-left: -15px; }
.sub-item__txt { font-size: 1.3rem; font-weight: 700; line-height: 2; text-align: justify; color: #fff; }
.sub-item__img { margin-top: 24px; }

@media print, screen and (max-width:680px) {
	.has-sub-content { position: relative; }
	.sub-item:not(:last-of-type) { margin-bottom: 22vw; }
	.sub-item__obj__inner._bear1 { padding-top: 10vw; padding-bottom: 6vw; }
	.sub-item__obj__txt { width: 50%; margin-left: auto; margin-right: 0; }
	.sub-item__obj__txt._wider1 { width: 55%; }
	.sub-item__obj__txt._wider2 { width: 58.5%; }
	.sub-item__obj__txt._wider3 { width: 62%; }
	.sub-item__obj__txt._lesser05 { width: 46.6%; }
	.sub-item__obj__txt._lesser1 { width: 39%; }
	.sub-item__obj__txt._lesser2 { width: 35%; }
	.sub-item__obj__deco._wolf { height: 52vw; }
	.sub-item__obj__deco._rabbit { height: 61.65vw; }
	.sub-item__obj__deco._squid { height: 61.65vw; }
}

@media print, screen and (min-width:681px) {
	.has-sub-content { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
	.has-sub-content.is-active { opacity: 1; visibility: visible; }
	.sub-content-container { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
	.sub-item { position: absolute; width: calc(100% - 270px); opacity: 0; transform: scale(0); transform-origin: center center; }
	.sub-item__obj { opacity: 0; transition: opacity 0.4s, transform 0.4s; }
	
	.sub-item__inner { display: grid; grid-template-columns: 1fr 425px; grid-template-rows: repeat(2, auto); grid-column-gap: 50px; grid-row-gap: 36px; }
	.sub-item__ttl { grid-area: 1 / 1 / 2 / 2; align-self: flex-end; margin-bottom: 0; text-align: left; }
	.sub-item__ttl__inner:not(:first-of-type) { margin-top: 10px; }
	.sub-item__txt { grid-area: 2 / 1 / 3 / 2; font-size: 1.6rem; letter-spacing: 0.02em; }
	.sub-item__ttl__txt { padding: 6px 8px 9px; font-size: 3.6rem; }
	.sub-item__ttl__txt:nth-child(2) { margin-left: -8px; }
	.sub-item__ttl__txt._emp { padding: 4px 8px 10px; font-size: 5.4rem; }
	.sub-item__ttl__txt._emp2 { padding: 7px 8px 10px; font-size: 4.68rem; }
	.sub-item__ttl__txt._mrlesser { margin-right: -6px; }
	.sub-item__ttl__txt._mllesser { margin-left: -18px; }
	.sub-item__img { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }
	.sub-item__obj { position: absolute; top: 50%; left: 50%; transform: translate(-600%, -35%); width: 222px; }
	.sub-item__obj__label { top: -26px; }
	.sub-item__obj__label img { width: 200px; }
	.sub-item__obj__inner { min-height: 198px; background-image: url("../img/bg_rumor_pc.png"); padding: 50px 32px 94px; }
	.sub-item__obj__txt { font-size: 1.3rem; line-height: 1.69; letter-spacing: 0.02em; }
	.sub-item__obj._show { opacity: 1; transform: translate(-310%, -35%); }/*	 transform: translate(-275%, 50%);	*/
	.sub-item__obj__deco { top: calc(100% - 105px); left: 50%; transform: translateX(-50%) !important; height: 310px; }
	.sub-item__obj__deco._horse { }
	
	#content-5 .sub-item:nth-of-type(4) .sub-item__img { width: 485px; }
}
@media print, screen and (min-width:1201px) {
	.sub-item { width: 900px; }
}
@media print, screen and (min-width:1601px) {
	.sub-item__obj { transform: translate(-600%, -35%); width: 242px; }
	.sub-item__obj._show { transform: translate(-325%, -35%); }
}



.content-item--cover { position: relative; display: flex; justify-content: center; align-items: center; height: 100svh; } /**/

.cover-ttl,
.cover-bg { pointer-events: none; }
.cover-ttl { position: relative; z-index: 10; }
.cover-ttl img { width: auto; height: 38.5vw; }
.cover-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
.cover-bg img { max-width: none; width: 128vw; }

#content-2.content-item--cover { margin-top: 0; }
@media print, screen and (max-width:680px) {
	.content-item--cover { height: auto; padding-top: 370px; padding-bottom: 370px; }
	.content-item__deco { display: none; }
	.cover-bg { transform: translate(-50%, -57%) rotate(-90deg); }
}
/*  for Under iPhone 15~ */
@media screen and (max-width: 394px) and (max-height: 670px) {
	
}

/*  for Under iPhone 12~14 */
@media screen and (max-width: 390px) and (max-height: 670px) {
	.content-item--cover { margin-top: 10svh; }
}

/*  for Under iPhone SE2 SE3  */
@media screen and (max-width: 375px) and (max-height: 600px) {
	.content-item--cover { margin-top: 20svh; }
}

/*  for short Android  */
@media screen and (max-width: 360px) and (max-height: 670px) {
	.content-item--cover { margin-top: 20svh; }
}

@media print, screen and (min-width:681px) {
	.content-item--cover { position: absolute; }
	.content-item__deco { position: absolute; top: 50%; left: 50%; transform: translate(-49%, -50%); width: calc(100% + 40px); pointer-events: none; }
	.content-item__deco--back { z-index: 0; }
	.content-item__deco--front { z-index: 50; }
.cover-ttl img { height: 170px; }
.cover-bg img { width: 957px; }
	
}

@media print, screen and (min-width:1401px) {
	.content-item__deco { width: 1402px; }
}






/* First View */
.fv { width: 100%; height: 100vh; pointer-events: none; }/* */

.fv__logo { position: absolute; top: 9vw; left: 50%; transform: translateX(-50%); width: 34.7vw; z-index: 50; }

/*.fv__ttl { position: absolute; top: 25vw; left: 50%; transform: translateX(-50%); text-align: center; z-index: 50; }*/
.fv__ttl,
.fv__obj { opacity: 0; transition: 1.0s; }
.fv__ttl._show,
.fv__obj._show { opacity: 1; }
.fv__ttl { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -123%); text-align: center; z-index: 50; }

.fv__ttl img { width: 48vw; }
.fv__obj { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); }
.fv__obj img { max-width: none; width: 109.5vw; }

@media print, screen and (max-width:680px) {
	
}

/*  for Under iPhone 15~ */
@media screen and (max-width: 394px) and (max-height: 670px) {
	
}

/*  for Under iPhone 12~14 */
@media screen and (max-width: 390px) and (max-height: 670px) {
	
}

/*  for Under iPhone SE2 SE3  */
@media screen and (max-width: 375px) and (max-height: 600px) {
	
}
/*  for short Android  */
@media screen and (max-width: 360px) and (max-height: 670px) {
	
}

@media print, screen and (min-width:681px) {
	.fv__logo { display: none; }
	.fv__ttl img,
	.fv__obj img { max-width: none; }
	.fv__ttl img { width: 728px; }
	.fv__obj img { width: 1452px; }
	.fv__ttl { transform: translate(-50%, -158%); }
}



/* Frame */
.frame-wrap { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100dvh; z-index: 100; pointer-events: none; transition: .15s ease; }
.frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }
.frame--outer { width: calc(100% - 20px); height: calc(100% - 20px); transition: .15s ease; }
.frame--outer::before,
.frame--outer::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; height: 100%; border-style: solid; border-color: #c8bb9b; content: ""; transition: .15s ease; }
.frame--outer::before { width: calc(100% - 30px); height: calc(1005 - 2px); border-width: 1px 0 1px 0; transition: .15s ease; }
.frame--outer::after { width: calc(100% - 2px); height: calc(100% - 30px); border-width: 0 1px 0 1px; transition: .15s ease; }
.frame--outer span { position: absolute; display: block; width: 1px; height: 22px; background: #c8bb9b; }
.frame--outer span:nth-child(1) { top: -4px; left: 7px; transform: rotate(42deg); }
.frame--outer span:nth-child(2) { top: -4px; right: 7px; transform: rotate(-42deg); }
.frame--outer span:nth-child(3) { bottom: -4px; left: 7px; transform: rotate(-42deg); }
.frame--outer span:nth-child(4) { bottom: -4px; right: 7px; transform: rotate(42deg); }
.frame--inner { width: calc(100% - 28px); height: calc(100% - 28px); border: 1px solid #c8bb9b; transition: .15s ease; }
.frame--inner span { position: absolute; display: block; width: 6px; height: 6px; border: 1px solid #c8bb9b; }
.frame--inner span:nth-child(1) { top: -6px; left: -6px; }
.frame--inner span:nth-child(2) { top: -6px; right: -6px; }
.frame--inner span:nth-child(3) { bottom: -6px; left: -6px; }
.frame--inner span:nth-child(4) { bottom: -6px; right: -6px; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.frame--inner span { width: 6px; height: 6px; }
}


/* Frame Deco */
.frame-deco { position: fixed; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 100%; height: 100vh; opacity: 0; transition: 0.4s ease; z-index: 20; pointer-events: none; }
.frame-deco--back { background: rgba(112,43,89,0.25); z-index: 20; }
.frame-deco--front { z-index: 100; }
.frame-deco._show { opacity: 1; }
.frame-deco__obj { position: absolute; }
.frame-deco__obj--1 { left: 0; width: 265px; }
.frame-deco__obj--2 { bottom: 0; left: 0; width: 115px; }
.frame-deco__obj--3 { bottom: 0; right: 0; width: 75px; }
@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.frame-deco { display: none; }
}


@media print, screen and (max-width:680px) {
	.fixed-sitettl,
	.fixed-logo { display: none; }
}
@media print, screen and (min-width:681px) {
	.fixed-sitettl,
	.fixed-logo { position: fixed; z-index: 100; }
	.fixed-sitettl { top: 58px; left: 66px; opacity: 0; transition: 0.4s ease-in; }
	.fixed-sitettl img { width: 207px; }
	.fixed-sitettl._show { opacity: 1; }
	.fixed-logo { right: 60px; bottom: 60px; width: 121px; }
}


/* Links */
.links-ttl { text-align: center; }
.links-ttl img { width: 53.4vw; }
.links-wrap { width: calc(100% - 6.3rem); margin: 2.65vw auto 25vh; }
.links { position: relative; z-index: 300; pointer-events: auto; }
.links a { display: flex; justify-content: center; align-items: center; height: 10.67vw; background: var(--color-navy); font-size: 3.74vw; font-weight: 700; line-height: 1; text-align: center; color: #fff; }
@media print, screen and (max-width:680px) {
	.links-outer-wrap { padding-top: 30vh; }
	.links:not(:first-of-type) { margin-top: 2.65vw; }
}
@media print, screen and (min-width:681px) {
	#content-10 .sub-content-container { padding-bottom: 50px; }
	.links-ttl img { width: 300px; }
	.links-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; width: 660px; margin: 22px auto 0; }
	.links { width: 300px; }
	.links:not(:nth-child(-n+2)) { margin-top: 30px; }
	.links a { height: 50px; font-size: 1.8rem; transition: .4s; }
	.links a:hover { background: #fff; color: var(--color-navy); }
}

/*  */

@media print, screen and (max-width:680px) {
	
}
@media print, screen and (min-width:681px) {
	.r-footer { position: absolute; left: 0; bottom: 0; width: 100%; }
}