@charset "utf-8";

/* ヘッダー --------------------------------------------------------------------------------------*/
.header {
	background-color: transparent;
	position: fixed;
	/*transition: background-color 0.2s linear;*/
}
.header p,
.header h1 { position: relative; }
.header p::after,
.header h1::after {
	background-color: var(--color-white);
	content: "";
	mask-image: url("../images/header_logo.svg");
	mask-repeat: no-repeat;
	mask-size: auto 37px;/*auto 29px;*/
	height: 37px;/*29px;*/
	position: absolute;
	top: 0;
	left: 0;
	width: 139px;/*90px;*/
}
.header img { opacity: 0; }

.header.act,
.header.active { background-color: var(--color-header); }
.header.act p::after,
.header.act h1::after,
.header.active p::after,
.header.active h1::after { content: none; }
.header.act img,
.header.active img { opacity: 1; }
/*-----------------------------------------------------------------------------------------------*/


/* ナビ -----------------------------------------------------------------------------------------*/
.nav::before,
.nav::after { background-color: var(--color-white); }
.nav.active::before,
.nav.active::after,
.nav.actived::before,
.nav.actived::after { background-color: var(--color-black); }
.nav.reverse::before,
.nav.reverse::after { background-color: var(--color-white) !important; }

.nav.act::before,
.nav.act::after { background-color: var(--color-black); }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* TOP ------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main { padding-bottom: 0; }

.main .bottomimage { margin-top: var(--margin-ll); }
#sb_instagram .sbi_photo_wrap { overflow: hidden; }


/* メイン画像 -----------------------------------------------------------------------------------*/
.main .midashi {
	padding-top: 0;
	position: relative;
}

.main .mainimage {
	aspect-ratio: 2 / 3;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.main .mainimage li {
	opacity: 0;
	position: absolute;
	inset: 0;
	transition: opacity 2s ease-out;
}
.main .mainimage li.active { opacity: 1; }
.main .mainimage li img {
	backface-visibility: hidden;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	transform: translateZ(0) scale(1.25);
	width: 100%;
	max-width: none;
	will-change: transform;
}
.main .mainimage li.active img { animation: zoomout 8s linear forwards; }
@keyframes zoomout {
	from { transform: scale(1.25); }
	to { transform: scale(1); }
}

/* scroll */
.main .midashi::after {
	color: var(--color-white);
	content: "scroll";
	font-size: var(--font-s);
	letter-spacing: 0.05em;
	position: absolute;
	bottom: 70px;
	left: 0;
	text-align: center;
	width: 100%;
	z-index: 200;
}
.main .midashi .scroll,
.main .midashi .scroll::before {
	content: "";
	height: 60px;
	position: absolute;
	bottom: 0;
	width: 1px;
	z-index: 201;
}
.main .midashi .scroll {
	background-color: rgba(255, 255, 255, 0.4);
	overflow: hidden;
	left: 50%;
	transform: translateX(-50%);
}
.main .midashi .scroll::before {
	animation: bar 2s linear infinite;
	background-color: var(--color-white);
	left: 0;
}
@keyframes bar {
	0% { transform: scaleY(1); transform-origin: bottom; }
	50% { transform: scaleY(0); transform-origin: bottom; opacity: 1; }
	50.001% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
	50.002% { transform: scaleY(0); opacity: 1; transform-origin: top; }
	100% { transform: scaleY(1); transform-origin: top; }
}


/* リード ---------------------------------------------------------------------------------------*/
.main .reads { padding-top: var(--margin-l); }
.main .reads .wrapper {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-s);
}
.main .reads .read {
	font-size: var(--font-ll);
	line-height: var(--line-m);
}
.main .reads .en {
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	margin-top: var(--margin-s);
}
.main .comment { margin-top: var(--margin-ms); }
.main .comment p:not(:first-of-type) { margin-top: 1em; }


/* 画像 -----------------------------------------------------------------------------------------*/
.main .images { margin-top: var(--margin-ll); }
.main .images li {
	background-color: var(--color-black);
	overflow: hidden;
	position: relative;
}
.main .images li img {
	/*opacity: 0;*/
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.2s ease-out;
	max-width: none;
	width: 120%;
}
.main .images li:nth-child(1) {
	aspect-ratio: 1280 / 729;
	margin-right: auto;
	width: 73%;
	z-index: 2;
}
.main .images li:nth-child(2) {
	aspect-ratio: 1280 / 853;
	margin-top: -4vw;
	margin-left: auto;
	width: 56%;
	z-index: 1;
}
.main .images li:nth-child(3) {
	aspect-ratio: 929 / 1280;
	margin-top: -24vw;
	margin-right: auto;
	width: 36%;
}
.main .images li:nth-child(4) {
	aspect-ratio: 1280 / 729;
	margin-top: -12vw;
	margin-left: auto;
	width: 73%;
}


/* SNS ------------------------------------------------------------------------------------------*/
/*.
main .instax {
	margin-top: var(--margin-ll);
	padding-top: 0;
}
.main .instax .wrapper {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-m);
	text-align: center;
}

.main .instax h2 { font-size: var(--font-m); }

.main .instax .site { margin-top: var(--margin-ss); }
.main .instax .site a {
	font-size: var(--font-ss);
	padding-left: 20px;
	position: relative;
}
.main .instax .x .site a::before,
.main .instax .instagram .site a::before {
	background-color: var(--color-black);
	-webkit-mask-size: auto 16px;
	mask-size: auto 16px;
	content: "";
	height: 16px;
	position: absolute;
	top: 1px;
	left: 0;
	width: 16px;
}
	.mac .main .instax .x .site a::before, .mac .main .instax .instagram .site a::before,
	.ipad .main .instax .x .site a::before, .ipad .main .instax .instagram .site a::before,
	.iphone .main .instax .x .site a::before, .iphone .main .instax .instagram .site a::before { top: -2px; }
.main .instax .x .site a::before {
	-webkit-mask-image: url("../images/logo_x.svg");
	mask-image: url("../images/logo_x.svg");
}
.main .instax .instagram .site a::before {
	-webkit-mask-image: url("../images/logo_instagram.svg");
	mask-image: url("../images/logo_instagram.svg");
}

.main .instax .wrapper > div > div { margin-top: var(--margin-ss); }
*/
.main .snsx .wrapper {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-m);
}
.main .snsx .go {
	font-family: var(--family-go);
	font-weight: var(--weight-b);
}
.main .snsx .x a { text-decoration: underline; }

.main .snsx .x {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-s);
	font-size: var(--font-m);
	line-height: var(--line-s);
}
.main .snsx .xlogo {background-color:#f00;
	background: url("../images/logo_x.svg") left center no-repeat;
	background-size: 30px auto;
	padding-left: 50px;
}


/* ボトム画像 -----------------------------------------------------------------------------------*/
/*.main .bottomimage {
	aspect-ratio: 64 / 63;
	overflow: hidden;
	position: relative;
}
.main .bottomimage img {
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}*/
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
}



@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* TOP ------------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メイン画像 -----------------------------------------------------------------------------------*/
	.main .mainimage { aspect-ratio: 240 / 127; }
	/* リード ---------------------------------------------------------------------------------------*/
	.main .reads .wrapper {
		flex-direction: row;
		column-gap: var(--margin-s);
	}
	.main .reads .text { flex: 1; }
	.main .reads .image { width: 43%; }
	/* SNS ------------------------------------------------------------------------------------------*/
	/*
	.main .instax .wrapper {
		flex-direction: row;
		column-gap: var(--margin-s);
		text-align: left;
	}
	.main .instax .wrapper > div { width: calc((100% - var(--margin-s)) / 2); }
	*/
	.main .snsx .wrapper {
		flex-direction: row;
		align-items: center;
		column-gap: var(--margin-m);
	}
	.main .snsx .post { flex: 1; }
	.main .snsx .x { width: 40%; }
	/* ボトム画像 -----------------------------------------------------------------------------------*/
	/*.main .bottomimage { aspect-ratio: 1920 / 630; }*/
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/* グローバル -----------------------------------------------------------------------------------*/
	.global .menu a,
	.global .lang a,
	.global .lang span,
	.global .lang li:not(:last-child)::after { color: var(--color-white); }
	.global .lang span::after,
	.global .menu > li:hover::after { background-color: var(--color-white); }
	.global .menu ul a { color: var(--color-black); }

	.global.act .menu a,
	.global.act .lang a,
	.global.act .lang span,
	.global.act .lang li:not(:last-child)::after { color: var(--color-black); }
	.global.act .lang span::after { background-color: var(--color-black); }
	.global.act .menu > li:hover::after { background-color: var(--color-main); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* TOP ------------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* リード ---------------------------------------------------------------------------------------*/
	.main .reads .wrapper {
		align-items: center;
		column-gap: var(--margin-m);
	}
	/* SNS ------------------------------------------------------------------------------------------*/
	.main .instax .wrapper { column-gap: var(--margin-m); }
	.main .instax .wrapper > div { width: calc((100% - var(--margin-m)) / 2); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* TOP ------------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* リード ---------------------------------------------------------------------------------------*/
	.main .reads { padding-top: var(--margin-ll); }
	.main .reads .wrapper { column-gap: var(--margin-l); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1366px) {
}