/* =====================
 Header
===================== */
.gnav {
	display: none;
}

.hamburger {
	display: flex;
}

/* span は block にしても 幅が0になる。span が inline のままなのでheightが0扱いされる可能性があるため */
.hamburger span {
	height: 3px;
	transform-origin:center;
	width: 100%;
}

.header {
	display: flex;
	justify-content: flex-end;
	background: transparent;
}

.header-inner {
	display: flex;
	justify-content: center;
	height: 60px;
	width: 60px;
	padding: 0;
	background: #fff;
	border: #4804A6 solid 2px;
	border-right: none;
	border-top: none;
}

.header~main {
	padding-top: 0;
}

/* =====================
 Footer
===================== */
.footer {
	font-size: 14px;
}

/* =====================
 MV
===================== */
.mv {
	height: 574px;
	background: url(../img/mv_sp.jpg) bottom / cover no-repeat;
}

/* =====================
 event
===================== */
.event .lead>span:first-child {
	font-size: 18px;
}

.event .lead>span:last-child {
	font-size: 14px;
}

/* =====================
 phantom
===================== */
.phantom {
	padding-bottom: calc(100% * (301 / 371));
	height: 0;
	background: url(../img/bg_phantom_sp.jpg) center / cover no-repeat;
}

.phantom .phantom-ttl {
	padding-top: 1em;
	align-items: flex-start;
}

/* =====================
 overview
===================== */
.overview .info {
	grid-template-columns: 1fr;
}

/* =====================
 story
===================== */
.story p {
	font-size: 16px;
}

/* =====================
 join
===================== */
.join {
	--swiper-theme-color: var(--yellow);
	--swiper-navigation-sides-offset: -50px;
}

.join .join-content {
	height: auto;
}

.join .join-card {
	margin-block: 2em;
}

.join .join-p {
	padding-inline: 2em;
}

.join .callout {
	position: relative;
	width: calc(100% - 60px);
	margin-inline: auto;
	padding: 0;
}

.join .join-info {
	grid-template-columns: 1fr;
}

.join .join-info-bg {
	padding: 1em;
}

/* =====================
 play
===================== */
.play .box>figcaption {
	font-size: 16px;
	line-break: strict;
	word-break: keep-all;
}

.play .play-info {
	grid-template-columns: 1fr;
}

.play .play-info-img {
	display: none;
}

.play .grid {
	gap: var(--gap) 0;
}

.play .play-img>img {
	max-width: 132px;
}

/* =====================
 parts
===================== */
.ttl-pseudo {
	padding-inline: 90px;
}

.ttl-pseudo::before,
.ttl-pseudo::after {
	width: 90px;
	height: 36px;
}

/* section content 囲い */
.callout {
	width: 110vw;
	margin-left: calc(55% - 60vw);
	padding: 2rem;
}