@charset "utf-8";

/* top.css */

#home #wrapper {
	margin: 0;
}

#home .container {
	padding-top: 70px;
}

/* ナビ */
#topNav {
	position: relative;
}

#nav {
	position:absolute;
}

#nav.fixed {
	position:fixed;
}

/* Top Slide */
.mvWrap {
	width: 100%;
	background: rgba(0,0,0,1);
}

.mainVisual {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 1;
}

.mainVisual:before {
	content:"";
	display: block;
	margin: 0 auto;
	padding-top: 56.2%;
}

.topMainSlide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.topMainSlide li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.topMainSlide li a {
	display: block;
	width: 100%;
	height: 100%;
}

.topMainSlide li:nth-of-type(1) { background-image: url(../images/fin.jpg?v=0920a); }
.topMainSlide li:nth-of-type(2) { background-image: url(../images/top_main_bz.jpg?v=0808b); }
.topMainSlide li:nth-of-type(3) { background-image: url(../images/top_main_bg08.jpg?v=0509a); }
.topMainSlide li:nth-of-type(4) { background-image: url(../images/chan.jpg?v=0509a); }
.topMainSlide li:nth-of-type(5) { background-image: url(../images/top_main_marin.jpg?v=0719a); }
.topMainSlide li:nth-of-type(6) { background-image: url(../images/top_main_marin2.jpg?v=0719a); }
.topMainSlide li:nth-of-type(7) { background-image: url(../images/top_main_moun.jpg?v=0719a); }

/*
.topMainSlide li:nth-of-type(6) { background-image: url(../images/top_main_bg04.jpg?v=0114a); }
.topMainSlide li:nth-of-type(3) { background-image: url(../images/top_main_bg08.jpg?v=0509a); }
.topMainSlide li:nth-of-type(4) { background-image: url(../images/top_main_bg12.jpg?v=0215a); }
.topMainSlide li:nth-of-type(5) { background-image: url(../images/top_main_bg19.jpg?v=0114a); }
.topMainSlide li:nth-of-type(7) { background-image: url(../images/top_main_bg05.jpg?v=0114a); }
.topMainSlide li:nth-of-type(8) { background-image: url(../images/top_main_bg06.jpg?v=0114a); }
*/
.topMainSlide li {
	animation-iteration-count: infinite;
	animation-duration: 27s;
}

.topMainSlide li:nth-of-type(1){
animation-name:slider;
animation-delay:-2s;
opacity:0;
}
.topMainSlide li:nth-of-type(2){
animation-name:slider;
animation-delay:2s;
opacity:0;
}
.topMainSlide li:nth-of-type(3){
animation-name:slider;
animation-delay:6s;
opacity:0;
}
.topMainSlide li:nth-of-type(4){
animation-name:slider;
animation-delay:10s;
opacity:0;
}
.topMainSlide li:nth-of-type(5){
animation-name:slider;
animation-delay:14s;
opacity:0;
}
.topMainSlide li:nth-of-type(6){
animation-name:slider;
animation-delay:18s;
opacity:0;
}
.topMainSlide li:nth-of-type(7){
animation-name:slider;
animation-delay:22s;
opacity:0;
}
.topMainSlide li:nth-of-type(8){
animation-name:slider;
animation-delay:26s;
opacity:0;
}
@keyframes slider{
0%{
opacity:0;
z-index: 2;
}
7.4%{
opacity:1;
}
14.8%{
opacity:1;
}
22.2%{
opacity:0;
}
100%{
opacity:0;
z-index: 1;
}
}

/* YouTube */
.movie {
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.movie iframe {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

section {
	width: 100%;
	max-width: calc(1000px + 10%);
	margin: 0 auto;
	padding: 0 5%;
}

#home main h2 {
	position: relative;
	width: 100%;
	max-width: calc(1000px + 10%);
	margin: 0 auto 53px;
	padding: 0 5%;
	text-align: center;
	font-size: 3.2rem;
	font-weight: bold;
	color: #ff5282;
}

#home main h2::before {
	position: absolute;
	left: 50%;
	bottom: -22px;
	content: "";
	display: block;
	width: 0;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: 19px 34px 0 34px;
	transform: translateX(-50%);
	z-index:2;
}

#home main h2::after {
	position: absolute;
	left: 50%;
	bottom: -23px;
	content: "";
	display: block;
	width: 0;
  border-style: solid;
  border-color: #ff5282 transparent transparent transparent;
  border-width: 20px 35px 0 35px;
	transform: translateX(-50%);
	z-index:1;
}

/* artist Slider */
section.artistSlider {
	width: 100%;
	max-width: none;
	padding: 0;	
}

.ass_item {
	position: relative;
	width: 100%;
}

.ass_item a {
	display: block;
	z-index: 3;
}

.ass_item::before {
	content:"";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
}

.ass_item .itemTtl {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-flow: row nowrap;
	width: 75%;
	max-width: 540px;
	background: #000000;
	line-height: 1.4;
	color: #ffaabe;
	opacity: 0;
	transition: all .2s;
	padding: 12px 5px 8px;
	border-left: 20px solid #ff5282;
}

.ass_item .itemTtl dt {
	flex-basis: 120px;
	max-width: 120px;
	flex-shrink: 0;
	padding: 12px 5px 8px;
	background: #ff5282;
	text-align: center;
	font-size: 2.0rem;
	color: #000000;
}

.ass_item .itemTtl dd {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 19px;
}

.ass_item .itemTtl dd p {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.7rem;
}

.artistSlider .swiper-container {
	background-color: #000000;
}

.artistSlider .swiper-container .swiper-slide {
	max-width:720px;
}

.artistSlider .swiper-container .swiper-slide.swiper-slide-active a:hover img {
	opacity: 1;
}

.artistSlider .swiper-container .swiper-slide.swiper-slide-active .ass_item::before {
	background: rgba(0, 0, 0, 0);
	z-index: -1;
}

.artistSlider .swiper-container .swiper-slide.swiper-slide-active .ass_item .itemTtl {
	opacity: 1;
}

.artistSlider .swiper-pagination {
	text-align: left;
}

.artistSlider .swiper-pagination-fraction,
.artistSlider .swiper-pagination-custom,
.artistSlider .swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: 58px;
	left: 50%;
	width: 100%;
	max-width: 720px;
	padding: 0 10px;
	transform: translateX(-50%);
}

.artistSlider .swiper-pagination-bullet {
	background: #ffffff;
	opacity: 1;
}

.artistSlider .swiper-pagination-bullet-active {
	background: #ff5282;
}

.artistSlider .swiper-button-next {
	right: 70px;
}

.artistSlider .swiper-button-prev {
	left: 70px;
}

/* YouTube in Swiper */
.video-container {
	position: relative;
	padding-bottom: 60.5%;
}

.video-play,
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*
.video-container iframe,
.video-container object,
.video-container embed {
	pointer-events: none;
}
*/
.video-play {
	height: 75%;
	top: 13%;
	width: 45%;
/*
	background-color: rgba(255,0,0,0.5);
*/
}

.video-play::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 122%;
	width: 100%;
	height: 100%;
/*
	background-color: rgba(0,0,255,0.5);
*/
}

.video-play::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 22%;
	height: 43%;
/*
	background-color: rgba(0,255,0,0.5);
*/
}

/* Top Tiles */
section.topTiles {
	position: relative;
	width: 100%;
	max-width: none;
	padding: 50px 5% 60px;	
}

section.topTiles::before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 210px;
	background: #f5f5f5;
	z-index: -1;
}

.topTiles .secInner {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}

.topTiles .tile {
	display: block;
	width: 48.72%;
	margin: 1.7% 0 0 0;
	padding: 2.5%;
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	text-decoration: none;
	color: #545454;
	cursor: pointer;
	line-height: 0;
}

.topTiles .tile:nth-of-type(-n+3) {
	margin-top: 0;
}

.topTiles .tile .topTileImg img {
	width: 100%;
}

.topTiles .tile h3 {
	display: flex;
	height: 4.8em;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
}

.topTiles .tile h3 span {
	display: block;
	max-height: 2.6em;
	line-height: 1.3;
	text-align: center;
	overflow: hidden;
	font-weight: bold;
}

.topTiles .viewBtn {
	width: 100%;
}

/* Top Tiles2 */
section.topTiles2 {
	position: relative;
	width: 100%;
	max-width: none;
	padding: 0px 5% 60px;	
}

section.topTiles2::before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 210px;
	z-index: -1;
}

.topTiles2 .secInner2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}

.topTiles2 .tile2 {
	display: block;
	padding: 0.8%;
	padding-bottom: 1%;
	background-color: #ffffff;
	border: 1px solid #006eaa;
	text-decoration: none;
	color: #545454;
	cursor: pointer;
}

.topTiles .tile:nth-of-type(-n+3) {
	margin-top: 0;
}

.topTiles .tile .topTileImg img {
	width: 100%;
}

.topTiles2 .tile2 h3 {
	display: flex;
	height: 1.2em;
	justify-content: center;
	align-items: center;
	padding: 25px 0px 21px;
	border-bottom: 1px solid #006eaa;
	
}
.topTiles2 .tile2 p {
	padding: 10px;
	
}

.topTiles2 .tile2 h3 span {
	display: block;
	max-height: 2.6em;
	line-height: 1.3;
	text-align: center;
	overflow: hidden;
	color: #006eaa;
}

.topTiles .viewBtn {
	width: 100%;
}

/* What's New */
section.whatsNew {
	padding: 0 5% 60px;
}

.newsList {
	display: flex;
	flex-flow: row wrap;
}

.newsList .item {
	display: flex;
	flex-flow: row nowrap;
	flex-basis: 31.2%;
	max-width: 31.2%;
	margin: 3.2% 3.2% 0 0;
}

.newsList .item * {
	transition: all 0.2s;
}

.newsList .item:nth-of-type(-n+3) {
	margin-top: 0;
}

.newsList .item:nth-of-type(3n) {
	margin-right: 0;
}

.newsList .item dt {
	position: relative;
	flex-basis: 37.82%;
	max-width: 37.82%;
	overflow: hidden;
}

.newsList .item dd {
	flex-basis: 62.18%;
	max-width: 62.18%;
	padding-left: 5.448%;
	font-size: 1.4rem;
}

.newsList .item dd a {
	display: block;
	height: 4.5em;
	line-height: 1.5;
	overflow: hidden;
}

.newsList .item dd time {
	display: block;
	color: #c8c8c8;
	font-size: 1.2rem;
}

/* マウスオーバー */
.newsList .item:hover {
	cursor: pointer;
}

.newsList .item:hover dt::before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .28);
	z-index: 1;
}

.newsList .item:hover dt img {
	opacity: 1;
	transform: scale(1.105);
}

.newsList .item:hover dd a {
	color: #ff5282;
}

/* PICKUP */
section.pickup {
	padding: 0 5% 60px;
}

.pickupList {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.pickupList .item {
	width: 23.8%;
	margin: 1.6% 1.6% 0 0;
	border: 1px solid #c8c8c8;
	transition: all 0.2s;
}

.pickupList .item:nth-of-type(-n+4) {
	margin-top: 0;
}

.pickupList .item * {
	transition: all 0.2s;
}

.pickupList .item dt {
	position: relative;
	overflow: hidden;
}

.pickupList .item dd {
	padding: 13px 14px 11px;
	font-size: 1.4rem;
}

/* マウスオーバー */
.pickupList .item:hover {
	cursor: pointer;
}

.pickupList .item:hover dt::before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .28);
	z-index: 1;
}

.pickupList .item:hover dt img {
	transform: scale(1.12);
}

.pickupList .item:hover {
	background-color: #006eaa;
}

.pickupList .item:hover dd a {
	color: #ffffff;
}

.pickupList .item:nth-of-type(4n) {
	margin-right: 0;
}

/* PLAYLISTS */
section.playlists {
	padding: 0 5% 60px;
}

.playlists .secInner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.playlists .secInner > div {
	flex-basis: 48%;
	max-width: 48%;
}

.playlists iframe {
	display: block;
	width: 100%;
	height: 334px;
	max-width: 600px;
	margin: 0 auto;
}

/* VIDEO */
section.video {
	max-width: none;
	padding: 60px 5%;
	background: #fb99a2;
}

#home main section.video h2 {
	color: #ffffff;
}

#home main section.video h2::before {
  border-color: #fb99a2 transparent transparent transparent;
}

#home main section.video h2::after {
  border-color: #ffffff transparent transparent transparent;
}

.videoSlider {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.videoSlider .swiper-slide a .capImg {
	position: relative;
	overflow: hidden;
}

.videoSlider .swiper-slide a:hover .capImg img {
	transition: all .2s;
}

.videoSlider .swiper-slide a .capImg::before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/top_video_play.png) center center no-repeat;
	background-size: cover;
	z-index: 1;
	transition: all .2s;
}

.videoSlider .swiper-slide a:hover .capImg::before {
	background: url(../images/top_video_play_on.png) center center no-repeat;
	background-size: cover;
}

.videoSlider .swiper-slide a:hover .capImg img {
	transform: scale(1.12);
}

.videoSlider .swiper-slide a {
	display: block;
}

.videoSlider .swiper-slide a p {
	position:relative;
	margin: 20px 0 0;
	padding: 19px 0 0;
	font-size: 1.4rem;
	color: #ffffff;
	transition: all .2s;
}

.videoSlider .swiper-slide a p::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 2.5em;
	height:4px;
	background: #006eaa;
}

.videoSlider .swiper-slide a:hover p {
	color: #006eaa;
}

.videoSlider .swiper-container {
	width: calc(100% - 80px);
	box-sizing: content-box;
}

.videoSlider .swiper-button-prev {
	left: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23006eaa'%2F%3E%3C%2Fsvg%3E");
}
.videoSlider .swiper-button-next {
	right: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23006eaa'%2F%3E%3C%2Fsvg%3E");
}

section.video .vb_wrap {
	height: 50px;
	text-align: center;
}

/* LINEUP */
section.topLineup {
	max-width: none;
	margin: 2px 0 60px;
	padding: 60px 5%;
	background: #f5f5f5;
}

section.topLineup .inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

section.topLineup .inner li {
	flex-basis: 31.2%;
	max-width: 31.2%;
}

section.topLineup .inner li a {
	display: block;
	border: 12px solid #ffffff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .3);
}

.fancybox-slide--iframe .fancybox-content {
	width  : 100%;
	height : 100%;
	max-width  : 1017px;
	max-height : 100%;
	margin: 0;
}

/* SPONSORS */
section.sponsors ul.spnsrList {
	display: flex;
	justify-content: space-between;
	padding: 0% 2% 0% 2%;
}

#sponsor img {
	vertical-align: middle;
	
}

#sponsor li {
	display:inline-block;
	padding: 0 20% 14px 3%;
	height : 80%;
}

section.sponsors ul.spnsrList li + li {
	margin-left: 2.9%;
}

section.sponsors {
    width: 100%;
    max-width: calc(1300px + 10%);
    margin: 0 auto;
    padding: 0 5%;
}

@media only screen and (max-width: 768px) {

#home #wrapper {
	margin: 41px 0 0;
}

#home .container {
	padding-top: 0;
}

/* ナビ */
#nav {
	position:fixed;
}

#home main h2 {
	margin: 0 auto 48px;
}

#home main h2::before {
	bottom: -17px;
  border-width: 14px 24px 0 24px;
}

#home main h2::after {
	bottom: -18px;
  border-width: 15px 25px 0 25px;
}

/* artist Slider */
.ass_item .itemTtl {
	width: 100%;
	max-width: none;
}

.ass_item .itemTtl dt {
	flex-basis: 80px;
	max-width: 80px;
	padding: 10px 5px;
	font-size: 1.4rem;
}

.ass_item .itemTtl dd {
	width: 100%;
	padding: 0 14px;
}

.ass_item .itemTtl dd p {
	font-size: 1.3rem;
}

.artistSlider .swiper-container .swiper-slide {
	max-width: 100%;
}

.artistSlider .swiper-container .swiper-slide a > img {
	width: 100%;
	height: auto;
}

.artistSlider .swiper-pagination {
	text-align: center;
}

.artistSlider .swiper-pagination-fraction,
.artistSlider .swiper-pagination-custom,
.artistSlider .swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: 50px;
	max-width: none;
}

.artistSlider .swiper-button-next {
	right: 10px;
}

.artistSlider .swiper-button-prev {
	left: 10px;
}

/* Top Tiles */
section.topTiles {
	padding: 26px 5% 32px;	
}

section.topTiles::before {
	height: 147px;
}

.topTiles .tile {
	display: block;
	width: 48.71%;
	margin: 2.6% 0 0 0;
}

.topTiles .tile:nth-of-type(-n+3) {
	margin-top: 2.6%;
}

.topTiles .tile:nth-of-type(-n+2) {
	margin-top: 0;
}

.topTiles .tile .topTileImg img {
	width: 100%;
}

.topTiles .tile h3 {
	height: 2em;
}

.topTiles .tile h3 span {
	font-size: 1.4rem;
}
	
	/* Top Tiles2 */
section.topTiles2 {
	padding: 26px 5% 32px;	
}

section.topTiles2::before {
	height: 147px;
}

.topTiles2 .tile2 {
	display: block;

	margin: 2.6% 0 0 0;
}

.topTiles2 .tile2:nth-of-type(-n+3) {
	margin-top: 2.6%;
}

.topTiles2 .tile2:nth-of-type(-n+2) {
	margin-top: 0;
}

.topTiles2 .tile2 .topTileImg2 img {
	width: 100%;
}

.topTiles2 .tile2 h3 {
	height: 2em;
	border-bottom: 1px solid #006eaa;
	padding: 25px 5px 21px;
}

.topTiles2 .tile2 h3 span {
	font-size: 2rem;
}
	

/* What's New */
section.whatsNew {
	padding: 0 5% 32px;
}

.newsList {
	display: block;
}

.newsList .item {
	width: 100%;
	max-width: 100%;
	margin: 15px 0 0 0;
}

.newsList .item:nth-of-type(-n+3) {
	margin-top: 15px;
}

.newsList .item:nth-of-type(1) {
	margin-top: 0;
}

.newsList .item dt {
	flex-basis: 34.7826%;
	max-width: 34.7826%;
}

.newsList .item dd {
	flex-basis: 65.2174%;
	max-width: 65.2174%;
	padding-left: 3.1884%;
	font-size: 1.6rem;
}

.newsList .item dd time {
	font-size: 1.4rem;
}

/* PICKUP */
section.pickup {
	padding: 0 5% 40px;
}

.pickupList {
	justify-content: space-between;
}

.pickupList .item {
	width: 47.7%;
	margin: 4.6% 0 0 0;
}

.pickupList .item:nth-of-type(-n+4) {
	margin-top: 4.6%;
}

.pickupList .item:nth-of-type(-n+2) {
	margin-top: 0;
}

.pickupList .item dd {
	padding: 7px 8px 6px;
}

/* PLAYLISTS */
section.playlists {
	padding: 0 5% 40px;
}

/* PLAYLISTS */
section.playlists {
	padding: 0 5% 60px;
}

.playlists .secInner {
	display: block;
}

.playlists .secInner > div {
	width: 100%;
	max-width: 100%;
}

.playlists .secInner > div:nth-of-type(2) {
	margin-top: 30px;
}

/* VIDEO */
section.video {
	padding: 22px 5% 40px;
}

.videoSlider .swiper-slide a p {
	position:relative;
	margin: 10px 0 0;
	padding: 7px 0 0;
	font-size: 1.6rem;
}

.videoSlider .swiper-slide a p::before {
	height:2px;
}

.videoSlider .swiper-slide a:hover p {
	color: #006eaa;
}

section.video .vb_wrap {
	margin-top: 13px;
	padding: 0 40px;
}

/* LINEUP */
section.topLineup {
	margin: 2px 0 34px;
	padding: 30px 5% 40px;
}

section.topLineup .inner li a {
	border: 6px solid #fff;
}

/* SPONSORS */
/* スポンサー */
#sponsor {
	padding: 0 0 10px 0;
}

#sponsor h2 {
	padding:0 0 10px 0;
}

#sponsor li {
	width: 10%;
}
}