/* LESS Document */
@import url(animate.css);
@import url(menu.css);

/* Breakpoints */
@mobile:      ~"only screen and (max-device-width: 767px)";
@mobile_l:      ~"only screen and (max-device-width: 767px) and (orientation: landscape) ";
@tablet:      ~"only screen and (min-device-width: 768px) and (max-device-width: 980px)";
@tablet_l:      ~"only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) ";
@minpc:      ~"only screen and (max-width: 980px)";
@pc:      ~"only screen and (min-width: 981px)";

/* font size */
@min:11px;
@basic:13px;
@mid:16px;
@big:18px;
@bigger:20px;
@biggest:24px;

/* COLOR */
//SNS
@twitter:#00aced;
@facebook:#305097;
@line:#5ae628;

//SITE
@red:#e83428;
@beju:#f2eee8;
@ticket:#b7aa00;

/* common */
.m0{margin:0;}
.p0{ padding:0;}
.mp0{margin:0;padding:0;}
.w100{ width:100%; }
.w_auto{width:1000px; margin:0 auto;
	@media @tablet{ width:100%;}
	@media @tablet_l{ width:1000px; margin:0 auto;}
	@media @mobile{ width:100%;}
}
.w_auto2{max-width:1200px; margin:0 auto;}
.clear{content:""; display:block; clear:both;}
.opacity10{filter: alpha(opacity=100); -moz-opacity:1; opacity:1;}
.opacity8{filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
.opacity5{filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
.opacity0{filter: alpha(opacity=0); -moz-opacity:0; opacity:0;}
.rounded-corners (@radius: 4px){border-radius: @radius;  -webkit-border-radius: @radius; -moz-border-radius: @radius;}
.box-shadow(@arg: 0px 4px 0px 0px #eee){ -moz-box-shadow: @arg; -webkit-box-shadow: @arg;box-shadow: @arg;}
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.8)) {text-shadow: @string;}
.transition{
	-webkit-transition: padding .05s linear;
	-moz-transition: padding .05s linear;
	-ms-transition: padding .05s linear;
	-o-transition: padding .05s linear;
	transition: padding .05s linear;
}
.transition2{
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* 基本設定 */
* { word-break:break-word; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}
body{ font-size:16px; line-height:1.5; color:#000; .mp0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin-top:82px; padding-top:-82px; background:#222; min-width:1000px;word-break: normal; word-wrap:break-word;
	@media @tablet_l{margin-top:50px; padding-top:-50px; min-width:0px;background:url(../shirozeme.png) no-repeat center 70px #000; background-size:contain;}
	@media @tablet{margin-top:50px; padding-top:-50px; min-width:0px;background:url(../shirozeme.png) no-repeat center 70px #000; background-size:contain;}
	@media @mobile{margin-top:50px; padding-top:-50px; min-width:0px;background:url(../shirozeme.png) no-repeat center 70px #000; background-size:contain;}
}
img { vertical-align:bottom; max-width:100%;}
ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,p,figure,figcaption,input,textarea{ .mp0; list-style:none;}
ul:after{.clear;}
a{ /*text-decoration:none; */outline:none; cursor:pointer; color:#3399ff;
	&:hover{.opacity8;
		@media @mobile{
			.opacity10;
		}
	}
	img{ border:none; outline:none;}
}

.pc{display:block;
	@media @tablet_l{display:none;}
	@media @tablet{display:none;}
	@media @mobile{display:none;}
}

.smp{ display:none;
	@media @tablet_l{display:block;}
	@media @tablet{display:block;}
	@media @mobile{ display:block;}
}

body.home{ padding-top:750px;
	@media @tablet_l{ padding-top:0px;}
	@media @tablet{ padding-top:0px;}
	@media @mobile{ padding-top:0px;}
}
.pagetop{ position:fixed; bottom:0; right:0; z-index:99999;
	a{ color:#fff; display:block; padding:10px;
		img{ width:50px; height:50px;}
	}
}

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
}
#overvideo{
	    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -90;
    transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
  background:url(../img/pattern.png) repeat rgba(0,0,0,0.30);
}


/*loading*/
#loader {width:200px;height:100px;display: none;position: fixed;_position: absolute; /* IE6対策 */top: 50%;left: 50%;margin-top: -50px; /* heightの半分のマイナス値 */margin-left: -100px; /* widthの半分のマイナス値 */z-index: 446000; text-align:center; color:#fff;}
#fade {width: 100%;height: 100%;display: none;background-color: #000;position: absolute;top: 0px;left:0; z-index:444000}


div.mean-bar{ text-align:right;}
.mean-container .mean-bar{padding:0;
	
 }
.mean-nav{/*margin-bottom:50px;*/ 
	ul{overflow:auto; padding-top:50px;overflow-y: scroll;position:fixed; left:0;right: 0;bottom: 0;left: 0;top: 50px; z-index:200; background:#000;
		ul{ position:static; background:none;}
		li.areamenu{ background:@red;
		}
	}
}
.mean-container a.meanmenu-reveal{ background:#222 url(../img/logo-head.png) no-repeat 10px 10px; background-size:auto 38px; display:block; width:100%; padding:14px 0; position:fixed; top:0; left:0; text-align:right !important;
	span{ width:16px; margin:3px 0 0 90% ;
		@media @tablet_l{ margin-left:97%;}
		@media @tablet{ margin-left:95%;}
	}
}
.mean-container a.meanmenu-reveal.meanclose{ padding-right:16px; min-height:50px; width:100%;
word-break:break-all; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}
/*============================
#header
============================*/
header#header { position:fixed; top:0; left:0; z-index:300; .w100; background: rgba(0,0,0,0.50); padding:8px 16px 8px 16px;min-width:1000px;
	@media @tablet_l{ padding:0px; background:#000;min-width:0px;}
	@media @tablet{ padding:0px; background:#000;min-width:0px;}
	@media @mobile{ padding:0px; background:#000;min-width:0px;}
	div.h1 { float:left;
		img {
		}
	}

	/*============================
	#nav
	============================*/
	ul#nav.navi { float:right;
		
		li { float:left;
			a { color:#fff; display:block; padding:0px 16px 0;.transition2;text-decoration:none;
			}
			.dropOut{ padding:10px; background:#fff;
				ul {
					li { float:none; width:100%; border-bottom:1px dashed #ccc;
						&:last-child{ border-bottom:none;}
						a {display: block; padding:0px; text-align:center; padding:10px; line-height:1; color:@red; height:auto; font-size:@basic; text-decoration:none;
						}
					}
				}
			}
		}
		li.drop{ position:relative;}
	}
	
	nav.smp{ 
	}
	
	.menu-collapser{ background:none;
		.collapse-button{ background:none;
		}
	}
	
	

}


/*============================
#brcb
============================*/
section#brcb { background:@red; line-height:1; padding:10px; 
	@media @mobile{padding-top:10px;}
	ul.syncer-brcb { color:rgba(255,106,68,1.00);
		li { display:inline-block;font-family:Verdana, 'Lucida Grande'; font-size:@basic;
			&:after{ display:inline-block; content:"＞";}
			a { color:#fff; padding:10px 0px 10px 0px;
				@media @mobile{ font-size:@min;}
				span { margin-right:10px;
				}
			}
			&:last-child{
				&:after{ display:inline-block; content:"";}
				a{
					
				}
			}
		}
	}
}


/*============================
#home
============================*/
.top-news{ position:relative; z-index:100; padding:8px 16px; background:rgba(0,0,0,0.81);
	@media @mobile{padding:0px 16px; }
			span.timedata { color:#fff; font-size:@min; text-align:right; display:block; width:600px; margin:0 auto 10px;
			@media @mobile{ width:100%; padding-top:20px; text-align:center;}
		}
		ul {width:600px; margin:0 auto;
			@media @mobile{ width:100%; padding:0px 0px 8px 0px;}
			li {background:@red; margin-bottom:10px;
				@media @mobile{.rounded-corners(4px);}
				a { display:block;
					span.category { color:#fff; float:left; width:150px; padding:10px; display:block; text-align:center;
						background:url(../img/arrow-left-basic-white.png) center right no-repeat; background-size:10px;
						@media @mobile{ width:100%; background:none; font-size:@min;}
					}
					p { float:right; width:450px; background:#fff; padding:10px 16px; color:#222; text-align:left; text-decoration:underline;
						@media @mobile{ width:100%; text-align:center;.rounded-corners(0 0 4px 4px); font-size:@min;padding:10px;}
					}
					&:after{.clear;}
				}
			}
			li.en{
				a{
					span.category {width:100%; background:none;}
					p {width:100%; text-align:center;}
				}
			}
		}

}

div#home_contents{ position:relative; z-index:100; background:#fff;}
div#common_contents{ position:relative; z-index:100; background:#fff; padding-top:0px;
	@media @tablet_l{ padding-top:0px;}
	@media @tablet{ padding-top:0px;}
	@media @mobile{ padding-top:0px;}
}
section#home { position:fixed; left:0; top:0; z-index:1; .w100; padding-top:100px;
	 @media @tablet_l{ position: static;padding-top:50px; margin-bottom:10px;}
	 @media @tablet{ position: static;padding-top:50px; margin-bottom:10px;}
	 @media @mobile{ position: static;padding-top:50px; margin-bottom:10px;}
	div.wrap { .w_auto; text-align:center;
		@media @tablet{ padding:0 16px;}
		@media @mobile{ padding:0 16px;}
		h1 {
			img {
			}
		}
		p.catch {
			img { position:relative; top:-60px;
			@media @tablet{ left:30px;}
			@media @mobile{ top:-30px;}
			}
		}
		a.video-play { display:block;
			img {
				@media @mobile{ top:0;}
			}
		}
		ul.video{.w_auto; width:600px; position:relative; top:-30px;
			@media @tablet{ width:70%;}
			@media @mobile{ width:100%; top:0px;}
			li{ float:left; width:50%; padding:0 10px; background:url(../img/play-btn3.png) no-repeat center center;
				@media @mobile{ width:100%; float:none; margin-bottom:10px;}
				a{ display:block; border:1px solid #fff; padding:10px; color:#fff; min-height:120px; width:100%; padding:40px 10px;
					@media @mobile{ padding:16px; min-height:0;}
					img{ opacity:.3;}
					h5{}
				}
			}
			&:after{.clear;}
		}
		a.tomatsue{ display:inline-block; padding:5px 20px; background:@red; color:#fff;.rounded-corners(20px);}
		ul.location-link { text-align:center;.w_auto; padding:0px;
			@media @mobile{ text-align:left; padding:8px;}
			li { display:inline-block;.rounded-corners(30px); background:@red; padding:5px; padding-right:20px; margin-bottom:8px;
				@media @mobile{ width:48%; display:block; float:left; margin:5px 1%; font-size:@basic;padding-right:5px;}
				a { color:#fff; line-height:30px;
					@media @mobile{ display:block; text-align:center;}
					span { width:30px; height:30px;.rounded-corners(50%); background:@beju url(../img/arrow-right-min-red.png) no-repeat center center; display:block; float:left; margin-right:12px;
						@media @mobile{ display:none;}
					}
				}
			}
		}
		ul.location-link.en{
			li{
				@media @mobile{ width:98%;}
			}
		}


	}
}
/*============================
#news
============================*/
section#news { background:#ed5f56;
	h2 {
		img {
		}
	}
	ul.owl-carousel.news-carousel {.w_auto; background:#fff; padding:0 30px;height:130px;
		@media @mobile{ display:block; height:auto; padding:8px;}
		li { 
			@media @mobile{border-bottom:1px dashed #ddd;}
			a { display:block; border-right:1px solid #ddd;height:130px;
				@media @mobile{ height:auto;border-right:0;}
				div.thumb { position:relative; float:left; width:50%; padding:13px 5px 0px 25px;
					@media @tablet{ width:30%;}
					@media @mobile{ width:40%;padding:13px 5px 10px 5px;}
					
					span.new { background:#fff100;.rounded-corners(20px); display:inline-block; padding:2px 5px; color:#222; font-size:@min; font-weight:bold; position:absolute; left:10px; top:20px; z-index:3;
						@media @mobile{top:5px;}
					}
					img { width:auto; max-width:100%; max-height:100px;
					}
				}
				div.text { position:relative; float:left;width:50%; padding:10px;
					@media @tablet{ width:70%;}
					@media @mobile{ width:60%;}
					p { color:#999; font-size:@min; margin-bottom:10px;
						span.category { background:@red;.rounded-corners(20px); display:inline-block; padding:3px 10px; color:#fff; font-size:@min; font-weight:bold; margin-right:10px;
						}
					}
					h3 { color:#222; font-size:@basic; line-height:1.2; text-decoration:underline;
					}
				}
				&:after{.clear;}
			}
		}
		li.last{ background:#eee; text-align:center; line-height:130px;
			@media @mobile{ line-height:3em; padding:16px;}
			a{ color:#222;
				@media @mobile{ color:@red; text-decoration:underline;}
			}
		}
		&:after{.clear;}
	}
	div.owl-nav{
			@media @mobile{ display:none;}
		.owl-prev,
		.owl-next{ width:30px; height:130px; background:@red; position:absolute; top:0; text-indent:-8888em; cursor:pointer;}
		.owl-prev{ left:0; background:url(../img/arrow-left-basic-white.png) no-repeat center center @red;}
		.owl-next{ right:0; background:url(../img/arrow-right-basic-white.png) no-repeat center center @red;}
		.disabled{ opacity:.1; background-color:#222;}
	}
}
/*============================
#news-list
============================*/
section#news-list {.w100; text-align:center;
	h2{ text-align:center; padding:32px;}
	div.category{ padding:16px; border-top:1px dashed #ddd;
		ul{ text-align:center;
			li{display:inline-block; margin-bottom:8px;
				a{ background:@red;.rounded-corners(20px);padding:5px 20px; color:#fff; font-size:@basic; font-weight:normal; line-height:1;}
			}
		}
	}
	ul.list {
		li { background-size:cover; background-position:center center;
			@media @mobile{ border-bottom:1px solid #222;}
			a { display: block; padding:32px; color:#fff; background:rgba(0,0,0,0.71);
				@media @mobile{ padding:16px;}
				div.text { .w_auto;
					span.category {background:#fff;.rounded-corners(20px); display:inline-block; padding:5px 8px; color:@red; font-size:@basic; font-weight:bold; line-height:1;
					}
					p {font-size:@basic; line-height:1.2; padding:8px;
						span.category {font-size:@basic; line-height:1.2; padding-right:16px;
						}
					}
					h3 { font-size:@biggest;
						@media @mobile{ font-size:@big;}
					}
				}
			}
		}
	}
	
	div.pagenation{ position:relative;
		@media @mobile{ padding-top:50px;}
		ul{ text-align:center; background:#eee;
			li{ display:inline-block; background:#ccc; 
				a{ display:block; text-align:center; line-height:1; padding:16px; color:#fff;
					&:hover{ color:@red;}
				}
				span.current{ display:block; text-align:center; line-height:1; padding:16px; color:#222;
				}
			}
			li a.prev{ position:absolute; left:0; top:0; background:@red;
				@media @mobile{ width:50%; height:50px;}
				&:hover{ background:#222;}
			}
			li a.next{ position:absolute; right:0; top:0; background:@red;
				@media @mobile{ width:50%; height:50px;}
				&:hover{ background:#222;}
			}
		}
	}
}



/*============================
#info
============================*/
section#info { background:url(../img/info-bg.jpg) no-repeat center center; background-size:cover;
	div.wrap {.w_auto; text-align:center; padding:30px; padding-bottom:0;
		p { padding-bottom:30px;
			img {
			}
		}
		a { display:inline-block; background:@red; color:#fff; font-size:@mid; padding:10px;
		}
	}
}
/*============================
#location
============================*/
section#location {.w100; background:url(../img/dot-red.png) repeat left top; padding:12px;
	@media @mobile{}
	div.wrap {.w100;background:url(../img/location-bg.jpg) repeat left top; 
		h2 { color:@red; text-align:center; padding:30px;
		}
		p {text-align:center; 
			@media @mobile{ padding:0 16px; text-align:left; font-size:@basic;}
		}
		ul.location-link { text-align:center;.w_auto; padding:0px;padding-top:16px;
			@media @tablet_l{ padding-top:16px;}
			@media @tablet{ padding-top:16px;}
			@media @mobile{ text-align:left; padding:8px;}
			li { display:inline-block;.rounded-corners(30px); background:@red; padding:5px; padding-right:20px; margin-bottom:8px;
				@media @mobile{ width:48%; display:block; float:left; margin:5px 1%; font-size:@basic;padding-right:5px;}
				a { color:#fff; line-height:30px;
					@media @mobile{ display:block; text-align:center;}
					span { width:30px; height:30px;.rounded-corners(50%); background:@beju url(../img/arrow-right-min-red.png) no-repeat center center; display:block; float:left; margin-right:12px;
						@media @mobile{ display:none;}
					}
				}
			}
		}
		div.w_auto{ height:920px; position:relative; text-align:center; 
			@media @tablet_l{ display:none;}
			@media @tablet{ display:none;}
			@media @mobile{ display:none;}
		}
		.smp-detail{ text-align:center;}
		/*============================
		#more-detail
		============================*/
		div#more-detail { width:619px;padding:90px 50px 0px 90px; position:absolute; left:0; top:0;
			font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
			/*============================
			#detail-name
			============================*/
			h3#detail-name { color:#fff; font-weight:normal; font-size:@biggest; padding-left:70px; text-align:left;
			}

			/*============================
			#detail-time
			============================*/
			p#detail-time { color:#fff; float:right; position:relative; top:-30px; text-align:right; padding-right:40px; font-size:@basic;
			}

			/*============================
			#detail-catch
			============================*/
			h4#detail-catch { text-align:center; color:@red; padding-top:39px; margin-bottom:20px; padding-left:50px;
			}

			/*============================
			#detail-image
			============================*/
			img#detail-image {  float:left; width:40%; .rounded-corners(50%);
			}
			div{ float:right; width:60%; padding:0 16px; font-size:@basic; text-align:left;}
			/*============================
			#detail-text
			============================*/
			p#detail-text { text-align:left; margin-bottom:16px;
			}

			/*============================
			#detail-link
			============================*/
			a#detail-link { color:@red; text-decoration:underline;
			}
		}

		ul.accordion { padding: 16px 16px 8px 16px;
			@media @mobile{ text-align:left;}
			li { border:1px solid #e4e2d5; background:#fff; margin-bottom:10px;
				h4 { color:#858379; font-size:@biggest; line-height:2; padding:8px 8px 8px 16px; cursor:pointer; text-align:left;
					@media @mobile{ font-size:@basic;}
					span{ float:right; line-height:1; background:@red; color:#fff; padding:8px;.rounded-corners();
						@media @tablet_l{ font-size:@mid;padding:15px;}
						@media @tablet{ font-size:@mid;padding:15px;}
						@media @mobile{ font-size:@min;padding:8px;}
					}
					span.open{ }
					&:after{.clear;}
				}
				div.box {  display:none;
					@media @tablet{ }
					h5 { background:@red; padding:10px 20px; color:#fff; font-size:@big;
						@media @tablet_l{ text-align:center;}
						@media @tablet{ text-align:center;}
						@media @mobile{ padding:5px 3px; font-size:@basic; text-align:center;}
					}
					img{ width:100%;
						@media @tablet_l{ width:30%; float:left;}
						@media @tablet{ width:50%; float:left;}
						}
					p { padding:15px 10px;
						@media @tablet_l{ text-align:left;padding:16px;}
						@media @tablet{ text-align:left;padding:16px;}
						@media @mobile{ padding:16px;}
					}
					div.right{ 
						@media @tablet_l{float:right; width:70%; padding:0 0px 0;}
						@media @tablet{float:right; width:50%; padding:0 0px 0;}
					}
					a{ display:block; text-align: center; padding:10px; border:1px solid @red; color:@red; margin:16px; margin-top:0;
						@media @mobile{ font-size:@min;}
					}
					&:after{.clear;}
				}
			}
		}

	}
}
/*============================
#old
============================*/
section#old { padding-bottom:30px; padding-top:10px;
	div.wrap {.w_auto;
		h4 { color:@red; text-align:center; padding:40px; font-size:@biggest;
		}
		ul {
			@media @mobile{ padding:0 16px;}
			li { text-align:center;
				h5 { color:@red; text-align:center; padding:10px; font-size:@big; border-bottom:1px  dashed #ccc; padding-bottom:30px; font-weight:normal;
				}
				a { display:inline-block; font-size:@basic; color:#ccc; border:1px solid #ddd; padding:10px; line-height:1; position:relative; top:-1.5em; background:#fff;
					&:hover{ border-color:@red; color:@red;}
					@media @mobile{width:100%; margin-bottom:8px;}
				}
			}
		}
	}
}
/*============================
#links
============================*/
section#links { background:#fff; padding-top:10px;
	@media @mobile{ padding-top:0;}
	ul {.w_auto; text-align:center;
		@media @mobile{ }
		li { display:block;width:100%; text-align:center;
			@media @mobile{ width:100%; display:block; float:left;}
			a {color:#222;  line-height:1.5; padding:10px;display:block; font-size:@basic;
				@media @mobile{ width:auto;.rounded-corners(0); background:none;padding:16px 0px;}
			}
				/*&:first-child{ background:#ccc;}
				&:last-child{ background:#ddd;}*/
		}
		li.contact{ text-align:center;
			a{ display:inline-block; padding:10px; background:#eee;
				@media @mobile{ display:block; min-height:52px; padding:16px;}
			}
		}
		&:after{.clear;}
	}
}


/*============================
#footer
============================*/
footer#footer { background:#222; .w100; padding:20px;
	div.wrap {.w_auto;
		h5 { padding:16px 0; text-align:center; color:#fff; font-size:@min; font-weight:normal;
		}
		ul { margin-bottom:16px; text-align:center;
			li { float:left; width:33.3333332%; padding:2px;
				@media @mobile{ width:50%; float:left;}
				a {
					img {
					}
				}
			}
			&:after{.clear;}
		}
	}
	div.copyright { padding:10px;
		p { font-size:@min; text-align:center; color:#fff;
		}
	}
}


/*============================
#area
============================*/
section#area { background:#eee; .w100; padding-bottom:50px;
	@media @mobile{padding-bottom:0px;}
	div.wrap { .w_auto;
		&:after{.clear;}
		div.main { width:700px; float:right;
			@media @tablet{ width:100%;}
				@media @tablet_l{ width:700px;}
		@media @mobile{ width:100%;}
			div.visual {
				img { width:100%;
				}
			}
			div.visual.common { background-position: center center; background-size:cover; background-repeat:no-repeat; min-height:100px;
			}
			
			ul.button {
				li { float:left; width:50%;
					&:first-child{ background:@red;}
					&:last-child{ background:@ticket;}
					
					a { color:#fff; display:block; text-align:center; padding:16px;
						@media @mobile{ padding:8px; font-size:@basic;}
					}
				}
				&:after{.clear;}
			}
			
			ul.button.en{
				li{
					@media @mobile{ width:100%; padding:8px;}
				}
			}
			
			
			div.news { background:#fff; padding:32px;
				@media @mobile{ padding:8px;}
				ul { margin-bottom:16px;
					li {padding:8px;
						a { color:#222;
							div.thumb {
								img {
								}
							}
							div.text { text-align:center;
								span.category { background:@red; .rounded-corners(20px); color:#fff; font-size:@basic; display:inline-block; padding:5px 10px; line-height:1; position:relative; top:-15px;
								}
								p { font-size:@min; position:relative; top:-5px;
								}
								h3 { font-size:@basic; line-height:1.2; font-weight:normal; text-align:left; 
								}
							}
						}
					}
				}
				.owl-nav{ display:none;}
				div.more { text-align:right;
					@media @mobile{ text-align:center;}
					a { color:#bbb;.rounded-corners(20px); border:2px solid #ccc; padding:10px; display:inline-block; line-height:1; font-size:@basic;
					}
				}
			}
			div.movie {background:#fff; padding:16px;
				@media @mobile{ padding:0px;}
				ul {
					&:after{.clear;}
					li { float:left; width:50%;padding:16px; /*width:100%;*/
						@media @mobile{ width:50%;}
						h4{ text-align:center; color:@red; padding-bottom:5px;}
						div.youtube {
							iframe {
							}
						}
					}
					li.width_100{width:100%;@media @mobile{ width:100%;}}
					li.width_50{width:50%;@media @mobile{ width:50%;}}
				}
			}
			
			div.free{
				background:#fff; padding:32px; padding-top:0;
				@media @mobile{ padding:0px;}
			}
			div.free.en{
				padding:32px; 
				@media @mobile{ padding:16px;}
			}
			div.contents {background:#eee; padding:0px 0 16px;
				h3 { text-align:center; padding:32px; font-size:@biggest;
					@media @mobile{padding:8px; font-size:@big;}
				}
				ul {
					@media @tablet{padding:16px;}
					@media @mobile{ padding:8px;}
					li { float:left; width:33.33333332%;padding:8px;
						@media @tablet_l{padding:16px;width:33.33333332%;}
						@media @tablet{padding:16px;width:50%;}
						@media @mobile{ width:50%;padding:8px;}
						a{ display:block;
						img { width:100%;
						}
						h4{ color:#fff; background:@red; padding:8px; font-size:@basic; text-align:center; font-weight:normal;}
						span { font-size:@min; color:@red; background:#fff; display:block; padding:6px; padding-bottom:0;
							@media @mobile{ text-align:center;}
						}
						p { font-size:@min; background:#fff; display:block; padding:8px; color:#222;
							@media @mobile{ text-align:center;}
						}
						}
					}
				}
			}

			div.common { background: rgba(232,232,232,1.00);
				h2 { text-align:center; color:@red; padding:32px; background:#fff; font-weight:normal;
					@media @mobile{ padding:32px 16px;}
				}
				hr { width:50px; margin:0 auto; background:@red; height:4px; border:none; position:relative; top:-4px;
				}
				div.box { padding:32px;
					@media @mobile{padding:16px;}
					p.read { margin-bottom:32px; font-size:@basic;
					}
					div.read { margin-bottom:32px; font-size:@basic;
					}
					div.t-box { background:#fff; margin-bottom:32px;
						h3 { background:@red; color:#fff; padding:16px; font-weight:normal;
							@media @mobile{ text-align:center;}
						}
						h4{ color:#fff; font-size:@big; text-align:center; background:@ticket; padding:16px;}
						div.detail { padding:32px; font-size:@mid;	
							@media @mobile{padding:16px;}
							h4{ color:@red; font-size:@bigger; text-align:left; background:none; padding:0px;
								@media @mobile{font-size:@big; text-align:center;}
							}
							img{ max-width:100%; height:auto; margin-bottom:16px;}
							p { padding:8px;}
							table{ width:100%; border-collapse: collapse; margin-bottom:32px;
								tr{
									th,td{ padding:16px; border:1px solid #ccc; text-align:left;}
									th{ background:#eee;}
									td{}
								}
							}
							&:after{.clear;}
						}
						h5{ padding:0 32px 8px; text-align:center; border-top:1px dashed #ddd; padding-top:16px; font-size:@big;
							span{ color:@red;
								@media @mobile{ display:block; font-size:@min;}
							}
						}
						ul.links { padding:0 32px 32px; text-align:center;
							@media @mobile{padding:16px;}
							li { width:49%; display:inline-block; padding:8px;
								@media @mobile{ width:100%;padding:8px;}
								a { display:block; padding:16px; border:2px solid #ccc; color:#999; text-align:center;
									&:hover{ color:@red; border:2px solid @red;}
								}
							}
							&:after{.clear;}
						}
						img{ max-width:100%; height:auto;}
						.alignright{ float:right; margin:0 0 16px 16px;}
						.alignleft{float:left; margin: 16px 16px 0 0;}
					}
					
					div.t-box.kiyaku{
						padding:16px; font-size:@min; line-height:1.8;
						h3 { background:none; color:@red; border-bottom:1px solid @red; margin-bottom:16px;}
						p{ padding:8px;}
						p,ul,ol{ padding-left:16px; margin-bottom:16px;
							li{
								p{ margin-bottom:0px; padding-bottom:0;}
							}
						}
					}
				}
				div.box.kiyaku { padding:16px;}
			}
			ul.list {
				li { background-size:cover; background-position:center center;
					@media @mobile{ border-bottom:1px solid #222;}
					a { display: block; padding:32px; color:#fff; background:rgba(0,0,0,0.71);
						@media @mobile{ padding:16px;}
						div.text {
							span.category {background:#fff;.rounded-corners(20px); display:inline-block; padding:5px 8px; color:@red; font-size:@basic; font-weight:bold; line-height:1;
							}
							p {font-size:@basic; line-height:1.2; padding:8px;
								span.category {font-size:@basic; line-height:1.2; padding-right:16px;
								}
							}
							h3 { font-size:@biggest;
								@media @mobile{ font-size:@big;}
							}
						}
					}
				}
			}
			
			div.pagenation{ position:relative;
				@media @mobile{ padding-top:50px;}
				ul{ text-align:center; background:#eee;
					li{ display:inline-block; background:#ccc; 
						a{ display:block; text-align:center; line-height:1; padding:16px; color:#fff;
							&:hover{ color:@red;}
						}
					}
					li.prev{ position:absolute; left:0; top:0; background:@red;
						@media @mobile{ width:50%; height:50px;}
						&:hover{ background:#222;}
					}
					li.next{ position:absolute; right:0; top:0; background:@red;
						@media @mobile{ width:50%; height:50px;}
						&:hover{ background:#222;}
					}
				}
			}



		}
		aside { width:300px; float:left;
			@media @tablet{ width:100%;}
				@media @tablet_l{ width:300px;}
		@media @mobile{ width:100%;}
			div.local {background:#fff;border-right:30px solid #eee;  margin-bottom:32px;
				@media @tablet_l{background:#fff;border-right:12px solid #eee;  margin-bottom:12px;}
				@media @tablet{ padding-top:0;border-right:0px solid #eee;margin-bottom:0px;}
				@media @mobile{ padding-top:0;border-right:0px solid #eee;margin-bottom:0px;}
				h3 { line-height:40px; color:#fff; background:#2b3742; position:relative; padding:16px;
					@media @tablet{ left:0; text-align:center;}
					@media @mobile{ left:0; text-align:center;}
					img {.rounded-corners(50%); width:40px; height:40px; margin-right:10px;
					}
					a{ color:#fff; font-weight:normal; display:block;}
				}
				h3.en{ text-align:center;}
				ul.sns { position:relative;
					@media @tablet{ left:0;}
					@media @mobile{ left:0; display:none;}
					li{ float:left; width:50%; text-align:center;
						@media @tablet_l{ width:33.33333333332%;}
						@media @tablet{ width:33.33333333332%;}
						@media @mobile{ width:33.33333333332%;}
						a{ color:#fff; padding:8px; display:block; font-size:@min; text-align:center;
							img{ max-height:30px;}
						}
					}
					li.facebook { background:@facebook;
					}
					li.twitter { background:@twitter;
					}
					li.line { background:@line;
					}
					&:after{.clear;}
				}
				ul.localnavi { padding:16px; margin-left:24px;
					li { margin-bottom:8px; list-style-type: circle;
						a { font-size:@basic; color:#222; display:block; padding:3px 0;
							&:hover{ color:@red;}
						}
						ul.children{ padding-left:16px; border-bottom:1px dashed #ddd;
							li{ list-style-type:disc; margin-bottom:0;}
						}
					}
				}
			}
			div.banners { padding-right:32px;
				@media @tablet_l{ padding:0px;border-right:12px solid #eee;}
				@media @tablet{ padding:16px;}
				@media @mobile{ padding:16px;}
				ul {
					li { margin-bottom:8px;
						@media @tablet{ width:50%; float:left; padding:8px;}
						@media @tablet_l{ width:100%; float:left; padding:8px;}
						a {
							img { width:100%;
							}
						}
					}
					&:after{.clear;}
				}
			}
		}
	}
}


/*============================
#news-single
============================*/
section#news-single {
	div.category { background:#ddd; padding:10px 20px;
		@media @mobile{ padding:0;}
		ul { float:left;
			@media @mobile{ float:none; padding:16px; padding-bottom:11px; }
			li { display:inline-block;
				@media @mobile{ margin-bottom:5px;}
				a {.rounded-corners(20px); background:@red; display:inline-block; padding:8px 12px; line-height:1; color:#fff; font-size:@basic;
				}
			}
		}
		time { float:right;font-size:@basic; padding-top:5px;
			@media @mobile{ float:none; width:100%; text-align:center; background:#eee; display:block;}
		}
		&:after{.clear;}
	}
	div.wrap {.w_auto;
		h1 { padding:32px 0;
			@media @tablet{ padding:32px 16px;}
			@media @tablet_l{ padding:32px 16px;}
			@media @mobile{ padding:16px;}
		}
		div.thumb {
			img{ width:100%; height:auto;}
		}
		div.contents { padding:32px;
			@media @mobile{padding:16px;}
			h2 { border-left:3px solid @red; color:@red; margin-bottom:16px; padding-left:16px;
			}
			h3 { margin-bottom:16px; border-bottom:2px solid #eee;
			}
			h4 { margin-bottom:16px;
			}
			h5 { margin-bottom:16px;
			}
			h6 { margin-bottom:16px;
			}
			p { padding:16px; line-height:1.8;
			}
			ol { margin-bottom:16px;
				li { list-style-type:decimal; margin-left:32px;
				}
			}
			ul { margin-bottom:16px;
				li {list-style-type: disc; margin-left:32px;
				}
			}
			table { border-collapse:collapse; width:100%; border:2px solid #ccc; font-size:@basic;
				tbody {
					tr {
						th,td{ border:1px solid #ddd; padding:10px;}
						th { border-bottom:2px solid @red; background:#eee; color:@red;
						}
						td {
						}
					}
				}
			}
		}
		ul.sns { text-align:center; margin-bottom:32px;
			li{ display:inline-block; padding:5px;
				a{.rounded-corners(100%); width:50px; height:50px; display:block;}
			}
			li.facebook a{ background:/*@facebook*/ #222;
			}
			li.twitter a{ background:/*@twitter*/ #222;
			}
			li.line a{ background:/*@line*/ #222;
			}
			&:after{.clear;}
		}
		ul.links { text-align:center;  width:600px; margin:0 auto 32px;
			@media @mobile{ width:80%;}
			li{ float:left; width:50%; margin:0; padding:0;
			@media @mobile{ float:none; width:100%; margin-bottom:16px;}
			}
			li.areanews {.rounded-corners(20px 0 0 20px); border:2px solid #222;
				@media @mobile{ .rounded-corners(20px);}
				a { color:#222;display:block; padding:5px;
				}
			}
			li.all {.rounded-corners(0 20px 20px 0); border:2px solid #222; background:#222;
				@media @mobile{ .rounded-corners(20px);}
				a { color:#fff; display:block; padding:5px;
				}
			}
		}
	}
}



/*============================
#about
============================*/
section#about { background:url(../img/shirozeme-info-bg.jpg) repeat;
	div.wrap {.w_auto; text-align:left; padding-top:32px;
		h1 {text-align:center; position:relative; top:50px; 
			@media @mobile{ top:0; padding:0 16px;}
			img {
			}
		}
		div.douga { background-image:url(../img/mov-left.jpg),url(../img/mov-right.jpg); padding:0 30px; width:600px; margin:0 auto;
		background-repeat: repeat-y,repeat-y;
		background-position: left top, right top;
			@media @mobile{ width:90%; margin:0 auto;}
			div.youtube {
				iframe {
				}
			}
		}
		div.text1 { padding:32px;
			p {text-align:left;
			}
		}
		h2 {text-align:center;
			img {
			}
		}
		div.text2 { padding:32px;
			p {
			}
		}
	}
}


/*============================
#social
============================*/
section#social { position:fixed; top:50%; right:0; z-index:99999; margin-top:-50px;
	@media @tablet_l{ position:static; margin:0; padding:0;}
	@media @tablet{ position:static; margin:0; padding:0;}
	@media @mobile{ position:static; margin:0; padding:0;}
	ul {
		li{
			@media @tablet_l{ text-align:center; width:33.3333332%; float:left;}
			@media @tablet{ text-align:center; width:33.3333332%; float:left;}
			@media @mobile{ text-align:center; width:33.3333332%; float:left;}
			a{ display:block;
				img{ width:50px; height:50px;}
			}
		}
		li.facebook {
			a { background:@facebook;
				img {
				}
			}
		}
		li.twitter {
			a.custom_sns {background:@twitter;
				img {
				}
			}
		}
		li.line.smp {background:@line;
			a {
				img {
				}
			}
		}
		&:after{.clear;}
	}
}

/*============================
#contact
============================*/
section#contact { padding:32px;
	@media @mobile{ padding:8px;}
	div.wrap { .w_auto; max-width:600px;
		div.title { text-align:center; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; margin-bottom:32px; padding-top:16px;
			h2 { font-size:32px;color:@red;
				span { display:block; font-size:@basic;
				}
			}
		}
		div.contents { border:1px solid #ddd; background:#eee; padding:32px;
			@media @mobile{ padding:8px;}
			p { padding:5px;
				strong { display:block; padding:10px; background:#fff; border:1px solid #ddd; text-align:center; margin-bottom:12px;}
			}
			h3 { text-align:center; color:@red; border-bottom:1px solid @red; padding-bottom:10px; margin-bottom:10px; padding-top:20px;
				strong { display:block;
				}
			}
			p.kome { font-size:@basic; border-top:1px dashed #ccc; padding-top:16px; margin-top:16px;
			}
		}
	}
}



/*============================
開催地一覧
#venue
============================*/
section#venue {padding:32px;
	@media @tablet{ padding:16px;}
	@media @mobile{ padding:8px;}
	div.wrap { .w_auto;
		h2{ text-align:center; border-bottom:1px dashed #ddd; padding-bottom:16px;}
		
		ul.old-list{ padding:8px;
			li{ width:50%; float:left; padding:8px;
				@media @mobile{ width:100%;}
				a{ display:block; padding:20px; text-align:center; color:@red; border:2px solid @red;}
			}
			&:after{.clear;}
		}

/*============================
#area-menu
============================*/
		div#area-menu {
			ul { padding:11px;
				li { width:50%; float:left; padding:5px;
					@media @tablet{ width:50%;}
					@media @mobile{ width:100%;}
					a {
						img {
						}
						h3{ text-align:center; background:@red; color:#fff; font-weight:normal; padding:10px;}
					}
				}
				&:after{.clear;}
			}
		}
	}
}