@charset "utf-8";

/*  ===============================
			ROOT
===============================*/

/* variable
===============================
	--bigInrMaxW -
	--cntInrMaxW - pc時inrのmaxwidth inr
*/

img {
	width: auto;
}

/* 1200px < window */
:root {
	--secBodyWidth: 960px;
	--secInrSidePadding: 100px;
	--secMinSideSpace: 60px;

	/* -- calc -- */
	/* body: min-width の余剰分 */
	--secSideSpace: max(0px, calc((100vw - var(--secBodyWidth) - (var(--secInrSidePadding) * 2) - (var(--secMinSideSpace) * 2)) / 2));
	/* sec_inr の 片側余白 (寄せる側の余白) */
	--secInrSideBigPadding: calc(var(--secInrSidePadding) + var(--secMinSideSpace) + var(--secSideSpace));

	/* body: min-width 960 + 100*2 +60*2  */
	--windowMinW: calc(var(--secBodyWidth) + (var(--secInrSidePadding) * 2) + (var(--secMinSideSpace) * 2));

	/* 1281px以上では none */
	--windowMaxW: none;

	/* .inr の width */
	--cntInrMaxW: 1160px;

	/* .inr--big のwidth */
	--bigInrMaxW: 1260px;

	/* js */
	--documentHeight: ;

	--commonSidePadding: 100px;
	/* --sans-serif: "Noto Sans JP", sans-serif; */
	--serif: "Noto Serif JP", serif;
	--en: "Playfair Display", serif;
	--en_eb: "EB Garamond", serif;

	--fzBody: 16px;
	--letterBody: 1px;
	--documentTextAlign: left;
	--lh: 1.4;

	--primaryColor: #b90078;
	--secondaryColor: #0075d4;
	--lightTextColor: #fff;
	--darkTextColor: #4b4b4b;
	--textColor: var(--primaryColor);

	--bgBody: url(/assets/images/bg_body.jpg) top center / cover no-repeat;
	--bgColor: #ebc6cc;
	font-size: 10px;

	/* safariバグ対策 */
	background: var(--bgBody);
	background-color: var(--bgColor);
}

body {
	font-family: var(--serif);
	color: var(--textColor);

	/* safariバグで bg-imgは bodyで指定しない */

	font-size: var(--fzBody);
	line-height: var(--lh);
	letter-spacing: var(--letterBody);
	text-align: var(--documentTextAlign);
}

body.develope {
	/* display */
	--dvModeDisplay: block;
	--dvModeAlpha: 1;
}

body:not(.develope) {
	/* display */
	--dvModeDisplay: none;
	--dvModeAlpha: 0;
}

html,
body,
.loading {
	max-width: var(--windowMaxW);
	min-width: var(--windowMinW);
}

.Ghdr,
.mv,
.Gmain {
	min-width: var(--windowMinW);
}

.inr {
	max-width: var(--cntInrMaxW);
	margin-left: auto;
	margin-right: auto;
}

/* window < 768px */
@media screen and (max-width: 768px) {
	:root {
		--windowMinW: none;
		--windowMaxW: 100%;
		--cntInrMaxW: 480px;
		--bigInrMaxW: 100%;

		--secBodyWidth: 480px;
		--secInrSidePadding: calc(100vw * (25 / 375));
		--secMinSideSpace: calc(100vw * (38 / 375));

		--secSideSpace: max(0px, calc((100vw - var(--secBodyWidth) - (var(--secInrSidePadding) * 2) - (var(--secMinSideSpace) * 2)) / 2));
	}
}

/* init */

body {
	position: relative;
	overflow-x: hidden;
}

/* fade init */

.sec {
	opacity: var(--dvModeAlpha);
}

.fade.is-show,
.sec.is-show {
	animation: fadeInToTop 1s forwards;
	will-change: opacity, transform, animation;
}

/* develope */
.develope .sec,
.develope .Gmain img,
.develope .Gcontainer img {
	opacity: var(--dvModeAlpha) !important;
}

.develope .Gcontainer:not(.is-active),
.develope .Gmain:not(.is-active),
.develope .Gftr:not(.is-active) {
	display: var(--dvModeDisplay) !important;
}

/*  ===============================
	animation & transition
===============================*/

/* clip-to-bottom
===============================
*/

.clip-to-bottom {
	clip-path: inset(100% 0 0 0);
	transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
}

.mv .clip-to-bottom {
	transition-delay: 0.3s;
}

.mv.is-active .clip-to-bottom,
.sec.is-show .clip-to-bottom {
	clip-path: inset(0);
}

/*  ===============================
			component
===============================
container
header
navi
footer
other
*/

/* Gcontainer , Gmain
===============================
*/

.Gmain {
	overflow: hidden;
}

.Gcontainer {
	overflow: hidden;
}

/* Gheader
===============================
.Ghdr
*/

.Ghdr {
	overflow: hidden;
	opacity: 0;
	transition: 1s;
}

.Ghdr.is-fixed {
	position: fixed;
	display: inline-block;
	width: fit-content;
	top: 45px;
	left: 45px;
	z-index: 100;
}

.Ghdr_inr {
}

.Ghdr_ttl {
	font-family: var(--en);
	color: #fff;
	font-size: 13px;
}

/* Gnavi
===============================
Gnavi
*/

.Gnavi {
	position: fixed;
	z-index: 100;
	overflow: hidden;
	padding: 50px 0;
	top: 0;
	bottom: 0;
	max-height: 100svh;
	right: 45px;
	opacity: 0;
	transition: 1s;
}

.Gnavi_inr {
	height: 100%;
	max-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.Gnavi_list {
	justify-content: flex-end;
	text-align: right;
}

.Gnavi_item {
	padding: 0.2em;
}

.Gnavi_item:not(:first-child) {
	margin-top: 10px;
	font-size: 1.9rem;
	font-family: var(--en);
}

@media screen and (min-width: 769px) {
	.Gnavi_btn {
		z-index: -100;
		opacity: 0;
		visibility: hidden;
	}
}

.Gnavi_btn {
	transition: 0.5s;
	opacity: 1;
	z-index: 100;
}

.Gnavi_ftr {
	margin-top: 80px;
}

@media screen and (min-width: 769px) {
	.Gnavi_sns .sns_list {
		flex-direction: column;
		align-items: flex-end;
	}

	.Gnavi_sns .sns_item:not(:first-child) {
		margin-top: 1em;
	}
}

/* Gfooter
===============================
Gftr
*/

.Gftr {
	margin-top: 130px;
	padding: 36px 20px;
}

.Gftr_inr {
}

.Gftr_sns {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.Gftr_link {
}

.Gftr_copy {
	margin-top: 60px;
	text-align: center;
}

/*  ===============================
		  block , element
===============================*/

/* sec
===============================
.sec
.sec_hdr
.sec_ttl
.sec_body
.sec_ftr
*/

.sec {
	padding: 120px calc(var(--secInrSidePadding) + var(--secSideSpace)) 60px;
}

.sec:nth-child(odd) {
	padding-left: 0;
}

.sec:nth-child(even) {
	padding-right: 0;
}

.sec:nth-child(odd) .sec_inr {
	border-bottom-right-radius: 10rem;
}

.sec:nth-child(even) .sec_inr {
	border-bottom-left-radius: 10rem;
}

@media screen and (min-width: 769px) {
	.sec:nth-child(odd) .sec_inr {
		padding-left: var(--secInrSideBigPadding);
	}

	.sec:nth-child(even) .sec_inr {
		padding-right: var(--secInrSideBigPadding);
		padding-left: var(--secInrSidePadding);
	}
}

.sec_inr {
	min-width: var(--cntInrMaxW);
	max-width: none;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 0 var(--secInrSidePadding) 90px;
	margin-left: 0;
	margin-right: 0;
}

.sec_hdr {
	--x: 45px;
	--y: 45px;

	--translateX: calc(-1 * var(--x) - var(--secMinSideSpace));

	position: relative;
	margin-bottom: calc(90px - var(--y));
	translate: calc(var(--translateX) * var(--d)) calc(-1 * var(--y));
}

.sec:nth-child(odd) .sec_hdr {
	--d: -1;
	text-align: right;
}

.sec:nth-child(even) .sec_hdr {
	--d: 1;
	text-align: left;
}

.sec_ttl {
	position: relative;
	z-index: 2;
}

.sec_circle {
	position: absolute;
	z-index: 1;
	top: calc(var(--y) * -1);
	--translateX: calc(var(--x) * -1);
}

.sec:nth-child(odd) .sec_circle {
	right: var(--translateX);
}

.sec:nth-child(even) .sec_circle {
	left: var(--translateX);
}

.sec_body {
	margin-left: auto;
	margin-right: auto;
}

.sec_body--linernotes {
	max-width: 680px;
}

.sec_body {
}

.sec_ftr {
}

/*  ===============================
		  component
===============================*/

/* btn
===============================
*/

.btn {
	--color: var(--primaryColor);

	display: inline-block;
	padding: 0.5em 1.2em;
	font-family: var(--en);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--lightTextColor);
	background-color: var(--primaryColor);
	border-radius: 10em;
	text-align: center;
	transition: 0.2s;
	cursor: pointer;
}

.btn:hover {
	color: var(--primaryColor);
	font-weight: 600;
	background-color: #fff;
	box-shadow: 0 0 0 1px var(--primaryColor);
}

.btn--border {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.2em;
	background: transparent;
	color: var(--color);
	border: 2px solid var(--color);
}

.btn--navi {
	--color: #fff;
}

.btn--navi:hover {
	background-color: var(--color);
	color: var(--primaryColor);
}

/* label
===============================
*/

/* hamburger
===============================
*/

.hamburger,
.hamburger::before,
.hamburger::after {
	width: 45px;
	height: 1.5px;
	background-color: var(--primaryColor);
	transform: none;
	transition: 0.5s;
}

.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	--offset: 10px;
	left: 0;
}

.hamburger {
	position: relative;
}

.hamburger::before {
	top: calc(var(--offset) * 1);
}
.hamburger::after {
	top: calc(var(--offset) * 2);
}

.is-active .hamburger {
	background-color: transparent;
}

.is-active .hamburger,
.is-active .hamburger::before,
.is-active .hamburger::after {
}
.is-active .hamburger::before,
.is-active .hamburger::after {
	top: var(--offset);
	--rotate: 24deg;
}

.is-active .hamburger::before {
	rotate: calc(var(--rotate) * 1);
}

.is-active .hamburger::after {
	rotate: calc(var(--rotate) * -1);
}

/* marker
===============================
*/

/* texts
===============================
*/

/* notes
===============================
*/

/* notes
===============================
*/

.circle {
	animation: infiniteSpin 10s linear 0s infinite;
}

@keyframes infiniteSpin {
	from {
		rotate: 0deg;
	}
	to {
		rotate: 359deg;
	}
}

/* sns_list
===============================
*/
.sns_list {
	display: flex;
	justify-content: center;
	gap: 10%;
}
.sns_item {
	width: 4.2rem;
	height: 4.2rem;
	padding: 0.2em;
}

.sns_anchor {
	position: relative;
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 1;
}

.sns_anchor::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background-color: #37BEF0; */
	transform: rotate(30deg);
	z-index: 0;
}

@media screen and (min-width: 769px) {
	.sns_anchor:hover {
		opacity: 0.8;
	}
}

.sns_img {
	position: relative;
	z-index: 1;
	fill: #0f0f0f;
	width: auto;
}

.official-link {
	text-align: center;
}

.official-link_anchor {
	color: var(--secondColor);
	font-size: 2.1rem;
	font-weight: 400;
	font-family: var(--en);
	font-weight: 600;
	text-decoration: none;
}

/* member
===============================
*/

.member {
}

.member_item {
	font-size: 1.3rem;
}

.member_item--flex {
	display: flex;
	align-items: flex-end;
}

.member_pos {
	position: relative;
	font-size: 1.8rem;
	color: var(--secondaryColor);
}

.member_pos--card {
	font-size: 2.9rem;
}

.member_pos::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 1px;
	background-color: var(--secondaryColor);
	left: 0;
	bottom: calc(-3px - 0.75em);
}

.member_pos--modal::after {
	bottom: calc(-3px - 0.75em);
}

.member_pos--tieup::after {
	bottom: calc(-3px - 1.75em);
}

.member_subPos {
	color: var(--secondaryColor);
	font-size: 1.5rem;
}

.member_subPos--flex {
	margin-left: 0.8em;
}

.member_name {
	margin-top: 1.5em;
	font-size: 2.1rem;
	font-weight: 500;
}

.member_subName {
	margin-top: 0.3em;
	font-size: 1.5rem;
	font-weight: 300;
}

.member_subName--flex {
	margin-left: 0.8em;
}

.member_name--card {
	font-size: 2.4rem;
}

.member_btns {
	margin-top: 3rem;
}

.member_btn {
}

/* card
===============================
*/

.card {
	display: flex;
	gap: 0 30px;
}

.card--credit {
	align-items: center;
}

.card_thumb {
	max-width: 190px;
}

.card_thumb--credit img {
	border-radius: 10em;
}

@media screen and (min-width: 769px) {
	.card_thumb--modal {
		max-width: 271px;
	}
}

.card_btns {
	margin-top: 50px;
}

.card_btns--tieup {
	margin-top: 30px;
}

.card_texts p:not(:first-child) {
	margin-top: 0.8em;
}

/* modal内 */

.card--modal {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto 2fr;
	gap: 20px 50px;
	grid-template-areas:
		"thumb details"
		"thumb texts";
}

.card_thumb--modal {
	grid-area: thumb;
}

.card_details--modal {
	grid-area: details;
}

.card_texts--modal {
	grid-area: texts;
	color: #4b4b4b;
}

/* modal
===============================
*/

.modal_inr {
	max-width: 960px;
	min-height: 80svh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	border-radius: 30px;
	background: url(../images/bg_modal_inr.jpg) center / cover no-repeat;
}

.modal_content {
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.modal_wrap:not(.is-active) .modal_close {
	z-index: -100;
	visibility: hidden;
	opacity: 0;
}

.modal_close {
	position: absolute;
	height: 22px;
	right: 20px;
	top: 20px;
	opacity: 1;
	transition: 0.5s;
	z-index: 100;
}

/* caption
===============================
*/

.caption {
	margin-top: 1em;
	font-size: 1.2rem;
	color: #4b4b4b;
	white-space: nowrap;
}

/*  ===============================
		  project
===============================*/

/* hero
===============================
*/

.hero {
	position: relative;
	overflow: hidden;
	padding: 30px;
	height: 100svh;
	border: 50px solid;
	border-image: url(../images/hero_frame.png) 110 / 50px / 0 5px stretch;
}

.hero_inr {
	max-width: none;
	width: 100%;
	height: calc(100svh - 120px);
}

.hero_hdr {
	position: relative;
	width: fit-content;
	top: 5%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	z-index: 1;
}

.hero_ttl {
	opacity: 0;
}

.hero_names {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: -200px;
	bottom: 30px;
}

.hero_circle {
	position: absolute;
}

.hero_circle .circle {
	max-width: none;
}

.hero_main {
	/* margin-top: -8vh; */
	text-align: center;

	position: absolute;
	height: 100%;

	margin: auto;
	top: 92%;
	left: 50%;
	bottom: 0;

	max-height: 65vh;

	translate: -50% -50%;

	opacity: 0;
}

.hero_main::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/hero_frame_border.png) center / contain no-repeat;
}

.hero_mainImg {
	position: relative;
	max-height: 100%;
	padding: 20px 10px 10px;
}

/* credit
===============================
*/

.credit {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.credit_col {
	width: fit-content;
}
.credit_col--big {
}

.credit_list {
}
.credit_item {
}

.credit_item:not(:first-child) {
	margin-top: 45px;
}

/* linernotes
===============================
*/

.linernotes {
}

.linernotes_texts {
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 2;
}
.linernotes_texts--en {
	font-size: 13px;
}

.linernotes_texts:not(:first-child) {
	margin-top: 60px;
}

.linernotes_ftr {
	position: relative;
	display: flex;
	align-items: center;
	width: fit-content;
	margin-top: 50px;
	margin-left: auto;
	text-align: right;
	font-weight: 400;
	z-index: 0;
}

.linernotes_ftr::before {
	content: "";
	position: relative;
	display: block;
	width: 30px;
	height: 1px;
	margin-right: 8px;
	background-color: var(--primaryColor);
}

/* tieup
===============================
*/

.tieup_row {
	display: flex;
	padding: 60px 0 40px;
}

.tieup_row:not(:first-child) {
	padding-bottom: 0;
	border-top: 1.5px solid #fff;
}

.tieup_row:not(:last-child) {
	padding-top: 0;
}

.tieup_card {
	width: 45%;
}

.tieup_details {
	padding-left: 65px;
}

.tieup_ttl {
	font-size: 3.3rem;
	font-weight: 700;
}

.tieup_subTtl {
	margin-top: 1em;
	font-size: 2rem;
	font-weight: 500;
}

.tieup_texts {
	margin-top: 40px;
	line-height: 2;
	font-size: 15px;
	font-weight: 600;
}

.tieup_ftr {
	margin-top: 85px;
}

.tieup_btn img {
	margin-left: 1em;
}

/* loading
===============================
*/

.loading {
	position: fixed;
	/* background: url(../images/bg_loading.jpg) center / cover no-repeat; */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.loading_body {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100svh;
}

.loading_name {
	--offset: 10rem;

	margin-top: calc(-1 * var(--offset));
	margin-bottom: var(--offset);
	opacity: 0;
	transition: 1s;
}

.loading_ttls {
	position: relative;
}

.loading_ttl {
	position: relative;
	top: 2rem;

	transition: 2s ease-in-out;
	z-index: 10;
}

.loading_circle {
	position: absolute;
	display: inline-block;
	width: fit-content;
	height: fit-content;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	z-index: 1;
}

.loading_control {
	position: fixed;
	top: 2rem;
	right: 2rem;
	z-index: 10;
}

.cliptoRight {
	/* transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1); */
	clip-path: inset(0 100% 0 0);
	transition-property: clip-path;
	animation: cliptoRight 2.2s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

/* 
===============================
*/

/* 
===============================
*/