@charset "UTF-8";
/*--------------------------------------------------------------------
=== [レスポンシブ] ====================================
 -------------------------------------------------------------------*/
.pcHide {
	display: none;
}
.spHide {
	display: block;
}
.gnavSp {
	display: none;
}
@media (max-width: 1440px) {
	.contents .pageTtl {
		padding-top: 10.8vw;
		margin-bottom: 4vw;
	}
	.contents .pageTtl::after {
		top: 3vw;
	}
}
@media (max-width: 1080px) {
	.contents .pageTtl {
		padding-top: 12.8vw;
		margin-bottom: 6vw;
	}
	.contents .pageTtl::after {
		top: 5vw;
	}
	#loader {
		padding-top: 15vw;
	}
	#loader .wrap {
		width: 70vh;
	}
	.home .mainCopy {
		top: 29vw;
	}
	header nav {
		margin-left: 10px;
	}
	header nav > ul {
		font-size: 24px;
		width: 550px;
		margin-top: 20px;
		justify-content: flex-start;
	}
	header nav ul li {
		margin-top: 0;
	}
	.home .infoBox .news ul {
		border-top: 1px solid #000;
		font-size: 14px;
	}
	.home .infoBox {
		max-width: 1080px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 130vw 20px 0 20px;
	}
}
@media (max-width: 930px) {
	header nav > ul {
		font-size: 22px;
		width: 61.5vw;
	}
	header {
		padding: 0 10px;
	}
	header .lang {
		margin-left: 0;
	}
	ul#charaDetail li .data h4 br.forTab {
		display: block;
	}
}
@media (max-width: 830px) {
	header nav > ul {
		font-size: 20px;
	}
}
@media (max-width: 768px) {
	header nav > ul {
		font-size: 18px;
	}
	.contents .pageTtl {
		padding-top: 14.8vw;
		margin-bottom: 12vw;
	}
	.contents .pageTtl::after {
		top: 10vw;
	}
	.menu-btn .btnOn {
		display: none;
	}
	.open .menu-btn .btnOff {
		display: none;
	}
}
@media (max-width: 750px) {
	.pcHide {
		display: block;
	}
	.spHide {
		display: none;
	}
	.contents .pageTtl {
		padding-top: 24.8vw;
		margin-bottom: 12vw;
	}
	.contents .pageTtl::after {
		top: 20vw;
	}
	#wrapper {
		overflow: hidden;
	}
	#wrapper main{
		background-image: url(../img/base/frame_top_sp.png), url(../img/base/frame_btm_sp.png);
		background-size: 500%;
		background-position: center -13vw, center bottom -125vw;
	}
	.cfs-hyperlink {
		font-size: 12px;
		margin: 20px auto;
		width: 100%;
		box-sizing: border-box;
	}
	.cfs-hyperlink span {
		padding: 10px;
		display: block;
	}
	#loader .wrap {
		width: 100vh;
	}
	#loader {
		padding-top: 20vw;
	}
	.load_logo {
		width: 50%;
		margin: auto;
		left: 0;
		right: 0;
		top: 30vw;
	}
	.home header h1, header h1 {
		width: 57.33vw;
		margin-top: 10px;
		position: absolute;
		z-index: 1001;
	}
	header {
		justify-content: flex-start;
		z-index: inherit;
	}
	header nav, .home .snsBox {
		display: none;
	}
	header .lang {
		background-image: none;
		position: absolute;
		right: 22.5vw;
		z-index: 1000;
		width: inherit;
		margin-top: 5vw;
	}
	header .lang ul {
		display: flex;
		color: #e24379;
		justify-content: center;
		align-items: center;
		max-height: 103px;
		height: 5.36vw;
	}
	header .lang ul li:first-child::after {
		content: "/";
		margin: 0 5px;
		color: #777777;
	}
	header .lang ul a {
		color: #777777;
	}
	header .lang ul .current a {
		color: #E2437F;
	}
	.gnavSp {
		display: block;
	}
	.menu-btn {
		position: absolute;
		top: 2vw;
		right: 2vw;
		width: 16.1vw;
		height: 18.1vw;
		cursor: pointer;
		z-index: 1001;
	}
	.menu-btn .btnOn {
		display: none;
	}
	.open .menu-btn .btnOff {
		display: none;
	}
	.open .menu-btn .btnOn {
		display: block;
	}
	.open {
		overflow: hidden;
		width: 100%;
		height: 100%;
		left: 0;
	}
	.gnavSp {
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url(../img/sp/menu_bg.png);
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		visibility: hidden;
		z-index: 1000;
		background-size: 100%;
	}
	header nav {
		margin-left: 0;
	}
	.open .gnavSp {
		visibility: inherit;
		opacity: 1;
	}
	.gnavSp .wrap {
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gnavSp > ul {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: inherit;
		margin-top: 31vw;
	}
	header nav ul li::after {
		content: none;
	}
	header nav ul li {
		line-height: 10vw;
	}
	header nav li:nth-child(1) a {
		background: linear-gradient(0deg, rgba(0, 228, 236, 1) 0%, rgba(1, 227, 233, 1) 100%);
	}
	header nav li:nth-child(2) a {
		background: linear-gradient(0deg, rgba(3, 225, 228, 1) 0%, rgba(5, 223, 224, 1) 100%);
	}
	header nav li:nth-child(3) a {
		background: linear-gradient(0deg, rgba(8, 220, 218, 1) 0%, rgba(11, 217, 213, 1) 100%);
	}
	header nav li:nth-child(4) a {
		background: linear-gradient(0deg, rgba(14, 214, 206, 1) 0%, rgba(16, 212, 200, 1) 100%);
	}
	header nav li:nth-child(5) a {
		background: linear-gradient(0deg, rgba(20, 208, 192, 1) 0%, rgba(23, 205, 185, 1) 100%);
	}
	header nav li:nth-child(6) a {
		background: linear-gradient(0deg, rgba(27, 201, 177, 1) 0%, rgba(30, 198, 171, 1) 100%);
	}
	header nav li:nth-child(7) a {
		background: linear-gradient(0deg, rgba(33, 195, 162, 1) 0%, rgba(36, 192, 156, 1) 100%);
	}
	header nav li:nth-child(8) a {
		background: linear-gradient(0deg, #28bc95 0%, #2bb98e 100%);
	}
	header nav li:nth-child(9) a {
		background: linear-gradient(0deg, #2eb687 0%, #30b481 100%);
	}
	header nav li:nth-child(10) a {
		background: linear-gradient(0deg, rgba(51, 177, 123, 1) 0%, rgba(53, 175, 119, 1) 100%);
	}
	header nav li:nth-child(11) a {
		background: linear-gradient(0deg, rgba(55, 173, 114, 1) 0%, rgba(57, 171, 110, 1) 100%);
	}
	header nav li:nth-child(n) a {
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.spSnsBox {
		position: absolute;
		top: 148vw;
		right: 0;
		left: 0;
		color: #777777;
		font-size: 12px;
		display: flex;
		letter-spacing: 0.1em;
		align-items: center;
		margin: 0 auto;
		width: 90%;
		justify-content: space-around;
	}
	.spSnsBox a {
		color: #777777;
		display: flex;
		height: 5.5vw;
		align-items: center;
	}
	.spSnsBox .oficialTw {
		width: 42vw;
	}
	.spSnsBox .oficialTw a::after {
		content: "";
		display: inline-block;
		background-size: contain;
		background-image: url(../img/top/ico_tw.png);
		width: 5.5vw;
		height: 5.5vw;
		background-position: center;
		background-repeat: no-repeat;
		margin-left: 3vw;
	}
	.spSnsBox .shareSns::before {
		content: "";
		width: 1px;
		height: 32px;
		background-color: #777777;
		position: absolute;
	}
	.spSnsBox .shareSns p {
		margin-left: 7vw;
	}
	.spSnsBox .shareSns {
		display: flex;
		width: 48vw;
		align-items: center;
	}
	.spSnsBox .shareSns ul {
		height: 5.5vw;
		display: flex;
	}
	.spSnsBox .shareSns ul li {
		margin-left: 3vw;
	}
	.spSnsBox .shareSns img {
		width: auto;
		height: 100%;
	}

	.home #wrapper {
		background-position: center 11vw;
		min-height: inherit;
	}
	.home .mainCopy {
		position: absolute;
		top: 105vw;
		width: 50vw;
		right: 4vw;
	}
	.mv-fix.mv-fixed {
		top: 105vw;
	}
	.home .infoBox {
		max-width: 100%;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 auto;
		padding: 155vw 20px 0 20px;
	}
	.home .infoBox .news,
	.home .infoBox .movie {
		width: 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		position: relative;
	}
	.home .infoBox .news {
		order: 2;
		height: auto;
		padding: 0 15px 30px 15px;
		position: relative;
		margin-right: 10px;
		margin-bottom: 0;
	}
	.home .infoBox .movie {
		order: 1;
		height: 54vw;
		margin-bottom: 5vw;
	}
	.home .infoBox .news h3 {
		width: 22vw;
	}
	.home .infoBox .news .more {
		width: 24.6vw;
		top: 10px;
	}
	main .frameMid {
		padding-bottom: 0;
	}
	footer {
		padding: 15px 0;
	}
	.shareSnsBtm {
		display: none;
	}
	#pageTop {
		width: 13vw;
		height: 13vw;
		z-index: 1000;
		bottom: 16vw;
		right: 30px;
	}
	main .frameMid {
		background-size: 110% auto;
		background-image: none;
	}
	.contents .pageTtl {
		height: 50vw;
		font-size: 9.86vw;
		padding-top: 30vw;
		background-repeat: no-repeat;
		background-position: center bottom;
	}
	.contents .pageTtl::after {
		width: 80vw;
		height: 35vw;
	}
	.contents .pageTtl span {
		font-size: 2.66vw;
	}
	.contents {
		margin: 0 auto;
		padding: 6vw 4vw 15vw 4vw;
	}
	.contents .note {
		padding-bottom: 30px;
		font-size: 18px;
	}
	.contents .note02 {
		font-size: 12px;
	}
	.post-type-archive-news .newsList {
		padding: 20px;
		font-size: 13px;
	}
	.post-type-archive-news .newsList a {
		padding: 15px 0;
	}
	.post-type-archive-news .newsList li p {
		margin-left: 0;
	}
	.post-type-archive-news .newsList a .date {
		float: none;
	}
	.single-news .newsDetail {
		padding: 30px 20px 30px;
		font-size: 14px;
	}
	.single-news .newsDetail .ttl {
		font-size: 20px;
		margin-bottom: 30px;
	}
	.single-news .newsDetail article {
		padding: 0;
		font-size: 14px;
	}
	.single-news .newsDetail article .rTxt img {
		width: 100%;
	}
	.single-news .pager .btnBack {
		width: 80px;
		margin-top: 10vw;
	}
	.single-news .pager .btnPrev {
		width: 80px;
		padding-left: 3.5vw;
		margin-right: 1.5vw;
	}
	.single-news .pager .btnNext {
		width: 80px;
		margin-left: 2vw;
	}
	.single-news .pager .prevNext {
		display: flex;
		justify-content: space-between;
		background-image: url(../img/base/pager_bg.png);
		height: 14.6vw;
		background-size: auto 14.6vw;
		padding: 6vw 0 0;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-position: center;
		margin-top: 4vw;
	}
	.intro .txt {
		margin: 30px 0 30px;
		font-size: 14px;
		line-height: 2.5em;
	}
	.intro .btn {
		width: 95%;
	}
	.movie #wrapper {
		min-height: inherit;
	}
	.movie .movielList .ttlArea .ttl {
		font-size: 20px;
		top: 10vw;
	}
	.movie .movielList .ttlArea .date {
		font-size: 14px;
		top: 4vw;
		margin-bottom: 4vw;
	}
	.movie .movielList .ttlArea .date span {
		font-size: 12px;
	}
	.staff .staffList, .staff .castList {
		display: flex;
		flex-direction: column;
		padding-left: 0;
	}
	.staff .staffList .left, .staff .castList .left {
		font-size: 26px;
		width: 100%;
		display: flex;
		align-items: baseline;
		margin-bottom: 10px;
	}
	.staff .staffList .left span, .staff .castList .left span {
		font-size: 12px;
		margin-left: 10px;
	}
	.staff .staffList .right dl:before, .staff .castList .right dl:before {
		margin-bottom: 20px;
	}
	.staff .staffList .right dt, .staff .castList .right dt {
		float: none;
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 10px;
		width: 100%;
		text-align: left;
	}
	.staff .staffList .right dd, .staff .castList .right dd {
		font-size: 16px;
		margin-bottom: 20px;
	}
	.staff .staffList .right dd span, .staff .castList .right dd span {
		font-size: 14px;
		margin-left: 20px;
	}
	ul#charaList li {
		width: 21.32vw;
		height: 21.32vw;
		margin: 0.8vw;
	}
	ul#charaDetail li .wrap {
		background-position: -5vw top, 50vw bottom;
		padding: 15vw 0 10vw 0;
		display: flex;
		flex-direction: column;
	}
	ul#charaDetail li .wrap .data {
		order: 2;
	}
	ul#charaDetail li .charaImg {
		height: 114vw;
		margin-top: -8vw;
		order: 1;
		margin: -5vw auto 0 auto;
	}
	ul#charaDetail li .data {
		text-align: center;
	}
	ul#charaDetail li .data h4 {
		font-size: 60px;
		margin-bottom: 20px;
		line-height: 1.2;
		margin-top: 20px;
	}
	ul#charaDetail li .data h4 span {
		font-size: 14px;
	}
	ul#charaDetail li .data h4 br.forTab {
		display: none;
	}
	ul#charaDetail li .data .txt {
		font-size: 16px;
		line-height: 2;
	}
	.privacy .privacyBox dt {
		font-size: 16px;
	}
	.privacy .privacyBox {
		padding: 30px 20px;
		font-size: 14px;
	}
	.privacy .privacyBox dd {
		margin-bottom: 30px;
	}
	.news .contents {
		min-height: 114vw;
	}
	.news #wrapper, .intro #wrapper, .story #wrapper, .chara #wrapper, .staff #wrapper, .movie #wrapper, .onair #wrapper, .music #wrapper, .products #wrapper, .game #wrapper, .special #wrapper, .privacy #wrapper {
		background-image: none !important;
		background-color: transparent !important;
	}
	.news #wrapper::before, .intro #wrapper::before, .story #wrapper::before, .chara #wrapper::before, .staff #wrapper::before, .movie #wrapper::before, .onair #wrapper::before, .music #wrapper::before, .products #wrapper::before, .game #wrapper::before, .special #wrapper::before, .privacy #wrapper::before {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 100vh;
		-webkit-background-size: 110% auto;
		background-size: 110% auto;
		content: "";
		background-repeat: no-repeat;
		background-color: #004f55;
		background-position-x: center;
	}
	.news #wrapper::before {
		background-image: url("../img/news/news_bg.jpg");
	}
	.intro #wrapper::before {
		background-image: url("../img/intro/intro_bg.jpg");
	}
	.story #wrapper::before {
		background-image: url("../img/story/story_bg.png");
	}
	.chara #wrapper::before {
		background-image: url("../img/chara/chara_bg.png");
	}
	.staff #wrapper::before {
		background-image: url("../img/staff/staff_bg.png");
	}
	.movie #wrapper::before {
		background-image: url("../img/movie/movie_bg.png");
	}
	.onair #wrapper::before {
		background-image: url("../img/onair/onair_bg.jpg");
	}
	.music #wrapper::before {
		background-image: url("../img/music/music_bg.jpg");
	}
	.products #wrapper::before {
		background-image: url("../img/products/products_bg.png");
	}
	.game #wrapper::before {
		background-image: url("../img/game/game_bg.jpg");
	}
	.special #wrapper::before {
		background-image: url("../img/special/special_bg.jpg");
	}
	.privacy #wrapper::before {
		background-image: url(../img/privacy/privacy_bg.png);
	}

}
@media (max-width: 414px) {
	main {/*
		background-position: center -10vw, center bottom;*/
	}
	.contents .pageTtl::after {
		width: 105vw;
		height: 50vw;
	}
	.contents .pageTtl {
		padding-top: 40vw;
	}
	.fadein {
		opacity: 0;
		transform: translateY(0);
		animation-name: spfade;
		animation-duration: 1s;
		animation-delay: 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
}
@media (max-width: 375px) {
	main {/*
		background-position: center -13vw, center bottom;*/
	}
}
@keyframes spfade {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fadein + .fadein {
	animation-delay: 1s;
}