@charset "UTF-8";

body {
	background: linear-gradient(to bottom, #f7f1eb 85%, #ebe0dd);
}

header,
footer {
	text-align: center;
	margin: 0 auto;
}
section {
	text-align: center;
	margin: 0 auto;
	max-width: 1245px;
}
.line {
	text-align: center;
	margin: 30px auto 10px;
	max-width: 1245px;
}
img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
a {
	text-decoration: none;
}
a:hover {
	filter: brightness(1.2);
}

/*******************************
背景
 *******************************/
#bg_scroll_l {
	position: fixed;
	left: 0;
	bottom: -10px;
	z-index: -1;
	opacity: 0.7;
}

#bg_scroll_r {
	position: fixed;
	right: 0;
	bottom: -10px;
	z-index: -1;
	opacity: 0.7;
}


/*******************************
ヘッダーとメニュー
 *******************************/
#top_header {
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}
#top_header .hero {
	width: 100%;
	min-width: 1960px;
	overflow: hidden;
}
#top_header .hero .hero-inner {
	position: relative;
	left: 50vw;
	margin-left: -980px;
	text-align: left;
}
#top_header .hero .hero-inner img {
	max-width: none;
}

#menu {
	display: flex;
	justify-content: center;
}

#top_bt_1,
#top_bt_2,
#top_bt_3,
#top_bt_4 {
	position: relative;
	z-index: 1;
}


/*******************************
動画
 *******************************/
#movie_base {
	position: relative;
	width: 100%;
	max-width: none;
	opacity: 1;
	z-index: 5;
}

#movie_head {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	opacity: 1;
	z-index: 11;
}

#movie {
	position: relative;
	width: 88vw;
	height: calc(88vw * 0.5625);
	margin: 0 auto;
	top: 5vw;
	opacity: 1;
	z-index: 5;
}
#movie iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#movie_left,
#movie_right {
	position: absolute;
	width: 4%;
	height: calc(100% - 31vw);
	top: 4.5vw;
	opacity: 1;
	z-index: 12;
}
#movie_left {
	left: 2%;
	text-align: left;
}
#movie_right {
	right: 2%;
	text-align: right;
}
#movie_left img,
#movie_right img {
	width: auto;
	height: 100%;
	object-fit: cover;
}

#movie_bottom {
	position: relative;
	bottom: -1.5vw;
	opacity: 1;
	z-index: 11;
}

@media (min-width: 984px) {
	#movie {
		top: 48px;
		width: 865px;
		height: calc(865px * 0.5625);
	}

	#movie_head,
	#movie_bottom {
		width: 984px;
		margin: 0 auto;
	}

	#movie_head img,
	#movie_bottom img {
		width: 100%;
	}

	#movie_left,
	#movie_right {
		top: 42px;
		width: 40px;
		height: calc(865px * 0.5625);
	}
	#movie_left {
		left: calc(50% - 865px / 2 - 36px);
	}
	#movie_right {
		right: calc(50% - 865px / 2 - 36px);
	}

	#movie_bottom {
		bottom: -28px;
	}
}


#movie_bg {
	position: absolute;
	z-index: 1;
	opacity: 0.4;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


/*******************************
物語
 *******************************/
#story_head {
	position: relative;
	z-index: 2;
}

#story_episodes {
	position: relative;
	min-height: 200px;
}

#story_episodes .episode {
	position: absolute;
	text-align: center;
	display: block;
	width: auto;
	z-index: 2;
}

#story_episodes .episode:nth-child(2n-1) {
	top: 0;
	right: 51%;
}
#story_episodes .episode:nth-child(2n) {
	top: 20px;
	left: 51%;
}

#story_line1 {
	position: absolute;
	text-align: center;
	z-index: 2;
	top: 50px;
	left: 51%;
}

#story_line2 {
	position: absolute;
	text-align: center;
	z-index: 2;
	top: 500px;
	left: 51%;
}


/*******************************
メガミ1(イニル)
 *******************************/
#megami1_head.hero {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 750px;
	overflow: hidden;
}
#megami1_head.hero .hero-inner {
	position: relative;
	left: 50vw;
	margin-left: -375px;
	text-align: left;
}
#megami1_head.hero .hero-inner img {
	max-width: none;
}

#megami1_title {
	position: relative;
	z-index: 1;
}

#megami1_effect,
#megami1_effect2 {
	position: relative;
	z-index: 1;
}
#megami1_effect p,
#megami1_effect2 p {
	margin: 10px auto;
}

#megami1_effect + #megami1_effect2,
#megami1_effect2 + #megami1_title {
	margin-top: 50px;
}

#megami1_cards {
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 1245px;
	margin: 0 auto;
	z-index: 1;
	display: flex;
	justify-content: space-around;
}

#megami1_card1,
#megami1_card2,
#megami1_card3 {
	opacity: 1;
}

/*******************************
アナザー版
 *******************************/
.another_explain {
	position: relative;
	z-index: 3;
}

.another_control {
	position: relative;
	min-height: calc(100vw * 1117 / 3000);
}

.another_face {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	min-height: inherit;
}

.another_no {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
}

.another_megami_left,
.another_megami_center,
.another_megami_right {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	opacity: 1;
	transition: opacity 0.5s;
}
.another:not([data-megami="left"]) .another_megami_left,
.another:not([data-megami="center"]) .another_megami_center,
.another:not([data-megami="right"]) .another_megami_right {
	opacity: 0;
}

.another_control {
	min-height: calc(2300px * 1117 / 3000);
}
.another_face img {
	width: 2300px;
	max-width: none;
}
.another_no,
.another_megami_left,
.another_megami_center,
.another_megami_right {
	left: calc(-1 * 2300px / 2);
	right: calc(-1 * 2300px / 2);
}

.another_switch {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-evenly;
	align-items: bottom;
}

.another_megami_left_on,
.another_megami_right_on,
.another_megami_center_on,
.another_megami_left_off,
.another_megami_center_off,
.another_megami_right_off {
	z-index: 10;
	max-width: max(50px, 10%);
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.5s;
}
button.another_megami_left_on,
button.another_megami_center_on,
button.another_megami_right_on,
button.another_megami_left_off,
button.another_megami_center_off,
button.another_megami_right_off {
	border: none;
	background-color: transparent;
}
.another_megami_left_off,
.another_megami_center_off,
.another_megami_right_off {
	z-index: 11;
}
.another:not([data-megami="left"]) .another_megami_left_off,
.another:not([data-megami="center"]) .another_megami_center_off,
.another:not([data-megami="right"]) .another_megami_right_off,
.another[data-megami="left"] .another_megami_left_on,
.another[data-megami="center"] .another_megami_center_on,
.another[data-megami="right"] .another_megami_right_on {
	pointer-events: none;
	opacity: 0;
	display: none;
	transition-property: allow-discrete;
}

.another_caption {
	position: relative;
}

.cap_bg {
	position: relative;
	z-index: 5;
}

.cap_another_megami_left,
.cap_another_megami_center,
.cap_another_megami_right {
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	right: 0;
	opacity: 1;
	transition: opacity 0.5s;
}
.another:not([data-megami="left"]) .cap_another_megami_left,
.another:not([data-megami="center"]) .cap_another_megami_center,
.another:not([data-megami="right"]) .cap_another_megami_right {
	opacity: 0;
}

.another_card_title {
	margin: 40px auto 10px;
}

.another_cards {
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 1245px;
	margin: 0 auto;
	z-index: 1;
	display: flex;
	justify-content: space-around;
}


/*******************************
メガミへの挑戦
 *******************************/
#challenge {
}

#challenge_links {
	display: grid;
	max-width: 840px;
	margin: auto;
	grid-template-columns: repeat(2, 1fr);
}

#challenge_card_title {
	margin: 40px auto 10px;
}

#challenge_cards {
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 1245px;
	margin: 0 auto;
	z-index: 1;
	display: flex;
	justify-content: space-around;
}


/*******************************
カード更新
 *******************************/
#pack {
	position: relative;
	padding-bottom: 20px;
}

#pack_catch {
	position: relative;
	z-index: 1;
}

#pack_text {
	position: relative;
	z-index: 1;
}

#pack_bt {
	position: absolute;
	z-index: 2;
	bottom: 0;
	right: 0;
	width: 60%;
	margin-top: 20px;
}

/*******************************
大達人
 *******************************/
#daitatsujin-hero {
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}
#daitatsujin-hero .hero {
	width: 100%;
	min-width: 1960px;
	overflow: hidden;
}
#daitatsujin-hero .hero .hero-inner {
	position: relative;
	left: 50vw;
	margin-left: -980px;
	text-align: left;
}
#daitatsujin-hero .hero .hero-inner img {
	max-width: none;
}


/*******************************
フッター
 *******************************/
#footer {
	position: relative;
	width: 100%;
	z-index: 1;
	text-align: center;
	margin-top: -20%;
	pointer-events: none;
}
#footer .footer-inner {
	position: relative;
	left: 50vw;
	margin-left: -1000px;
	text-align: left;
}
#footer img {
	max-width: none;
}


/*******************************
backtotop
 *******************************/
.backtotop {
	position: fixed;
	top: 20px;
	left: 20px;
	width: auto;
	z-index: 99;
}