@charset "utf-8";

/* ---------------------------------------------------------- */
/* LOADING
/* ---------------------------------------------------------- */
#loading {
	width: 100%;
	height: 100%;
	background: url(../images/common/bg_contents.png);
	background-size: 40px 1px;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 1002;
	}

#loading p {
	top: 50%;
	left: 50%;
	margin-top: -84px;
	margin-left: -165px;
	position: absolute;
	}

#loading p img {
	width: 330px;
	}

@media (max-width: 640px){
#loading p {
	margin-top: -51px;
	margin-left: -100px;
	}

#loading p img {
	width: 200px;
	}
}


/* ------------------------------------------------------- */
/* メインビジュアル
---------------------------------------------------------- */
#main {
	width: 100%;
	height: 1250px;
	background: url(../images/top/bg_pc2.jpg) top center no-repeat #fcef64;
	background-size: cover;
	margin: 80px 0 0 0;
	padding: 98.5% 0 0 0;
	overflow: hidden;
	position: relative;
	}

#main #bg {
	width: 100%;
	height: 0;
	background: url(../images/top/bg_pc2.png) top center no-repeat;
	background-size: cover;
	top: 0;
	left: 0;
	position: absolute;
	padding: 98.4% 0 0 0;
	}

#main #logo {
	width: 100%;
	text-align: center;
	top: 18.38%;
	left: 0;
	position: absolute;
	z-index: 7;
	}

#main #logo img {
	width: 24.95%;
	}

#main .haishin {
	width: 77px;
	height: 511px;
	text-align: right;
	background: url("../images/top/txt_haishin.png") center center no-repeat;
	background-size: cover;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	top: 2.28%;
	right: 6.5%;
	position: absolute;
	z-index: 7;
	}

#main .blu-ray {
	width: 68px;
	height: 454px;
	text-align: right;
	background: url("../images/top/txt_blu-ray.png") center center no-repeat;
	background-size: cover;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	top: 16%;
	right: 12.15%;
	position: absolute;
	z-index: 7;
	}

#main #uramichi {
	width: 100%;
	top: 32.74%;
	right: 0;
	position: absolute;
	z-index: 5;
	}

#main #uramichi img {
	width: 56.95%;
	margin: 0 0 0 21.35%;
	}

#main #utano {
	width: 100%;
	text-align: right;
	top: 20.96%;
	right: 0;
	position: absolute;
	z-index: 4;
	}

#main #utano img {
	width: 34.7%;
	margin: 0 6.2% 0 0;
	}

#main #iketeru {
	width: 100%;
	top: 18.38%;
	left: 0;
	position: absolute;
	z-index: 3;
	}

#main #iketeru img {
	width: 30.9%;
	margin: 0 0 0 13.3%;
	}

#main #kumatani {
	width: 100%;
	top: -0.76%;
	left: 0;
	position: absolute;
	z-index: 2;
	}

#main #kumatani img {
	width: 51.35%;
	margin: 0 0 0 4%;
	}

#main #usahara {
	width: 100%;
	text-align: right;
	top: -2.3%;
	right: 0;
	position: absolute;
	z-index: 1;
	}

#main #usahara img {
	width: 50.8%;
	margin: 0 0.85% 0 0;
	}

@media (max-width: 1200px){
#main .haishin {
	right: 40px;
	}

#main .blu-ray {
	right: 110px;
	}
}

@media (max-width: 768px){
#main {
	height: 0;
	min-height: auto;
	background: url(../images/top/bg_sp2.jpg) top center no-repeat;
	background-size: cover;
	margin: 50px 0 0 0;
	padding: 141.5% 0 0 0;
	}

#main #bg {
	background: url(../images/top/bg_sp2.png) top center no-repeat;
	background-size: cover;
	padding: 141.5% 0 0 0;
	}

#main #logo {
	text-align: center;
	top: 27.21%;
	}

#main #logo img {
	width: 51.1%;
	margin: 0;
	}

#main .haishin {
	width: 80%;
	height: 0;
	background: url("../images/top/txt_haishin_sp.png") center center no-repeat;
	background-size: contain;
	top: 81%;
	left: 0;
	right: 0;
	margin: auto;
	padding: 7.777% 0 0 0;
	}

#main .blu-ray {
	width: 55%;
	height: 0;
	background: url("../images/top/txt_blu-ray_sp.png") center center no-repeat;
	background-size: contain;
	top: 87%;
	left: 0;
	right: 0;
	margin: auto;
	padding: 8.274% 0 0 0;
	}

#main #uramichi {
	top: 48.27%;
	}

#main #uramichi img {
	width: 117.1%;
	margin: 0 0 0 -9.3%;
	}

#main #utano {
	top: 31.38%;
	}

#main #utano img {
	width: 71.4%;
	margin: 0 -39.8% 0 0;
	}

#main #iketeru {
	top: 27.7%;
	}

#main #iketeru img {
	width: 63.6%;
	margin: 0 0 0 -25.9%;
	}

#main #kumatani {
	top: 0.35%;
	}

#main #kumatani img {
	width: 105.5%;
	margin: 0 0 0 -44.9%;
	}

#main #usahara {
	top: -1.84%;
	}

#main #usahara img {
	width: 104.4%;
	margin: 0 -50.8% 0 0;
	}
}

@media (max-width: 640px){
}


/* ------------------------------------------------------- */
/* ニュース・Twitter
---------------------------------------------------------- */
#info {
	width: 1150px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	top: 1450px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	z-index: 10;
	}

#info h2 {
	margin: 0;
	}

#info .bg {
	height: 325px;
	border-radius: 10px;
	margin: -35px 0 0 0;
	}

#info #news {
	width: 560px;
	margin: 0 30px 0 0;
	}

#info #news .bg {
	background: rgba(240,96,162,0.9);
	padding: 30px 30px 20px 30px;
	}

#info #news ul {
	min-height: 210px;
	margin: 0 0 20px 0;
	}

#info #news ul li {
	border-bottom: 1px solid #fff;
	}

#info #news ul li time {
	font-family: 'Candal', sans-serif;
	color: #ffd900;
	display: block;
	}

#info #news ul li a ,
#info #news ul li span {
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 12px 40px 12px 0;
	display: block;
	position: relative;
	}

#info #news ul li a::before {
	content: "";
	width: 20px;
	height: 20px;
	top: 0;
	right: 0;
	bottom: 0;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

#info #news ul li a::after {
	content: "";
	width: 4px;
	height: 4px;
	top: 0;
	bottom: 0;
	right: 2px;
	border: 4px solid transparent;
	border-left: 6px solid #fff;
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

#info #news ul li a:hover {
	color: #ffd900;
	}

#info #news ul li a:hover::before {
	border: 2px solid #ffd900;
	}

#info #news ul li a:hover::after {
	border-left: 6px solid #ffd900;
	}

#info #twitter {
	width: 560px;
	}

#info #twitter .bg {
	background: rgba(0,165,235,0.9);
	padding: 45px 30px 20px 30px;
	}

#info #twitter .tweet {
	height: 200px;
	overflow: hidden;
	margin: 0 0 15px 0;
	}

@media (max-width: 1880px){#info {top: 1400px;}}
@media (max-width: 1820px){#info {top: 1350px;}}
@media (max-width: 1770px){#info {top: 1300px;}}
@media (max-width: 1710px){#info {top: 1250px;}}
@media (max-width: 1650px){#info {top: 1200px;}}
@media (max-width: 1610px){#info {top: 1150px;}}
@media (max-width: 1550px){#info {top: 1100px;}}
@media (max-width: 1500px){#info {top: 1050px;}}
@media (max-width: 1460px){#info {top: 1000px;}}
@media (max-width: 1390px){#info {top: 950px;}}
@media (max-width: 1350px){#info {top: 900px;}}
@media (max-width: 1300px){#info {top: 870px;}}
@media (max-width: 1200px){#info {left: 25px;}}

@media (max-width: 768px){
#info {
	width: 100%;
	position: static;
	display: block;
	}

#info .bg {
	height: auto;
	background: none !important;
	border-radius: 0;
	margin: 0;
	padding: 0 !important;
	}

#info #news ,
#info #twitter {
	width: 100%;
	margin: 0;
	padding: 20px 20px 60px 20px;
	position: relative;
	z-index: 20;
	}

#info #news::before ,
#info #twitter::before {
	content: "";
	width: 100%;
	height: 30px;
	top: -30px;
	left: 0;
	display: block;
	position: absolute;
	z-index: 20;
	}

#info #news {
	background: url(../images/top/bg_news_left.png) left 5px bottom 45px no-repeat , url(../images/top/bg_news_right.png) top 15px right 5px no-repeat , #f060a2;
	background-size: 100px auto , 100px auto;
	}

#info #news::before {
	background: url(../images/top/bg_news_head.png) top center repeat-x;
	background-size: auto 30px;
	}

#info #news ul {
	min-height: auto;
	}

#info #twitter {
	background: url(../images/top/bg_twitter_left.png) left 5px bottom 45px no-repeat , url(../images/top/bg_twitter_right.png) top 15px right 5px no-repeat , #00a5eb;
	background-size: 100px auto , 100px auto;
	}

#info #twitter::before {
	background: url(../images/top/bg_twitter_head.png) top center repeat-x #f060a2;
	background-size: auto 30px;
	}

#info #twitter h2 {
	margin: 0 0 20px 0;
	}

#info #twitter .tweet {
	margin: 0 0 20px 0;
	}

#info #twitter .tweet iframe {
	width: 740px !important;
	}
}


/* ------------------------------------------------------- */
/* MOVIE
---------------------------------------------------------- */
#movie {
	background: url(../images/top/bg_movie_left.png) left 25px bottom 20px no-repeat , url(../images/top/bg_movie_right.png) top 20px right 25px no-repeat , #fa981c;
	padding: 20px 0 60px 0;
	position: relative;
	}

#movie::before {
	content: "";
	width: 100%;
	height: 70px;
	top: -70px;
	left: 0;
	background: url(../images/top/bg_movie_head.png) top left repeat-x;
	display: block;
	position: absolute;
	z-index: 20;
	}

#movie h2 {
	margin: 0 0 40px 0;
	}

#movie .slider {
	max-width: 1194px;
	}

#movie ul {
	flex-wrap: wrap;
	}

#movie ul li {
	margin: 0 0 40px 0;
	padding: 0 22px;
	}

#movie ul li a:hover {
	opacity: 0.7;
	}

#movie ul li img {
	width: 100%;
	}

#movie ul li p {
	font-size: 1.6rem;
	color: #fff;
	margin: 10px 0 0 0;
	padding: 0 0 0 20px;
	position: relative;
	}

#movie ul li p::before {
	content: '';
	width: 10px;
	height: 1px;
	background: #fff;
	top: 12px;
	left: 0;
	position: absolute;
	}

#movie .swiper-pagination ,
#movie .swiper-button-prev ,
#movie .swiper-button-next {
	display: none;
	}

@media (max-width: 768px){
#movie {
	background: url(../images/top/bg_movie_left.png) left 5px bottom 15px no-repeat , url(../images/top/bg_movie_right.png) top 15px right 5px no-repeat , #fa981c;
	background-size: 100px auto , 100px auto;
	padding: 20px 40px 50px 40px;
	}

#movie::before {
	height: 30px;
	top: -30px;
	background: url(../images/top/bg_movie_head.png) top center repeat-x #00a5eb;
	background-size: auto 30px;
	}

#movie h2 {
	margin: 0 0 20px 0;
	}

#movie ul {
	margin: 0 0 40px 0;
	flex-wrap: nowrap;
	}

#movie ul li {
	margin: 0;
	padding: 0;
	}

#movie .swiper-pagination {
	width: calc(100% - 80px);
	display: block;
	}

.swiper-pagination-bullet {
	margin: 0 5px;
	}

#movie .swiper-button-prev ,
#movie .swiper-button-next {
	width: 12px;
	height: 21px;
	margin: -40px 0 0 0;
	display: block;
	}

.swiper-pagination-bullet ,
.swiper-pagination-bullet-active {
	background: #fff;
	}

#movie .swiper-button-prev {
	left: 13px;
	}

#movie .swiper-button-next {
	right: 13px;
	}

#movie .swiper-button-prev::after ,
#movie .swiper-button-next::after {
	display: none;
	}

#movie .swiper-button-prev img ,
#movie .swiper-button-next img {
	width: 100%;
	}
}

@media (max-width: 640px){
#movie ul li p {
	font-size: 1.4rem;
	}
}


/* ------------------------------------------------------- */
/* 見出し
---------------------------------------------------------- */
#index h2 img {
	height: 70px;
	}

@media (max-width: 768px){
#index h2 img {
	height: 60px;
	}
}

@media (max-width: 640px){
#index h2 img {
	height: 50px;
	}
}


/* ------------------------------------------------------- */
/* ボタン
---------------------------------------------------------- */
#index .btn {
	width: 150px;
	font-size: 1.6rem;
	font-family: 'Candal', sans-serif;
	text-align: center;
	text-decoration: none;
	background: #fff;
	border: 2px solid #fff;
	border-radius: 50px;
	margin: auto;
	padding: 5px;
	display: block;
	position: relative;
	}

#index .btn::before {
	content: "";
	width: 15px;
	height: 15px;
	top: 0;
	right: 10px;
	bottom: 0;
	border: 2px solid #f060a2;
	border-radius: 50px;
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	}

#index .btn::after {
	content: "";
	width: 3px;
	height: 4px;
	top: 0;
	bottom: 0;
	right: 11px;
	border: 4px solid transparent;
	border-left: 4px solid #f060a2;
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	}

#twitter .btn {
	color: #00a5eb;
	}

#twitter .btn::before {
	border: 2px solid #00a5eb;
	}

#twitter .btn::after {
	border-left: 4px solid #00a5eb;
	}

#movie .btn {
	color: #fa981c;
	}

#movie .btn::before {
	border: 2px solid #fa981c;
	}

#movie .btn::after {
	border-left: 4px solid #fa981c;
	}

#index .btn:hover ,
#twitter .btn:hover,
#movie .btn:hover {
	color: #fff;
	border: 2px solid #fff;
	background: none;
	}

#index .btn:hover::before ,
#twitter .btn:hover::before ,
#movie .btn:hover::before {
	border: 2px solid #fff;
	}

#index .btn:hover::after ,
#twitter .btn:hover::after ,
#movie .btn:hover::after {
	border-left: 4px solid #fff;
	}

@media (max-width: 768px){
#movie .btn {
	margin: -20px auto 0 auto;
	}
}