@charset "utf-8";
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
::selection {
background: #fe5766;
color: #fff;
}
::-moz-selection {
background: #fe5766;
color:#fff;
}
::-webkit-scrollbar {
width: 12px;
height:12px;
background:rgba(255,255,255,0.5);
}
.cursor,
.follower {
	position: absolute;
	top: 0;
	left: 0;
	cursor: none !important;
	pointer-events: none;
	opacity: 0;
}
.cursor {
	width: 36px;
	height: 34px;
	background: url(../img/cursor.png) left top;
	z-index: 99999;
	animation:cursor 1s steps(6) infinite,cursorRotate 1s linear infinite;
	transform:scale(0.5);
}
*:hover {
	cursor: none !important;
}
@keyframes cursor {
	from {
		background-position:left top;
	}
	to {
		background-position: right top;
	}
}
@keyframes cursorRotate {
	from {
		transform:scale(0.5) rotate(0);
	}to {
		transform:scale(0.5) rotate(360deg);
	}
}
@keyframes follower {
	from {
		transform:scale(0.8) rotate(0);
	}
	to {
		transform:scale(0.8) rotate(359deg);
	}
}
.follower {
	width: 35px;
	height: 39px;
	background: url(../img/follower.png);
	z-index: 99998;
	animation:follower 0.8s steps(5) infinite;
}
body::-webkit-scrollbar-thumb,
#modal::-webkit-scrollbar-thumb {
background: #fe5766;
border-radius: 6px;
margin:1px;
box-shadow: none;
border:1px solid #FFF;
}
body.cc2::-webkit-scrollbar-thumb,
body.cc2 #modal::-webkit-scrollbar-thumb,
body.cc2 #fixedWrap nav {
background: #d1bff2;
}
body.cc3::-webkit-scrollbar-thumb,
body.cc3 #modal::-webkit-scrollbar-thumb,
body.cc3 #fixedWrap nav {
background: #f5a078;
}
body.cc4::-webkit-scrollbar-thumb,
body.cc4 #modal::-webkit-scrollbar-thumb,
body.cc4 #fixedWrap nav {
background: #96dae4;
}
body.cc5::-webkit-scrollbar-thumb,
body.cc5 #modal::-webkit-scrollbar-thumb,
body.cc5 #fixedWrap nav {
background: #9cb9aa;
}
body.cc6::-webkit-scrollbar-thumb,
body.cc6 #modal::-webkit-scrollbar-thumb,
body.cc6 #fixedWrap nav {
background: #ffaa2d;
}
body.cc7::-webkit-scrollbar-thumb,
body.cc7 #modal::-webkit-scrollbar-thumb,
body.cc7 #fixedWrap nav {
background: #51c2aa;
}
html {
scrollbar-color: #fe5766 #FFF;
scrollbar-width:thin;
}
.cc2 {
scrollbar-color: #d1bff2 #FFF;
}
.cc3 {
scrollbar-color: #f5a078 #FFF;
}
.cc4 {
scrolbar-color: #96dae4 #FFF;
}
.cc5 {
scrollbar-color: #9cb9aa #FFF;
}
.cc6 {
scrollbar-color: #ffaa2d #FFF;
}
.cc7 {
scrollbar-color: #51c2aa #FFF;
}
body {
cursor: none !important;
font-family: "Yu Gothic", YuGothic, sans-serif;
font-weight: 600;
font-size: 16px;
color: #000;
background-color: #fff;
}
a { color: #000; }
a:hover { text-decoration: none; }
.sp {display:none;}
#fullWrap {
min-width: 1200px;
position: relative;
}
#fixedWrap {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
min-width:1200px;
padding:40px 30px 0;
z-index:9998;
pointer-events: none;
}
.sub #fixedWrap {
	top:0 !important;
}
#fixedWrap nav {
padding:0 30px;
border-radius: 15px;
background:#fe5766;
height:67px;
position: relative;
display: flex !important;
justify-content: space-between;
align-items: center;
pointer-events: auto;
}
#fixedWrap nav:before {
content:'';
display: block;
width:167px;
height:39px;
background:url(../img/nav_icon.png) no-repeat left center / contain;
}
.fixed__menuBtn {
display: none;
}
.fixed__nav {
display: flex;
height:67px;
}
.fixed__nav li {
height:67px;
position: relative;
}
.fixed__nav li:before {
content:'';
position: absolute;
left:5px;
top:15px;
right:5px;
bottom:15px;
border-radius: 10px;
transform:scale(0) skewX(-15deg);
background:rgba(255,255,255,0.3);
opacity:0;
transition: all 0.3s ease;
}
.fixed__nav li:hover:before,
.fixed__nav li.active:before {
transform:scale(1) skewX(-15deg);
opacity:1;
}
.fixed__nav li.soon {
opacity:0.3;
pointer-events:none;
}
.fixed__nav0 {
width:85px;
}
.fixed__nav1 {
width:159px;
}
.fixed__nav2 {
width:136px;
}
.fixed__nav3 {
width:129px;
}
.fixed__nav4 {
width:101px;
}
.fixed__nav5 {
width:98px;
}
.fixed__nav6 {
width:130px;
}
.fixed__nav li a {
display: block;
height:67px;
position: relative;
z-index:5;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 15px;
}
.fixed__nav0 a {
background-image: url(../img/nav0_w.png);
}
.fixed__nav1 a {
background-image: url(../img/nav1_w.png);
}
.fixed__nav2 a {
background-image: url(../img/nav2_w.png);
}
.fixed__nav3 a {
background-image: url(../img/nav3_w.png);
}
.fixed__nav4 a {
background-image: url(../img/nav4_w.png);
}
.fixed__nav5 a {
background-image: url(../img/nav5_w.png);
}
.fixed__nav6 a {
background-image: url(../img/nav6_w.png);
}
.fixed__share {
width:167px;
height:35px;
display: flex;
}
.fixed__share dt {
width:62px;
background: url(../img/share_text_w.png) no-repeat center center / auto 14px;
}
.fixed__share dd {
width:35px;
height:35px;
position:relative;
}
.fixed__share dd:before {
content:'';
position: absolute;
left:1px;
top:1px;
right:1px;
bottom:1px;
border-radius: 10px;
transform:scale(0) skewX(-15deg);
background:rgba(255,255,255,0.3);
opacity:0;
transition: all 0.3s ease;
}
.fixed__share dd:hover:before {
transform:scale(1) skewX(-15deg);
opacity:1;
}
.fixed__share dd a {
position: relative;
display: block;
height: 35px;
background-position: center center;
background-size: auto 16px;
background-repeat: no-repeat;
}
.fixed__share--twitter a {
background-image: url(../img/icon_twitter_w.png);
}
.fixed__share--facebook a {
background-image: url(../img/icon_facebook_w.png);
}
.fixed__share--line a {
background-image: url(../img/icon_line_w.png);
}
.fixed__bttop {
position:absolute;
right:35px;
bottom:35px;
width:66px;
height:66px;
pointer-events: auto;
transition:opacity 0.3s ease;
opacity: 0;
}
.fixed__bttop.on {
opacity:1;
}
.fixed__bttop a {
display: block;
height:66px;
background:url(../img/btn_totop.png) no-repeat center center / contain;
transition:all 0.3s ease;
border-radius: 50%;
}
body.cc2 .fixed__bttop a {
background-color:#d1bff2;
}
body.cc3 .fixed__bttop a {
background-color:#f5a078;
}
body.cc4 .fixed__bttop a {
background-color:#96dae4;
}
body.cc5 .fixed__bttop a {
background-color:#9cb9aa;
}
body.cc6 .fixed__bttop a {
background-color:#ffaa2d;
}
body.cc7 .fixed__bttop a {
background-color:#51c2aa;
}
.fixed__bttop a:hover {
transform:scale(1.1);
}
main {
height:100vh !important;
position:relative;
overflow: hidden;
background: rgb(215,221,235);
background: -moz-linear-gradient(top,  rgba(215,221,235,1) 0%, rgba(219,228,236,1) 100%);
background: -webkit-linear-gradient(top,  rgba(215,221,235,1) 0%,rgba(219,228,236,1) 100%);
background: linear-gradient(to bottom,  rgba(215,221,235,1) 0%,rgba(219,228,236,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7ddeb', endColorstr='#dbe4ec',GradientType=0 );
}
main:before {
content:'';
background: url(../img/bg_main.jpg) no-repeat center center / cover;
position: absolute;
left: 0;
top:0;
right:0;
bottom:0;
/*animation: bgScroll 60s linear infinite;
transition:all 1s linear;*/
}
main:after {
content:'';
position:absolute;
left:-14.8%;
right:-14.8%;
top:-90%;
bottom:-90%;
background:url(../img/main_characters.png) no-repeat center center / contain;
animation: rotate 90s linear infinite;
transition:all 1s linear;
}
@keyframes bgScroll {
from {
	background-position:0 0;
}
to {
	background-position:928px -1173px;
}
}
@keyframes rotate {
from {
	transform:rotate(0deg);
}
to {
	transform: rotate(360deg);
}
}
h1 {
position: absolute;
width:130px;
height:130px;
background:#FFF url(../img/logo_square.png) no-repeat center center;
border-radius: 15px;
left: 30px;
top:30px;
z-index:5000;
}
h2 {
position: relative;
display: flex;
justify-content: center;
}
h2 img {
display: block;
}
main nav {
position:absolute;
width:130px;
left:30px;
bottom:30px;
background:#FFF;
border-radius: 15px;
padding:33px 0 30px;
z-index:5000;
}
.main__nav {
margin-bottom:22px;
}
.main__nav li {
height:31px;
}
.main__nav li.soon {
pointer-events: none;
opacity:0.3;
}
.main__nav li a {
display: block;
height:31px;
overflow: hidden;
position: relative;
background-position: 20px center;
background-repeat: no-repeat;
background-size: auto 13px;
transition:transform .3s ease;
}
.main__nav li a:hover {
transform: translateX(-5px);
}
.main__nav0 a {
background-image: url(../img/nav0_k.png);
}
.main__nav1 a {
background-image: url(../img/nav1_k.png);
}
.main__nav2 a {
background-image: url(../img/nav2_k.png);
}
.main__nav3 a {
background-image: url(../img/nav3_k.png);
}
.main__nav4 a {
background-image: url(../img/nav4_k.png);
}
.main__nav5 a {
background-image: url(../img/nav5_k.png);
}
.main__nav6 a {
background-image: url(../img/nav6_k.png);
}
.main__share {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main__share dt {
width:100%;
height:28px;
background:url(../img/share_text_k.png) no-repeat center center / auto 12px;
}
.main__share dd {
width:34px;
height:34px;
}
.main__share dd a {
display: block;
height:34px;
background-position: center center;
background-repeat: no-repeat;
background-size:auto 16px;
transition:transform 0.3s ease;
}
.main__share dd a:hover {
transform:scale(1.3);
}
.main__share--twitter a {
background-image: url(../img/icon_twitter_k.png);
}
.main__share--facebook a {
background-image: url(../img/icon_facebook_k.png);
}
.main__share--line a {
background-image: url(../img/icon_line_k.png);
}
.main__logo {
width:334px;
height:110px;
background:#FFF;
border-radius: 15px 15px 0 0;
z-index:6000;
position: absolute;
right:30px;
bottom:0;
padding-top:10px;
}
.main__logo--title {
margin:0 auto;
width:281px;
height:70px;
background:url(../img/logo_rectangle.png) no-repeat center center / contain;
}
.main__logo--copyright {
height:30px;
line-height:30px;
text-align: center;
font-size:10px;
font-weight: 600;
}
#introduction {
position:relative;
z-index:1;
padding-top:164px;
}
#introduction:before {
content:'';
position:absolute;
left:0;
right:0;
top:0;
bottom:-250px;
z-index:1;
background:url(../img/introduction_bg.png) no-repeat center center / cover;
}
.introduction__note {
position:relative;
width:1184px;
padding: 65px 99px 0;
height:678px;
margin:0 auto;
z-index:500;
}
.introduction__note:before {
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:-163px;
background:url(../img/introduction_note.png) no-repeat right center;
}
.introduction__note:after {
content:'';
position: absolute;
right:70px;
top:-33px;
width:204px;
height:204px;
background: url(../img/introduction_circle.png) no-repeat center center / contain;
animation: rotate 120s linear infinite reverse;
}
.introduction__point1 {
display: block;
position: absolute;
right:50%;
top:577px;
margin-right:462px;
width:159px;
height:159px;
background:url(../img/point_circle1.png) no-repeat center center;
animation: rotate 30s linear infinite;
z-index:10;
}
.introduction__point2 {
display: block;
position: absolute;
right:50%;
top:66px;
margin-right:205px;
width:425px;
height:425px;
background:url(../img/point_circle2.png) no-repeat center center;
animation: rotate 75s linear infinite reverse;
z-index:10;
}
#introduction h2 {
margin-bottom:35px;
}
.introduction__note p {
margin-bottom:25px;
z-index:50;
position:relative;
}
.introduction__text1 {
height:91px;
background: url(../img/introduction_text_p1.png) no-repeat center center;
}
.introduction__text2 {
height:33px;
background: url(../img/introduction_text_p2.png) no-repeat center center;
}
.introduction__text3 {
height:170px;
background: url(../img/introduction_text_p3.png) no-repeat center center;
}
.introduction__text4 {
height:35px;
background: url(../img/introduction_text_p4.png) no-repeat center center;
}
.introduction__comment {
display: block;
width:138px;
height:39px;
border-radius: 15px;
text-decoration: none;
line-height:39px;
text-align: center;
background:#fe5766;
color:#FFF;
position: absolute;
left:670px;
top:610px;
z-index:50;
transition: all 0.3s ease;
}
body.cc2 .introduction__comment {
background:#d1bff2;
}
body.cc3 .introduction__comment {
background:#f5a078;
}
body.cc4 .introduction__comment {
background:#96dae4;
}
body.cc5 .introduction__comment {
background:#9cb9aa;
}
body.cc6 .introduction__comment {
background:#ffaa2d;
}
body.cc7 .introduction__comment {
background:#51c2aa;
}
.introduction__comment:hover {
transform:scale(1.1);
}
.introduction__graffiti1 {
display: block;
position: absolute;
z-index: 50;
left:201px;
top:52px;
width:89px;
height:115px;
background:url(../img/introduction_graffiti1.png) no-repeat center center / contain;
}
.introduction__graffiti2 {
display: block;
position: absolute;
z-index: 50;
left:195px;
top:524px;
width:129px;
height:110px;
background:url(../img/introduction_graffiti2.png) no-repeat center center / contain;
}
.introduction__graffiti3 {
display: block;
position: absolute;
z-index: 50;
left:409px;
top:576px;
width:122px;
height:135px;
background:url(../img/introduction_graffiti3.png) no-repeat center center / contain;
}
.introduction__sign {
display: block;
position: absolute;
z-index: 50;
width:196px;
height:231px;
left:844px;
top:475px;
background:url(../img/introduction_sign.png) no-repeat center center / contain;
}
#character {
padding-top:160px;
position: relative;
z-index: 501
}
#character h2 {
margin-bottom:53px;
}
.character__list {
display: flex;
flex-wrap: wrap;
}
.character__list:after {
width:calc(100% / 3 * 2);
content: '';
background: #FFF url(../img/logo_rectangle.png) no-repeat center center;
}
.character__list li {
width: calc(100% / 3);
}
.character__list li p {
width:100%;
padding-top:100%;
position: relative;
}
.character__list li p a {
display: block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow: hidden;
}
.character__list li p a:before {
content:'';
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
transition: all 0.3s ease;
}
.character__list1 p a:before {
background:url(../img/character1_t.png) no-repeat center center / cover;
}
.character__list2 p a:before {
background:url(../img/character2_t.png) no-repeat center center / cover;
}
.character__list3 p a:before {
background:url(../img/character3_t.png) no-repeat center center / cover;
}
.character__list4 p a:before {
background:url(../img/character4_t.png) no-repeat center center / cover;
}
.character__list5 p a:before {
background:url(../img/character5_t.png) no-repeat center center / cover;
}
.character__list6 p a:before {
background:url(../img/character6_t.png) no-repeat center center / cover;
}
.character__list7 p a:before {
background:url(../img/character7_t.png) no-repeat center center / cover;
}
.character__list li p a:hover:before {
transform:scale(1.15) rotate(5deg);
}
.character__list li p a strong {
display: block;
position: absolute;
bottom: 0;
left: 0;
right:0;
height:98px;
}
.character__list1 p a strong {
background: url(../img/character1_tn.png) no-repeat left bottom;
}
.character__list2 p a strong {
background: url(../img/character2_tn.png) no-repeat left bottom;
}
.character__list3 p a strong {
background: url(../img/character3_tn.png) no-repeat left bottom;
}
.character__list4 p a strong {
background: url(../img/character4_tn.png) no-repeat left bottom;
}
.character__list5 p a strong {
background: url(../img/character5_tn.png) no-repeat left bottom;
}
.character__list6 p a strong {
background: url(../img/character6_tn.png) no-repeat left bottom;
}
.character__list7 p a strong {
background: url(../img/character7_tn.png) no-repeat left bottom;
}
#mm__bg {
background:url(../img/mm_bg.png) no-repeat center top / cover;
padding-bottom:130px;
}
#magazine {
padding-top:160px;
position: relative;
z-index: 501;
margin-top:-80px;
}
#magazine h2 {
margin-bottom:15px;
}
#magazine h2.s {
margin-bottom:53px;
}
.magazine__cont {
width:1138px;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.magazine__nav {
width:240px;
}
.magazine__nav li {
height:67px;
margin-bottom:15px;
}
.magazine__nav li a {
display: block;
height:67px;
border-radius: 15px;
border:2px solid #fe5766;
color:#fe5766;
line-height: 63px;
text-align: center;
letter-spacing: 0.08em;
padding-left:0.08em;
text-decoration: none;
background:#FFF;
transition:all 0.3s ease;
}
body.cc2 .magazine__nav li a {
border:2px solid #d1bff2;
color:#d1bff2;
}
body.cc3 .magazine__nav li a {
border:2px solid #f5a078;
color:#f5a078;
}
body.cc4 .magazine__nav li a {
border:2px solid #96dae4;
color:#96dae4;
}
body.cc5 .magazine__nav li a {
border:2px solid #9cb9aa;
color:#9cb9aa;
}
body.cc6 .magazine__nav li a {
border:2px solid #ffaa2d;
color:#ffaa2d;
}
body.cc7 .magazine__nav li a {
border:2px solid #51c2aa;
color:#51c2aa;
}
.magazine__nav li a:hover,
.magazine__nav li a.active {
background:#fe5766;
color:#FFF !important;
}
body.cc2 .magazine__nav li a:hover,
body.cc2 .magazine__nav li a.active {
background:#d1bff2;
}
body.cc3 .magazine__nav li a:hover,
body.cc3 .magazine__nav li a.active {
background:#f5a078;
}
body.cc4 .magazine__nav li a:hover,
body.cc4 .magazine__nav li a.active {
background:#96dae4;
}
body.cc5 .magazine__nav li a:hover,
body.cc5 .magazine__nav li a.active {
background:#9cb9aa;
}
body.cc6 .magazine__nav li a:hover,
body.cc6 .magazine__nav li a.active {
background:#ffaa2d;
}
body.cc7 .magazine__nav li a:hover,
body.cc7 .magazine__nav li a.active {
background:#51c2aa;
}
.magazine__nav li a.active {
pointer-events: none;
}
.magazine__lists {
	width:870px;
}
.magazine__lists li {
margin-bottom:15px;
height:67px;
}
.magazine__lists li a,
.magazine__lists li h3 {
display: flex;
border-radius: 15px;
border:2px solid #fe5766;
overflow: hidden;
height:67px;
letter-spacing: 0.08em;
text-decoration: none;
background:#FFF;
transition:all 0.3s ease;
justify-content: flex-start;
align-items: center;
color:#fe5766;
}
body.cc2 .magazine__lists li a,
body.cc2 .magazine__lists li h3 {
border:2px solid #d1bff2;
color:#d1bff2;
}
body.cc3 .magazine__lists li a,
body.cc3 .magazine__lists li h3 {
border:2px solid #f5a078;
color:#f5a078;
}
body.cc4 .magazine__lists li a,
body.cc4 .magazine__lists li h3 {
border:2px solid #96dae4;
color:#96dae4;
}
body.cc5 .magazine__lists li a,
body.cc5 .magazine__lists li h3 {
border:2px solid #9cb9aa;
color:#9cb9aa;
}
body.cc6 .magazine__lists li a,
body.cc6 .magazine__lists li h3 {
border:2px solid #ffaa2d;
color:#ffaa2d;
}
body.cc7 .magazine__lists li a,
body.cc7 .magazine__lists li h3 {
border:2px solid #51c2aa;
color:#51c2aa;
}
.magazine__lists li a.soon {
pointer-events: none;
}
.magazine__lists li a:hover,
.magazine__lists li h3 {
background:#fe5766;
color:#FFF !important;
}
.magazine__lists li h3 {
	transition:none;
}
body.cc2 .magazine__lists li a:hover,
body.cc2 .magazine__lists--thumb,
body.cc2 .magazine__lists li h3 {
background:#d1bff2;
}
body.cc3 .magazine__lists li a:hover,
body.cc3 .magazine__lists--thumb,
body.cc3 .magazine__lists li h3 {
background:#f5a078;
}
body.cc4 .magazine__lists li a:hover,
body.cc4 .magazine__lists--thumb,
body.cc4 .magazine__lists li h3 {
background:#96dae4;
}
body.cc5 .magazine__lists li a:hover,
body.cc5 .magazine__lists--thumb,
body.cc5 .magazine__lists li h3 {
background:#9cb9aa;
}
body.cc6 .magazine__lists li a:hover,
body.cc6 .magazine__lists--thumb,
body.cc6 .magazine__lists li h3 {
background:#ffaa2d;
}
body.cc7 .magazine__lists li a:hover,
body.cc7 .magazine__lists--thumb,
body.cc7 .magazine__lists li h3 {
background:#51c2aa;
}
.magazine__lists--title {
width:590px;
line-height:24px;
padding:0 40px;
transition:all 0.3s ease;
}
.magazine__lists--news {
width:660px;
line-height:24px;
padding:0 40px 0 0;
transition:all 0.3s ease;
}
.magazine__lists--time {
width:200px;
text-align: center;
transition:all 0.3s ease;
}
.magazine__lists li a:hover .magazine__lists--title,
.magazine__lists li a:hover .magazine__lists--news,
.magazine__lists li a:hover .magazine__lists--time {
color:#FFF;
}
.magazine__lists--thumb {
width:276px;
display: flex;
background:#fe5766;
color:#FFF;
justify-content: center;
align-items: center;
height:63px;
overflow: hidden;
}
.magazine__lists--thumb img {
width:100%;
height:auto;
transition:all 0.3s ease;
}
.magazine__lists li a:hover .magazine__lists--thumb img {
transform:scale(1.05) rotate(4deg);
}
#magazine2,
#magazine3 {
display: none;
}
#movie {
padding-top:160px;
position: relative;
z-index: 501;
margin-top:-80px;
}
#movie h2 {
margin-bottom:53px;
}
.movie__yt {
width:808px;
border-radius: 15px;
overflow: hidden;
margin:0 auto 20px;
}
.movie__ytin {
width:100%;
padding-top:56.25%;
position: relative;
}
.movie__ytin iframe {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.ef {
transform: translate3d(0, 50px, 0);
transition: all 0.7s ease;
opacity: 0;
}
.efs {
opacity: 1;
transform: translate3d(0, 0, 0);
}
h2.ef {
transform: translate3d(0,0,0);
transition:none;
opacity:1;
}
h2.ef img {
opacity:0;
}
h2.ef.efs img {
opacity:0;
animation:h2anim 0.8s ease-in-out forwards;
}
h2.ef.efs img:nth-child(2){
animation-delay: 0.1s
}
h2.ef.efs img:nth-child(3){
animation-delay: 0.2s
}
h2.ef.efs img:nth-child(4){
animation-delay: 0.3s
}
h2.ef.efs img:nth-child(5){
animation-delay: 0.4s
}
h2.ef.efs img:nth-child(6){
animation-delay: 0.5s
}
h2.ef.efs img:nth-child(7){
animation-delay: 0.6s
}
h2.ef.efs img:nth-child(8){
animation-delay: 0.7s
}
h2.ef.efs img:nth-child(9){
animation-delay: 0.8s
}
h2.ef.efs img:nth-child(10){
animation-delay: 0.9s
}
h2.ef.efs img:nth-child(11){
animation-delay: 1s
}
h2.ef.efs img:nth-child(12){
animation-delay: 1.1s
}
h2.ef.efs img:nth-child(13){
animation-delay: 1.2s
}
h2.ef.efs img:nth-child(14){
animation-delay: 1.3s
}
@keyframes h2anim {
0% {
	transform:translate3d(0,0,0);
	opacity:0;
}
50% {
	transform: rotateY(180deg) translate3d(0,-20px,0);
	opacity:1;
}
100% {
	transform: rotateY(360deg) translate3d(0,0,0);
	opacity:1;
}
}
.character__list li:nth-child(3n + 2) {
transition-delay: 0.1s
}
.character__list li:nth-child(3n) {
transition-delay: 0.2s
}
#loading {
position: fixed;
z-index: 20000;
background:#FFF url(../img/logo_rectangle.png) no-repeat center center;
left:0;
right:0;
top:0;
bottom:0;
}
#modal {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow-x: auto;
overflow-y: scroll;
background:rgba(255,255,255,.9);
z-index:10001;
display: none;
}
#modalin {
width:100%;
position: absolute;
left:0;
top:0;
min-width: 1200px;
min-height:100%;
pointer-events: none;
padding:70px 0 90px;
opacity:0;
transform:translateY(50px);
transition:all 0.3s ease;
}
#modalin.on {
opacity:1;
transform:translateY(0);
}
#modalin.c1 {
background:#fe5766;
}
#modalin.c2 {
background:#d1bff2;
}
#modalin.c3 {
background:#f5a078;
}
#modalin.c4 {
background:#96dae4;
}
#modalin.c5 {
background:#9cb9aa;
}
#modalin.c6 {
background:#ffaa2d;
}
#modalin.c7 {
background:#51c2aa;
}
.modalCharacter__cont {
width:1140px;
display: flex;
justify-content: space-between;
margin:0 auto 70px;
}
.modalCharacter__img {
width:50%;
text-align: right;
}
.modalCharacter__text {
width:50%;
display: flex;
flex-wrap: wrap;
align-content: center;
padding:0 30px 0 50px;
}
.c6 .modalCharacter__img {
width:60%;
}
.c6 .modalCharacter__text {
width:40%;
}
.modalCharacter__text h3 {
height:98px;
margin-bottom:30px;
background-position: left center;
background-repeat: no-repeat;
width:100%;
}
.c1 .modalCharacter__text h3 {
background-image: url(../img/character1_tn.png);
}
.c2 .modalCharacter__text h3 {
background-image: url(../img/character2_tn.png);
}
.c3 .modalCharacter__text h3 {
background-image: url(../img/character3_tn.png);
}
.c4 .modalCharacter__text h3 {
background-image: url(../img/character4_tn.png);
}
.c5 .modalCharacter__text h3 {
background-image: url(../img/character5_tn.png);
}
.c6 .modalCharacter__text h3 {
background-image: url(../img/character6_tn.png);
}
.c7 .modalCharacter__text h3 {
background-image: url(../img/character7_tn.png);
}
.modalCharacter__text p {
color:#FFF;
line-height:2;
padding-left:18px;
}
.modalManga {
margin:0 auto;
width:800px;
border-radius: 15px;
background:#FFF;
overflow: hidden;
}
.modalManga img {
max-width: 100%;
height:auto;
display: block;
}
.modal__close {
position:fixed;
right:45px;
top:45px;
width:66px;
height:66px;
z-index:500;
}
.modal__close a {
display: block;
height:66px;
background:url(../img/btn_close.png) no-repeat center center / contain;
transition:all 0.3s ease;
}
.modal__close a:hover {
transform: scale(1.1);
}
#modalin.comm {
display: flex;
align-items: center;
position:relative;
justify-content: center;
}
.modalComment__cont {
width:898px;
height:611px;
background:url(../img/comment_text.png) no-repeat center center;
margin:0 auto;
}
#modalin.mag {
display: flex;
align-items: center;
position:relative;
justify-content: center;
}
.modalManga__cont {
width:800px;
margin:0 auto;
}
#subFullWrap {
	background: url(../img/mm_bg.png) fixed no-repeat center top / cover;
	min-width: 1200px;
	min-height:100vh;
}
#news {
	padding-top:160px;
	padding-bottom:100px;
}
#news__lists {
width:1140px;
margin:0 auto;
padding-top:50px;
padding-bottom:80px;
}
.news__article {
	width:1140px;
	border:2px solid #fe5766;
	border-radius: 15px;
	background:#FFF;
	padding:30px;
	margin:-70px auto 30px;
}
.news__article p {
	line-height:2;
	font-weight: bold;
	margin-bottom:2em;
	color:#333;
	word-break: break-all;
}
body.cc2 .news__article {
border:2px solid #d1bff2;
}
body.cc3 .news__article {
border:2px solid #f5a078;
}
body.cc4 .news__article {
border:2px solid #96dae4;
}
body.cc5 .news__article {
border:2px solid #9cb9aa;
}
body.cc6 .news__article {
border:2px solid #ffaa2d;
}
body.cc7 .news__article {
border:2px solid #51c2aa;
}
.btindex {
	width:240px;
	height:67px;
	margin:0 auto;
}
.btindex a {
	display: block;
	height:67px;
	line-height: 67px;
	text-align: center;
	color: #fe5766;
	border:2px solid #fe5766;
	border-radius: 15px;
	transition:all 0.3s ease;
	text-decoration: none;
	background: #FFF;
}
body.cc2 .btindex a {
border:2px solid #d1bff2;
color: #d1bff2;
}
body.cc3 .btindex a {
border:2px solid #f5a078;
color: #f5a078;
}
body.cc4 .btindex a {
border:2px solid #96dae4;
color: #96dae4;
}
body.cc5 .btindex a {
border:2px solid #9cb9aa;
color: #9cb9aa;
}
body.cc6 .btindex a {
border:2px solid #ffaa2d;
color: #ffaa2d;
}
body.cc7 .btindex a {
border:2px solid #51c2aa;
color: #51c2aa;
}
.btindex a:hover {
	color:#FFF !important;
}
body.cc2 .btindex a:hover {
background: #d1bff2;
}
body.cc3 .btindex a:hover {
background: #f5a078;
}
body.cc4 .btindex a:hover {
background: #96dae4;
}
body.cc5 .btindex a:hover {
background: #9cb9aa;
}
body.cc6 .btindex a:hover {
background: #ffaa2d;
}
body.cc7 .btindex a:hover {
background: #51c2aa;
}
#staff {
padding-top:160px;
position: relative;
z-index: 501;
margin-top:-80px;
padding-bottom:80px;
}
#staff h2 {
margin-bottom:53px;
}
.staff__list {
	min-height:300px;
	display: table;
	margin:0 auto;
}
.staff__list li {
	height: 52px;
	line-height: 52px;
	font-size:24px;
	color:#fe5766;
	font-weight: bold;
}
.staff__list strong {
	color:#000;
	font-size:16px;
}
.cv {
	font-size: 22px;
	padding-bottom: 20px;
	width:100%;
}
.commentC {
	color: #FF5D5F;
	font-weight: bold;
}
.main__tomovie {
	height:124px;
	width:219px;
	border-radius: 15px;
	overflow: hidden;
	position: absolute;
	bottom: 30px;
	left:180px;
	z-index: 500
}
.main__tomovie a {
	display: block;
	height:124px;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: all 0.3s ease;
}
.main__tomovie a:hover {
	transform:scale(1.1);
}
.main__tomovie a:before {
	content:'';
	position: absolute;
	border-radius: 50%;
	border:2px solid #FFF;
	height:44px;
	width:44px;
	box-sizing: border-box;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}
.main__tomovie a:after {
	content:'';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #ffffff;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}
/*modalVisual*/
#modalin.v1 {
background:#fe5766;
}
.modalVisual {
margin:0 auto 30px;
width:800px;
border-radius: 15px;
background:#FFF;
overflow: hidden;
}
.modalVisual img {
max-width: 100%;
height:auto;
display: block;
}
.modalVisual_text {
	width:800px;
	margin:0 auto 30px;
}
.modalVisual_text p {
	color:#FFF;
	font-size:20px;
	line-height:2;
	font-weight: 700;
	text-align: center;
}
.modalVisual_btn {
	width:240px;
	margin:0 auto;
}
.modalVisual_btn a {
display: block;
height:67px;
border-radius: 15px;
border:2px solid #fe5766;
color:#fe5766;
line-height: 63px;
text-align: center;
letter-spacing: 0.08em;
padding-left:0.08em;
text-decoration: none;
background:#FFF;
transition:all 0.3s ease;
pointer-events:auto;
font-weight: 700;
}
.modalVisual_btn a:hover {
	transform:scale(1.1);
}
.news__commentbox {
	border:1px dotted #AAA;
	padding:30px 40px;
}
.news__commentbox strong {
	display: block;
	margin-bottom: 10px
}