@charset "utf-8";
/*-----------------------------------------------
 * sub.css - 下層共通
 * siteLogo / flowing / sectionTtl / nextSectionLink / circle / follow
-------------------------------------------------*/

/*------------------
 siteLogo
 ------------------*/
.siteLogoWrap{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 10;
}
.siteLogo{
	position: sticky;
	height: 100vh;
	left: 0;
	top: 0;
	opacity: 1;
	transition: all 0.4s ease;
}
.siteLogo .logoImg{
	display: block;
	position: absolute;
	left: min(calc(40 / var(--vw-min) * 100vw),40px);
	top: min(calc(40 / var(--vw-min) * 100vw),40px);
	width: min(calc(120 / var(--vw-min) * 100vw),120px);
	height: min(calc(108 / var(--vw-min) * 100vw),108px);
	pointer-events: all;
	background: url(../img/common/logo/logo_50th.svg) no-repeat center center / contain;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
@media screen and (max-width:767px){
	.siteLogoWrap{
		right: 0;
		margin: auto;
	}
	.siteLogo .logoImg{
		left: calc(24 / var(--vw-min) * 100vw);
		top: calc(48 / var(--vw-min) * 100vw);
		width: calc(120 / var(--vw-min) * 100vw);
		height: calc(108 / var(--vw-min) * 100vw);
	}
}

/*------------------
 flowing
 ------------------*/
.flowingWrap{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: -1;
	background-color: #FFF;
	transition: all .4s ease;
}
.in-footer .flowingWrap{
	background-color: #000;
}
.flowing__sticky{
	position: sticky;
	top: 0;
	height: min(min(calc(780 / var(--vw-min) * 100vw),780px), 100vh);
	height: 100dvh;
	display: flex;
	align-items: center;
	width: 100%;
	overflow: hidden;
}
.flowing__item{
	width: calc(1370 / var(--vw-min) * 100vw);
	height: calc(159 / var(--vw-min) * 100vw);
}
.flowing__item svg{
	width: 100%;
	height: 100%;
}
.flowingSvg{
	stroke-dasharray: 1200;
	fill: rgba(0, 0, 0, 0.08);
	stroke: rgba(255, 255, 255, 0.3);
	stroke-width: 1px;
	stroke-linecap: round;
}
.in-footer .flowingSvg{
	animation: line-anim 3s forwards;
}
@keyframes line-anim{
	0%{ stroke-dashoffset: 1200; }
	100%{ stroke-dashoffset: 0px; }
}
@media screen and (max-width:767px){
	.flowing__sticky{
		height: 100vh;
	}
	.flowing__item{
		width: calc(2386 / var(--vw-min) * 100vw);
		height: calc(198 / var(--vw-min) * 100vw);
	}
}

/*------------------
 layout
 ------------------*/
.main{
	position: relative;
}
.area{
	position: relative;
	z-index: 1;
}

/*------------------
 sectionTtl
 ------------------*/
.sectionTtl__en{
	display: block;
	font-family: var(--font-en);
	color: #005bac;
	font-size: min(calc(55 / var(--vw-min) * 100vw), 55px);
	font-weight: 700;
	font-style: italic;
	letter-spacing: -0.025em;
	line-height: 1;
	white-space: nowrap;
}
.sectionTtl__jp{
	font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:767px){
	.sectionTtl__en{
		font-size: calc(66 / var(--vw-min) * 100vw);
		text-align: center;
		margin-bottom: calc(30 / var(--vw-min) * 100vw);
		height: auto;
		white-space: normal;
	}
	.sectionTtl__jp{
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
}

/*------------------
 nextSectionLink
 ------------------*/
.nextSectionLink{
	position: absolute;
	right: min(calc(40 / var(--vw-min) * 100vw),40px);
	bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
	z-index: 3;
	pointer-events: all;
}
.nextSectionLink__link{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: min(calc(200 / var(--vw-min) * 100vw),200px);
	height: min(calc(40 / var(--vw-min) * 100vw),40px);
	background-color: #000;
	border-radius: 20px;
	color: #FFF;
	border: 0.5px solid #FFF;
	text-decoration: none;
	transition: all .4s ease;
}
.nextSectionLink__txt{
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	color: #FFF;
	font-family: var(--font-en);
	text-decoration: none;
	font-weight: normal;
	transition: all .4s ease;
}
.nextSectionLink__link::before{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: block;
	width: min(calc(32 / var(--vw-min) * 100vw),32px);
	height: min(calc(32 / var(--vw-min) * 100vw),32px);
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.4);
}
.nextSectionLink__ic{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: block;
	width: min(calc(32 / var(--vw-min) * 100vw),32px);
	height: min(calc(32 / var(--vw-min) * 100vw),32px);
	background-color: #FFF;
}
.nextSectionLink__ic._site{
	-webkit-mask: url(../img/common/icon/ic_blank.svg) no-repeat center center;
	mask: url(../img/common/icon/ic_blank.svg) no-repeat center center;
	-webkit-mask-size: min(calc(10 / var(--vw-min) * 100vw),10px) auto;
	mask-size: min(calc(10 / var(--vw-min) * 100vw),10px) auto;
}
.nextSectionLink__ic._arrow{
	-webkit-mask: url(../img/common/icon/ic_arrow_btm.svg) no-repeat center center;
	mask: url(../img/common/icon/ic_arrow_btm.svg) no-repeat center center;
	-webkit-mask-size: min(calc(16 / var(--vw-min) * 100vw),16px) auto;
	mask-size: min(calc(16 / var(--vw-min) * 100vw),16px) auto;
}
.nextSectionLink__ic._arrow._arrow-l{
	transform: rotate(-90deg);
}
.nextSectionLink__ic._arrow-r{
	-webkit-mask: url(../img/common/icon/ic_arrow_r.svg) no-repeat center center;
	mask: url(../img/common/icon/ic_arrow_r.svg) no-repeat center center;
	-webkit-mask-size: min(calc(16 / var(--vw-min) * 100vw),16px) auto;
	mask-size: min(calc(16 / var(--vw-min) * 100vw),16px) auto;
}
@media screen and (max-width:767px){
	.nextSectionLink{
		right: calc(24 / var(--vw-min) * 100vw);
		bottom: calc(48 / var(--vw-min) * 100vw);
	}
	.nextSectionLink__link{
		width: calc(288 / var(--vw-min) * 100vw);
		height: calc(72 / var(--vw-min) * 100vw);
		border-radius: calc(36 / var(--vw-min) * 100vw);
		padding-right: calc(34 / var(--vw-min) * 100vw);
	}
	.nextSectionLink__link::before{
		width: calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
	}
	.nextSectionLink__ic{
		right: calc(8 / var(--vw-min) * 100vw);
		width: calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
		border-radius: 50%;
	}
	.nextSectionLink__ic._site{
		-webkit-mask-size: calc(20 / var(--vw-min) * 100vw) auto;
		mask-size: calc(20 / var(--vw-min) * 100vw) auto;
	}
	.nextSectionLink__ic._arrow{
		-webkit-mask-size: calc(32 / var(--vw-min) * 100vw) auto;
		mask-size: calc(32 / var(--vw-min) * 100vw) auto;
	}
	.nextSectionLink__txt{
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover) and (pointer: fine){
	.nextSectionLink__link:hover{
		background-color: #FFF;
		color: #000;
		border: 0.5px solid #000;
	}
	.nextSectionLink__link:hover .nextSectionLink__txt{
		color: #000;
	}
	.nextSectionLink__link:hover .nextSectionLink__ic{
		background-color: #000;
	}
	.nextSectionLink__link:hover::before{
		border: 1px solid rgba(0, 0, 0, 0.4);
	}
}

/*------------------
 follow icons
 ------------------*/
.follow__ttl{
	display: block;
	width: calc(63 / var(--vw-min) * 100vw);
	height: calc(10 / var(--vw-min) * 100vw);
	background: url(../img/top/follow_ttl.svg) no-repeat center center / contain;
	margin-right: calc(16 / var(--vw-min) * 100vw);
}
.ic_yt{
	display: block;
	width: calc(72 / var(--vw-min) * 100vw);
	height: calc(16 / var(--vw-min) * 100vw);
	-webkit-mask: url(../img/common/icon/ic_yt.svg) no-repeat center center / contain;
	mask: url(../img/common/icon/ic_yt.svg) no-repeat center center / contain;
	background-color: #000;
}
.ic_x{
	display: block;
	width: calc(16 / var(--vw-min) * 100vw);
	height: calc(16 / var(--vw-min) * 100vw);
	-webkit-mask: url(../img/common/icon/ic_x.svg) no-repeat center center / contain;
	mask: url(../img/common/icon/ic_x.svg) no-repeat center center / contain;
	background-color: #000;
	margin-right: calc(16 / var(--vw-min) * 100vw);
}
@media screen and (max-width:767px){
	.follow__ttl{
		width: calc(108 / var(--vw-min) * 100vw);
		height: calc(20 / var(--vw-min) * 100vw);
		margin-right: calc(24 / var(--vw-min) * 100vw);
	}
	.ic_yt{
		width: calc(144 / var(--vw-min) * 100vw);
		height: calc(32 / var(--vw-min) * 100vw);
	}
	.ic_x{
		width: calc(32 / var(--vw-min) * 100vw);
		height: calc(32 / var(--vw-min) * 100vw);
	}
}

/*------------------
 circleBlock（フッター TO TOP など）
 ------------------*/
.circleBlockWrap{
	display: flex;
	justify-content: center;
	pointer-events: all;
	transition: transform .2s ease;
	padding: min(calc(20 / var(--vw-min) * 100vw),20px);
	filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}
.circleBlock{
	width: min(calc(400 / var(--vw-min) * 100vw),400px);
	height: min(calc(400 / var(--vw-min) * 100vw),400px);
	border-radius: 50%;
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 0.2s ease-in-out;
	animation: clipClose 0.2s ease-in-out forwards;
	position: relative;
}
@keyframes clipClose{
	from{ clip-path: circle(50% at 50% 50%); }
	to{ clip-path: circle(0% at 50% 50%); }
}
.circleBlockWrap:hover{
	transform: scale(1.06);
}
.is-view .circleBlock,
.is-ani .circleBlock{
	clip-path: circle(50% at 50% 50%);
	animation: clipOpen 0.2s ease-in-out forwards;
}
@keyframes clipOpen{
	from{ clip-path: circle(0% at 50% 50%); }
	to{ clip-path: circle(50% at 50% 50%); }
}
.circleBox{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	background-color: #FFF;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.circleBox._logo50th img{
	width: min(calc(200 / var(--vw-min) * 100vw),200px);
	height: auto;
}
.circle__txt{
	display: block;
	width: 0;
	height: 0;
	transform: scale(0);
	transform-origin: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transition: transform 0.2s ease-in-out;
}
.circle__txt span{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/top/history/circle_txt_scroll.svg) no-repeat center center / contain;
	animation: rotate 30s infinite linear;
}
.circle__txt.-totop span{
	-webkit-mask: url(../img/top/history/circle_txt_totop.svg) no-repeat center center / contain;
	mask: url(../img/top/history/circle_txt_totop.svg) no-repeat center center / contain;
	animation: rotate 30s infinite linear reverse;
	background-color: #000;
	background-image: none !important;
}
.in-footer .circle__txt.-totop span{
	background-color: #FFF;
}

.is-view .circle__txt,
.is-ani .circle__txt{
	width: min(calc(440 / var(--vw-min) * 100vw),440px);
	height: min(calc(440 / var(--vw-min) * 100vw),440px);
	border-radius: 50%;
	transform: scale(1);
	transform-origin: center;
}
@keyframes rotate{
	from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}
@media screen and (max-width:767px){
	.circleBlock{
		width: calc(500 / var(--vw-min) * 100vw);
		height: calc(500 / var(--vw-min) * 100vw);
		overflow: hidden;
		transform: scale(0);
		transition: transform 0.2s ease-in-out;
		clip-path: unset;
		animation: unset;
	}
	.is-view .circleBlock,
	.is-ani .circleBlock{
		transform: scale(1);
		clip-path: unset;
		animation: unset;
	}
	.circleBox._logo50th img{
		width: calc(240 / var(--vw-min) * 100vw);
	}
	.is-view .circle__txt,
	.is-ani .circle__txt{
		width: calc(550 / var(--vw-min) * 100vw);
		height: calc(550 / var(--vw-min) * 100vw);
	}
}

/* cursorLink */
@media screen and (min-width:768px){
	.cursorLink{
		transition: all .4s ease;
		cursor: none;
	}
	.cursorLink img{
		transition: all .4s ease;
	}
	.cursorLink:hover img{
		transform: scale(1.04);
	}
}