@charset "utf-8";

/* =======================================
	reset
======================================= */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none !important}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} button {background:none;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;}

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;word-break:break-all;}

:root {
	--popupText:#411508;
	--popupBack:#f6d247;
	--popupLink:#e63100;
}

/* =======================================
	common
======================================= */
body {
	position:relative;
	width:100%;
	min-height:100dvh;
	margin:0 auto;
	text-align:center;
	color:black;
	line-height:1;
	font-family:'Noto Sans JP', sans-serif;
}

img {max-width:100%;height:auto;vertical-align:bottom;}
table {width:100%;}
tr, td {vertical-align:top;}

a {
	outline:none;
	text-decoration:underline;
}

a:link {color:white;text-decoration:none;}
a:visited {color:white;text-decoration:none;}
a:hover {color:white;text-decoration:none;}
a:active {text-decoration:none;}


/* =======================================
	layout
======================================= */
main  {
	width:100%;
	margin:0 auto;
}

.contents {
	width:100%;
	margin:-40px auto 0;
	position:relative;
	background:url("../images/bg_ptn_white.png") repeat;
	z-index:10;
}

section {
	width:100%;
	position:relative;
}

section::before {
	z-index:-1;
	display:block;
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	mix-blend-mode:color-burn;
}

section.download::before {background:white;}
section#chara::before {background:#e63100;}
section#rare_chara::before {background:#ff7800;}
section#event::before {background:#2daf1f;}
section#campaign::before {background:#32ace4;}
section#movie::before {background:#c249c4;}

.wave_chara {
	background:transparent url("../images/wave_red_sp.png") repeat-x center bottom;
	padding-top:25px;
	mix-blend-mode:color-burn;
}

.wave_event {
	background:#e63100 url("../images/wave_green_sp.png") repeat-x center bottom;
	padding-top:25px;
	mix-blend-mode:color-burn;
}

.wave_campaign {
	background:#e63100 url("../images/wave_blue_sp.png") repeat-x center bottom;
	padding-top:25px;
	mix-blend-mode:color-burn;
}

.wave_movie {
	background:#32ace4 url("../images/wave_purple_sp.png") repeat-x center bottom;
	padding-top:25px;
	mix-blend-mode:color-burn;
}

.inner {
	position:relative;
	z-index:1;
	width:100%;
	margin:0 auto;
	padding-top:8px;
}

.inner_box {
	position:relative;
	width:96%;
	margin:0 auto;
	padding:0 3.6% 0 2.4%;
}


/* =======================================
	text
======================================= */
h1 {
	font-size:0;
}

h2 {
	margin:0 auto;
}

h3 {
	color:var(--popupText);
	margin:0 auto 1.8em;
	text-align:center;
	font-size:clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	font-weight:bold;
	letter-spacing:2px;
}

h4 {
	color:var(--popupText);
	font-size:clamp(1vw, 3.6vw, 1.2em);
	font-weight:bold;
	margin-bottom:0.4em;
}

h4:not(:first-of-type) {
	margin-top:1.2em;
}

h4 span {
	font-size:2.5vw;
	font-weight:normal;
}


/* =======================================
	header
======================================= */
header {
	width:100%;
	position:relative;
	background:url("../images/header_sp.jpg") no-repeat center top;
	background-size:100% auto;
	padding-top:calc(953 / 828 * 100%);
}

.pv {
	width:20%;
	position:absolute;
	top:23.5%;
	left:0;
	right:0;
	margin:auto;
}

.pv a {
	display:block;
	width:100%;
	height:100%;
}

.about {
	z-index:99;
	width:19%;
	position:absolute;
	bottom:19.5%;
	right:2%;
}


/* =======================================
	navigation
======================================= */
nav {
	width:100%;
	margin:0 auto;
	background:url("../images/menubg_sp.jpg") left top no-repeat;
	background-size:100% auto;
	z-index:9999;
}

nav.fixed {
	position:fixed !important;
	top:0;
	left:0;
	right:0;
}

nav ul {
	width:93%;
	margin:0 auto;
	display:flex;
	justify-content:center;
	align-items:center;
}

nav ul li a {
	display:block;
	width:100%;
	height:100%;
}

nav ul li img {;
	padding:1.4vw 0;
}

nav ul li:not(:last-child) {
	margin-right:3%;
}

nav ul li a img {
	vertical-align:top;
}

nav ul li a.navaon {
	background:url("../images/btn_on_icon.png") no-repeat center center;
	background-size:auto 90%;
}


/* =======================================
	download
======================================= */
.download {
	width:100%;
	margin:0 auto;
	position:relative;
	background:white url("../images/bg_ptn_f4f4f4.png") repeat;
}

.download .inner {
	padding:1em 0 calc(1em + 50px);
}

.download.dlFoot .inner {
	padding:1em 0;
}

.download ul {
	width:82%;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto 1em;
}

.download ul li:not(:last-child) {
	margin-right:3%;
}

.dl_drptoha {
	width:80%;
	margin:0 auto;
}


/* =======================================
	#chara
======================================= */
#chara h2 {
	width:60%;
	margin-bottom:1em;
}

#chara .inner_box {
	background:url("../images/chara_bgframe_sp.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1022 / 792;
	padding-top:6%;
	padding-bottom:10%;
}

.youkaiwatch_title {
	width:90%;
	margin:0 auto;
}

.characters {
	width:100%;
	margin:0 auto;
}

.chara_text {
	width:56%;
	margin:0 auto 1em;
}

.mySwiper00b .swiper-wrapper {
	display:block;
	width:100%;
	margin:1em auto 0;
	letter-spacing:-0.4em !important;
	text-align:center;
}

.mySwiper00b .swiper-wrapper .swiper-slide {
	position:relative;
	width:15% !important;
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal !important;
}

.mySwiper00b .swiper-wrapper .swiper-slide:not(:last-of-type) {
	margin-right:2%;
}

.mySwiper00a {
	width:100%;
	margin:0 auto;
}

.mySwiper00a .swiper-wrapper .swiper-slide img {
	width:96%;
}

@media screen and (max-width:375px) {
	.mySwiper00a .swiper-wrapper .swiper-slide img {
		width:90%;
	}
}

.thumbnailpic .swiper-slide:nth-of-type(1) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_01_off.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide-thumb-active:nth-of-type(1) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_01_on.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide:nth-of-type(2) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_02_off.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide-thumb-active:nth-of-type(2) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_02_on.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide:nth-of-type(3) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_03_off.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide-thumb-active:nth-of-type(3) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_03_on.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide:nth-of-type(4) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_04_off.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide-thumb-active:nth-of-type(4) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_04_on.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide:nth-of-type(5) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_05_off.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide-thumb-active:nth-of-type(5) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_05_on.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide:nth-of-type(6) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_06_off.png") no-repeat;
	background-size:100% auto;
}
.thumbnailpic .swiper-slide-thumb-active:nth-of-type(6) span {
	display:block;
	width:100%;
	height:0;
	padding-top:100%;
	background:url("../images/tapbtn_06_on.png") no-repeat;
	background-size:100% auto;
}
.swiper-button-next00 {
	width:11%;
	height:auto;
	padding-top:calc(79 / 77 * 11%);
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:39%;
	right:0;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../images/right_btn.png");
}

.swiper-button-prev00 {
	width:11%;
	height:auto;
	padding-top:calc(79 / 77 * 11%);
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:39%;
	left:0;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../images/left_btn.png");
}

.voice {
	width:12%;
	position:absolute;
	bottom:3%;
	right:3%;
}

.btnVoice {
	cursor:pointer;
	width:100%;
	height:0;
	padding-top:100%;
	border:none;
	background:url("../images/voice_btn_on.png") left top no-repeat;
	background-size:contain;

}
.btnVoice.nowplaying {
	cursor:pointer;
	padding-top:100%;
	height:0;
	padding-top:100%;
	border:none;
	background:url("../images/voice_btn_off.png") left top no-repeat;
	background-size:contain;
}

.chara_skill {
	width:96%;
	margin:0 auto;
}

@media screen and (max-width:375px) {
	.chara_skill {
		width:86%;
		margin:0 auto;
	}
}

.chara_skill_text {
	width:100%;
	margin:0 auto 1em;
}

.chara_skill video {
	width:100%;
	height:auto;
	margin:0 auto;
	border-radius:20px;
	border:2px solid #fff;
	box-shadow:0 0 0 3px black;
}

.movie_text {
	width:54%;
	margin:6px auto 0;
}

.movie_text img {
	vertical-align:top;
}


/* =======================================
	#event
======================================= */
#event .inner_box {
	background:url("../images/event_bgframe_sp.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:4521 / 792;
	padding:18.5% 4.5% 18% 3.2%
}

#event h2 {
	width:54%;
	margin-bottom:1em;
}

.leadergp {
	background:url("../images/leadergp_title_sp.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1332 / 726;
	padding:36% 10% 8%;
}

.leadergp_visual {width:100%;margin:0 auto 0.8em;}
.leadergp_play {width:82%;margin:0 auto 0.8em;}

.rareevent {
	background:url("../images/rareevent_title_sp.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1229 / 726;
	padding:22% 10% 6%;
}

.rareevent_visual {width:88%;margin:0 auto;}
.rareevent_play {width:82%;margin:0 auto 0.8em;}

.sptoubatsu {margin:0 auto 0.8em;}
.syuraievent {margin:0 auto 0.8em;}

.myswiper01,
.myswiper02 {
	padding-bottom:12%;
}

.swiper01,
.swiper02 {
	width:84%;
	position:relative;
	margin:0 auto;
}

.swiper-button-next01,
.swiper-button-next02 {
	width:11%;
	height:auto;
	padding-top:calc(79 / 77 * 11%);
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:44%;
	right:-14%;
	z-index:10;
	cursor:pointer;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background:url("../images/right_btn.png") left top no-repeat;
}

.swiper-button-prev01,
.swiper-button-prev02 {
	width:11%;
	height:auto;
	padding-top:calc(79 / 77 * 11%);
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:44%;
	left:-14%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background:url("../images/left_btn.png") left top no-repeat;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom:2%;
}

.swiper-pagination-bullet {
	width:4%;
	height:auto;
	padding-top:calc(25 / 20 * 4%);
	background-size:cover !important;;
	background:transparent url(../images/dot_off.png) no-repeat;
	opacity:1;
}

.swiper-pagination-bullet-active {
	background-image:url(../images/dot.png);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin:0 var(--swiper-pagination-bullet-horizontal-gap,2px);
}


/* =======================================
	#campaign
======================================= */
#campaign .inner_box {
	background:url("../images/cp_bgframe_sp.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1860 / 792;
	padding:23% 4.5% 16% 3.2%
}

#campaign h2 {
	width:68%;
	margin-bottom:1em;
}

.cp1 {position:relative;margin:0 auto 0.8em;}

.cpBtn01 {
	width:44%;
	position:absolute;
	bottom:1.5%;
	left:0;
	right:0;
	margin:auto;
}


/* =======================================
	#movie
======================================= */
#movie .inner_box {
	background:url("../images/movie_bgframe_sp.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:160 / 124;
	padding:7% 4.5% 6% 3.2%
}

#movie h2 {
	width:63%;
	margin-bottom:1em;
}

.myswiper03 {
	padding-bottom:12%;
}

.swiper03 {
	width:90%;
	margin:0 auto;
}

.swiper-button-next03 {
	width:7%;
	height:auto;
	padding-top:calc(79 / 77 * 7%);
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:36%;
	right:2%;
	z-index:10;
	cursor:pointer;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background:url("../images/right_btn.png") left top no-repeat;
}

.swiper-button-prev03 {
	width:7%;
	height:auto;
	padding-top:calc(79 / 77 * 7%);
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:36%;
	left:0.5%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background:url("../images/left_btn.png") left top no-repeat;
}

.copyright {
	width:100%;
	margin:0 auto;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1em 0;
}

.copyright img {
	width:20%;
}


/* =======================================
	footer
======================================= */
footer {
	width:100%;
	margin:0 auto;
	padding:2% 0 4%;
	color:white;
	background:black;
}

footer ul.gamemenu {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	margin:0 auto 2%;
	padding:1.5em 0;
}

footer ul.gamemenu li {
	display:flex;
	align-items:center;
	padding:0 5%;
	border-right:2px solid gainsboro;
}

footer ul.gamemenu li:nth-child(3),
footer ul.gamemenu li:last-child {
	border:none;
}

footer ul.gamemenu li.flexwrapper {
	width:100%;
	height:2vh;
	border:none;
}

.footerNav {
	width:100%;
}

footer ul.gamemenu li img {
	vertical-align:middle;
	height:4.5vw;
	padding:0;
}

.footerMenu li a {
	font-size:75%;
	line-height:1.2;
}

.footerInfo li span {
	text-align:left;
}

.footerDesc {
	line-height:1.5;
}


/* =======================================
	remodal
======================================= */
.remodal {
	width:90%;
	margin:0 auto 50px;
	padding:0;
	text-align:left;
	color:white;
	background:transparent;
}

.remodal-overlay {
	background:rgba(0,0,0,0.6);
}

.remodalabout {
	position:relative;
	margin:0 auto;
	padding:0;
	width:90%;
}

.remodalabout button {
	width:42px;
	height:42px;
	position:absolute;
	background:transparent;
	border:none;
	top:-50px;
	left:auto;
	right:-2px;
	cursor:pointer !important;
}

.aboutbox {
	width:100%;
	height:0;
	margin:0 auto;
	padding-top:calc(1140 / 794 * 100%);
	position:relative;
	background:url("../images/youkaiwatchtext_sp.png") center top no-repeat;
	background-size:100% auto;
}

.aboutbox a {
	width:64%;
	position:absolute;
	bottom:6%;
	left:0;
	right:0;
	margin:auto;
}

.remodaloubo {
	padding-top:60px;
}

.remodaloubo button {
	width:42px;
	height:42px;
	position:absolute;
	background:transparent;
	border:none;
	top:10px;
	left:auto;
	right:-2px;
	cursor:pointer !important;
}

.remodaloubo .remodal_inner {
	padding:10% 3%;
	background:var(--popupBack);
	box-shadow:10px 10px 0px 0px rgba(65,21,8,0.8);
	border-radius:20px;
}

.remodaloubo .remodal_inner p {
	color:var(--popupText);
	font-weight:normal;
	font-size:clamp(1vw, 3vw, 15px);
	line-height:1.3;
}

.remodaloubo .remodal_inner p a {
	color:var(--popupLink);
}

.movies .remodal_inner {
	padding:0;
	background:transparent;
}

.movies button {
	width:42px;
	height:42px;
	position:absolute;
	background:transparent;
	border:none;
	top:-50px;
	left:auto;
	right:-2px;
	cursor:pointer !important;
}

.ytb {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	max-width:100%;
}

.ytb iframe, .ytb object, .ytb embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* =======================================
	buttons
======================================= */
.banner_fixed a {
	display:block;
}

.banner_fixed {
	width:84px;
	position:fixed;
	left:4%;
	z-index:999;
	bottom:-200px;
	transition:all 0.5s;
}

.banner_fixed.active {
	bottom:10px;
	visibility:visible;
}

.page_top {
	width:56px;
	height:auto;
	aspect-ratio:75 / 79;
	position:fixed;
	right:4%;
	z-index:50;
}

.page_top a {
	display:block;
	width:100%;
	height:100%;
	line-height:1;
	text-decoration:none;
}

.page_top {
	bottom:-200px;
	transition:all 0.5s;
}

.page_top.active {
	bottom:30px;
	visibility:visible;
}


@media screen and (min-width:600px) and (max-width:767px) {

.inner_box {
	width:calc(90% - (12 * (100vw - 600px) / 267));
	max-width:560px;
}

.chara_skill_text {
	margin:0 auto 2em;
}

}


@media screen and (min-width:768px) {

a, button {
	cursor:pointer;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all  0.3s ease;
}

nav a:hover,
header a:hover,
footer a:hover,
.remodal a:hover,
.download a:hover,
.cpBtn01 a:hover,
.page_top:hover,
.button a:hover,
.banner a:hover,
.banner_fixed a:hover,
.swiper03 a:hover {
	 -moz-opacity:0.5;
	 opacity:0.5;
}

.wave_chara {
	background:transparent url("../images/wave_red.png") repeat-x center bottom;
	padding-top:50px;
}

.wave_event {
	background:#e63100 url("../images/wave_green.png") repeat-x center bottom;
	padding-top:50px;
}

.wave_campaign {
	background:#e63100 url("../images/wave_blue.png") repeat-x center bottom;
	padding-top:50px;
}

.wave_movie {
	background:#32ace4 url("../images/wave_purple.png") repeat-x center bottom;
	padding-top:50px;
}

.inner {
	width:90%;
	max-width:1100px;
	padding-top:12px;
}

header {
	background:url("../images/header.jpg") no-repeat center top;
	background-size:100% auto;
	padding-top:calc(916 / 1920 * 100%);
}

.pv {
	width:8.8%;
	top:37%;
	bottom:auto;
	left:0;
	right:0;
	margin:auto;
}

.about {
	z-index:99;
	width:11.8%;
	position:absolute;
	top:auto;
	bottom:2.5%;
	right:3.2%;
}

nav {
	background:url("../images/menubg.jpg") left top repeat-x;
	z-index:9999;
}

nav ul li a.navaon {
	background:url("../images/btn_on_icon.png") no-repeat center center;
	background-size:auto 84%;
}

#chara h2 {
	width:42%;
}

#chara .inner_box {
	background:url("../images/chara_bgframe.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1100 / 1006;
	padding-top:3.2%;
	padding-bottom:12%;
}

.youkaiwatch_title {
	width:55%;
}

.mySwiper00a .swiper-wrapper .swiper-slide img {
	width:68%;
}

.mySwiper00b .swiper-wrapper {
	width:80%;
	margin:1em auto 1em;
}

.swiper-button-next00 {
	width:6%;
	height:auto;
	padding-top:calc(79 / 77 * 6%);
	right:10%;
}

.swiper-button-prev00 {
	width:6%;
	height:auto;
	padding-top:calc(79 / 77 * 6%);
	left:10%;
}

.voice {
	width:8%;
	bottom:4%;
	right:17%;
}

.chara_skill_text {
	width:90%;
	margin:0 auto 2.4em;
}

.chara_skill {
	width:70%;
}

.chara_text {
	width:45%;
	max-width:414px;
	margin:0 auto 2em;
}

.movie_text {
	width:40%;
	margin:16px auto 0;
}

#rare_chara .inner_box {
	background:url("../images/genteicharaokigae_bgframe.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1100 / 1487;
	padding:3% 2% 9% 1.2%
}

#rare_chara h2 {
	width:72%;
	margin-bottom:1.6em;
}

.gekirarechatch {
	display:block;
	width:66%;
	margin:0 auto;
}

.gekirare_okigae {
	margin:0 auto;
	display:flex;
	justify-content:center;
	align-items:start;
	gap:12px;
}

.whispergst {margin:0 auto 0.8em;}
.hubukihimeyuk {margin:0 auto 1.2em;}
.kenshiokigae_title {width:66%;margin:0 auto;}
.kenshiokigae {width:86%;margin:0 auto;}

#event .inner_box {
	background:url("../images/event_bgframe.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1100 / 2654;
	padding:12% 2% 12% 1.2%
}

#event h2 {
	width:48%;
	margin-bottom:1em;
}

.leadergp {
	display:flex;
	justify-content:space-around;
	align-items:start;
	background:url("../images/leadergp_title.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1050 / 730;
	padding:28% 0 3%;
}

.leadergp_inner {
	width:43%;
}

.leadergp_visual {width:96%;margin:0 auto 0.8em;}
.leadergp_play {width:90%;margin:2em auto 0.8em;}

.rareevent {
	display:flex;
	justify-content:space-around;
	align-items:start;
	background:url("../images/rareevent_title.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1050 / 627;
	padding:16% 0 3%;
}

.rareevent_inner {
	width:43%;
}

.rareevent_visual {width:90%;margin:0 auto;}
.rareevent_play {width:90%;margin:2em auto 0.8em;}

.sptoubatsu {margin:0 auto 0.8em;}
.syuraievent {margin:0 auto 0.8em;}

.event_etc {
	display:flex;
	justify-content:center;
	align-items:start;
	gap:12px;
	margin-bottom:0.6em;
}

.swiper01,
.swiper02 {
	width:84%;
}

.swiper-button-next01,
.swiper-button-next02 {
	width:10%;
	height:auto;
	padding-top:calc(79 / 77 * 10%);
	right:-13%;
}

.swiper-button-prev01,
.swiper-button-prev02 {
	width:10%;
	height:auto;
	padding-top:calc(79 / 77 * 10%);
	left:-13%;
}

#campaign .inner_box {
	background:url("../images/cp_bgframe.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1100 / 2602;
	padding:15% 2% 16% 1.2%
}

#campaign h2 {
	width:56%;
	margin-bottom:1em;
}

.cp1 {position:relative;margin:0 auto 1.5em;}
.cp2 {position:relative;margin:0 auto 1.5em;}

.cpBtn01 {
	width:40%;
	bottom:2%;
}

.cpBtn02 {
	width:40%;
	bottom:2%;
	left:11%;
}

.cpBtn03 {
	width:29%;
	bottom:4.4%;
	right:15%;
}

#movie .inner_box {
	background:url("../images/movie_bgframe.png") center top no-repeat;
	background-size:100% auto;
	aspect-ratio:1100 / 702;
	padding:4% 2% 6% 1.2%
}

#movie h2 {
	width:56%;
	margin-bottom:1em;
}

.myswiper03 {
	padding-bottom:10%;
}

.swiper03 {
	width:80%;
	margin:0 auto;
}

.swiper-button-next03 {
	width:6%;
	height:auto;
	padding-top:calc(79 / 77 * 6%);
	right:5%;
}

.swiper-button-prev03 {
	width:6%;
	height:auto;
	padding-top:calc(79 / 77 * 6%);
	left:4.2%;
}

.swiper03 .swiper-pagination-bullet {
	width:3%;
	height:auto;
	padding-top:calc(25 / 20 * 3%);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin:0 var(--swiper-pagination-bullet-horizontal-gap,6px);
}

.copyright {
	padding:2em 0;
}

.copyright img {
	width:10%;
}

footer ul.gamemenu {
	width:auto;
	max-width:1196px;
	display:flex;
	padding:4vh 0;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
}

footer ul.gamemenu li {
	width:auto;
	padding:0;
	border-right:none;
}

footer ul.gamemenu li:not(:last-child) a {
	border-right:2px solid gainsboro;
}

footer ul.gamemenu li:not(:last-child) a img {
	border-right:none;
}

footer ul.gamemenu li img {
	height:2vw;
	padding:0 2vw;
}

footer ul.gamemenu li.flexwrapper {
	display:none;
	width:0;
	height:0;
	border:none;
}

.footerNav {
	width:738px;
}

.page_top {
	cursor:pointer;
}

.page_top.active {
	right:4%;
	bottom:40px;
}

.banner {
	width:11%;
	position:absolute;
	left:2%;
	right:auto;
	top:auto;
	bottom:2%;
	z-index:50;
}

.banner_fixed {
	width:11%;
	min-width:100px;
	left:2%;
}

.banner_fixed.active {
	bottom:40px;
	visibility:visible;
}

.aboutbox {
	width:80%;
	padding-top:calc(1018 / 1040 * 80%);
	background:url("../images/youkaiwatchtext.png") center top no-repeat;
	background-size:100% auto;
}

.aboutbox a {
	width:48%;
	position:absolute;
	bottom:7%;
	left:0;
	right:0;
	margin:auto;
}

}

@media screen and (min-width:768px) and (max-width:959px) {

.mySwiper00a .swiper-wrapper .swiper-slide img {width:60%;}
.chara_skill_text {margin:0 auto 2em;}
#rare_chara .inner_box {padding-bottom:12%;}
.gekirare_okigae {width:96%;}
.leadergp {	padding-bottom:2%;}
.leadergp_play {margin:1em auto 0.8em}
.event_etc {margin-bottom:0;}
.cp1,.cp2 {margin:0 auto 0.8em}

}

@media screen and (min-width:960px) and (max-width:1099px) {

.mySwiper00a .swiper-wrapper .swiper-slide img {width:66%;}
.chara_skill_text {margin:0 auto 2em;}
#rare_chara .inner_box {padding-bottom:12%;}
.gekirare_okigae {width:96%;}
.leadergp {	padding-bottom:4%;}
.leadergp_play {margin:1em auto 0.8em}
.event_etc {margin-bottom:0.5em;}
.cp1,.cp2 {margin:0 auto 1em}

}