@charset "utf-8";

/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
*, *:after, *:before { box-sizing: border-box; margin: 0; padding: 0}
body, html {padding: 0; margin: 0;}
button {all: unset;display: revert;}
ol, ul { list-style: none;}
i {font-style: normal;}
img { max-width: 100%; height: auto; vertical-align: top; margin: 0 auto;}
table { border-collapse: collapse;}
textarea { white-space: revert;}

h1,h2,h3,h4 {
	margin: 0;
}
:root {
	/* color */
	--black: #000; 
	--white: #fff; 
	--gray: #bcbcbc;
	--btn-color: #943c3b;
	--bgBlack: #262626; 
	
	/* width */
	--maxWidth: 1440px;
	--contentsWidth: 960px;
	--spBreak: 768px;
	
	/* headerHeight */
	--headerHeight: 80px;
}

/* ブレイクポイントメモ */
/*
1080px → 全体のカラム落とし
768px → スマホ切り替え

*/


 
/* -------------------------------
	大枠（共通部分）
 ------------------------------- */
html {
	scroll-behavior: smooth;
}
body {
	position: relative;
	font-family: 'Inter', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size: 13px;
	color: var(--black);
	line-height: 1.6;
	letter-spacing: 0.1em;
	font-feature-settings: "palt" 1;
	background: var(--black);
}
	@media (max-width: 768px) {
	body {
		font-size: 11px;
	}
}
#wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
}
@media (max-width: 768px) {
	#wrapper.fixed {
		overflow: hidden;
		/*height: 100vh;*/
		touch-action: none;
	}
	#wrapper.fixed::after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		z-index: 10;
	}
}

#main {
	background: var(--white);
	margin-top: var(--headerHeight);
	padding-bottom: 80px;
}
@media (max-width: 768px) {
	#main {
		padding-bottom: 20px;
	}
}

#main > div {
	width: 100%;
	text-align: center;
	max-width: var(--contentsWidth);
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 1080px) {
	#main > div {
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media (max-width: 768px) {
	#main > div {
		padding-bottom: 40px;
	}	
}

/* -------------------------------
	ヘッダー/フッダー
 ------------------------------- */
 
#header {
	position: relative;
	position: fixed;
	width: 100%;
	background: var(--black);
	color: var(--white);
	z-index: 99;
}

#header .inner {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	max-width: var(--maxWidth);
	height: var(--headerHeight);
    margin: 0 auto;
    padding: 0 50px;
}
@media (max-width: 1080px) {
	#header .inner {
		padding: 0 20px;
	}
}
@media (max-width: 980px) {
	#header .inner {
		padding: 0 20px;
	}
}
@media (max-width: 768px) {
	#header .inner {
		
	}
}

#header .logo {
	text-indent: 130%;white-space: nowrap;overflow: hidden; /*テキスト非表示用 */
	width: 137px;
	height: 56px;
	background: url("../img/logo_marines.svg") no-repeat 50% 50%;
	background-size: contain;
	z-index: 100;
}


#headerNav {
	position: relative;
}
@media (max-width: 980px) {
	#headerNav {
		display: none;
		width: 100%;
		position: fixed;
	    top: var(--headerHeight);
	    left: 0;
	    z-index: 100;
	}
}
#headerNav.active {
	display: block;
}

#headerNav ul {
	display: flex;
	transition: .2s ease-in-out;
	justify-content: space-between;
}
@media (max-width: 980px) {
	#headerNav ul {
		display: block;
		border-top: 1px solid var(--white);
	}
}

#headerNav li a {
	position: relative;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--white);
	padding: 20px 0 20px 50px;
	white-space: nowrap;
}
@media (max-width: 1310px) {
	#headerNav li a {
		padding-left: 2.5vw;
	}
}
@media (max-width: 980px) {
	#headerNav li a {
		border-bottom: 1px solid var(--white);
		background: rgba(0,0,0,.5);
	}
	#headerNav li a:hover {
		background: #444;
	}
}

#menuTrigger {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	width: 80px;
	height: 80px;
	z-index: 100;
	cursor: pointer;
	float: right;
}
@media (max-width: 980px) {
	#menuTrigger {
		display: block;
	}
}


#menuTrigger i {
	display: block;
	/* text-indent: 130%;white-space: nowrap;overflow: hidden; テキスト非表示用 */
	text-align: center;
	font-family: solano-gothic-pro-mvb, sans-serif;
	padding-top: 43px;
	font-size: 12px;
}
#menuTrigger:before,
#menuTrigger:after,
#menuTrigger i:before {
	position: absolute;
	display: block;
	content: "";
    width: calc(100% - (16px * 2));
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 3px;
    background: var(--white);
    transition: .2s ease-in-out;
}
#menuTrigger:before {
	top: -40px;
}
#menuTrigger:after {
	bottom: -12px;
}
#menuTrigger i:before {
	top: -14px;
}

#menuTrigger:hover:before {
	top: -44px;
}
#menuTrigger:hover:after {
	bottom: -16px;
}
#menuTrigger.active i:before {
	display: none;
}
#menuTrigger.active:before {
	top: -10px;
	transform: rotate(45deg);	
}
#menuTrigger.active:after {
	bottom: 10px;
	transform: rotate(-45deg);
}



#footer {
	position: relative;
	text-align: center;
	padding: 35px 15px 20px;
	background: var(--black);
	color: var(--white);
	z-index: 1;
}
@media (max-width: 768px) {
	#footer {
		padding-left: 0;
		padding-right: 0;
		margin-top: 0;
	}
}

#footer .footerLogo a {
	max-width: 140px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	#footer .footerLogo a {
		max-width: 86px;
	}
}
#footer .copyright {
	margin-top: 30px;
}
#footer .copyright small {
	font-size: 10px;
}
@media (max-width: 768px) {
	#footer .copyright small {
		font-size: 8px;
		letter-spacing: -0.03em;
	}
}




/* -------------------------------
	大枠
 ------------------------------- */
section {
	padding-top: 120px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
}
section {
	@media (max-width: 768px) {
		padding-top: 90px;
	}
}

section#topImage {
	padding-top: 0;
}



/* -------------------------------
	見出し
 ------------------------------- */
.head {
	color: var(--white);
	text-align: center;
	width: 120px;
	height: 120px;
	font-size: 16px;
	font-weight: normal;
    line-height: 1.2;
    margin: 0 auto 50px;
    background: var(--black);
    display: flex;
    justify-content: center;
	align-items: center;
}
@media (max-width: 768px) {
	.head {
		width: 80px;
		height: 80px;
	    font-size: 12px;
	    margin-bottom: 40px;
	}
}
.head i {
	font-size: 13px;
}
@media (max-width: 768px) {
	.head i {
		font-size: 10px;
	}
}

.subHead {
	font-family: solano-gothic-pro-mvb, sans-serif;
	color: #b5b5b5;
	font-size: 120px;
	font-weight: normal;
	letter-spacing: 0.02em;
	line-height: 1;
	margin-bottom: 7px;
}
@media (max-width: 768px) {
	.subHead {
		font-size: 70px;
	}
}

.ttl {
	font-size: 26px;
	letter-spacing: 0.075em;
	line-height: 1.35;
	margin-bottom: 10px;
}
@media (max-width: 768px) {
	.ttl {
		font-size: 19px;
	}
}





/* -------------------------------
	リンク
 ------------------------------- */
a {
	display: block;
	color: var(--white);
	cursor: pointer;
	outline: none;
	background-color: transparent;
	border: 0;
	overflow: hidden;
	text-decoration: none;
	transition: .2s ease-in-out;
}
q:after,a:before {
	transition: .2s ease-in-out;
}
a img {
	transition: .2s ease-in-out;
}
a:link		{ color: var(--black); }
a:visited	{ color: var(--black); }
a:hover	{
	color: var(--black);
	text-decoration: none;
	opacity: .7;
}
a:active	{ color: var(--white); }

a.link {
	display: inline;
}
* + .btn {
	margin-top: 20px;
}
.btn {
	text-align: center;
}

.btn a {
	position: relative;
	display: inline-block;
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	font-weight: 500;
	width: 100%;
	text-align: center;
	padding: 10px 45px 10px 45px;
	max-width: 270px;
}
@media (max-width: 768px) {
	.btn a {
		font-size: 12px;
		padding: 5px 35px 5px 20px;
	}
}

.btn a::after {
    position: absolute;
    content: "";
    top: 0;
    right: 20px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    transition: .2s ease-in-out;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
    transform: rotate(45deg);
}

@media (max-width: 768px) {
.btn a::after {
		right: 15px;
		width: 8px;
		height: 8px;
	}
}

.btn.btn_marinesTicket,
.btn.btn_Team26 {
	margin: 5px 15px 0;
}
.btn.btn_marinesTicket a,
.btn.btn_Team26 a {
	background: var(--btn-color);
	color: var(--white);
	font-size: 20px;
	padding: 26px 20px 26px 175px;
    max-width: 380px;
    line-height: 1.2;
    border-radius: 7px;
    margin: 0 auto;
}
@media (max-width: 768px) {
	.btn.btn_marinesTicket a,
	.btn.btn_Team26 a {
	    padding: 55px 20px 7px 20px;
	    font-size: 11px;
    }
}
@media (max-width: 768px) {
	.btn.btn_marinesTicket a br,
	.btn.btn_Team26 a br {
	    display: none;
    }
}

.btn.btn_marinesTicket a::after,
.btn.btn_Team26 a::After {
	border-color: var(--white);
}
.btn.btn_marinesTicket a::before,
.btn.btn_Team26 a::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	left: 20px;
	margin: auto;
	width: 158px;
	background: url("../img/icon_marinesTicket01.png") no-repeat 50% 50%;
	background-size: contain;
}
@media (max-width: 768px) {
	.btn.btn_marinesTicket a::before,
	.btn.btn_Team26 a::before {
		top: -2px;
	    left: 0;
	    right: 0;
	    bottom: 17px;
	    width: 112px;
    }
}


.btn.btn_Team26 a {
	background: var(--white);
	color: var(--black);
	border: 3px solid var(--black);
}
.btn.btn_Team26 a::After {
	border-color: var(--black);
}
.btn.btn_Team26 a::before {
	background-image: url("../img/icon_team26.png");
}

a.link {
	position: relative;
	display: inline-block;
	color: #1d3994;
	padding-right: 20px;
}
a.link:hover {
	text-decoration: underline;
}
a.link::after {
    position: absolute;
    content: "";
    top: 0;
    right: 10px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    transition: .2s ease-in-out;
    width: 7px;
    height: 7px;
    border-top: 2px solid #1d3994;
    border-right: 2px solid #1d3994;
    transform: rotate(45deg);
}
a.link:hover::after {
	right: 5px;
}


.btn_float_mticket {
	position: fixed;
    bottom: 3%;
    height: 120px;
    width: 120px;
    right: 5%;
    transition: .2s ease-in-out;
    z-index: 10;
}
@media (max-width: 1000px) {
	.btn_float_mticket {
		right: 5px;
		bottom: -10px;
	}
}
.btn_float_mticket .btn.btn_marinesTicket a {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	font-size: 11px;
	padding: 30px 0 0 0;
    line-height: 1.3;
    margin: 0 auto;
    box-shadow: 8px 13px 18px rgba(0,0,0, 0.5);
}
@media (max-width: 768px) {
	.btn_float_mticket .btn.btn_marinesTicket a {
		width: 96px;
		height: 96px;
		font-size: 9px;
		padding-top: 23px;
	}
}
@media (max-width: 768px) {
	.btn_float_mticket .btn.btn_marinesTicket a br {
		display: block;
	}
}

.btn_float_mticket .btn.btn_marinesTicket a::after {
	display: none;
}
.btn_float_mticket .btn.btn_marinesTicket a::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: -37px;
	left: 0;
	right: 0;
	margin: auto;
	width: 85px;
	background: url("../img/icon_marinesTicket01.png") no-repeat 50% 50%;
	background-size: contain;
}
@media (max-width: 768px) {
	.btn_float_mticket .btn.btn_marinesTicket a::before {
		bottom: -28px;
		width: 65px;
	}
}



.indent li {
	text-align: left;
	padding-left:1em;
	text-indent:-1em;
}

.numberList {
	text-align: left;
}
.numberList > li {
	position: relative;
	counter-increment: count;
	list-style-type: none;
	text-align: left;
	padding-left: 1.6em;
}
.numberList > li::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.2em;
	display: marker;
	content: counter(count) ".";
	text-align: center;
	line-height: 1;
}



.pageTop {
	position: absolute;
	right: 250px;
	top: -1px;
	z-index: 100;
	border: 1px solid var(--white);
}
@media (max-width: 768px) {
	.pageTop {
		display: none;
		/*
		right: 10px;
		bottom: 80px;
		*/
	}
}
.pageTop a img {
	opacity: 0.6;
}
@media (max-width: 768px) {
	.pageTop {
		width: 35px;
		height: 35px;
	}
}

/* -------------------------------
	KV
 ------------------------------- */
#topImage {
	margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--black);
}
@media (min-width: 1440px) {
	#topImage img {
		max-width: 2000px;
	    width: 100%;
	}
}



/* -------------------------------
	HOWTO
 ------------------------------- */
#howto {
	 
}
@media (max-width: 980px) {
	#howto {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

.howto_top {
	position: relative;
	margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


.howto_top div {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: var(--contentsWidth);
	color: var(--white);
	z-index: 1;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 20px;
}

@media (max-width: 980px) {
	.howto_top div {
		padding: 10px;
		padding-right: 10px;
	}
}

.howto_ticket {
	position: relative;
	background: #e4e4e4;
	width: 68%;
	height: 470px;
	text-align: left;
	padding: 80px;
}
@media (max-width: 980px) {
	.howto_ticket {
		width: 60%;
		height: 446px;
		padding: 30px 40px;
	}	
}


.howto_ticket .subHead {
	color: var(--white);
}

.howto_ticket div {
	white-space: nowrap;
}

.howto_ticket div::after {
	position: absolute;
	content: "";
	width: 334px;
	height: 334px;
	background: #b5b5b5;
	top: 390px;
    right: -130px;
}
@media (max-width: 768px) {
	.howto_ticket div::after {
		width: 160px;
		height: 200px;
		right: 0px;
	}
}

.howto_ticket figure {
	position: absolute;
    width: 540px;
    top: 110px;
    left: 100%;
    margin-left: -120px;
    margin-left: -18.8%;
}
@media (max-width: 768px) {
	.howto_ticket figure {
		width: 330px;
		top: 227px;
	}
}
@media (max-width: 500px) {
	.howto_ticket figure {
		left: 70%;
	}
}
.howto_ticket p {
	position: relative;
	z-index: 1;
}


.howto_greatdeal {
	position: relative;
	margin-top: 40px;
	
} 
.howto_greatdeal .subHead {
	text-align: left;
	color: #e4e4e4;
	margin-bottom: -0.11em;
}

.howto_greatdeal figure {
	position: relative;
	width: 880px;
	width: 100%;
	text-align: left;
	left: -240px;
	z-index: 2;
}
@media (max-width: 980px) {
	.howto_greatdeal figure {
		left: -20%;
	}	
}
@media (max-width: 768px) {
	.howto_greatdeal figure {
		left: -15%;
	}	
}
 
.howto_greatdeal div {
	position: absolute;
	top: 280px;
	right: 0;
	background: #e4e4e4;
	width: 356px;
	height: 588px;
	white-space: nowrap;
	text-align: left;
	padding: 210px 0 0 112px;
	z-index: 1;
}
@media (max-width: 1320px) {
	.howto_greatdeal div {
		white-space: normal;
	}	
}
@media (max-width: 980px) {
	.howto_greatdeal div {
		top: 36vw;
		padding: 44vw 20px 40px 40px;
	}	
}
@media (max-width: 768px) {
	.howto_greatdeal div {
		height: auto;
		top: 46vw;
		width: 65%;
		padding-left: 30px;
	}	
}

.howto_event {
	margin-top: 240px;
}
@media (max-width: 980px) {
	.howto_event {
		margin-top: 50vw;
	}	
}
@media (max-width: 768px) {
	.howto_event {
		margin-top: 240px;
	}
}
.howto_event .subHead {
	margin-bottom: -0.11em;
}
.howto_event > div {
	background: #e9e9e9;
	padding: 50px 50px 50px 240px;
	margin-left: -240px;
	text-align: left;
}
@media (max-width: 980px) {
	.howto_event > div {
		margin-left: 0;
		padding: 50px;
		margin-right: 10%;
	}
}
@media (max-width: 768px) {
	.howto_event > div {
		padding: 30px;
	}
}
.eventCarousel {
	margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.eventCarousel .slick-slide {
	width: 440px;
	height: 440px;
	position: relative;
	overflow: hidden;
}
@media (max-width: 768px) {
	.eventCarousel .slick-slide {
		width: 40vw;
		height: 40vw;
	}
}
.eventCarousel .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 

/* -------------------------------
	PRICE
 ------------------------------- */
#price {
	
} 

#price .priceText {
	font-size: 32px;
	font-weight: bold;
	margin-top: 70px;
}
@media (max-width: 768px) {
	#price .priceText {
		font-size: 16px;
		margin-top: 20px;
	}
}
#price .priceText b {
	font-size: 40px;
	margin-left: 0.5em;
} 
@media (max-width: 768px) {
	#price .priceText b {
		font-size: 20px;
		margin-left: 0.25em;
	} 
}
#price .priceText i {
	font-size: 24px;
} 
@media (max-width: 768px) {
	#price .priceText i {
		font-size: 12px;
	} 
}
#price .ticketPriceHead {
	font-size: 24px;
	text-align: left;
	margin-top: 70px;
	margin-bottom: 3px;
} 
@media (max-width: 768px) {
	#price .ticketPriceHead {
		font-size: 12px;
		margin-top: 35px;
	} 
}
#price figure {
	
} 
#price .ex {
	text-align: left;
	margin-top: 5px;
} 
@media (max-width: 768px) {
	#price .ex {
		font-style: 9px;
	} 
}

#price .ticketGameHead {
	font-size: 40px;
	margin-top: 100px;
	font-weight: 500;
}
@media (max-width: 768px) {
	#price .ticketGameHead {
		font-size: 20px;
		margin-top: 50px;
	} 
}
#price .ticketGameText {
	font-size: 20px;
	font-weight: bold;
	margin-top: 40px;
}
@media (max-width: 768px) {
	#price .ticketGameText {
		font-size: 12px;
		margin-top: 20px;
		text-align: left;
	}
}
#price .indent {
	font-size: 16px;
	margin-top: 10px;
} 
@media (max-width: 768px) {
	#price .indent {
		font-size: 11px;
	} 
}

/* -------------------------------
	BENEFIT
 ------------------------------- */
#benefit {
	
} 
@media (max-width: 768px) {
	#benefit {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	} 
}

.benefitSlider {
	display: flex;
	gap: 40px;
} 
@media (max-width: 768px) {
	.benefitSlider {
		gap: 20px;
		/*position: relative;*/
		/*margin-left: -75px;*/
	} 
}
.benefitSlider > li {
	width: calc(100% - (40px * 1 ) / 2);
	display:flex ;
	flex-direction: column;
}
@media (max-width: 768px) {
	.benefitSlider li {
		width: calc(100% - (30px * 1 ) / 2);
	}
}

.benefitSlider .slick-track {
	display: flex;
	gap: 40px;
}
@media (max-width: 768px) {
	.benefitSlider .slick-track {
		gap: 20px;
	} 
}
.benefitSlider .slick-slide {
	background: #e7e7e7;
	display: flex !important;
	flex-direction: column;
	height: auto;
}

.benefitSlider div.img {
	position: relative;
} 
.benefitSlider figure {
	position: relative;
	z-index: 1;
} 
.benefitSlider h3 {
	position: absolute;
	bottom: 0;
	color: var(--white);
	font-size: 22px;
	text-align: left;
    line-height: 1.2;
	padding: 15px;
	z-index: 2;
} 
@media (max-width: 768px) {
	.benefitSlider h3 {
		font-size: 14px;
		padding: 7px;
	} 
}

.benefitSlider div.text {
	text-align: left;
	padding: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
} 
@media (max-width: 768px) {
	.benefitSlider div.text {
		padding: 13px;
	}
}
.benefitSlider div.text > div {
	flex-grow: 1;
} 
.benefitSlider div.text > div p {
	font-size: 16px;
}
@media (max-width: 768px) {
	.benefitSlider div.text > div p {
		font-size: 12px;
	}
}
.benefitSlider div.text > div .ex {
	margin-top: 15px;
	font-size: 12px;
}
@media (max-width: 768px) {
	.benefitSlider div.text > div .ex {
		margin-top: 10px;
		font-size: 9px;
	}
}
.benefitSlider div.text .btn {
	margin: 30px 20% 0;
	font-size: 16px;
}
@media (max-width: 768px) {
	.benefitSlider div.text .btn {
		margin: 20px 10% 0;
		font-size: 12px;
	}	
}



.benefitSlider.interview h3 {
	position: relative;
	color: var(--black);
	font-size: 24px;
	font-weight: 500;
	text-align: center;
    padding-top: 25px;
    margin-bottom: -20px;
} 
@media (max-width: 768px) {
	.benefitSlider.interview h3 {
		font-size: 12px;
	    padding-top: 15px;
	    margin-bottom: -10px;
	} 
}
.benefitSlider .slick-dots {
	bottom: -42px;
	margin-bottom: 12px;
}
@media (max-width: 768px) {
	.benefitSlider .slick-dots {
		margin-bottom: 16px;
	}
}
.benefitSlider .slick-dots li,
.benefitSlider .slick-dots li button,
.benefitSlider .slick-dots li button:before {
	width: 104px;
	height: 12px;
	padding: 0;
}
@media (max-width: 768px) {
	.benefitSlider .slick-dots li,
	.benefitSlider .slick-dots li button,
	.benefitSlider .slick-dots li button:before {
		width: 52px;
		height: 6px;
		padding: 0;
	}
	.benefitSlider .slick-dots li {
		margin: 0 3px;
	}
}
.benefitSlider .slick-dots li button:before {
	background: var(--black);
	content: "";
}



 /* -------------------------------
	APPLY
 ------------------------------- */
#apply {
	
} 

#apply .ttl {
	text-align: left;
	margin: 0;
	font-size: 20px;
	font-weight: normal;
	margin-top: 60px;
}
@media (max-width: 768px) {
	#apply .ttl {
		font-size: 12px;
	    margin-top: 25px;
	}
}

#apply .text {
	font-size: 20px;
	text-align: left;
} 
@media (max-width: 768px) {
	#apply .text {
		font-size: 12px;
	} 
}
#apply .btn_marinesTicket,
#apply .btn_Team26 {
	margin-top: 20px;
} 
@media (max-width: 768px) {
	#apply .btn_marinesTicket,
	#apply .btn_Team26 {
		margin-top: 15px;
	} 
}
#apply .indent {
	font-size: 16px;
	margin-top: 20px;
}
@media (max-width: 768px) {
	#apply .indent {
		font-size: 10px;
		margin-top: 10px;
	}
}



#apply .settlement {
	text-align: left;
	font-size: 20px;
	margin-top: 25px;
}
@media (max-width: 768px) {
	#apply .settlement {
		text-align: left;
		font-size: 12px;
		margin-top: 15px;
	}
}

 /* -------------------------------
	SCHEDULE
 ------------------------------- */
#schedule {
	
}
.scheduleList {
	display: flex;
	gap: 40px;
}
@media (max-width: 768px) {
	.scheduleList {
		flex-direction: column;
		gap: 20px;
	}
}
.scheduleList li {
	width: calc(100% - (40px * 1 ) / 2);
	background: #f1f1f1;
	padding: 60px 40px 40px 40px;
}
@media (max-width: 768px) {
	.scheduleList li {
		width: calc(100% - (10px * 2 ));
		margin-left: auto;
		margin-right: auto; 
		padding: 30px 20px 20px 20px;
	}
}
.scheduleList li h3 {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 50px;
}
@media (max-width: 768px) {
	.scheduleList li h3 {
		font-size: 20px;
		margin-bottom: 20px;
	}
}
.scheduleList li h3 i {
	display: block;
	font-size: 20px;
    line-height: 1;
}
@media (max-width: 768px) {
	.scheduleList li h3 i {
		font-size: 16px;
	}
}



.scheduleList li .text {
	font-size: 32px;
	font-weight: bold;
	line-height: 1.4;
}
@media (max-width: 768px) {
	.scheduleList li .text {
		font-size: 20px;
	}
}
.scheduleList li .text i {
	font-size: 24px;
}
@media (max-width: 768px) {
	.scheduleList li .text i {
		font-size: 16px;
	}
}
.scheduleList li .btn {
	margin: 20px 20% 0;
}
@media (max-width: 768px) {
	.scheduleList li .btn {
		margin-top: 15px;
	}
}
 
 
 /* -------------------------------
	ATTENTION
 ------------------------------- */
#attention {
	
}
#attention p,
#attention .numberList {
	text-align: left;
	font-size: 16px;
}
@media (max-width: 768px) {
	#attention p,
	#attention .numberList {
		font-size: 11px;
	}
}
#attention p.btn {
	text-align: center;
}
#attention .numberList {
	margin-top: 35px;
}
@media (max-width: 768px) {
	#attention .numberList {
		margin-top: 20px;
	}
}
#attention .numberList li::before {
	line-height: 1.6;
}
#attention .numberList li + li {
	margin-top: 5px;
}

 /* -------------------------------
	FAQ
 ------------------------------- */
.faqList {
	
}
.faqList dt,
.faqList dd {
	font-size: 16px;
	text-align: left;
	padding: 10px 20px;
}
@media (max-width: 768px) {
	.faqList dt,
	.faqList dd {
		font-size: 12px;
	}
}
.faqList dt {
	position: relative;
	font-weight: bold;
	border: 2px solid var(--black);
	border-bottom: none;
	counter-increment: count;
	padding-left: 4em;
	padding-right: 50px;
	cursor: pointer;
}
.faqList dt:nth-of-type(n+10) {
	padding-left: 5em;
}
.faqList dt::before {
	position: absolute;
	top: 11px;
	left: 20px;
	width: 1.2em;
	font-size: 24px;
	font-weight: bold;
	display: marker;
	content: "Q" counter(count);
	text-align: center;
	line-height: 1;
}
@media (max-width: 768px) {
	.faqList dt::before {
		left: 10px;
		font-size: 16px;
	}
}
.faqList dt::after {
    position: absolute;
    content: "";
    top: -9px;
    right: 20px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    transition: .3s ease-in-out;
    width: 16px;
    height: 16px;
    border-top: 3px solid var(--black);
    border-right: 3px solid var(--black);
    transform: rotate(135deg);
}
@media (max-width: 768px) {
	.faqList dt::after {
	    top: -4px;
	    right: 15px;
	    width: 10px;
	    height: 10px;
	    border-width: 2px;
	}
}
.faqList dt.active::after {
	top: 10px;
	transform: rotate(-45deg);
}
@media (max-width: 768px) {
	.faqList dt.active::after {
		top: 5px;
	}	
}

.faqList dd {
	position: relative;
	height: 0;
	overflow: hidden;
	border: 2px solid var(--black);
	border-top: none;
	padding-top: 0;
	padding-bottom: 0;
	transition: .3s ease-in-out;
}
.faqList dt.active + dd {
	height: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: none;
}

.faqList dd:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	width: calc(100% - (10px * 2 ));
	height: 2px;
	margin: auto;
	background: var(--black);
}

.faqList dd + dt {
	margin-top: 25px;
}
@media (max-width: 768px) {
	.faqList dd + dt {
		margin-top: 15px;
	}
}


 /* -------------------------------
	CONTACT
 ------------------------------- */
#contact {
	padding-bottom: 40px;
}
@media (max-width: 768px) {
	#contact {
		padding-bottom: 0;
	}
}
#contact .head {
	margin-bottom: 80px;
}
@media (max-width: 768px) {
	#contact .head {
		margin-bottom: 40px;
	}
}
#contact p {
	font-size: 32px;
	font-weight: 500;
}
@media (max-width: 768px) {
	#contact p {
		font-size: 16px;
	}
}
#contact p + p {
	margin-top: 40px;
}
@media (max-width: 768px) {
	#contact p + p {
		margin-top: 5px;
	}
}











.modaal-container {
	border-radius: 10px;
}

.modaal-content-container {
	color: var(--black);
	padding: 50px;
	line-height: 1.6;
}

.modaal-content-container {
	color: var(--black);
	padding: 50px;
	line-height: 1.6;
}
.modaal-content-container p {
	margin-top: 1em;
}

.modaal-content-container .numberList > li + li {
	margin-top: 1em;
}
.modaal-content-container .numberList > li::before {
	line-height: 1.6;
}
.modaal-content-container .indent.ex {
	margin-top: 1em;
}
.modaal-content-container .indent.ex li {
	padding-left:2em;
	text-indent:-2em;
}


@media (max-width: 768px) {
	.modaal-content-container {
		padding: 30px;
	}
}

.modaal-content-container .ttl {
	font-size: 22px;
	margin: 20px 0 20px;
}
.modaal-content-container * + .ttl {
	margin-top: 60px;
}

.modaal-content-container .specialSeatList {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: #eee;
}
.modaal-content-container .specialSeatList li {
	width: calc((100% - 1px)/ 2);
    font-size: 12px;
    padding: 10px;
    border: 1px solid var(--white);   
}
@media (max-width: 768px) {
	.modaal-content-container .specialSeatList li {
	    font-size: 10px;
	    padding: 5px 5px;  
	}
} 

.modaal-content-container .mstageTermTable {
	width: 100%;
}

.modaal-content-container .mstageTermTable th,
.modaal-content-container .mstageTermTable td {
	padding: 10px;
	font-size: 16px;
	border: 1px solid var(--gray);
	text-align: center;
}
@media (max-width: 768px) {
	.modaal-content-container .mstageTermTable th,
.modaal-content-container .mstageTermTable td {
		padding: 7px 10px;
		font-size: 11px;
		line-height: 1.2;
	}
} 
.modaal-content-container .mstageTermTable thead th {
	background: #eee;
	font-weight: bold;
}
.modaal-content-container .mstageTermTable tbody th {
	font-weight: bold;
	color: var(--white);
}
.modaal-content-container .mstageTermTable tbody th.m6 {
  background: #3b393a;
}
.modaal-content-container .mstageTermTable tbody th.m5 {
  background: #5f3b93;
}
.modaal-content-container .mstageTermTable tbody th.m4 {
  background: #e94216;
}
.modaal-content-container .mstageTermTable tbody th.m3 {
  background: #f18b00;
}
.modaal-content-container .mstageTermTable tbody th.m2 {
  background: #009f41;
}
   
.modaal-content-container {
	
}

.modaal-close:hover::after, .modaal-close:hover::before {
	background: #aaa;
}


/* フェードイン(初期値) */
.js-fadeUp,
.js-fadeUp::before,
.js-fadeUp::after {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(60px); /* 下に30pxの位置から */
	transition: opacity 1.0s, transform 1.0s; /* 透過率と縦方向の移動を1.0秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview,
.js-fadeUp.is-inview::before,
.js-fadeUp.is-inview::after {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .8s; /* フェード開始を0.5秒遅らせる */
}




.u-font-bold {
	font-weight: bold;
} 
.u-font-color__red {
	color: #e40049;
}