@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: contents.css
 * Summary:   各コンテンツ用スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home
 *     =2    ticket
 *     =3    lineup
 *     =4    map
 *     =5    notice
 *     =6    faq
 *     =7    news
 *     =8    contact
 *     =9    goods
 *     =10   forest
 *
 * ===============================================================
*/


/** =1
 * ========================================
 * home
 * ========================================
 */

#home .l-contents {
	padding-bottom: 50px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#home .l-contents {
			padding-bottom: 20px;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#home .l-contents{
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#home .l-contents{
		}
	}

/*-#home news-*/

#home .news dl a{
	display:block;
	color: #333;
}
#home .news dl a:last-child{
	margin-bottom:0;
}
#home .news dl a:hover{
	background:rgba(255, 255, 255, 0.6);
}
#home .news dl a dt{
	color: #7e6430;
	font-size: 14px;
	font-size: 1.4rem;
}
#home .news dl a dd{
	margin-bottom: 0;
}
#home .article p.btn{
	margin:0 auto;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#home .news dl a{
			margin-bottom:10px;
		}
		#home .news dl a dd{
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		#home .article p.btn{
			margin:15px auto 0;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#home .news dl a{
			margin-bottom:15px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#home .news dl a{
			padding-top: 15px;
		}
		#home .news dl a:first-child {
			padding-top: 0;
		}
	}


/*-#home fb-*/

#home .fb{
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#home .fb{
			display: none;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#home .fb iframe{
			width:100% !important;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#home .fb iframe{
		}
	}


/*-#home .no-car-*/

#home .no-car{
	padding: 0;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#home .no-car img{
			width: 100%;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#home .no-car img{
			width: 100%;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
			#home .no-car{
		}
	}



/*-#home sponsor-*/

#home .sponsor{
	margin-left:-10px;
}
#home .sponsor li{
	float: left;
	margin:0 0 10px 10px;
	background: rgba(255, 255, 255, 0.8);
}
#home .sponsor li a{
	width:100%;
	height:100%;
	display:block;
	text-align:center;
}
#home .sponsor li a span{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {

		#home .sponsor{
			margin-bottom: 10px;
		}
		#home .sponsor li {
			width: 21.5%;
		}
		#home .sponsor li a span {
			width: 96%;/*100*/
			height:auto;
			padding:2% 4%;
		}
		#home .sponsor li a span img{
			width: 95%;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#home .sponsor{
			margin-bottom: 20px;
		}
		#home .sponsor li {
			width: 18%;
		}
		#home .sponsor li a{
			padding: 5px 0;
		}
		#home .sponsor li a span{
			width: 100%;
		}
		#home .sponsor li a span img{
			width: 100%;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#home .sponsor li {
			width: 155px;
			height:90px;
		}
		#home .sponsor li a span{
			width: 155px;
			height: 90px;
		}
	}






/** =2
 * ========================================
 * Ticket
 * ========================================
 */

#ticket #contents .attention .mark img{
	width: 61px;
}
#ticket #contents .attention .txt{
	width: 500px;
	margin-left: 15px;
}
#ticket #contents #article03 h3 {
	margin-bottom: 0;
}
#ticket #contents #article03 .shuttlebusSpecial img {
	max-width: 297px;
	width: 66%;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#ticket #contents #main .l-article table.playguide th{
			width:auto;
			white-space: nowrap;
			font-size: 12px;
			font-size: 1.2rem;
		}
		#ticket #contents #main .l-article table.playguide th img{
			width:45px;
		}
		#ticket #contents #main .l-article table.playguide th,
		#ticket #contents #main .l-article table.playguide td{
			padding: 4px;
		}
		#ticket #contents .attention .txt{
			width: auto;
			margin-left: 0;
		}
		#ticket #contents .l-article .section.towel {margin-bottom: 10px;}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#ticket #contents #main .article table.playguide th img{}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#ticket #contents #main .article table.playguide th img{}
	}




/** =3
 * ========================================
 * Line up
 * ========================================
 */

#lineup .l-main table{
	margin-bottom: 30px;
	background:none;
	border: none;
}
#lineup .l-main table td{
	border: none; /*border: 1% solid #ccc;*/
	vertical-align:top;
}
#lineup .l-main table.tab01 td{
	width:45%;/*32%*/
	padding:15px 22px;/*15px 12px*/
}
#lineup .l-main table.tab02 td{
	width:25%;
}
#lineup .l-main table.tab03 td{
	width:32%;/*32%*/
}

#lineup .l-main table td.top0{
	padding-top: 0;
}
#lineup .l-main td a{
    text-decoration: none;
    position: relative;
    display: block;
    width: 100%;
    height:100%;
    color:#666;
    line-height:1.2;
}
#lineup .l-main td > span{
    text-decoration: none;
    position: relative;
    display: block;
    width: 100%;
    height:100%;
    color:#666;
    line-height:1.2;
}
#lineup .l-main td a:hover{
    color:#b30a0a;
}
#lineup .l-main td img{
    width: 100%;
    margin-bottom:4px;
}
#lineup .l-main td a:hover{
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
    opacity:0.6;
}
#lineup .l-main td a span.new{
    display: block;
    position: absolute;
    right: -11px;
    top: -16px;
    width: 34px;
    z-index:10;
}
#lineup .l-main .tab02 td a span.new{
	top: -14px;
	width: 28px;
}
#lineup .l-main td a:hover span.new img{
	filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}
#lineup .l-main td span.name{
    font-weight: bold;
}
#lineup .l-main table td span.name{
    font-size:102%;
}
#lineup .artistList {
	font-size: 0;
	text-align: left;
	margin-right: -10px;
	margin-left: -10px;
	margin-bottom: 20px;
}
#lineup .artistList:last-of-type {
	margin-bottom: 0;
}
#lineup .artistList .artistItem {
	position: relative;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 50%;
	padding: 0 10px;
	margin-bottom: 20px;
}
#lineup .artistList .artistItem:hover {
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
	-moz-transition: opacity 300ms ease-in-out;
	-webkit-transition: opacity 300ms ease-in-out;
	transition: opacity 300ms ease-in-out;
}
#lineup .artistList.djList .artistItem:hover,
#lineup .artistList .artistItem.comingSoon:hover,
#lineup .artistList.teamList .artistItem {
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}
#lineup .artistList .artistItem .iconNew {
	position: absolute;
	width: 40px;
	bottom: 0;
	right: 10px;
}
#lineup .artistList .artistItem img {
	max-width: 100%;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#lineup .artistList.djList .artistItem {
	vertical-align: top;
}
#lineup.extra .artistList .artistItem img {
	margin-bottom: 2px;
	box-shadow: none;
}
#lineup .artistList.djList .artistItem p {
	padding: .2em .4em .4em;
	font-weight: bold;
}
#lineup .artistList .artistItem .artistName span {
	font-size: 11px;
	font-weight: bold;
}
#lineup .artistList.teamList .artistItem {
	width: 25%;
	padding: 0 10px;
}

#lineup .lineUpSpNavWrap {
	position: relative;
	padding: 5px 10px 10px 10px;
	margin-bottom:20px;
	background: rgba(0, 0, 0, 0.75);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#lineup .lineUpSpNavWrap ul{
	width: 50%;
}
#lineup .lineUpSpNavWrap ul:last-of-type {
	padding-left: 1px;
	padding-right: 1px;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#lineup .lineUpSpNavWrap a{
	display:block;
	padding:8px 6px;
	font-weight:bold;
	color: #fff;
	border-bottom: 1px dotted #fff;
}
#lineup .lineUpSpNavWrap .oddLast:after {
	content: "";
	position: absolute;
	bottom: 10px;
	width: 47%;
	width: calc(50% - 10px);
	height: 1px;
	border-bottom: 1px dotted #fff;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#lineup .l-article {
			padding: 20px 10px;
		}
		/*#lineup .l-article h3 {
		    margin: -35px 0 10px -50px;
		}*/

		#lineup .l-main table.tab01 td{
			box-sizing: border-box;
			padding:10px;
			width:50%;
			/*
			padding:5px 5px 10px 5px;
			width:33%;
			*/
		}
		#lineup .l-main table.tab02 td{
		  padding: 3px;
		}
		#lineup .l-main table.tab03 td{
			padding:5px 5px 10px 5px;
			width:33%;
		}

		#lineup .l-main td a{
		  font-size:80%;
			line-height: 1;
		}
		#lineup .l-main td a span.new{
		    right: -7px;
		    top: -10px;
		    width: 22px;
		}
		#lineup .l-main .tab02 td a span.new{
		    right: -8px;
		    top: -8px;
		    width: 20px;
		}
		#lineup .l-main table td span.name{
			/*font-size: 7px;75%*/
			font-size: 14px;
		}
		#lineup .l-main table.tab02 td span.name{
		    font-size:70%;
		}
	  #lineup .l-main td i{
	  	display:none;
	  }
		#lineup #article01 .linkDateList {
			display: none!important;
		}
		#lineup .artistList .artistItem .iconNew {
			position: absolute;
			width: 20px;
		}
		#lineup .artistList.teamList {
			margin-right: -5px;
			margin-left: -5px;
		}
		#lineup .artistList.teamList .artistItem {
			padding: 0 5px;
			margin-bottom: 10px;
		}
		#lineup .artistList {
			margin-right: -5px;
			margin-left: -5px;
		}
		#lineup .artistList .artistItem {
			padding: 0 5px;
			margin-bottom: 10px;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		th {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		th {
		}
	}




/** =4
 * ========================================
 * Map
 * ========================================
 */

#map .l-article .sp{
	display: none;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#map .l-article .flo_left.map{
			display:none;
		}
		#map .l-article .sp{
			display: block;
			margin-bottom:10px;
		}
		#map .l-article .flo_left{
			margin-left: 0 !important;
		}
		#map .l-article .flo_left .btn{
			display:none;
		}
		#map .l-article .sp-img{
			width:100%;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#map .l-article .sp-img{
			width:80%;
		}
	}



/** =5
 * ========================================
 * Notice
 * ========================================
 */

#notice  .no-car img{
	width: 100%;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#notice  .no-car img{
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#notice  .no-car img{
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#notice  .no-car img{
		}
	}


/** =6
 * ========================================
 * faq
 * ========================================
 */

#faq #contents #main .article a{
	display: inline;
}
#faq #contents #main .article ul.inner li i{
	color:#b79c3f;
}




/** =7
 * ========================================
 * news
 * ========================================
 */

#news #contents #main .article a{
	display: inline;
}
#news #contents #main .article dl.inner dt{
	width: 97%;/*100*/
	padding: 1.2% 1.5%;
	margin:0 0 15px 0;
	line-height:1.3;
}
#news #contents #main .article dl.inner dd{
	padding: 0 0 10px 0;
	border-bottom: 1px dotted #555;
	margin:0 0 15px 0;
}
#news.detail .l-article dl.inner dt{
	width: auto;
}
#news.detail .l-article dl.inner dt span{
	font-size: 13px;
	font-size: 1.3rem;
}
#news.detail .l-article dl.inner dd{
	padding: 0 0 10px 0;
	margin:24px 0 15px 0;
}
#news #article dl dd p {
	margin-bottom: 1.2em;
}
#news #article dl dd p:last-of-type {
	margin-bottom: 0;
}



/** =8
 * ========================================
 * Contact
 * ========================================
 */

#contact #contents #main .article a{
	display: inline;
}

/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#contact #contents #main .article dl.inner dt {
		    width: 25.5%;
		}
		#contact #contents #main .article dl.inner dd {
		    padding: 0 0 10px 31%;
		}

		/*#contact #contents #main .article dl.inner dd.foodbooth {
			margin: -48px 0 15px;
		}*/
	}




/** =9
 * ========================================
 * Goods
 * ========================================
 */

#goods #contents #main table{
	background:none;
	border: none;
}
#goods #contents #main table.tab02 td{
	border: none; /*border: 1% solid #ccc;*/
	width:25%;
	vertical-align: top;
}
#goods #contents #main td a{
    text-decoration: none;
    display: block;
    width: 100%;
    height:100%;
    color:#666;
    line-height:1.2;
}
#goods #contents #main td a:hover{
    color:#b30a0a;
}
#goods #contents #main td img{
    width: 100%;
    margin-bottom:4px;
}
#goods #contents #main td a:hover{
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
    opacity:0.6;
}
#goods #contents #main td span.name{
    font-size:78%;
}
#goods #contents #main td span.price{
    color:#AE2626;
    font-weight:bold;
}
#goods #contents #main td a:hover span.name strong.kii{
	color:#B30A0A;
}

#goods #contents #main div.inner{
	margin-top:30px;
}

#goods #contents #main .goodsBanner img {
	width: 100%;
}
#goods .section .sectionRead {
	border-bottom: 1px dotted #836a38;
	padding-bottom: 20px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#goods #contents #main td{
		    padding: 3px;
		}
		#goods #contents #main td span.name{
		    /*font-size:70%;*/
		}
		#goods #contents #main .goodsBanner {
			margin-bottom: 20px;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		th {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#goods #contents #main .goodsBanner {
			max-width: 690px;
		}
	}




/** =10
 * ========================================
 * Forest
 * ========================================
 */

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#forest #contents #main #article02 h3 img,
		#forest #contents #main #article04 h3 img{
		 width:95%;
		}

		#forest #contents #main .inner p.maketheheaven{
		 width: 100%;
		}
		#forest #contents #main .inner p.maketheheaven img{
		 width: 100%;
		}
		#forest #contents #main .imgMini{
		    width: 38%;
		}
		#forest #contents #main .imgMini img{
		    width: 100%;
		}
		#forest #contents #main .bnrEcotone{
			width: 130px;
		}
		#forest #contents #main .bnrModelforest{
			width: 60px;
		}
		#forest #contents #main .bnrMaketheheaven{
			width: 100%;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#forest #contents #main .imgMini{
		    width: 38%;
		}
		#forest #contents #main .imgMini img{
		    width: 100%;
		}
	}