@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;}


/* =======================================
	common
======================================= */
html {height:-webkit-fill-available;}
body{
	position:relative;
	width:100%;
	min-height:100%;
	min-height:-webkit-fill-available;
	margin:0 auto;
	text-align:center;
	color:white;
	background:url("../images/bg_dl.jpg") repeat-y;
	background-size:100% auto;
	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;}

main  {
	width:100%;
	margin:0 auto;
}

section  {
	width:100%;
	margin:0 auto;
}

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

h1 {
	font-size:0;
}

h2 {
	margin:0 auto;
}

h3 {
	margin:1em auto 1.8em;
	text-align:center;
	font-size:clamp(3vw, 5vw, 1.8em);
	font-weight:bold;
	letter-spacing:2px;
}

h4 {
	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/01_tatsunoko_sp_header.jpg") no-repeat center top;
	background-size:100% auto;
	padding-top:calc(996 / 828 * 100%);
	margin-bottom:1em;
}

.introduction {
	width:23%;
	position:absolute;
	bottom:25%;
	right:1%;
}

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


/* =======================================
	navigation
======================================= */
nav {
	width:100%;
	margin:0 auto;
	background:white;
	border-top:4px solid black;
	border-bottom:4px solid black;
	z-index:99;
}

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

nav ul {
	width:92.5%;
	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:2vw 0;
}

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

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


/* =======================================
	download
======================================= */
.download {
	width:100%;
	margin:0 auto;
	padding:4% 14% 5%;
	background:url("../images/bg_dl.jpg") repeat-y;
	background-size:100% auto;
}

.download.foot {
	background:black;
	padding:8% 14% 8%;
}

.download ul {
	width:100%;
	margin:0.8em auto 0;
	display:flex;
	justify-content:center;
}

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

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


/* =======================================
	#chara
======================================= */
#chara {
	background:url("../images/bg_chara.jpg") repeat-y;
	background-size:100% auto;
	position:relative;
	padding:1.2em 0 1.2em;
}

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

.swiperModalButton,
.swiperModalButtonKakusei {
	width:70%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.swiperModalButton button,
.swiperModalButtonKakusei button {
	width:30%;
	margin-bottom:1em;
}

.swiperModalButton button:not(:nth-of-type(3n)),
.swiperModalButtonKakusei button:not(:nth-of-type(3n)) {
	margin-right:5%;
}

.swiperModalButton button:nth-of-type(1) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_01.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButton button:nth-of-type(2) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_02.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButton button:nth-of-type(3) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_03.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButton button:nth-of-type(4) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_04.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButton button:nth-of-type(5) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_05.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButton button:nth-of-type(6) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_06.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButtonKakusei button:nth-of-type(1) span {
	display:block;
	padding-top:100%;
	background:url("../images/chara_btn_07.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButtonKakusei button:nth-of-type(2) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_08.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButtonKakusei button:nth-of-type(3) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_09.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButtonKakusei button:nth-of-type(4) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_10.png") no-repeat;
	background-size:100% auto;
}
.swiperModalButtonKakusei button:nth-of-type(5) span {
	display:block;
	height:0;
	padding-top:100%;
	background:url("../images/chara_btn_11.png") no-repeat;
	background-size:100% auto;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	bottom:0;
	content:"";
	height:0;
	margin:auto;
	position:absolute;
	top:0;
	width:0;
}

.swiper-button-next.navChara,
.swiper-button-next.navKakusei {
	width:8%;
	height:auto;
	padding-top:8%;
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:42%;
	right:3%;
	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/right_btn.png") left top no-repeat;
}

.swiper-button-prev.navChara,
.swiper-button-prev.navKakusei {
	width:8%;
	height:auto;
	padding-top:8%;
	background-size:cover !important;;
	margin-top:0;
	position:absolute;
	top:42%;
	left:3%;
	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;
}

.modal,
.modalKakusei {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:calc( var(--vh) * 100 );
	height:100dvh;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:opacity 0.3s;
	pointer-events:none;
	opacity:0;
	z-index:100;
	background-color:rgba(0,0,0,0.7);
}

.modal.is-active,
.modalKakusei.is-active {
	opacity:1;
	pointer-events:auto;
}

.modal__overlay {
	position:absolute;
	width:100%;
	height:calc( var(--vh) * 100 );
	height:100dvh;
	cursor:pointer;
}

.modal__content {
	position:relative;
	width:100%;
}

.modal_inner {
	width:100%;
	max-width:480px;
	margin:0 auto;
	padding:0 12%;
	position:relative;
	border-radius:2px;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.modal__close-btn {
	position:absolute;
	right:10%;
	top:-48px;
	width:40px;
	height:40px;
	cursor:pointer;
	z-index:20;
	border-radius:50%;
	background:black;
}

.modal__close-btn:hover {
	opacity:0.8;
}

.lineClose {
	display:inline-block;
	vertical-align:middle;
	color:white;
	line-height:1;
	width:20px;
	height:0.2rem;
	top:8px;
	background:currentColor;
	border-radius:0.1rem;
	position:relative;
	transform:rotate(45deg);
}

.lineClose::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:inherit;
	border-radius:inherit;
	transform:rotate(90deg);
}

.chara_title2 {
	width:75%;
	margin:0.5em auto 1em;
}

.kakuseiBtn {
	width:90%;
	margin:0.5em auto 0;
	display:flex;
	justify-content:center;
	align-items:center;
}

.godvmax {
	width:96%;
	margin:0.5em auto 0;
}


/* =======================================
	#collabo
======================================= */
#collabo {
	background:url("../images/bg_collabo.jpg") repeat-y;
	background-size:100% auto;
	position:relative;
	padding:1.6em 0;
}

#collabo h2 {
	width:75%;
	margin-bottom:1em;
}

.dungeons {
	position:relative;
	width:96%;
	margin:0 auto;
}

#movie1 {
	width:31%;
	position:absolute;
	left:2%;
	top:13%;
}

#movie2 {
	width:31%;
	position:absolute;
	right:5%;
	top:46%;
}

#movie1 a,
#movie2 a {
	display:block;
	width:100%;
	height:100%;
}

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

.ytb.ytbPortrait {
	position:relative;
	padding-bottom:177.78%;
	height:0;
	overflow:hidden;
	max-width:100%;
	max-height:64vh;
}

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


/* =======================================
	#cp
======================================= */
#cp {
	background:url("../images/bg_cp.jpg") repeat-y;
	background-size:100% auto;
	position:relative;
	padding:1.6em 0 1.4em;
}

#cp h2 {
	width:70%;
	margin-bottom:1em;
}

.cp01,
.cp02,
.cp03,
.cp04,
.cp05 {
	width:96%;
	margin:0 auto;
	position:relative;
}

.cp01,
.cp02,
.cp03,
.cp04 {
	margin-bottom:1.4em;
}

.cpBtn1,
.cpBtn2,
.cpBtn3,
.cpBtn4 {
	position:absolute;
	margin:auto;
}

.cpBtn1 {
	bottom:3%;
	left:8%;
	width:48%;
}

.cpBtn2 {
	bottom:5.5%;
	right:5%;
	width:32%;
}

.cpBtn3 {
	bottom:5%;
	left:8%;
	width:48%;
}

.cpBtn4 {
	bottom:8%;
	right:5%;
	width:32%;
}



/* =======================================
	about
======================================= */
.about {
	position:relative;
	padding:1.8em 0 1.2em;
}

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

.aboutLink {
	width:46%;
	margin:1.6em auto;
}

.aboutLink a {
	display:block;
}

.aboutCopy {
	margin:0 auto;
	text-align:center;
	font-size:2vw;
	color:black;
}


/* =======================================
	footer
======================================= */
footer {
	width:100%;
	margin:0 auto;
	padding:0 0 4.8%;
	background:black;
}

footer ul {
	width:100%;
	margin:0 auto;
	padding:0 14%;
	letter-spacing:-0.4em !important;
}

footer ul li {
	display:inline-block;
	width:auto;
	letter-spacing:normal !important;
}

footer ul li:nth-child(1) {width:12.4%;}
footer ul li:nth-child(2) {width:17.7%;margin:0 5.5%;}
footer ul li:nth-child(3) {width:24.7%;margin-right:5.5%;}
footer ul li:nth-child(4) {width:28.5%;}
footer ul li:nth-child(5) {width:100%;height:2vh;display:block;font-size:0;}
footer ul li:nth-child(6) {width:22%;margin:0 5.8% 0 26.7%;}
footer ul li:nth-child(7) {width:19.4%;margin-right:26.1%;}

.copyright {
	font-size:10px;
	margin:5% auto 0;
}


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

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

.remodal.movies.moviePortrait {
	width:72%;
	max-width:334px;
}

.remodal_inner {
	padding:3%;
	color:white;
	background:black;
}

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

.remodal p {
	font-weight:normal;
	font-size:clamp(1vw, 3vw, 15px);
	line-height:1.3;
}

.remodal p a {
	color:#f9e405;
}

.remodal-close {
	top:10px;
	left:auto;
	right:0;
}

.remodal-close:before {
	height:0;
	background:url("../images/close.png") center top no-repeat;
	background-size:100% auto;
	padding-top:100%;
	content:'';
}


/* =======================================
	buttons
======================================= */
.banner {
	width:24%;
	position:fixed;
	left:5%;
	bottom:24px;
	z-index:50;
}

.banner a {
	display:block;
}

.banner {
	bottom:-210px;
	transition:all 0.5s;
}

.pagetop {
	position:fixed;
	right:5%;
	bottom:24px;
	z-index:50;
}

.pagetop a {
	display:block;
	padding:0.3em;
	color:#2e2e2e;
	background:white;
	font-size:1.3rem;
	border-radius:50%;
	line-height:1;
	text-decoration:none;
	cursor:pointer;
}

.pagetop {
	bottom:-210px;
	transition:all 0.5s;
}

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


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

body{
	background:url("../images/bg_patan_footer.png") repeat;
}

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

button,
.swiper-slide,
.introduction a {
	cursor:pointer;
}

nav a:hover,
footer a:hover,
.download a:hover,
.cpBtn1 a:hover,
.cpBtn2 a:hover,
.cpBtn3 a:hover,
.cpBtn4 a:hover,
.aboutLink a:hover,
.button a:hover,
.banner a:hover,
.pagetop a:hover {
	 -moz-opacity:0.5;
	 opacity:0.5;
}

.inner {
	width:90%;
	max-width:960px;
	margin:0 auto;
}

h3 {
	font-size:2em;
}

h4 {
	font-size:1.3em;
}

h4 span {
	font-size:0.8em;
}

header {
	width:100%;
	background:url("../images/01_tatsunoko_pc_header.jpg") no-repeat center top;
	background-size:100% auto;
	padding-top:calc(753 / 1400 * 100%);
	margin-bottom:0;
}

.introduction {
	width:14%;
	position:absolute;
	bottom:12%;
	right:16%;
}

nav {
	border-top:6px solid black;
	border-bottom:6px solid black;
}

nav ul {
	width:72%;
}

nav ul li img {;
	padding:1em 0;
}

.download {
	width:100%;
	padding:0;
	background:url("../images/bg_patan_footer.png") repeat;
	background-size:unset;
}

.download.foot {
	width:100%;
	padding:0;
}

.download_inner {
	width:100%;
	max-width:960px;
	margin:0 auto;
	padding:44px 193px 84px;
}

.download.foot .download_inner {
	padding:51px 193px 33px;
}

.download ul {
	margin:12px auto 26px;
}

.dl_title {
	margin:0 auto 24px;
}

#chara {
	background:url("../images/bg_patan_chara.png") repeat;
	background-size:unset;
	position:relative;
	padding:2em 0 3em;
}

#chara h2 {
	width:48%;
	max-width:458px;
	margin:0 auto 48px;
}

.swiperModalButton {
	width:100%;
	flex-wrap:nowrap;
}

.swiperModalButtonKakusei {
	width:82.47%;
	flex-wrap:nowrap;
}

.swiperModalButton button:not(:nth-of-type(3n)),
.swiperModalButtonKakusei button:not(:nth-of-type(3n)) {
	margin-right:auto;
}

.swiperModalButton button:not(:last-of-type),
.swiperModalButtonKakusei button:not(:last-of-type) {
	margin-right:1%;
}

.modal__content {
	position:relative;
	width:48%;
	max-width:480px;
}

.modal_inner {
	width:100%;
	margin:0 auto;
	position:relative;
	border-radius:2px;
	padding:0;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.swiper-button-next.navChara,
.swiper-button-next.navKakusei {
	right:-12%;
}

.swiper-button-prev.navChara,
.swiper-button-prev.navKakusei {
	left:-12%;
}

.modal__close-btn {
	right:0;
}

.chara_title2 {
	margin:2em auto 2em;
}

.godvmax {
	width:100%;
	padding:0;
	margin:48px auto 0;
}

#collabo {
	background:url("../images/bg_patan_collabocontents.png") repeat;
	background-size:unset;
	position:relative;
	padding:2em 0 3.6em;
}

#collabo h2 {
	width:64%;
	max-width:613px;
	margin-bottom:1.6em;
}

.dungeons {
	width:100%;
}

#movie1 {
	width:30.5%;
	max-width:260px;
	left:6%;
	bottom:4%;
}

#movie2 {
	width:30.5%;
	max-width:260px;
	right:6%;
	bottom:4%;
}

#cp {
	background:url("../images/bg_patan_cp.png") repeat;
	background-size:unset;
	position:relative;
	padding:2.4em 0 3.6em;
}

#cp h2 {
	width:60%;
	max-width:576px;
	margin-bottom:32px;
}

.cp01,
.cp02,
.cp03,
.cp04,
.cp05 {
	width:100%;
}

.cp01,
.cp02,
.cp03,
.cp04 {
	margin-bottom:2.4em;
}


.cpBtn1 {
	bottom:3%;
	left:15%;
	width:40%;
}

.cpBtn2 {
	bottom:5.5%;
	right:13.5%;
	width:27%;
}

.cpBtn3 {
	bottom:3%;
	left:15%;
	width:40%;
}

.cpBtn4 {
	bottom:6%;
	right:13.5%;
	width:27%;
}

.about {
	padding:2em 0 2em;
}

.aboutText {
	width:60%;
	max-width:787px;
}

.aboutLink {
	width:30%;
	max-width:380px;
	margin:2em auto;
}

.aboutCopy {
	font-size:12px;
}

footer {
	padding-bottom:20px;
}

footer:after {
	display:none;
	z-index:0;
	width:100%;
	height:0;
	background:none;
}

footer ul {
	width:100%;
	max-width:650px;
	margin:0 auto;
	padding:0;
	letter-spacing:normal !important;
	display:flex;
	justify-content:space-between;
}

footer ul li:nth-child(1) {width:auto;margin:0;}
footer ul li:nth-child(2) {width:auto;margin:0;}
footer ul li:nth-child(3) {width:auto;margin:0;}
footer ul li:nth-child(4) {width:auto;margin:0;}
footer ul li:nth-child(5) {display:none;}
footer ul li:nth-child(6) {width:auto;margin:0;}
footer ul li:nth-child(7) {width:auto;margin:0;}
footer ul li:not(:last-child) {
	margin-right:4%;
}

.banner {
	width:220px;
	height:210px;
	left:3%;
}

.pagetop a {
	padding:0.4em;
	font-size:1.5rem;
}

.remodal p {
	font-size:15px !important;
}

}