body.is-modal {
		overflow-y: hidden;
}

canvas {
		position: absolute;
		top: 0;
		left: 0;
}

.wrapper {
		position: relative;
		background: url(../images/bg-04.png) repeat-x 0 764px, url(../images/bg-03.png) repeat-x 0 764px, url(../images/bg-02.png) repeat-x 0 0, url(../images/bg-01.png) repeat 0 0;
}

.mainWrapper {
		overflow: hidden;
}

.mainWrapper .leftArea {
		width: 270px;
		float: left;
}

.mainWrapper .leftArea .logoArea {
		height: 630px;
		margin-bottom: 45px;
		position: relative;
}

.mainWrapper .leftArea .logoArea__logo {
		width: 213px;
		height: 603px;
		background: url(../images/top/logo.png) no-repeat center center;
		position: absolute;
		top: 36px;
		left: 40px;
}

.mainWrapper .leftArea .mariBlock {
		height: 40px;
		position: relative;
		margin-bottom: 30px;
}

.mainWrapper .leftArea .mariBlock__rope {
		background: url(../images/top/mari-rope.png) no-repeat center center;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
}

.mainWrapper .leftArea .mariBlock__mari {
		background: url(../images/top/mari.png) no-repeat center center;
		width: 39px;
		height: 39px;
		position: absolute;
		top: 0;
		left: 112px;
		-moz-animation: mariBlock__mari linear 4s infinite;
		-moz-transform-origin: center 60px 0;
		-webkit-animation: mariBlock__mari linear 4s infinite;
		-webkit-transform-origin: center 60px 0;
		-ms-animation: mariBlock__mari linear 4s infinite;
		-ms-transform-origin: center 60px 0;
		-o-animation: mariBlock__mari linear 4s infinite;
		-o-transform-origin: center 60px 0;
		-webkit-animation: mariBlock__mari linear 4s infinite;
		        animation: mariBlock__mari linear 4s infinite;
		-webkit-transform-origin: center 60px 0;
		        transform-origin: center 60px 0;
}

@-webkit-keyframes mariBlock__mari {
		0% {
				-webkit-transform: rotate(0deg);
		}
		10% {
				-webkit-transform: rotate(5deg);
		}
		20% {
				-webkit-transform: rotate(0deg);
		}
		30% {
				-webkit-transform: rotate(-5deg);
		}
		40% {
				-webkit-transform: rotate(0deg);
		}
		100% {
				-webkit-transform: rotate(0deg);
		}
}

@keyframes mariBlock__mari {
		0% {
				-webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
		}
		10% {
				-webkit-transform: rotate(5deg);
				        transform: rotate(5deg);
		}
		20% {
				-webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
		}
		30% {
				-webkit-transform: rotate(-5deg);
				        transform: rotate(-5deg);
		}
		40% {
				-webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
		}
		100% {
				-webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
		}
}

.mainWrapper .leftArea .nav__li {
		display: block;
}

.mainWrapper .leftArea .nav__li a {
		display: block;
		height: 65px;
		background-repeat: no-repeat;
		background-position: center;
}

.mainWrapper .leftArea .nav__li--news {
		background-image: url(../images/top/nav-news.png);
}

.mainWrapper .leftArea .nav__li--story {
		background-image: url(../images/top/nav-story.png);
}

.mainWrapper .leftArea .nav__li--character {
		background-image: url(../images/top/nav-character.png);
}

.mainWrapper .leftArea .nav__li--goods {
		background-image: url(../images/top/nav-goods.png);
}

.mainWrapper .leftArea .nav__li--cast {
		background-image: url(../images/top/nav-cast.png);
}

.mainWrapper .leftArea .nav__li--onair {
		background-image: url(../images/top/nav-onair.png);
}

.mainWrapper .leftArea .nav__li--special {
		background-image: url(../images/top/nav-special.png);
}

.mainWrapper .leftArea .movieBlock__link {
		display: block;
		position: relative;
		width: 229px;
		height: 192px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 80px;
}

.mainWrapper .leftArea .movieBlock__link:after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: url(../images/top/movie-icon-arrow.png) no-repeat center center;
		background-size: 37px auto;
}

.mainWrapper .leftArea .movieBlock img, .mainWrapper .leftArea .movieBlock__circle01, .mainWrapper .leftArea .movieBlock__circle02, .mainWrapper .leftArea .movieBlock__circle03 {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
}

.mainWrapper .leftArea .movieBlock__circle01 {
		background-image: url(../images/top/movie-circleW.png);
		top: 5px;
		left: 5px;
}

.mainWrapper .leftArea .movieBlock__circle02 {
		background-image: url(../images/top/movie-circleY.png);
		top: -2px;
		left: 2px;
}

.mainWrapper .leftArea .movieBlock__circle03 {
		background-image: url(../images/top/movie-circleO.png);
		top: 5px;
		left: 5px;
}

.mainWrapper .leftArea .timeline {
		width: 240px;
		margin: 0 auto 50px;
}

.mainWrapper .mainArea {
		padding-left: 270px;
}

.mainWrapper .mainArea .mainArea-inner {
		max-width: 1130px;
		margin: 0 auto;
}

.mainWrapper .mainArea .mainImgArea {
		background-size: cover;
		width: 100%;
		height: 0;
		padding-top: 127.36935%;
		position: relative;
}

.mainWrapper .mainArea .mainImgArea__txt {
		background-size: cover;
		width: 100%;
		height: 0;
		padding-top: 127.36935%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url(../images/top/mainImg-txt.png);
}

.mainWrapper .mainArea .mainImgArea__bnr {
		position: absolute;
		width: 31.00089%;
		top: 10.98317%;
		right: 4.87157%;
}

.mainWrapper .mainArea .mainImgArea__bnr img {
		width: 100%;
		height: auto;
}

.mainWrapper .mainArea .mainImgArea-sp {
		background-size: cover;
		width: 100%;
		height: 0;
		padding-top: 127.36935%;
		position: relative;
		display: none;
}

.mainWrapper .mainArea .mainImgArea-sp__bg, .mainWrapper .mainArea .mainImgArea-sp__chara--02, .mainWrapper .mainArea .mainImgArea-sp__chara--01, .mainWrapper .mainArea .mainImgArea-sp__bubble--03, .mainWrapper .mainArea .mainImgArea-sp__bubble--02, .mainWrapper .mainArea .mainImgArea-sp__bubble--01, .mainWrapper .mainArea .mainImgArea-sp__title {
		background-size: cover;
		width: 100%;
		height: 0;
		padding-top: 127.36935%;
		position: absolute;
		top: 0;
		left: 0;
}

.mainWrapper .mainArea .mainImgArea-sp__bg {
		background-image: url(../images/top/mainImg-bg.jpg);
}

.mainWrapper .mainArea .mainImgArea-sp__chara--02 {
		background-image: url(../images/top/mainImg-chara-02.png);
}

.mainWrapper .mainArea .mainImgArea-sp__chara--01 {
		background-image: url(../images/top/mainImg-chara-01.png);
}

.mainWrapper .mainArea .mainImgArea-sp__bubble--03 {
		background-image: url(../images/top/mainImg-bubble-03.png);
}

.mainWrapper .mainArea .mainImgArea-sp__bubble--02 {
		background-image: url(../images/top/mainImg-bubble-02.png);
}

.mainWrapper .mainArea .mainImgArea-sp__bubble--01 {
		background-image: url(../images/top/mainImg-bubble-01.png);
}

.mainWrapper .mainArea .mainImgArea-sp__title {
		background-image: url(../images/top/mainImg-title.png);
}

.mainWrapper .mainArea .newsArea {
		position: relative;
}

.mainWrapper .mainArea .newsArea__title {
		background: url(../images/top/news-titile.png) no-repeat center;
		height: 145px;
}

.mainWrapper .mainArea .newsArea__detailBtn {
		position: absolute;
		width: 127px;
		height: 28px;
		background: url(../images/top/news-detailBtn.png) no-repeat center;
		top: 70px;
		right: 40px;
}

.mainWrapper .mainArea .newsArea .newsList {
		overflow: hidden;
		width: 1040px;
		margin: 0 auto;
}

@media only screen and (max-width: 1399px) {
		.mainWrapper .mainArea .newsArea .newsList {
				width: 730px;
		}
}

.mainWrapper .mainArea .newsArea .newsList__li {
		display: block;
		float: left;
		width: 225px;
		margin-bottom: 20px;
}

@media only screen and (min-width: 1400px) {
		.mainWrapper .mainArea .newsArea .newsList__li {
				margin-right: 46px;
		}
		.mainWrapper .mainArea .newsArea .newsList__li:nth-child(4n) {
				margin-right: 0;
		}
}

@media only screen and (max-width: 1399px) {
		.mainWrapper .mainArea .newsArea .newsList__li {
				margin-right: 27px;
		}
		.mainWrapper .mainArea .newsArea .newsList__li:nth-child(3n) {
				margin-right: 0;
		}
}

.mainWrapper .mainArea .newsArea .newsList__li a, .mainWrapper .mainArea .newsArea .newsList__li img {
		display: block;
		width: 100%;
}

.mainWrapper .mainArea .newsArea .newsList__li a {
		margin-bottom: 10px;
}

.mainWrapper .mainArea .newsArea .newsList__li img {
		border: 1px solid #e1dfb8;
}

.mainWrapper .mainArea .newsArea .newsList__li__txt {
		color: #8e837d;
		height: 3em;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 14px;
		margin-bottom: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
}

.mainWrapper .mainArea .newsArea .newsList__li__date {
		color: #e0697c;
		text-align: left;
		font-size: 13px;
}

footer {
		background-color: rgba(111, 229, 198, 0.4);
		padding-top: 25px;
}

footer .snsArea {
		height: 94px;
		overflow: hidden;
		width: 402px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 35px;
}

footer .snsArea__title {
		width: 144px;
		height: 94px;
		background: url(../images/top/sns-title.png) no-repeat center center;
		margin-right: 45px;
		display: block;
		float: left;
}

footer .snsArea__list {
		overflow: hidden;
		display: block;
		width: 213px;
		float: left;
}

footer .snsArea__list li {
		width: 94px;
		float: left;
}

footer .snsArea__list li:first-child {
		margin-right: 25px;
}

footer .snsArea__list li a {
		display: block;
		width: 94px;
		height: 94px;
		background-repeat: no-repeat;
		background-position: center;
}

footer .snsArea__list li a.btn-twitter {
		background-image: url(../images/top/sns-twtr.png);
}

footer .snsArea__list li a.btn-fb {
		background-image: url(../images/top/sns-fb.png);
}

footer .bannerArea {
		position: relative;
		min-height: 135px;
}

footer .bannerArea__list {
		text-align: center;
}

footer .bannerArea__list li {
		display: inline-block;
		width: 318px;
		margin: 0 5px;
}

footer .bannerArea__list li a, footer .bannerArea__list li img {
		display: block;
}

footer .bannerArea__list li img {
		width: 100%;
}

footer .bannerArea__moreBtn {
		/*display: none;*/
		width: 80px;
		height: 135px;
		background: url(../images/top/banner-moreBtn.png) no-repeat 0 0;
		position: absolute;
		top: 0;
		right: -75px;
		-webkit-transition: all 0.5s ease;
		        transition: all 0.5s ease;
}

footer .bannerArea__moreBtn.is-view {
		right: 0;
}

footer small {
		background: url(../images/second/copyright-2nd.png) no-repeat center center;
		display: block;
		height: 90px;
}

.bannerModalArea {
		position: fixed;
		width: 100%;
		min-width: 1000px;
		height: 100%;
		overflow: auto;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.75);
		padding: 150px 50px 50px;
		display: none;
}

.bannerModalArea__listL, .bannerModalArea__listS {
		display: block;
		max-width: 1400px;
		margin: 0 auto;
		text-align: center;
}

.bannerModalArea__listL li, .bannerModalArea__listS li {
		display: inline-block;
		margin: 0 5px;
}

.bannerModalArea__listL li a, .bannerModalArea__listL li img, .bannerModalArea__listS li a, .bannerModalArea__listS li img {
		display: block;
		width: 100%;
}

.bannerModalArea__listL {
		margin-bottom: 60px;
}

.bannerModalArea__listL li {
		width: 318px;
}

.bannerModalArea__listS {
		margin-bottom: 60px;
}

.bannerModalArea__listS li {
		width: 190px;
}

.bannerModalArea__closeBtn {
		text-align: center;
}

.bannerModalArea__closeBtn--btn {
		display: inline-block;
		width: 60px;
		height: 80px;
		background: url(../images/top/modal-closeBtn.png) no-repeat center center;
}