@charset "utf-8";
/* CSS Document */

@import url('http://fonts.googleapis.com/earlyaccess/notosansjp.css');
.wf-mplus1p { font-family: "Mplus 1p"; }
html,body,ul,li,div,img,h1,h2,h3,p,a{margin: 0; padding: 0; list-style: none; border: none; outline: none;}

.abs{position: absolute; display: block;}
.rel{position: relative; display: block;}

.imgRes{max-width: 100%;}


span.pc{display: inline-block;}
.sp,.res414,.ipad{display: none;}
.pc{display: block;}

.floatLeft{float: left;}
.floatRight{float: right;}

.clearBlock:after{
content:"";
display:block;
clear:both;
}

.mt10{margin-top: 10px !important;}

html, body{
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	min-width:1340px;
	font-size: 100%;
	background: #ffffff;
	line-height: 1.6;
}

/***トップ＆ナビ****/

.mainImg{background: url(../images/topBg.png) repeat-x; height: 600px; width: 100%; background-size: auto 100%; overflow-x:hidden ;}
.mainImg .inner{margin: 0 auto; width: 1380px;}
.mainImg .inner h1{margin: 0;}
.mainImg nav{width: 100%; bottom: 0; background: rgba(255,255,255,0.9); text-align: center;}
.mainImg nav ul{font-size: 0;}
.mainImg nav ul li{display: inline-block;}
.mainImg nav ul li a{padding: 24px 20px; display: block; position: relative; overflow: hidden;}
.mainImg nav ul li a img{position: relative; z-index: 1;}
.mainImg nav ul li:nth-child(1) a:after,
.mainImg nav ul li:nth-child(4) a:after{background: #e52930; opacity: 0.2;}
.mainImg nav ul li:nth-child(2) a:after,
.mainImg nav ul li:nth-child(5) a:after{background: #ffe52e; opacity: 0.3;}
.mainImg nav ul li:nth-child(3) a:after,
.mainImg nav ul li:nth-child(6) a:after{background: #00adc3; opacity: 0.2;}

.mainImgp{
   bottom: 2.5%;
   right: 17%;
}
area {
  border:none !important;
  outline:none !important;
}

@media screen and (max-width:768px) {
   .mainImgp{
   top: 5.5%;
   right: 7%;
   width: 30%;
}
   .mainImgp img{
   width: 100%
   }
}


/***メインコンテンツ*****/

.contents{width: 100%; background: url(../images/bg.png) repeat-y center top;}
.contents .inner{width: 1000px; margin: 0 auto;}

section.rel{
	margin: 175px auto 0;
	border: 1px solid #000000;
	padding: 80px;
	width: 900px;
	background: #ffffff;
	box-sizing: border-box;
}

section ul li.no_star{
	padding-bottom: 0em;
	margin-bottom: 0.2em;
	background: none;
}

section ul li b{
	font-size: 1.3em;
   width: 40%;
	font-weight: bold;
	color: #00adc3;
   text-align: center;
   margin: 0 auto;
}

section ul li span{
	/*white-space: nowrap;*/
}
#Ap{
   text-align: center;
}
#Ap li span.small{
   font-size: 0.5em;
   padding:0 1em 2em;
}

section.rel#lineup{
	padding: 80px 35px;
}
section.rel#lineup .inner{padding: 0 45px; width: 100%; box-sizing: border-box;}
#lineup h5{font-size: 17px; text-align: center; color: #333333; font-weight: normal;}

section.rel h2{text-align: center; top: -55px; left: 0; width: 100%;}
section.rel h4{margin: 50px auto 30px; text-align: center;}
section.rel h4 img{margin: 0 auto;}
section.rel hr{border: none; outline: none; border-top: 1px solid #d9d9d9; margin-bottom: 30px;}
section.rel .topText{color: #333333;}

#live h4{background: #f1f5f7; font-size: 17px; color: #333333; margin: 100px auto 30px; padding: 12px 0;}

#news div.toggle-wrapper:nth-child(2){border-top: 1px solid #d9d9d9;}
section.rel div.toggle-wrapper{border-bottom: 1px solid #d9d9d9; padding: 30px;}
.toggle-header h3{font-size: 17px; color: #333333; font-weight: normal;}
.toggle-header .date{font-size: 14px; color: #00adc3; display: block;}
.toggle-header .attention{font-size: 14px; color: #E62C27; display: block;}
.toggle-body p{font-size: 15px; color: #808080;}
.toggle-body p a{color: #00adc3;}

.ulList{margin: 0 0 0 12px; font-size: 15px; color: #808080;}
.ulListInner{margin: 20px 0 20px 20px; font-size: 13px;}
.ulList li:before {
	content: '';
	width: 2px;
	height: 2px;
	display: inline-block;
	border-radius: 100%;
	background: #808080;
	position: relative;
	left: -10px;
	top: -5px;
}

.ulList li.kome:before {
	content: '※';
	width: 0;
	height: 0;
	border-radius:0;
	background: none;
	left: -20px;
	top: 0;
}

.ulListInner li:before {
	content: 'ー';
	width: 0;
	height: 0;
	border-radius:0;
	background: none;
	left: -20px;
	top: 0;
}

#goods .ulList li,
#lineup .ulList li,
#live .ulList li{padding: 15px 0;}
.ulListInner li{padding: 12px 0 !important;}



.toggle-body {padding: 20px 0 0;}
#live .toggle-body{width: 620px;}

.toggle-button{
top: 48px; right: 35px; cursor: pointer;
	width: 25px; height: 25px;
}

#live .toggle-button{top: 33px;}

.toggle-button span{display: block; position: relative;
width: 20px;
height: 20px;
border-top: solid 1px #777777;
border-right: solid 1px #777777;

transform: rotate(135deg);
-webkit-transition: 0.3s linear;
	-moz-transition: 0.3s linear;
	-o-transition: 0.3s linear;
	transition: 0.3s linear;
}


.open .toggle-button span{
	transform: rotate(-45deg);
}

.toggle-button:hover span{
	border-color: #1cb6c9;
}


/**** live info *****/

.subTitle{font-size: 24px; color: #00adc3; text-align: center; margin: 30px auto; font-weight: normal;}
#live table{
width: 100%;
color: #333333;
	text-align: left;
	border-bottom: 1px solid #d9d9d9;
}
#live th{
font-size: 17px;
padding:20px 0 20px 70px;
border-top: 1px solid #d9d9d9;
font-weight: normal;
}
#live td{
font-size: 15px;
padding:22px 70px 21px 0;
border-top: 1px solid #d9d9d9;
}


#lineup .leftBlock{width: 60%;}
#lineup .rightBlock{width: 35%; padding-top: 20px;}

.goodsUl li{margin-bottom: 50px;}
.goodsUl li.floatLeft,
.goodsUl li.floatRight{width: 400px;}
.goodsUl li img{width: 100%; height: auto;}
.goodsUl li:nth-child(10){margin-bottom: 75px;}
img[usemap] {
    max-width: 100%;
   height: auto;}

.sizeTable{border-collapse: collapse; text-align: center; margin: 10px 0;}
.sizeTable th{background: #00adc3; font-size: 17px; color: #ffffff; padding: 10px; font-weight: normal;}
.sizeTable td{font-size: 15px; color: #333333; padding: 10px;}

.caption{font-size: 14px; color: #333333; margin-top: 30px;}
.bottomText{padding: 90px 0 50px;}
.bottomText .caption{margin: 0px; text-align: center;}

#pagetop{background: url(../images/btn_top.png) no-repeat; width: 72px; height: 72px; background-size: 100% auto !important; position: fixed; display: inline; z-index: 1000000;
bottom: 25px; right: 25px;}
#pagetop:hover{background: url(../images/btn_top_over.png) no-repeat;}

footer{background: #00adc3;
   padding: 2.5em 0;
   text-align: center;
   width: 100%;
}
footer .inner{width: 100%; margin: 0 auto; height: auto;}
footer .inner .footer_sns{width: 156px; margin: 0 auto; padding:15px;}
footer .inner .footer_sns .tweet_btn,
footer .inner .footer_sns .like_btn{width: 72px; height: 20px; line-height: 1;}
footer p{font-size: 1.1em; color: #ffffff; text-align: center; max-width: 430px; height: 25px; margin: auto; top: 0; left: 0; right: 0; bottom: 0;}
footer p.copy{font-size: 0.8em;}
.tweet_btn{margin-right: 12px;}

.footerul li{
/*   float: left;*/
   font-size: 0.8em;
   display: inline-block;
   vertical-align: top;
   list-style: none;
   text-align: -webkit-match-parent;
   color: #fff;
}
footer a{
   color: #fff;
   text-decoration: none;
   
}
footer a:hover{
   opacity: 0.6;
   
}
.footerul li.con:after {
    content: "｜";
   margin: 0 .5em;
}
footer div.back {
   margin: 2.5em auto;
   width: 250px;
}
footer div.back a {
    border: 1px solid #fff;
    padding: 0.7em;
    font-size: 100%;
    color: #fff;
   display: block;
}

#btnPC,
#btnSP{
	display: none;
}

#btnSP {
	display: none;
	text-align: center;
	font-size: 16px;
	color: #00adc3;
	background: #ffffff;
	padding: 10px 0;
	margin: 0;
   }

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

	span.pc{display: inline-block;}
      .pc,.sp,.res414,.ipad{display: none;}
      .pro{display: block;}

	html, body{
		min-width:320px;
	}
	
   .mainImgp{
   bottom: 2.5%;
   right: 9%;
   width: 50%;
}
   .mainImgp img{
   width: 100%
   }
/*
	#btnPC{
		display: block;
		text-align: center;
		font-size: 16px;
		color: #00adc3;
		background: #ffffff;
		padding: 10px 0;
		margin: 0;
	}
*/
	
	.mainImg{height: auto;}
	.mainImg .inner{width:100%;}

	.contents{background: url(../images/sp/bg.png) repeat-y; background-size: 100% auto;}
	.contents .inner{width: 100%; box-sizing: border-box; padding-left: 15px; padding-right: 15px;}
	section.rel{margin-top: 10%; width: 85%; padding: 5.5%x 1.83%;}
	section.rel h2{top: -50px;}
	section.rel h2 img{height: 100px; width: auto;}
/*	section.rel div.toggle-wrapper{padding: 15px;}*/
	

	.subTitle{font-size: 4vw; margin: 15px auto;}
	
/*
	#live th {
    font-size: 13px;
    padding: 12px 10px 0;
	display: block;
	clear: both;
	width: 100% !important;
	box-sizing: border-box;
		border-bottom: none;
    }
*/
	
	#live td {
    font-size: 12px;
    padding: 5px 10px 12px;
	display: block;
	clear: both;
	width: 100% !important;
		box-sizing: border-box;
		border-top: none;
    }
	
	#lineup h5{font-size: 14px;}
	#lineup .ulList li br{display: none;}
	#lineup .leftBlock{width: 100%; padding-left: 7px;}
/*	#lineup .leftBlock .ulList{margin-left: 5px;}*/
	.ulList li.kome:before{left:-14px;}
	#lineup .rightBlock{width: 76%; margin: 0 auto; text-align: center;}
	
	
/*
	.ulList{font-size: 12px;}
	.ulListInner{font-size: 11px;}
*/
	#goods .ulList li, #lineup .ulList li,#live .ulList li{padding: 10px 0;}
   .goodsul li img{width: 100%; height: auto;}
	.ulListInner li{padding: 8px 0 !important;}
	section.rel h4{margin: 30px auto 15px;}
	#live h4{font-size: 15px; margin: 50px auto 20px; padding: 10px 0;}
	
	
	section#lineup.rel{padding: 45px 10px;}
	.goodsUl li.floatLeft, .goodsUl li.floatRight{width: 48.84%; height: auto;}
	.goodsUl li{}
   
   .goodsUl li img{width: 100%; height: auto;margin:5px 5px 30px 5px; box-sizing: border-box;}
	section#lineup.rel .inner{padding: 0 5px;}
	
	.sizeTable{width: 100%;}
	.sizeTable th{width: 20%;}
	
	.sizeTable th{font-size: 10px;}
	.sizeTable td{font-size: 12px;}
	
	.caption{font-size: 10px;}
	footer .inner{width: 100%; height: auto; padding: 5px; box-sizing: border-box;}
	.bottomText{padding: 45px 0 25px;}
	footer p{position: relative !important; font-size: 12px;}
	footer .inner .footer_sns{margin: 0 auto; float: none; padding: 7px 0;}
	#pagetop{width: 55px; height: 55px;}
   .footerul li{
   font-size: 1.5vw
   }


}










@media screen and (max-width:768px) {
	.pc,
	span.pc,.pro,.res414{display: none;}
	
	.ipad,.sp{display: block;}
	
	html, body{
		min-width:320px;
	}

	
	#btnPC{
		display: block;
		text-align: center;
		font-size: 16px;
		color: #00adc3;
		background: #ffffff;
		padding: 10px 0;
		margin: 0;
	}
	
	.mainImg{height: auto;}
	.mainImg .inner{width:100%;}
	
	.mainImg nav{position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: auto; bottom: inherit; display: none;}
	.mainImg nav ul{background: url(../images/sp/logo.png) no-repeat top center; padding-top: 110px; background-size: 320px auto;}
	.mainImg nav ul li{width: 100%; display: block;}
	.mainImg nav ul li a{width: 100%; box-sizing: border-box; padding: 10px;}
	.mainImg nav ul li a img{width: auto; height: 20px;}
	
	#menu_btn{background: url(../images/sp/btn_open.png) no-repeat; width: 50px; height: 50px; position: fixed; background-size: 100% auto !important; cursor: pointer;
	top: 0; right:0; z-index: 10;}
	#menu_btn.open{background: url(../images/sp/btn_close.png) no-repeat;}
	
	.contents{background: url(../images/sp/bg.png) repeat-y; background-size: 100% auto;}
	.contents .inner{width: 100%; box-sizing: border-box; padding-left: 15px; padding-right: 15px;}
	section.rel{margin-top: 20%; width: 100%; padding: 45px 15px;}
	section.rel h2{top: -25px;}
	section.rel h2 img{height: 55px; width: auto;}
	section.rel div.toggle-wrapper{padding: 15px;}
	
	.toggle-header .date{font-size: 12px;}
	.toggle-header h3{font-size: 14px; padding-right: 25px;}
	
	#live .toggle-body{width: 100%;}
	.toggle-body p{font-size: 12px;}
	.toggle-button{top: 38px; right: 15px; width: 14px; height: 14px;}
	#live .toggle-button{top: 18px;}
	.toggle-button span{width: 14px; height: 14px;}
	
	.subTitle{font-size: 6vw; margin: 15px auto;}
	
	#live th {
    font-size: 13px;
    padding: 12px 10px 0;
	display: block;
	clear: both;
	width: 100% !important;
	box-sizing: border-box;
		border-bottom: none;
    }
	
	#live td {
    font-size: 12px;
    padding: 5px 10px 12px;
	display: block;
	clear: both;
	width: 100% !important;
		box-sizing: border-box;
		border-top: none;
    }
	
	#lineup h5{font-size: 14px;}
	#lineup .ulList li br{display: none;}
	#lineup .leftBlock{width: 100%; float: none; padding-left: 7px;}
	#lineup .leftBlock .ulList{margin-left: 5px;}
	.ulList li.kome:before{left:-14px;}
	#lineup .rightBlock{width: 76%; float: none; margin: 0 auto; text-align: center;}
	
	
	.ulList{font-size: 12px;}
	.ulListInner{font-size: 11px;}
	#goods .ulList li, #lineup .ulList li,#live .ulList li{padding: 10px 0;}
   .goodsul li img{width: 100%; height: auto;}
	.ulListInner li{padding: 8px 0 !important;}
	section.rel h4{margin: 30px auto 15px;}
	#live h4{font-size: 15px; margin: 50px auto 20px; padding: 10px 0;}
	
	
	section#lineup.rel{padding: 45px 10px;}
	.goodsUl li.floatLeft, .goodsUl li.floatRight{width: 100%; height: auto;}
	.goodsUl li{margin-bottom: 25px;}
   .goodsUl li img{width: 100%; height: auto;}
	section#lineup.rel .inner{padding: 0 5px;}
	
	.sizeTable{width: 100%;}
	.sizeTable th{width: 20%;}
	
	.sizeTable th{font-size: 10px;}
	.sizeTable td{font-size: 12px;}
	
	.caption{font-size: 10px;}
	footer .inner{width: 100%; height: auto; padding: 5px; box-sizing: border-box;}
	.bottomText{padding: 45px 0 25px;}
	footer p{position: relative !important; font-size: 12px;}
	footer .inner .footer_sns{margin: 0 auto; float: none; padding: 7px 0;}
	#pagetop{width: 36px; height: 36px;}
   .footerul li{
   font-size: 2vw
   }
   .footerul li.con:nth-child(3n):after {
   content: "";}

}

@media screen and (max-width:414px) {
   .ipad{
   display: none;
   }
   .res414{
   display: block;
   }

}