@charset "utf-8";
/* ==========================================================================
  wrap & common
========================================================================== */
a,a img,a t,
a:before,a:after {
	-webkit-transition: .3s;
	transition: .3s;
}
.wrap {
	position: relative;
	color: #333;
	background: #f4f4f4;
	overflow: hidden;
}
section {
	position: relative;
	height: 945px;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.title h2,.tab_nav,.swiper-nav a,.movies p {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro",
					 "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", HGS明朝E, "MS Mincho", serif;
}
.title h3,.share_txt {
	font-family: "BeaufortforLOL-Light", Georgia;
	font-weight: 200;
}
@font-face {
	font-family: "BeaufortforLOL-Light";
	src: url("font/BeaufortforLOL-Light.ttf") format("truetype");
	font-display: swap;
}
.fancybox-slide--video .fancybox-content {
	width: 1000px !important;
	height: 562px !important;
	max-width: 80%;
	max-height: 80%;
}

/* ----------------------------------------------
	page title
-----------------------------------------------*/
.title {
	margin: 130px auto 80px;
	text-align: center;
}
.title h2 {
	display: flex;
	justify-content: center;
	align-items: center;
}
.title h2:before,
.title h2:after {
	content: '';
	display: block;
	width: 120px;
	height: 1px;
	background: #565656;
}
.title h2:before {
	background: linear-gradient(1deg, rgba(86,86,86,0) 10%, rgba(86,86,86,1) 100%);
}
.title h2:after {
	background: linear-gradient(179deg, rgba(86,86,86,1) 10%, rgba(86,86,86,0) 90%);
}
.title h2 span {
	margin: 0 12px;
	font-size: 24px;
	line-height: 24px;
	font-weight: 500;
}
.title h3 {
	font-size: 70px;
	color: #7a6eab;
	line-height: 65px;
	text-align: center;
	background: -webkit-linear-gradient(top,#cac1ed 0,#3f404d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==========================================================================
	page_1
========================================================================== */
.page_1 {
	background-image: url("../images/aurakingdom2-bg_1.jpg");
}
.logo_home,
.page_1 h1 {
	display: none;
}
.page_1 .btn_play {
	position: relative;
	z-index: 2;
	display: block;
	margin: 475px auto 0;
	width: 114px;
}

/* ==========================================================================
	page_2
========================================================================== */
.page_2 {
	display: flex;
	justify-content: center;
	height: 650px;
	background-image: url("../images/aurakingdom2-bg_2.jpg");
}
.block {
	margin: 0 30px;
}
.newsBox,
.twitterBox {
	margin: auto;
	width: 520px;
}
.twitterBox {
	height: 300px;
	border: 1px #bcbec9 solid;
	overflow: auto;
}
.twitterBox iframe {
	display: block !important;
}
twitter-widget {
	margin: 0 !important;
}

/* ----------------------------------------------
  news
-----------------------------------------------*/
.news {
	width: 100%;
	overflow: hidden;
}
.tabNav {
	position: relative;
	display: flex;
	width: 100%;
}
.tab_nav {
	margin-right: 1px;
	background: transparent;
}
.tab_nav a {
	display: block;
	padding: 10px 20px;
	font-size: 18px;
	color: #333;
	line-height: 18px;
	text-align: center;
	font-weight: 700;
}
.tab_nav a:hover {
	padding-bottom: 9px;
	margin-bottom: 1px;
	color: #fff;
	background: #888;
}
.tab_nav.focus a,
.tab_nav.focus a:hover {
	padding-bottom: 10px;
	margin-bottom: 0;
	color: #fff;
	background: #444;
}
.tabNav a.btn_more {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30px;
	height: 24px;
	font-size: 20px;
	color: #aaa;
	line-height: 25px;
	text-align: center;
	background: #444;
}
.tabNav a:hover.btn_more {
	color: #fff;
	background: #777;
}
.tabs {
	padding: 17px 0;
	height: 262px;
	border: 2px #444 solid;
	border-left-width: 0;
	border-right-width: 0;
}
.list a:nth-child(6),
.list a:nth-child(7),
.list a:nth-child(8),
.list a:nth-child(9),
.list a:nth-child(10) {
	display: none;
}
.list a {
	position: relative;
	display: flex;
	text-align: center;
	padding: 10px 0;
	width: 100%;
	font-size: 15px;
	border-bottom: 1px #b1adaa solid;
}
.list a:hover {
	color: #000;
	background: rgba(0,0,0,.1);
}
.list a:nth-child(5) {
	border-bottom-width: 0;
}
.list a > * {
	height: 24px;
	line-height: 27px;
}
.list span {
	width: 100px;
	color: #fff;
	text-align: center;
	background: #545889;
}
.list p {
	padding: 0 7px;
	width: calc(100% - 144px);
	color: #333;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
}
.list tt {
	width: 44px;
	color: #333;
}
.pageNav {
	display: none;
}

/* ==========================================================================
	page_3
========================================================================== */
.page_3 {
	background-image: url("../images/aurakingdom2-bg_3.jpg");
}
.swiperBox {
	position:  relative;
	display: flex;
	justify-content: space-between;
	margin: 80px auto 15px;
	width: 1100px;
}
.swiper-nav {
	margin-top: 70px;
}
.swiper-nav a {
	position: relative;
	z-index: 1;
	display: block;
	margin: 15px 0;
	font-size: 21px;
	color: #333;
	line-height: 21px;
	font-weight: 700;
	background: transparent;
	overflow: hidden;
}
.swiper-nav span {
	display: block;
	padding: 7px 12px;
}
.swiper-nav a:before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	width: 0;
	height: 100%;
	background: #545889;
}
.swiper-nav a:hover,
.swiper-nav a.focus {
	color: #fff;
}
.swiper-nav a:hover:before,
.swiper-nav a.focus:before {
	width: 100%;
}
.features {
	width: 836px;
	height: 484px;
	overflow: hidden;
}
.swiper-wrapper {
	transition-timing-function: cubic-bezier(0.17, 0.86, 0.46, 1);
}
.features .f1 { background-image: url("../images/aurakingdom2-features_1.png"); }
.features .f2 { background-image: url("../images/aurakingdom2-features_2.png"); }
.features .f3 { background-image: url("../images/aurakingdom2-features_3.png"); }
.features .f4 { background-image: url("../images/aurakingdom2-features_4.png"); }
.features .f5 { background-image: url("../images/aurakingdom2-features_5.png"); }
.features .swiper-slide {
	background-repeat: no-repeat;
	background-size: cover;
}
.features_more {
	display: block;
	margin: auto;
	width: 380px;
}

/* ==========================================================================
	page_4
========================================================================== */
.page_4 {
	height: auto;
	background-image: url("../images/aurakingdom2-bg_4.jpg");
}
.movies {
	display: flex;
	justify-content: space-between;
	margin: auto;
	width: 1100px;
}
.movies .movList {
	width: 350px;
}
.movies a {
	position: relative;
	display: block;
	margin-bottom: 8px;
	background: #231c64;
	overflow: hidden;
}
.movies img {
	width: 100%;
	height: auto;
}
.movies a img {
	opacity: 0.4;
}
.movies a:hover img {
	opacity: 1;
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}
.movies a:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 75px;
	height: 75px;
	background: url("../images/btn_play_2.png") center/cover no-repeat;
}
.movies a:hover:after {
	opacity: .5;
}
.movies p {
	font-size: 18px;
	color: #333;
	line-height: 22px;
	text-align: center;
	font-weight: 500;
}
.share {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 70px auto 215px;
}
.share_txt {
	margin-right: 30px;
	font-size: 30px;
	color: #333;
	line-height: 30px;
	letter-spacing: 5px;
}
.share_icon {
	display: flex;
}
.share_icon a:first-child {
	margin-right: 15px;
}
.share_icon img  {
	width: 54px;
	height: auto;
}


/* ==========================================================================
	RWD
========================================================================== */
@media screen and (max-width: 1366px) {
	section {
		height: 688px;
	}
	.title {
		margin: 110px auto 50px;
	}
	.page_1 .btn_play {
		margin: 355px auto 0;
	}
	.page_1 .btn_play,
	.page_1 .btn_play img {
		width: 80px;
	}
	.page_2 {
		flex-direction: column;
		padding: 0 50px 50px;
		height: auto;
		background-image: url("../images/aurakingdom2-bg_2_m.jpg");
		background-size: 100% auto;
	}
	.block {
		margin: 0;
	}
	.tabs {
		height: auto;
	}
	.newsBox,
	.twitterBox {
		width: auto;
		max-width: 700px;
	}
	.page_2 .block:nth-child(2) .title {
		margin: 70px auto 50px;
	}
	.page_3 {
		padding-bottom: 50px;
		height: auto;
	}
	.swiperBox {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto 20px;
		width: auto;
	}
	.swiper-nav {
		display: flex;
		justify-content: center;
		margin: 0 0 20px;
	}
	.swiper-nav a {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20px;
		margin: 0;
		font-size: 18px;
		line-height: 18px;
		border-right: 1px #333 solid;
	}
	.swiper-nav a:last-child {
		border-right-width: 0;
	}
	.swiper-nav a:hover,
	.swiper-nav a.focus {
		color: #6a7ee0;
	}
	.swiper-nav span {
		padding: 0;
	}
	.swiper-nav a:before {
		display: none;
	}
	.features {
		margin: 0;
	}
	.features_more,
	.features_more img {
		width: 320px;
	}
	.page_4 {
		height: auto;
	}
	.share {
		margin: 6vw auto 185px;
	}
}

@media screen and (max-width: 1150px) {
	.movies {
		padding: 0 15px;
		width: auto;
	}
	.movies .movList {
		margin-right: 10px;
	}
	.movies .movList:last-child {
		margin-right: 0;
	}
	.movies a:after {
		width: 21%;
		height: 40%;
		background-size: 100% auto;
	}
	.movies p {
		font-size: 16px;
	}
	.share_txt {
		margin-right: 22px;
		font-size: 26px;
		line-height: 26px;
	}
	.share_icon a:first-child {
		margin-right: 10px;
	}
	.share_icon img {
		width: 48px;
	}
}

@media screen and (max-width: 1000px) {
	.title h2 span {
		font-size: 21px;
		line-height: 21px;
	}
	.title h3 {
		font-size: 60px;
		line-height: 55px;
	}
	.features {
		width: 80vw;
		height: 46vw;
	}
}

@media screen and (max-width: 800px) {
	a,a img,a t,
	a:before,a:after {
		-webkit-transition: 0s;
		transition: 0s;
	}
	section,
	.swiper-slide {
		height: auto;
		min-height: 133.34vw;
	}
	.page_2 .title,
	.page_4 .title {
		margin: auto;
		margin-top: calc(50px + 8vw);
		margin-bottom: 6.5vw;
	}
	.page_2 .block:nth-child(2) .title {
		margin: 8vw auto 7vw;
	}
	.fancybox-slide--video .fancybox-content {
		width: 100vw !important;
		height: 56.25vw !important;
		max-width: 100vw;
	}
	/*---------------------------------------------------------
		page_1
	---------------------------------------------------------*/
	.page_1 {
		background-image: url("../images/aurakingdom2-bg_1_m.jpg");
		background-size: auto 100%;
	}
	.logo_home {
		display: block;
		padding-left: 8vw;
		margin: 11vw auto;
		width: 52vw;
	}
	.page_1 .btn_play {
		display: none;
	}
	/*---------------------------------------------------------
		page_2
	---------------------------------------------------------*/
	.page_2 {
		padding: 0 12vw 8vw;
		background-image: url("../images/aurakingdom2-bg_2_m.jpg");
	}
	.newsBox,
	.twitterBox {
		max-width: 100%;
	}
	.twitterBox {
		height: 120vw;
		max-height: 500px;
	}
	.tab_nav a:hover {
		margin-bottom: 0;
		color: #fff;
		background: #444;
	}
	/*---------------------------------------------------------
		page_3
	---------------------------------------------------------*/
	.page_3 {
		padding-bottom: 0;
		background-image: url("../images/aurakingdom2-bg_3_m.jpg");
	}
	.page_3 .title {
		position: absolute;
		top: calc(50px + 6.5vw);
		left: 0;
		right: 0;
		margin: auto;
	}
	.swiperBox {
		margin: auto;
	}
	.swiper-nav {
		position: absolute;
		top: 29vw;
		left: 0;
		right: 0;
		z-index: 2;
		flex-wrap: wrap;
		margin: auto;
		width: 74vw;
	}
	.swiper-nav a {
		margin-bottom: 18px;
		font-size: 20px;
		line-height: 20px;
	}
	.swiper-nav a:nth-child(3) {
		border-right-width: 0;
	}
	.features {
		width: 100vw;
		height: auto;
	}
	.swiper-slide {
		background-position: top center;
		background-size: auto 100%;
	}
	.features .f1 { background-image: url("../images/aurakingdom2-features_1_m.png"); }
	.features .f2 { background-image: url("../images/aurakingdom2-features_2_m.png"); }
	.features .f3 { background-image: url("../images/aurakingdom2-features_3_m.png"); }
	.features .f4 { background-image: url("../images/aurakingdom2-features_4_m.png"); }
	.features .f5 { background-image: url("../images/aurakingdom2-features_5_m.png"); }

	.features_more {
		margin-top: -3.5vw;
	}
	/*---------------------------------------------------------
		page_4
	---------------------------------------------------------*/
	.page_4 {
		min-height: auto;
		background-image: url("../images/aurakingdom2-bg_4_m.jpg");
		background-position: bottom center;
	}
	.movies {
		flex-wrap: wrap;
		padding: 0;
		width: 500px;
	}
	.movies .movList {
		margin: 0 0 30px 0;
		width: 100%;
	}
	.movies p {
		font-size: 18px;
	}
}

@media screen and (max-width: 600px) {
	section,
	.swiper-slide {
		min-height: 170.68vw;
	}
	.logo_home {
		padding-left: 10vw;
		margin: 14vw auto;
		width: 68vw;
	}
	.page_2 {
		padding: 0 7vw 8vw;
	}
	.swiper-nav {
		top: 37vw;
		width: 90vw;
	}
	.swiper-nav a {
		padding: 0 4vw;
		font-size: 3vw;
		line-height: 3vw;
	}
	.movies {
		width: 80vw;
	}
	.share {
		margin: 10vw auto calc(35px + 30vw);
	}
	.share_txt {
		margin-right: 4.5vw;
		font-size: 6vw;
		color: #333;
		line-height: 6vw;
		letter-spacing: .8vw;
	}
	.share_icon a:first-child {
		margin-right: 2.5vw;
	}
	.share_icon img {
		width: 10vw;
		height: auto;
	}
}

@media screen and (max-width: 480px) {
	section,
	.features,
	.swiper-slide {
		min-height: 178vw;
	}
	.title h2 span {
		margin: 0 2vw;
		font-size: 4.2vw;
		line-height: 4.2vw;
	}
	.title h3 {
		font-size: 10vw;
		line-height: 10vw;
	}
	.title h2:before,
	.title h2:after {
		width: 20vw;
	}
	.page_2 {
		padding: 0 6vw 8vw;
	}
	.tab_nav a {
		padding: 1.8vw 4vw;
		font-size: 16px;
		line-height: 16px;
	}
	.tab_nav a:hover {
		padding-bottom: 1.8vw;
	}
	.list a {
		font-size: 14px;
	}
	.list span {
		width: 82px;
	}
	.list p {
    padding: 0 7px;
		width: calc(100% - 126px);
	}
	.swiper-nav {
		top: 38.5vw;
		width: 100vw;
	}
	.swiper-nav a {
		margin-bottom: 4vw;
		font-size: 3.7vw;
		line-height: 3.7vw;
	}
	.features_more {
		margin-top: -5vw;
	}
	.features_more,
	.features_more img {
		width: 60vw;
	}
	.movies p {
		font-size: 16px;
		line-height: 20px;
	}
}

@media screen and (max-width: 420px) {
	.tab_nav a {
		padding: 1.8vw 3vw;
	}
	.tabNav a.btn_more {
		width: 22px;
		height: 20px;
		font-size: 16px;
		color: #fff;
		line-height: 18px;
	}
	.movies .movList {
		margin: 0 0 22px 0;
	}
	.movies a {
		margin-bottom: 5px;
	}
	.movies p {
		font-size: 15px;
	}
}

@media screen and (max-width: 385px) {
	.tab_nav a {
		font-size: 16px;
		line-height: 16px;
	}
	.tabs {
		padding: 10px 0;
	}
	.list a {
		padding: 8px 0;
		font-size: 13px;
	}
	.list a > * {
		height: 22px;
		line-height: 24px;
	}
	.list p {
		padding-right: 0;
		width: calc(100% - 92px);
	}
	.list span {
		font-size: 12px;
	}
	.list tt {
		display: none;
	}
	.features {
		margin-top: 3vw;
	}
	.swiper-nav {
		top: 41vw;
	}
}

@media screen and (max-width: 360px) {
	.logo_home {
		margin: 17vw auto;
		width: 64vw;
	}
	.tab_nav a {
		padding: 1.8vw 2.4vw;
		font-size: 14px;
		line-height: 14px;
	}
	.swiper-nav {
		top: 41.5vw;
	}
	.movies a {
		margin-bottom: 5px;
	}
}

@media screen and (max-width: 320px) {
	.swiper-nav {
		top: 42vw;
	}
}

@media screen and (max-width: 800px) and (orientation: landscape) {
	.swiper-nav {
		top: 39vw;
	}
	.swiper-nav a {
		font-size: 3vw;
		line-height: 3vw;
	}
	.appBar {
		z-index: 10;
	}
}