@charset "utf-8";

:root {
	--windowMinW: none;
	--windowMaxW: 100%;
	--cntInrMaxW: 480px;
	--bigInrMaxW: 100%;

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

	--secSideSpace: max(0px, calc((100vw - var(--secBodyWidth) - (var(--secInrSidePadding) * 2) - (var(--secMinSideSpace) * 2)) / 2));
	--bgBody: url(../images/bg_body_sp.jpg) top center / cover no-repeat;
	/* safariバグ対策 */
	background: var(--bgBody);
	background-color: var(--bgColor);
	/* safariバグで bg-imgは bodyで指定しない */
}

img {
}

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

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

.Gcontainer {
}

.Gmain {
	overflow: hidden;
	top: 30px;
	left: 30px;
}

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

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

.Gnavi {
	padding: 30px 0;
	right: 30px;
}

.Gnavi_inr {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	translate: 0 200%;
	padding: 20vh 10vh 10vh;
	opacity: 0;
	pointer-events: none;
	transition: all 1.5s, translate 0.3s;
}

.Gnavi.is-active .Gnavi_inr {
	translate: 0 0;
	opacity: 1;
	background: var(--bgBody);
	pointer-events: auto;
}

.Gnavi_list {
	text-align: center;
}

.Gnavi_item {
}

.Gnavi_btn {
	margin-left: auto;
}

.Gnavi_ftr {
}

.Gnavi_sns .sns_item {
	width: 6rem;
}

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

.Gftr {
	margin-top: 0;
}

.Gftr_inr {
}

.Gftr_sns {
}

.Gftr_link {
}

.Gnavi_btn {
}

.Gftr_copy {
	margin-top: 40px;
}

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

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

.sec {
	padding-left: var(--secMinSideSpace);
	padding-right: var(--secMinSideSpace);
}

.sec_hdr {
	top: -35px;
	margin-bottom: 35px;
	translate: 0 0;
}

.sec_inr {
	/* width: 80vw; */
	min-width: 0;
	padding: 0 var(--secInrSidePadding) 90px;
}

.sec:nth-child(odd) .sec_inr {
	margin-right: auto;
}

.sec:nth-child(even) .sec_inr {
	margin-left: auto;
}

.sec_ttl {
}

.sec_circle {
	top: -35px;
}

.sec_body {
	width: fit-content;
	max-width: min(78vw, 100%);
	margin-left: auto;
	margin-right: auto;
}

.sec_ftr {
}

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

.btn {
	padding: 0.8em 1.5em;
}

.btn--border {
}

.btn--navi {
	--color: #fff;
	font-size: clamp(20px, 4.6vw, 24px);
}

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

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

.hamburger_wrap {
	position: relative;
	display: flex;
	width: 48px;
	height: 48px;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
	border-radius: 10rem;
	transition: 1s;
}

.is-active .hamburger_wrap {
	border: 0px solid #fff;
}

.is-active .hamburger--navi {
	position: relative;
	z-index: 1000;
	rotate: 45deg;
}

.hamburger--navi,
.hamburger--navi::before,
.hamburger--navi::after {
	width: 25px;
	height: 1px;
	background-color: #fff;
}

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

.is-active .hamburger--navi::before,
.is-active .hamburger--navi::after {
	width: 40px;
	position: absolute;
	top: 0;
	left: -8px;
}

.is-active .hamburger--navi::before {
	rotate: 0deg;
}

.is-active .hamburger--navi::after {
	rotate: 90deg;
}

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

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

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

/* sns_list
===============================
*/

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

.member {
}

.member_pos {
	font-size: clamp(1.4rem, 3.73vw, 1.6rem);
}

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

.member_pos--tieup {
	line-height: 1;
}

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

.member_pos:not(.member_pos--modal) span {
	font-size: 0.65em;
	margin-bottom: 0.5em;
}

.member_subPos {
	margin-top: 0.3em;
	font-size: clamp(1.2rem, 3.75vw, 1.5rem);
}

.member_name {
	font-size: clamp(1.5rem, 4vw, 1.7rem);
}

.member_subName {
	font-size: clamp(1.3rem, 3.75vw, 1.5rem);
}

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

.card {
	justify-content: space-around;
	gap: 0 5%;
}

.card_pos {
	font-size: clamp(1.8rem, 4.8vw, 1.9rem);
}

.card_pos.member_pos--modal {
	font-size: 1.4rem;
}

.card_name {
	margin-top: 1em;
	font-size: clamp(1.8rem, 4.8vw, 2rem);
}

.card_name.member_name--modal {
	font-size: 1.8rem;
}

.card_name--tieup {
	margin-top: 1.4em;
}

/* modal中 */

.card--modal {
	display: block;
}

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

.card--modal:not(.card--credit) .card_pos::after {
	display: none;
}

.card--modal:not(.card--credit) .card_name {
	margin-top: 0.3em;
}

.card_thumb--modal,
.card_details--modal,
.card_texts--modal {
	margin-left: auto;
	margin-right: auto;
}

.card_thumb--modal {
	max-width: none;
}

.card_thumb:not(.card_thumb--modal) {
	width: 50%;
	max-width: 180px;
}

.card_details:not(.card_details--modal) {
	width: 50%;
}

.card--modal .card_details {
	display: flex;
	flex-wrap: wrap;
}

.card_texts--modal {
	font-size: 14px;
}

.card--modal:not(.card--credit) .card_details {
	margin-top: 20px;
}

.card--modal:not(.card--credit) .card_texts {
	margin-top: 25px;
	font-size: 13px;
}

.card_btns {
	margin-top: 1.5rem;
}

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

.modal_inr {
	overflow: hidden;
	width: 90vw;
	max-width: 350px;
	height: 90svh;
	padding: 50px 0;
}

.modal_content {
	max-height: calc(90svh - 100px - 30px);
	margin-top: 0;
	margin-bottom: 0;
}

.modal_target {
	padding: 0 30px 0;
}

.card--modal {
}

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

.caption {
	margin-top: 1em;
	font-size: clamp(10px, 2.6vw, 12px);
}

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

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

.hero {
	display: flex;
	padding: 0;
	border: 30px solid;
	border-image: url(../images/hero_frame.png) 110 / 30px / 0 5px stretch;
}

.hero_inr {
	position: relative;
	display: flex;
	flex-direction: column;
	height: calc(100svh - 50px);
	max-height: 530px;
	margin-top: auto;
	margin-bottom: auto;
}

.hero_hdr {
	top: 10%;
}

.hero_ttl {
	margin: 0 0 min(20vw, 50px);
}

.hero_names {
	position: static;
}

.hero_ttl {
	translate: 0;
}

.hero_main {
	margin-top: 0;
	height: auto;
	max-height: none;
	top: auto;
	translate: -50% -5%;
}

.hero_main::after {
	top: 7px;
}

.hero_mainImg {
	width: 60vw;
	max-width: 260px;
}

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

.credit {
	display: block;
}

.credit_item {
	margin-top: 40px;
}

/* linernotes_texts
===============================
*/

.linernotes_texts {
	max-width: 380px;
	font-size: 1.3rem;
}

.linernotes_text {
}

.linernotes_texts--en {
	font-size: 1.2rem;
}

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

.tieup {
	max-width: 380px;
}

.tieup_row {
	display: block;
	padding-top: 40px;
}

.tieup_details {
	padding-left: 0;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
}

.tieup_ttl {
	font-size: clamp(20px, 6.2vw, 28px);
}

.tieup_subTtl {
	margin-top: 0.3em;
}

.tieup_texts {
	margin-top: 1em;
}

.tieup_ftr {
	margin-top: 40px;
}
.tieup_btn {
	font-size: clamp(1.8rem, 4.8vw, 2rem);
}

.tieup_card {
	width: 100%;
}

.tieup_card:not(:first-child) {
	margin-top: 50px;
}

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

.loading_name {
	--offset: 15rem;
}

.loading_ttl {
	margin-top: -3vh;
	width: 100%;
	max-width: none;
}