@charset "UTF-8";


/* ==========================================================
   LP Template
   Author :
   Version : 1.0
========================================================== */


/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after{
	box-sizing:border-box;
}

html{
	font-size:62.5%;
	scroll-behavior:smooth;
}

body{
	margin:0;
	padding:0;

	font-family:
		"Noto Sans JP",
		"Hiragino Sans",
		"Yu Gothic",
		sans-serif;

	font-size:1.6rem;
	font-weight:400;
	line-height:1.8;

	color:#231815;
	background:#fff;

	-webkit-text-size-adjust:100%;
	text-rendering:optimizeLegibility;

	overflow-x:hidden;
}

html,
body{
	overscroll-behavior:none;
}

/* SP */
@media (max-width:767px){

	body{
		font-size:1.4rem;
	}

}

img{
	display:block;
	max-width:100%;
	height:auto;
	vertical-align:bottom;
}

picture{
	display:block;
}

a{
	color:inherit;
	text-decoration:none;
	transition:.3s;
}

ul,
ol{
	margin:0;
	padding:0;
	list-style:none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6{
	margin:0;
	padding:0;
	font-weight:inherit;
}

p{
	text-align:justify;
}

h1,
h2{
	font-size:3rem;
}

h3,
h4,
h5,
h6{
	font-size:2.4rem;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

button{
	cursor:pointer;
	border:none;
	background:none;
	font:inherit;
	padding:0;
}

input,
textarea,
select{
	font:inherit;
}

@media (max-width:981px){
h1,
h2{
	font-size:2rem;
}

h3,
h4,
h5,
h6{
	font-size:1.8rem;
}
}

/* ==========================================================
   Common
========================================================== */

:root{

	/* Color */
	--main-color:#A72033;
	--main-black:#231815;

	/* Radius */
	--radius:80px;

	/* Easing */
	--ease:cubic-bezier(.4,0,.2,1);

	/* English Title Size */
	--title-en-height:56px;
}


/* ==========================================================
   Bootstrap Custom Gutter
========================================================== */


/* ---------- Gutter 5 ---------- */

/* XY */
.g-5{
	--bs-gutter-x:5rem;
	--bs-gutter-y:5rem;
}

/* X */
.gx-5{
	--bs-gutter-x:5rem;
}

/* Y */
.gy-5{
	--bs-gutter-y:5rem;
}


/* ---------- Gutter 4.5 ---------- */

.g-45{
	--bs-gutter-x:2.25rem;
	--bs-gutter-y:2.25rem;
}


/* ---------- Gutter 6 ---------- */

/* XY */
.g-6{
	--bs-gutter-x:8rem;
	--bs-gutter-y:8rem;
}

/* X */
.gx-6{
	--bs-gutter-x:8rem;
}

/* Y */
.gy-6{
	--bs-gutter-y:8rem;
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:981px){

	.g-5{
		--bs-gutter-x:3rem;
		--bs-gutter-y:4rem;
	}

	.gx-5{
		--bs-gutter-x:3rem;
	}

	.gy-5{
		--bs-gutter-y:4rem;
	}


	.g-45{
		--bs-gutter-x:2rem;
		--bs-gutter-y:2rem;
	}


	.g-6{
		--bs-gutter-x:4rem;
		--bs-gutter-y:5rem;
	}

	.gx-6{
		--bs-gutter-x:4rem;
	}

	.gy-6{
		--bs-gutter-y:5rem;
	}

}


/* ==========================================================
   SP
========================================================== */

@media (max-width:767.98px){

	.g-5{
		--bs-gutter-x:1.5rem;
		--bs-gutter-y:3rem;
	}

	.gx-5{
		--bs-gutter-x:1.5rem;
	}

	.gy-5{
		--bs-gutter-y:3rem;
	}


	.g-45{
		--bs-gutter-x:1.5rem;
		--bs-gutter-y:1.5rem;
	}


	.g-6{
		--bs-gutter-x:1.5rem;
		--bs-gutter-y:4rem;
	}

	.gx-6{
		--bs-gutter-x:1.5rem;
	}

	.gy-6{
		--bs-gutter-y:4rem;
	}

}



/* ==========================================================
   Responsive Display
========================================================== */

.only-pc,
.pc{
	display:block;
}

.only-sp,
.sp{
	display:none;
}

@media (max-width:767.98px){

	.only-pc,
	.pc{
		display:none;
	}

	.only-sp,
	.sp{
		display:block;
	}

}


/* ==========================================================
   Common Parts
========================================================== */

/* ---------- Background ---------- */

.bg-white{
	background:#fff;
}

.bg-grad{
	background:linear-gradient(
		to bottom right,
		#690216 0%,
		#A21F32 100%
	);
}


/* ---------- Image ---------- */

.img100{
	display:block;
	width:100%;
}

.sangaku-ichinyo{
	display:block;
	width:90%;
	max-width:460px;
}

@media (max-width:981px){
	.sangaku-ichinyo{
margin:auto;
}
}

/* ---------- Text ---------- */

.txt-white{
	color:#fff;
}


/* ---------- Title ---------- */

.title_en{
	display:block;

	width:auto;
	height:var(--title-en-height);

	margin:auto;

	object-fit:contain;
	object-position:center;
}

.title_en2{
	height:calc(var(--title-en-height) * 1.2);
}

.title_jp{
	width:auto;
	height:52px;
	object-fit:contain;
	margin:auto;
	display:block
}

.title_jp2{
	width:90%;
	display:block;
	margin:auto;
	max-width:980px;
}

.main-color{
		color:var(--main-color);
}

.title_01{
	position:relative;

	padding-left:18px;

	font-weight:bold;
	line-height:1.4;

	color:var(--main-color);
}

.title_01::before{
	content:"";

	position:absolute;
	top:50%;
	left:0;

	width:6px;
	height:1.15em;

	background:var(--main-color);

	transform:translateY(-50%);
}

.title_01.txt-white{
	color:#fff;
}

.title_01.txt-white::before{
	background:#fff;
}

.text-large{
	font-size:1.8rem;
}

.text-exlarge{
	font-size:2.1rem;
}

.text-small{
	font-size:1.36rem;
}

@media (max-width:981px){
	.text-large{
	font-size:1.6rem;
}

.text-exlarge{
	font-size:1.7rem;
}
}


@media (max-width:768px){
	.title_jp2{
	max-width:380px;
}

.text-exlarge{
	font-size:1.5rem;
}
}

/* ---------- button ---------- */

.btn_01{
	position:relative;
	display:inline-block;
	padding-left:20px;
	margin-left:0;
	color:#231815;
}

.btn_01.fade{
	transition:
		opacity 1s ease,
		transform 1s ease,
		margin-left .2s ease;
}

.btn_01_white{
	color:#fff;
}


/* ＞ 共通 */
.btn_01::before,
.btn_01::after{
	content:"";
	position:absolute;
	left:12px;
	width:1px;
	height:18px;

	background:#231815;

	transition:.2s;
}


/* 白バージョン */
.btn_01_white::before,
.btn_01_white::after{
	background:#fff;
}
/* 上側 */

.btn_01:hover{
	margin-left:6px;
	transition-duration:0.2s;
}


p.btn_01:hover{
	margin-left:0px;
}
.btn_01::before{
	top:50%;
	transform-origin:bottom center;
	transform:translateY(-100%) rotate(-45deg);
}

/* 下側 */
.btn_01::after{
	top:50%;
	transform-origin:top center;
	transform:rotate(45deg);
}



/* hover */
.btn_01:hover::before{
	transform:
		translateX(5px)
		translateY(-100%)
		rotate(-60deg);
}

.btn_01:hover::after{
	transform:
		translateX(5px)
		rotate(60deg);
}

p.btn_01:hover::before{
	transform:
		translateX(0)
		translateY(-100%)
		rotate(-45deg);
}

p.btn_01:hover::after{
	transform:
		translateX(0)
		rotate(45deg);
}

.related-links{
	display:flex;
	align-items:center;
	gap:40px;
}

@media (max-width:767.98px){

	.related-links{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		gap:14px;
	}

	.related-links .btn_02{
		white-space:normal;
	}

}


.btn_02{
	display:inline-block;
	color:#231815;
	white-space:nowrap;
	position:relative;
}


.btn_02::before{content:"";
   width:0%;
   height:1px;
	background:#231815;
   position:absolute;
   bottom:0px;
  right:0px;
transition-duration:0.3s}


.btn_02:hover::before{
	width:100%;
	left:0;
}

/* ---------- Sticky ---------- */

.sticky-box{
	position:sticky;
	top:200px;
}


/* ==========================================================
   Bootstrap Container Adjustment
========================================================== */

.container{
	max-width:1320px;

	padding-left:80px;
	padding-right:80px;
}

@media (max-width:981px){

	.container{
		max-width:1320px;

		padding-left:60px;
		padding-right:60px;
	}

}

@media (max-width:767.98px){

	.container{
		padding-left:40px;
		padding-right:40px;
	}

	.sticky-box{
		position:static;
		top:auto;
	}

}

@media (max-width:768px){

	.container{
		padding-left:26px;
		padding-right:26px;
	}

}



/* ==========================================================
   Header
========================================================== */

.header{
	position:fixed;
	top:0;
	left:0;
	z-index:99;

	width:100%;
}


/* ==========================================================
   Header Container
========================================================== */

.header-container{
	display:flex;
	align-items:center;
	justify-content:space-between;
		width:100%;

	padding-right:40px;
}


/* ==========================================================
   Header Logo
========================================================== */

.site-title{
	margin:0;
	padding:0;
	font-size:inherit;
	line-height:1;
}

.header-logo{
	display:block;

	width:240px;

	flex-shrink:0;

	filter:drop-shadow(
		0 0 7px rgba(0,0,0,.52)
	);
}


.header-logo-sub{
	position:absolute;
top:30px;
right:40px;
	display:block;

	width:252px;
z-index:99;

}


/* ---------- SVG ---------- */

.header-logo svg,
.header-logo-sub svg{
	display:block;

	width:100%;
	max-width:100%;
	height:auto;
}




/* ==========================================================
   Header Logo Color
========================================================== */

/* ---------- Main Logo ---------- */

.header-logo .st0{
	fill:#A72033;
}

.header-logo .st1{
	fill:#fff;
}


/* ---------- Sub Logo ---------- */

.header-logo-sub svg *{
	fill:#fff;
}


/* ==========================================================
   Header Scroll
========================================================== */

.header.is-scroll .header-logo{
	width:150px;
}

.header.is-scroll .header-logo-sub{
	width:160px;
}


/* ==========================================================
   Header SP
========================================================== */

@media (max-width:1200px){
	
.header.is-scroll .header-logo,.header-logo{
		width:20%;
	}

	.header-logo-sub{
width:21%;
right:40px;
top:2.4vw;
	}

}

@media (max-width:767.98px){

	.header-container{
		padding-right:24px;

	}
	

.header.is-scroll .header-logo,.header-logo{
		width:115px;
	}


	.header-logo-sub{
width:126px;
right:24px;
top:14px;
	}


	.header-logo-sub svg{
		width:100%;
		max-width:100%;
		height:auto;
	}

}


/* ==========================================================
   Main Visual
========================================================== */

.fv{
	position:relative;
	z-index:98;

	width:100%;

	height:min(
		calc(100vw * 1860 / 2881),
		100svh
	);

	overflow:hidden;

	border-bottom-right-radius:var(--radius);
}

/* 下部オーバーレイ */
.fv::before{
	content:"";

	position:absolute;
	left:0;
	right:0;
	bottom:0;

	height:240px;

	background:linear-gradient(
		to bottom,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,.20) 60%,
		rgba(0,0,0,.52) 100%
	);

	z-index:2;
	pointer-events:none;
}


/* SP */
@media (max-width:767.98px){

	.fv::before{
		height:320px;

		background:linear-gradient(
			to bottom,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,.15) 45%,
			rgba(0,0,0,.32) 70%,
			rgba(0,0,0,.58) 100%
		);
	}

}

/* ==========================================================
   FV Image
   iPhone Safariでアドレスバー開閉時に画像倍率が変わらないよう、
   FV本体のサイズに100%で固定する。
========================================================== */

.fv-image{
	position:absolute;
	inset:0;

	display:block;

	width:100%;
	height:100%;
	max-width:none;

	object-fit:cover;
	object-position:center;

	will-change:transform;
}


/* ==========================================================
   FV Copy
   本体側コピー。位置・サイズのみ管理し、アニメーションしない。
========================================================== */

.fv-copy{
	position:absolute;
	top:50%;
	left:50%;
	z-index:10;

	display:block;

	width:76%;
	max-width:1200px;

	transform:translate(-50%, -80%);
}

.fv-copy img{
	display:block;
	width:100%;
	height:auto;
}


/* ==========================================================
   FV Opening
   FVと完全に同じサイズ
========================================================== */
.fv-opening{
	position:absolute;
	top:0;
	left:0;
	z-index:998;

	width:100%;

	height:min(
		calc(100vw * 1860 / 2881),
		100svh
	);

	background:var(--main-color);

	overflow:hidden;

	/* FVとは違ってラディアスなし */
	border-radius:0;

	opacity:1;

	transition:
		opacity .8s ease;
}


/* ==========================================================
   FV Opening Copy
   親は位置だけ固定。Safari対策として、scale / blur / opacity は
   中のimgだけをアニメーションさせる。
========================================================== */

.fv-opening-copy{
	position:absolute;
	top:50%;
	left:50%;
	z-index:999;

	display:block;

	width:76%;
	max-width:1200px;

	transform:translate(-50%, -80%);
}

.fv-opening-copy img{
	display:block;
	width:100%;
	height:auto;

	opacity:0;
	filter:blur(18px);
	transform:scale(1.15);
	transform-origin:center center;

	animation:
		fv-opening-copy-animation
		1s
		cubic-bezier(.22,1,.36,1)
		.1s
		both;

	will-change:transform, filter, opacity;
}


/* ==========================================================
   FV Opening Copy Animation
   位置用translateには触らず、画像だけを演出する。
========================================================== */

@keyframes fv-opening-copy-animation{

	0%{
		opacity:0;
		filter:blur(18px);
		transform:scale(1.15);
	}

	100%{
		opacity:1;
		filter:blur(0);
		transform:scale(1);
	}

}


/* ==========================================================
   FV Opening Leave
========================================================== */

.fv-opening.is-leave{
	opacity:0;
	pointer-events:none;
}


/* ==========================================================
   FV Navigation
========================================================== */

.fv-nav{
	position:absolute;
	right:0;
	bottom:3rem;
	left:0;
	z-index:50;
}

.fv-nav [class*="col"]{
	padding:0;
}


/* ---------- Navigation Link ---------- */

.fv-nav-link{
	position:relative;

	display:flex;
	align-items:center;
	justify-content:center;

	min-height:42px;
	padding:0 10px;

	color:#fff;

	font-size:clamp(15px,1vw,19px);
	line-height:1.4;
	text-align:center;
	text-decoration:none;
}

.fv-nav-link:hover{
	color:#fff;
	opacity:1;
	background:rgba(255,255,255,.15);
}


/* ==========================================================
   FV Navigation - Tablet / PC
========================================================== */

@media (min-width:768px){
	


	.fv-nav .col-md-3 .fv-nav-link::before{
		content:"";

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

		width:1px;
		height:100%;

		background:rgba(255,255,255,.85);
	}

	.fv-nav .col-md-3:last-child .fv-nav-link::after{
		content:"";

		position:absolute;
		top:0;
		right:0;
		bottom:0;

		width:1px;
		height:100%;

		background:rgba(255,255,255,.85);
	}

}


/* ==========================================================
   FV - SP
========================================================== */

@media (max-width:767.98px){

	/* ---------- Main Visual ---------- */

	.fv{
		height:100svh;
		min-height:100svh;
		max-height:100svh;

		border-bottom-right-radius:var(--radius);
	}


	/* ---------- FV Image ---------- */

	.fv-image{
		inset:0;

		width:100%;
		height:100%;

		object-fit:cover;
		object-position:center;
	}


	/* ---------- FV Copy ---------- */

	.fv-copy{
		width:84%;
		transform:translate(-50%, -50%);
	}


	/* ---------- FV Opening ---------- */

	.fv-opening{
		height:100%;
	}

	.fv-opening-copy{
		width:84%;
		transform:translate(-50%, -50%);
	}


	/* ---------- FV Navigation ---------- */

	.fv-nav{
		right:0;
		bottom:40px;
		left:0;

		width:calc(100% - 60px)
	}

	.fv-nav .container{
		padding:0;
	}

	.fv-nav .col-6{
		border-right:1px solid rgba(255,255,255,.25);
		border-bottom:1px solid rgba(255,255,255,.25);
	}

	.fv-nav .col-6:nth-child(2n){
		border-right:none;
	}

	.fv-nav .col-6:nth-last-child(-n+2){
		border-bottom:none;
	}

	.fv-nav-link::before,
	.fv-nav-link::after{
		display:none;
	}

	.fv-nav-link{
		min-height:68px;
		padding:10px 8px;

		font-size:1.4rem;
		line-height:1.4;
	}

}


/* ==========================================================
   FV Scroll
========================================================== */

.fv-scroll-wrapper{
	position:absolute;
	right:0;
	bottom:140px;
	left:0;
	z-index:20;

	display:flex;
	align-items:flex-end;
	justify-content:flex-end;

	max-width:10000px;
}

.fv-scroll{
	position:relative;

	display:flex;
	flex-direction:column;
	align-items:center;

	color:#fff;
	text-decoration:none;

	transform:translate(8px, 0);

	transition:transform .3s ease;
}

.fv-scroll:hover{
	transform:translate(8px, 8px);
}

/* ---------- Scroll Text ---------- */

.fv-scroll-text{
	position:relative;

	display:block;

	padding-top:140px;

	font-size:14px;
	font-weight:300;
	line-height:1;
	letter-spacing:.08em;

	writing-mode:vertical-rl;

	transform:rotate(180deg);
}


/* ---------- Scroll Line ---------- */

.fv-scroll-line{
	position:absolute;
	right:0;
	bottom:8px;
	left:0;

	width:1px;
	height:126px;

	margin:auto;

	background:#fff;
}


/* ---------- Scroll Arrow ---------- */

.fv-scroll-line::before{
	content:"";

	position:absolute;
	right:0;
	bottom:-1px;

	width:1px;
	height:20px;

	background:#fff;

	transform:rotate(-28deg);
	transform-origin:bottom center;
}


/* ---------- Scroll Dot ---------- */

.fv-scroll-line::after{
	content:"";

	position:absolute;
	top:0;
	left:50%;

	width:12px;
	height:12px;

	border-radius:50%;

	background:#fff;

	opacity:0;

	transform:translate(-50%, -50%);

	animation:scroll-dot 2s ease-in-out infinite;
}

@media (max-width:767px){
	.fv-scroll-line{
		height:66px;
}

.fv-scroll-text{
	height:76px;
	padding-top:80px;
}

.fv-scroll-wrapper{
	bottom:46px
}

}


/* ---------- Scroll Dot Animation ---------- */

@keyframes scroll-dot{

	0%{
		top:0;
		opacity:0;
	}

	12%{
		opacity:1;
	}

	75%{
		opacity:1;
	}

	100%{
		top:100%;
		opacity:0;
	}

}


/* ==========================================================
   Sections
========================================================== */

.base_section{
	position:relative;

	margin-top:calc(clamp(80px, 7vw, 100px) * -1);

	padding-top:calc(80px + clamp(80px, 7vw, 100px));
	padding-bottom:80px;

	border-radius:0 0 var(--radius) 0;
}


/* SP */
@media (max-width:767px){

	.base_section{
		margin-top:calc(clamp(70px, 18vw, 80px) * -1);

		padding-top:calc(60px + clamp(70px, 18vw, 80px));
		padding-bottom:60px;
	}

}
/* ---------- Section 01 ---------- */

.section_01{
	z-index:89;

	margin-top:0;

	padding-top:80px;
}


/* ---------- Section 02 ---------- */

.section_02{
	z-index:88;
}

.brand-message-wrapper{
position:relative;
}

.brand-message-wrapper{
	position:relative;
	padding:4.7rem 0 4.2rem 0
}

.brand-message-wrapper::before,
.brand-message-wrapper::after{
	content:"";
	position:absolute;
	left:0;right:0;
	margin:auto;
	width:180px;
	height:3px;
	border-radius:20px;
	background:var(--main-color);
}

.brand-message-wrapper::before{
	top:0;
}

.brand-message-wrapper::after{
	bottom:0;
}

.sonzaiigi{
	width:90%;
	display:block;
	margin:auto;
	max-width:780px;
}



.symbol-title{
	margin-left:-0.5em;
}

.youtube-box iframe{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	object-fit:cover;
}

.brand-mark-box{
	display:flex;
	flex-direction:column;
}


.brand-mark{
	display:block;
	width:68%;
	max-width:240px;
	margin-left:auto;margin-right:auto;
	margin-top:auto;
	margin-bottom:0;
		max-width:340px;
}

/* SP */
@media (max-width:767px){
	.brand-mark{
	display:block;
	width:80%;
	max-width:260px;
margin:auto;
}



.nakamura-image{
	width:76%;
	max-width:360px;
	margin:auto;
}
	
}

/* ==========================================================
   Section Photo
========================================================== */


/* ---------- Z-index ---------- */

.section_03{
	z-index:87;
}

.section_04{
	z-index:86;
}

.section_05{
	z-index:85;
}

.section_06{
	z-index:84;
}

.section_07{
	z-index:83;
}

.section_08{
	z-index:82;
}

.section_09{
	z-index:81;
}

.section_10{
	z-index:80;
}

.section_11{
	z-index:79;
}

.section_12{
	z-index:78;
}

.section_13{
	z-index:77;
}

.section_14{
	z-index:76;
}

.section_15{
	z-index:75;
}

.section_16{
	z-index:74;
}

.section_17{
	z-index:73;
}

.section_18{
	z-index:72;
}

.section_19{
	z-index:71;
}

.section_20{
	z-index:70;
}


/* ---------- Photo Section ---------- */

.section_photo_wrapper{
	width:100%;
	overflow:hidden;

}

.section_photo{
	position:relative;

	width:100%;

	height:calc(
		(100vw * 5 / 8) +
		clamp(80px, 7vw, 100px)
	);

	max-height:calc(
		100svh +
		clamp(80px, 7vw, 100px)
	);

	padding:0;

	overflow:hidden;
}


/* ---------- Photo Image ---------- */

.section_photo img{
	position:absolute;

	top:-10%;
	left:0;

	width:100%;
	height:120%;

	object-fit:cover;

	will-change:transform;
}


/* ==========================================================
   SP
========================================================== */

@media (max-width:767px){

	.section_photo{
		height:calc(
			(100vw * 2 / 3) +
			clamp(70px, 18vw, 80px)
		);

		max-height:calc(
			100svh +
			clamp(70px, 18vw, 80px)
		);
	}


	.section_01{
		padding-top:60px;
	}

}




/* ---------- activities ---------- */

.activity-card{
	position:relative;
		border-radius:0 0 45px 0;
		overflow:hidden;
		aspect-ratio:257/165;
		display:flex;
align-items:center;
justify-content:center;
padding:8% 1rem;
	cursor:pointer;
}

.activity-card::before{content:"";
   width:0%;
   height:100%;
   background-color:rgba(25,25,25,0.2);
   position:absolute;
   bottom:0px;
  right:0px;
   z-index:6;
transition-duration:0.2s}

.activity-card:hover::before{
	width:100%;
	left:0;
}


.activity-card p{
	position:relative;
		z-index:9;
		color:white;
			font-size:clamp(1.4rem, 1.8vw, 1.8rem);
	line-height:1.5;
	text-align:center;
}


.activity-card p span{
	display:block;

	font-size:clamp(1.9rem, 1.8vw, 2.6rem);
	line-height:1.25;

	margin-top:.4em;
}

.activity-card-img{
	position:absolute;
	top:0;
	left:0;
		aspect-ratio:257/165;
	object-fit:cover;
	z-index:-1;
		filter:brightness(.5);
		transition-duration:0.2s
}

.activity-card:hover .activity-card-img{
			transform:scale(1.05)
}


.activity-card-arrow{
	position:absolute;
	bottom:2.5rem;
	right:2.5rem;
	height:9%;
	width:auto;
	object-fit:contain;
	z-index:9;
	transition-duration:0.2s
}

.activity-card:hover .activity-card-arrow{
	transform:translateX(0.8rem)
}

/* ==========================================================
   Footer
========================================================== */

footer{
	padding-top:100px;
	padding-bottom:20px;
}

footer .container{
	position:relative;
	max-width:10000px;
}

.footer-logo{width:80%;
display:block;
margin:auto;
margin-top:90px;
margin-bottom:0px;
max-width:460px}

.footer-copy{
	padding-top:40px;
	text-align:center;
font-size:clamp(12px, 1vw, 13px);
}


.footer{
	position:relative;
}

@media (max-width:981px){
	footer{
	padding-top:70px;
	padding-bottom:40px;
}
}

/* =========================
   PAGE TOP
========================= */

.page-top{
	position:absolute;
	right:70px;
	bottom:0px;

	display:flex;
	flex-direction:column;
	align-items:center;

	text-decoration:none;
	font-weight:300;
	transition-duration:0.2s;
}

.page-top:hover{
	transform:translateY(-8px);
}

.page-top-text{
	margin-top:12px;

	writing-mode:vertical-rl;
	transform:rotate(180deg);
font-size:14px;
	line-height:1;
}
/* 縦線 */
.page-top-line{
	position:relative;
	display:block;

	width:1px;
	height:126px;

	background:var(--main-black);
}


/* 矢印の斜め部分 */
.page-top-line::before{
	content:"";
	position:absolute;

	top:0;
	left:0;

	width:1px;
	height:20px;
	background:var(--main-black);

	transform-origin:top center;
	transform:rotate(28deg);
}

@media (max-width:981px){
	.page-top{
	right:54px;
	bottom:-60px;
		height:120px;}
}

@media (max-width:767px){
	.page-top{
	right:20px;
	bottom:-60px;
		height:120px;}
}


/* =========================
フェードアニメ
========================= */

.fade{
	opacity:0.0;
	transform:translateY(-20px);
	transition:
		opacity 1.0s ease,
		transform 1.0s ease;
}

.fade.scrollin{
	opacity:1;
	transform:translateY(0);
}


.fade2{
	opacity:0;
	transform:translateY(0);

	transition:
		opacity .9s ease;

	transition-delay:.2s;
}


.slide-right{
	opacity:0;
	transform:translateX(12%);

	transition:
		opacity 1400ms ease,
		transform 600ms ease-out;
}

.slide-left{
	opacity:0;
	transform:translateX(-12%);

	transition:
		opacity 1400ms ease,
		transform 600ms ease-out;
}
.kakudai{
	opacity:0;
	transform:scale(0.97);

	transition:
		opacity 900ms ease,
		transform 900ms ease;
}


/* 出現後 */

.slide-right.scrollin2,
.slide-left.scrollin2{
	opacity:1;
	transform:translateX(0);
}

.kakudai.scrollin2{
	opacity:1;
	transform:scale(1);
}


/* =========================
   Extend
   左から右へマスク解除
========================= */

.extend{
	clip-path:inset(0 100% 0 0);

	transition:
		clip-path 1.4s cubic-bezier(.16, 1, .3, 1);
}

.extend.extend-active{
	clip-path:inset(0 0 0 0);
}


/* =========================
   Activity Cards
   ゆっくり上品に表示
========================= */

.activity-pop{
	opacity:0;

	transform:
		translateY(24px)
		scale(.99);

	filter:blur(3px);

	transition:
		opacity 1.5s cubic-bezier(.16,1,.3,1),
		transform 1.6s cubic-bezier(.16,1,.3,1),
		filter 1.4s ease;
}

.activity-pop.is-show{
	opacity:1;

	transform:
		translateY(0)
		scale(1);

	filter:blur(0);
}

/* ==========================================================
   Photo Mask
========================================================== */

.photo-mask{
	opacity:0;

	clip-path:inset(45% 45% 45% 45%);

	will-change:
		clip-path,
		opacity;
}