@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: black;
	background: white url("../images/bgSP.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;
}

.bg {
	width: 100%;
	margin: 0 auto;
	padding: 0.3em 0 0;
}

.bg::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("../images/sp_ts_web_bg.png") left top no-repeat;
	background-size: cover;
}

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

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

.picpic {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

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_ts2_header.jpg") no-repeat center top;
	background-size: 100% auto;
	padding-top: calc(870 / 820 * 100%);
}

.aboutbox {
	width: 100%;
	position: relative;
	background: url("../images/07_ts_web_ts.png") no-repeat center top;
	background-size: 100% auto;
	padding-top: calc(939 / 820 * 100%);
}

.ten-sura-official {
	width: 89%;
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	margin: auto;
}

.ten-sura-official a {
	display: block;
	width: 100%;
	height: 100%;
}

.introduction {
	width: 27%;
	position: absolute;
	bottom: 19%;
	right: 36%;
}

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

.spmovie {
	width: 17%;
	position: absolute;
	top: 43%;
	right: 41.5%;
}

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

.banner {
	width: 19%;
	position: absolute;
	left: 1.5%;
	bottom: 23%;
	z-index: 50;
	text-align: center;
}

.banner a {
	display: block;
}

.banner a:first-child {
	padding: 0 18% 14%;
}


/* =======================================
	navigation
======================================= */
.openbtn {
	width: 14.66vw;
	height: 12vw;
	background: #fff;
	cursor: pointer;
	z-index: 8000;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9000;

}

.openbtn span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 3.6vw;
	height: 1.066vw;
	background-color: #0277d2;
}

.openbtn span:nth-of-type(1) {
	top: 3vw;
	width: 8.533vw;
}

.openbtn span:nth-of-type(2) {
	top: 5.56vw;
	width: 8.533vw;
}

.openbtn.active {}

.openbtn.active span:nth-of-type(1) {
	top: 2.4vw;
	left: 3.5vw;
	transform: translateY(1.6vw) rotate(-25deg);
	width: 8vw;

}

.openbtn.active span:nth-of-type(2) {
	top: 5.6vw;
	left: 3.5vw;
	transform: translateY(-1.6vw) rotate(25deg);
	width: 8vw;


}



.l-header_nav_wrap_sp {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	background: url(../images/menu_bg.jpg);
	background-size: cover;
	width: 100%;
	height: 100svh;
	padding: 4vw 6.66vw;
	top: 0;
	left: 0;
	transition: all 0.3s;
	overflow-y: auto;
}

.l-header_nav_wrap_sp.panelactive {
	visibility: visible;
	opacity: 1;
	z-index: 8000;

}

.nav_wrap_sp .logo {
	padding: 0;
	margin-bottom: 4vw;
	width: 51vw;
}

.nav_wrap_sp nav ul li a {
	display: block;
	border-bottom: 1px solid #fff;
	padding: 6.66vw 2.66vw;
}





.pc_aside:last-child {

	position: relative;
}

.nav_wrap {
	position: fixed;
	top: 0;
	right: 0;
	width: calc((100% - 640px) * 0.5);
	height: 100svh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-inline: 5vw;
}

@media screen and (max-width: 1500px) {
	.nav_wrap {
		padding-inline: 3vw;
	}
}

@media screen and (max-width: 1150px) {
	.nav_wrap {
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s, visibility 0.3s;
	}
}

.logo {
	padding: 1.4vw 0.5vw;
}

nav {}



nav ul li {
	text-align: left;
}

nav ul li a {
	display: block;
	border-bottom: 2px solid #fff;
	padding: 1.4vw 0.5vw;
}

nav ul li:first-child a {
	padding-right: 50%;
}

nav ul li:nth-child(2) a {
	padding-right: 21%;
}

nav ul li:nth-child(3) a {
	padding-right: 49%;
}

nav ul li:nth-child(4) a {
	padding-right: 68%;
}

nav ul li:nth-child(5) a {
	padding-right: 48%;
}

nav ul li:nth-child(6) a {
	padding-right: 57%;
}



/* =======================================
	download
======================================= */
.download {
	width: 100%;
	margin: 0 auto;
	padding: 1.2em 0 0.2em;
	background: white url("../images/bgSP.jpg") repeat-y;
	background-size: 100% auto;
}

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

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

.dl_drptoha {
	width: 86.5%;
	margin: 0 auto 1.5em;
}


/* =======================================
	#chara
======================================= */
#chara {
	position: relative;
}

.chara_bg {
	height: 0;
	padding-top: calc(450 / 820 * 100%);
	position: relative;
}

.chara_bg:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #0277d2;
	background-size: 100% auto;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

#chara h2 {
	width: 90%;
	margin: 1em auto 1.5em;
}

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

.newChara {
	width: 48%;
	position: absolute;
	top: 5%;
	left: 4%;
}

.myswiper00a.swiper,
.myswiper00a .swiper-wrapper {
	overflow: visible !important;
}

.myswiper00a {
	width: 60%;
	position: absolute;
	right: 0;
	left: 0;
	bottom: -13%;
}

.myswiper00a .swiper-wrapper .swiper-slide img {
	width: 72%;
}

.myswiper00a .swiper-slide[data-swiper-slide-index="6"] .slide-inner {
	position: relative;
	transform: translate(5.6%, -12.8%);
}

.myswiper00a .swiper-wrapper .swiper-slide[data-swiper-slide-index="6"] img {
	width: 100%;
	transform: scale(1.22);
	/* 1.2倍に拡大 */
	transform-origin: center;
	/* 拡大の基準点 */
}

.myswiper00a .swiper-slide[data-swiper-slide-index="7"] .slide-inner {
	position: relative;
	transform: translate(-4.5%, -10%);
}

.myswiper00a .swiper-wrapper .swiper-slide[data-swiper-slide-index="7"] img {
	width: 78%;
}


.myswiper00b .swiper-wrapper {
	display: flex;
	width: 57%;
	margin: 1.5em auto 0;
	justify-content: center;
}

.myswiper00b .swiper-wrapper .swiper-slide {
	width: 15% !important;
}

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

.thumbnailpic .swiper-slide:nth-of-type(1) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_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/02_ts_web_chara_icon_06_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(7) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/02_ts_web_chara_icon_07_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(7) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/02_ts_web_chara_icon_07_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(8) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/02_ts_web_chara_icon_08_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(8) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/02_ts_web_chara_icon_08_on.png") no-repeat;
	background-size: 100% auto;
}

.voice01 {
	width: 34%;
	position: absolute;
	top: 5%;
	right: 9%;
}

.voice02 {
	width: 34%;
	position: absolute;
	top: 18%;
	right: 9%;
	z-index: 5000;
}

.tapdeokigae {
	width: 35%;
	margin: 2% auto 2em;
}

.tapdeokigae img {
	display: block;
	width: 100%;
	height: auto;
}

.howTo {
	width: 85%;
	margin: 5% auto 10%;
}

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

.skilltext {
	width: 84%;
	margin: 0 auto 1.5em;
}

.skill video {
	width: 88%;
	height: auto;
	margin: 0 auto 2em;
	border-radius: 20px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 3px #000;
}

.other_box {
	margin: 0 0 0 1em;
	position: relative;

	img {
		width: 100%;
		position: relative;
		z-index: 1;
	}
}

.other_box .haki {
	position: absolute;
	top: 0;
	left: 2%;
	z-index: 10;
	width: 50%;
}

.other_box .gachi {
	position: absolute;
	bottom: 10%;
	right: 10%;
	z-index: 10;
	width: 50%;
}


/* =======================================
	#rarechara
======================================= */
#rarechara {
	position: relative;
}

#rarechara h2 {
	width: 90%;
	margin: 0 auto 2em;
}

.voice {
	position: relative;
	width: 100%;
	margin: 0 auto 3em;
	height: 0;
	padding-top: calc(3902 / 820 * 100%);
}

.voice:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../images/sp_02_ts_web_chara_rare_bg_all.png") center top no-repeat;
	background-size: 100% 100%;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

.voice03 {
	width: 9%;
	position: absolute;
	top: 2.2%;
	left: 36%;
}

.voice04 {
	width: 9%;
	position: absolute;
	top: 17%;
	left: 45%;
}

.voice05 {
	width: 9%;
	position: absolute;
	top: 38%;
	right: 42%;
}

.btnVoice {
	cursor: pointer;
	width: 100%;
	height: 0;
	border: none;

}

.btnVoice.active {
	cursor: pointer;
	width: 100%;
	height: 0;
	border: none;
}

#btn-play01 {
	padding-top: calc(65 / 233 * 100%);
	background: url("../images/02_ts_web_chara_voice_01_on.png") left top no-repeat;
	background-size: contain;
}

#btn-play01.active {
	padding-top: calc(65 / 233 * 100%);
	background: url("../images/02_ts_web_chara_voice_01_off.png") left top no-repeat;
	background-size: contain;
}

#btn-play02 {
	padding-top: calc(65 / 233 * 100%);
	background: url("../images/02_ts_web_chara_voice_02_on.png") left top no-repeat;
	background-size: contain;
}

#btn-play02.active {
	padding-top: calc(65 / 233 * 100%);
	background: url("../images/02_ts_web_chara_voice_02_off.png") left top no-repeat;
	background-size: contain;
}

#btn-play03 {
	padding-top: calc(68 / 68 * 100%);
	background: url("../images/02_ts_web_chara_voice_03_on.png") left top no-repeat;
	background-size: contain;
}

#btn-play03.active {
	padding-top: calc(68 / 68 * 100%);
	background: url("../images/02_ts_web_chara_voice_03_off.png") left top no-repeat;
	background-size: contain;
}

#btn-play04 {
	padding-top: calc(68 / 68 * 100%);
	background: url("../images/02_ts_web_chara_voice_04_on.png") left top no-repeat;
	background-size: contain;
}

#btn-play04.active {
	padding-top: calc(68 / 68 * 100%);
	background: url("../images/02_ts_web_chara_voice_04_off.png") left top no-repeat;
	background-size: contain;
}

.voicePack {
	margin: 0 auto 3em;
}


/* =======================================
	#event
======================================= */
#event {
	position: relative;
}

#event h2 {
	width: 90%;
	margin: 0 auto 2em;
}

.event_01,
.event_02,
.event_03,
.event_04,
.event_05,
.event_06 {
	width: 100%;
	height: 0;
	position: relative;
	margin-bottom: 1.6em;
}

.event_01:before,
.event_02:before,
.event_03:before,
.event_04:before,
.event_05:before,
.event_06:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #0277d2;
	background-size: 100% auto;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

.event_01 {
	padding-top: calc(770 / 820 * 100%);
}

.event_02 {
	padding-top: calc(770 / 820 * 100%);
}

.event_03 {
	padding-top: calc(770 / 820 * 100%);
}

.event_04 {
	padding-top: calc(770 / 820 * 100%);
}

.event_05 {
	padding-top: calc(388 / 820 * 100%);
	margin-bottom: 3.6em;
}

.event_06 {
	padding-top: calc(448 / 820 * 100%);
	margin-bottom: 3.6em;
}

.myswiper01,
.myswiper02,
.myswiper03,
.myswiper04 {
	padding-bottom: 15%;
}

.swiper01,
.swiper02,
.swiper03,
.swiper04 {
	width: 49%;
	position: absolute;
	top: 55%;
	left: 43.5%;
}

/*.swiper-button-next01,
.swiper-button-next02,
.swiper-button-next03,
.swiper-button-next04 {
	width:16px;
	height:16px;
	background-size:16px 16px;
	margin-top:0;
	position:absolute;
	top:44%;
	right:-11%;
	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/03_ts_web_event_01_right.png");
}*/

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

.swiper-button-prev01,
.swiper-button-prev02,
.swiper-button-prev03,
.swiper-button-prev04 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 44%;
	left: -11%;
	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/03_ts_web_event_01_left.png") left top no-repeat;
}

.swiper-pagination-bullet-active {
	background: whitesmoke;
}

.swiper-pagination-bullet {
	background: white;
}


/* =======================================
	#cp
======================================= */
#cp {
	position: relative;
}

#cp h2 {
	width: 90%;
	margin: 0 auto 2em;
}

ul.cplist {
	width: 76%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 0.8em;
}

ul.cplist li {
	width: 48%;
	margin-bottom: 5%;
}

ul.cplist li:nth-child(odd) {
	margin-right: 4%;
}

.cp_01,
.cp_02,
.cp_03,
.cp_04 {
	width: 100%;
	height: 0;
	margin: 0 auto;
	position: relative;
	margin-bottom: 1.6em;
}

.cp_01 {
	padding-top: calc(1808 / 820 * 100%);
}

.cp_02 {
	padding-top: calc(524 / 820 * 100%);
}

.cp_03 {
	padding-top: calc(919 / 820 * 100%);
}



.cp_01:before,
.cp_02:before,
.cp_03:before,
.cp_04:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #0277d2;
	background-size: 100% auto;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

.cp_02_btn {
	width: 54%;
	position: absolute;
	bottom: 4%;
	left: 9%;
}

.cpBtns {
	width: 54%;
	position: absolute;
	bottom: 3.5%;
	left: 0;
	right: 0;
	margin: auto;
}

.cpBtns ul {
	width: 100%;
	margin: 0 auto;
}

.cpBtns li:nth-child(2) {
	width: 67.25%;
	margin: 20px auto 0;
}


/* =======================================
	#movie
======================================= */
#movie {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#movie h2 {
	width: 100%;
	margin: 0 auto 1.5em;
}

#movie .inner {
	width: 100%;
	margin: 0 auto;
	position: relative;
	height: 0;
	background: url("../images/sp_05_ts_web_mv_01_bg.png") no-repeat center top;
	background-size: 100% auto;
	padding-top: calc(599 / 820 * 100%);
}

.myswiper05 {
	padding-bottom: 11%;
}

.swiper05 {
	width: 72%;
	position: absolute;
	top: 16%;
	left: 0;
	right: 0;
	margin: auto;
}

.swiper-button-next05 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 30%;
	right: -11%;
	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/03_ts_web_event_01_right.png") left top no-repeat;
}

.swiper-button-prev05 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 30%;
	left: -11%;
	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/03_ts_web_event_01_left.png") left top no-repeat;
}

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


/* =======================================
	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;
}

footer ul.gamemenu li img {
	vertical-align: middle;
	max-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: 50px 0 0;
	text-align: left;
	color: white;
	background: transparent;
}

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

.remodal_inner {
	padding: 3%;
	color: #fffcf1;
	background: #0277d2;
}

.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: #fff000;
}

.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: '';
}

.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: 24%;
	position: fixed;
	left: 5%;
	z-index: 50;
	bottom: -300px;
	transition: all 0.5s;
}

.banner_fixed a:first-child {
	margin-bottom: 13%;
	padding: 0 15%;
}

.banner_fixed.active {
	bottom: 30px;
	visibility: visible;
	opacity: 1;
}




.page_top {
	position: fixed;
	right: 6%;
	bottom: 30px;
	z-index: 50;
}

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

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

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


@media screen and (min-width: 640px) {
	body {
		background: none;
	}

	body::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background: url("../images/pc_bg.jpg") left top no-repeat;
		background-size: cover;
	}

	.wrapper {
		position: relative;
		display: flex;

	}

	.openbtn,
	.l-header_nav_wrap_sp {
		display: none;
	}

	.main_contents {
		width: 640px;
		min-width: 640px;
	}

	.pc_aside {
		width: calc((100% - 640px) * 0.5);
	}



	.bg::before {
		width: 640px;
		left: 50%;
		/* 画面の中央基準に配置 */
		transform: translateX(-50%);
		/* 要素自体を中央に寄せる */
	}

	.banner {
		display: none;
	}

	.banner_fixed {
		width: 9%;
		left: -800px;
		bottom: 30px;
	}

	.banner_fixed.active {
		left: calc((100% - 640px) * 0.5 - 11%);
	}

	.page_top {
		right: 20px
	}

	.page_top.active {
		right: 20px;

	}

	/*
	.inner {
		width: 84%;
		max-width: 1092px;
	}

	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,
	.cpBtns a:hover,
	.pagetop a:hover,
	.button a:hover,
	.banner a:hover {
		-moz-opacity: 0.5;
		opacity: 0.5;
	}

	body {
		background: white url("../images/bgPC.jpg") repeat-y;
		background-size: 100% auto;
	}

	.bg {
		padding: 2.4% 0 0;
		background: url("../images/02_ts_web_bg.png") center 18% no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	.bg::before {
		display: none;
	}

	h3 {
		font-size: 2em;
	}

	h4 {
		font-size: 1.3em;
	}

	h4 span {
		font-size: 0.8em;
	}

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

	.introduction {
		width: 10%;
		position: absolute;
		bottom: 18%;
		right: 38%;
	}

	.spmovie {
		width: 8%;
		position: absolute;
		top: 46%;
		right: 37.5%;
	}

	.banner {
		width: 12%;
		position: absolute;
		left: 5%;
		right: auto;
		bottom: 0;
		z-index: 50;
	}

	nav ul {
		width: 90%;
		max-width: 1092px;
	}

	nav ul li img {
		;
		padding: 12% 0;
	}

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

	.download {
		padding: 3.1% 0 2.7%;
		background: white url("../images/bgPC.jpg") repeat-y;
		background-size: 100% auto;
	}

	.download ul {
		width: 100%;
		margin: 0 auto 1.1%;
	}

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

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

	#chara h2 {
		margin: 0 auto 3.2%;
	}

	.chara_bg {
		height: 0;
		padding-top: calc(450 / 1092 * 100%);
		position: relative;
	}

	.newChara {
		width: 36%;
		position: absolute;
		top: 6%;
		left: 7%;
	}

	.myswiper00a {
		width: 60%;
	}

	.myswiper00a .swiper-wrapper .swiper-slide img {
		width: 50%;
	}

	.myswiper00b .swiper-wrapper {
		width: 43%;
		margin: 3.6% auto 0;
	}

	.voice01 {
		width: 23%;
		position: absolute;
		top: 31%;
		left: 7%;
	}

	.voice02 {
		width: 23%;
		position: absolute;
		top: 44%;
		left: 7%;
	}

	.tapdeokigae {
		width: 100%;
		margin: 1% auto 6.4%;
	}

	.skilltext {
		width: 100%;
		margin: 0 auto 24px;
	}

	.skill video {
		width: 64%;
		margin: 0 auto 80px;
	}

	.other_box {
		margin: 0 0 3em;
	}

	.other_box .haki {
		left: 18%;
		width: 40%;
	}

	.other_box .gachi {
		bottom: 10%;
		right: 19%;
		z-index: 10;
		width: 40%;
	}


	#rarechara h2 {
		margin: 0 auto 34px;
	}

	.voice {
		position: relative;
		width: 100%;
		margin: 0 auto 80px;
		height: 0;
		padding-top: calc(2832 / 1092 * 100%);
	}

	.voice:before {
		background: url("../images/02_ts_web_chara_rare_bg_all.png") center top no-repeat;
		background-size: 100% 100%;
		mix-blend-mode: multiply;
		transform: translate3d(0, 0, 0);
	}

	.voice03 {
		width: 6%;
		position: absolute;
		top: 3.3%;
		right: 45%;
	}

	.voice04 {
		width: 6%;
		position: absolute;
		top: 20.7%;
		right: 45%;
	}

	.voice05 {
		width: 6%;
		position: absolute;
		top: 38%;
		right: 45%;
	}

	#event .picpic {
		width: 75%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	#event h2 {
		margin: 0 auto 4%;
	}

	.event_01,
	.event_02,
	.event_03,
	.event_04,
	.event_05 {
		width: 100%;
		height: 0;
		position: relative;
		margin-bottom: 5.5%;
	}

	.event_01:before,
	.event_02:before,
	.event_03:before,
	.event_04:before,
	.event_05:before {
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #0277d2;
		background-size: 100% auto;
		mix-blend-mode: multiply;
		transform: translate3d(0, 0, 0);
	}

	.event_01 {
		padding-top: calc(770 / 820 * 75%);
	}

	.event_02 {
		padding-top: calc(770 / 820 * 75%);
	}

	.event_03 {
		padding-top: calc(770 / 820 * 75%);
	}

	.event_04 {
		padding-top: calc(770 / 820 * 75%);
	}

	.event_05 {
		padding-top: calc(388 / 820 * 75%);
		margin-bottom: 11.8%;
	}

	.myswiper01,
	.myswiper02,
	.myswiper03,
	.myswiper04 {
		padding-bottom: 10%;
	}

	.swiper01,
	.swiper02,
	.swiper03,
	.swiper04 {
		width: 37%;
		position: absolute;
		top: 55%;
		left: 45.2%;
	}


	.swiper-button-next01,
	.swiper-button-next02,
	.swiper-button-next03,
	.swiper-button-next04 {
		width: 7%;
		height: auto;
		padding-top: calc(43 / 27 * 7%);
		background-size: cover !important;
		;
		top: 44%;
		right: -10%;
		z-index: 10;
		background: url("../images/03_ts_web_event_01_right.png") left top no-repeat;
	}

	.swiper-button-prev01,
	.swiper-button-prev02,
	.swiper-button-prev03,
	.swiper-button-prev04 {
		width: 7%;
		height: auto;
		padding-top: calc(43 / 27 * 7%);
		background-size: cover !important;
		;
		top: 44%;
		left: -10%;
		z-index: 10;
		background: url("../images/03_ts_web_event_01_left.png") left top no-repeat;
	}

	.swiper-pagination-bullet-active,
	.swiper-pagination-bullet {
		width: 3%;
		height: auto;
		aspect-ratio: 1/1;
	}

	#cp h2 {
		margin: 0 auto 3.5%;
	}

	ul.cplist {
		width: 56.8%;
		margin: 0 auto 3%;
	}

	ul.cplist li {
		margin-bottom: 4%;
	}

	.cp_01,
	.cp_02,
	.cp_03,
	.cp_04 {
		margin-bottom: 3.7%;
	}

	.cp_01 {
		padding-top: calc(474 / 1092 * 100%);
	}

	.cp_02 {
		padding-top: calc(1501 / 1092 * 100%);
	}

	.cp_03 {
		padding-top: calc(1280 / 1092 * 100%);
	}

	.cp_04 {
		padding-top: calc(1057 / 1092 * 100%);
	}

	.cp_02_btn {
		width: 41%;
		position: absolute;
		bottom: 3.6%;
		left: 18.5%;
	}

	.cpBtns {
		width: 41%;
		bottom: 3%;
	}

	.cpBtns li:nth-child(2) {
		width: 67.25%;
		margin: 4% auto 0;
	}

	#movie .c0277d2 {
		width: 100%;
		margin: 0 auto;
		background: #0277d2;
	}

	#movie .inner {
		width: 64%;
		height: auto;
		background: url("../images/05_ts_web_mv_slime.png") no-repeat center top;
		background-size: 100% auto;
		aspect-ratio: 962/599;
		padding-top: 0;
	}

	.swiper05 {
		width: 61%;
	}

	.swiper-button-next05 {
		width: 5%;
		height: auto;
		padding-top: calc(43 / 27 * 5%);
		top: 30%;
		right: -9%;
	}

	.swiper-button-prev05 {
		width: 5%;
		height: auto;
		padding-top: calc(43 / 27 * 5%);
		top: 30%;
		left: -9%;
	}

	.swiper05 .swiper-pagination-bullet-active,
	.swiper05 .swiper-pagination-bullet {
		width: 2%;
	}

	.copyright {
		width: 27%;
		padding: 2% 0;
	}

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

	.banner_fixed {
		width: 12%;
		left: 5%;
	} */

}