/* LESS Document */
@import "animate.css";


/* Breakpoints */
@mobile:      ~"only screen and (max-width: 479px)";
@tablet:      ~"only screen and (max-width: 768px)";
@minpc:      ~"only screen and (max-width: 980px)";
@minpc2:      ~"and (-webkit-min-device-pixel-ratio: 2)";

	/* tablet */
	@yoko:       ~"only screen and (max-height: 768px) and (max-width: 1024px)  and (orientation:landscape) ";
	@tate:       ~"only screen and (max-width: 1024px) and (max-height: 768px) and (orientation:portrait) ";

	@yokom:      ~"only screen and (max-width: 768px) and (orientation:landscape) ";

@mim:7px;
@min:11px;
@basic:12px;
@bm:14px;
@mid:16px;
@big:18px;
@bigger:20px;
@biggest:24px;

/* common */
.m0{margin:0;}
.p0{ padding:0;}
.mp0{margin:0;padding:0;}
.w100{ width:100%; }
.pt25{padding-top: 25px;}
.w_auto{max-width:1000px; margin:0 auto; .p0; 
	@media @tablet{max-width:100%; min-width:auto;}
	@media @mobile{max-width:100%; min-width:auto;}
}
.flexbox{display: -webkit-flexbox;display: -moz-flexbox;display: -ms-flexbox;display: -o-flexbox;display: flexbox;}
.clear{content:""; display:block; clear:both;}
.clearfix:after{.clear;}
.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;}
.scale (@factor) {-webkit-transform: scale(@factor);-moz-transform:scale(@factor);-ms-transform: scale(@factor);-o-transform: scale(@factor);}
.shadow{.box-shadow(0px 0px 3px 1px rgba(0,0,0,0.2));}

/* 基本設定 */
* { 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;}
body{ font-size:16px; line-height:1.5; background:#fff; color:#000; .mp0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	
	
	min-width:950px;
	@media @tablet{min-width:100%;adding-top:0px; margin-top:-0px;}
	@media @mobile{min-width:100%;}
}
img { 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;}
a,button{ text-decoration:none; outline:none; cursor:pointer; color:#3399ff;
	&:hover{.opacity8;
		@media @mobile{
			.opacity10;
		}
	}
	img{ border:none; outline:none;}
}
.pc{ display:block;
	@media @tablet{ display:none;}
}
.smp{display:none;
	@media @tablet{ display:block;}
}

body{}

/*============================
#head
============================*/
header#head { background:url(../img/bg-1.png) no-repeat center center; height:588px; background-size:cover; overflow:hidden; position:relative;
	@media @tablet{height:auto;}
		p { position:absolute; left:20px; top:20px; z-index:500;
			img { width:200px; height:auto;
				@media @mobile{ width:100px;}
			}
		}
	div.wrap {background:url(../img/bg-2.png) no-repeat center bottom; width:100%; height:588px; position:relative;
		h1 { position:absolute; text-align:center; width:100%; bottom:-5px; z-index:150;
			img {
			}
		}
		.box{ height:588px; position: relative; width:1226px; margin:0 auto;
			img { position:absolute; left:0; top:0;
				/*@media @minpc{ left:auto; right:auto; margin-left:-112px;}*/
				@media only screen 
												  and (min-device-width: 768px) 
												  and (max-device-width: 1024px) 
												  and (orientation: landscape) 
												  and (-webkit-min-device-pixel-ratio: 2) {
												left:auto; right:auto; margin-left:-100px;
												}
			}
			img.ch0{ z-index:110;}
			img.ch1{ z-index:100;}
			img.ch2{z-index:90;}
			img.ch3{z-index:80;}
			img.ch4{z-index:70;}
			img.ch5{z-index:60;}
			img.ch6{z-index:50;}
			img.ch7{z-index:10;}
		}
	}
}

/*============================
#read
============================*/
section#read { background:#FFFBDB;
	div.wrap {.w_auto; background:url(../img/bg-read.png) no-repeat right center; padding:20px 0px;
		@media @tablet{ padding:16px; background:none; padding-bottom:nome;}
		h2 {
			img {
			}
		}
		h3{ text-align:center; padding-top:15px; padding-bottom:10px;}
		p{ text-align:center;
			img{ width:30%; height:auto;}
		}
	}
}

/*============================
#new
============================*/
section#new { background:url(../img/bg-pink-dot.png) repeat; background: rgba(204,0,238,1.00); .w100; overflow:hidden;
	div.wrap{.w_auto; padding:10px;
		@media @tablet{ padding:10px;}
	&:after{.clear;}
	}
	ul { width:100%; background:#fff;.rounded-corners(15px);
		@media @tablet{ float:none; width:100%; text-align:left;}
		li { padding-bottom:15px; border-bottom:1px solid #ddd; padding:12px 20px 13px;
			&:last-child{ border-bottom:none;}
			@media @tablet{ font-size:@bm;}
				i{ background:#EC0105; color:#fff; padding:2px 5px;.rounded-corners(15px); display:inline-block; margin-right:10px; font-size:@min; line-height:1;}
				span{ text-decoration:none; color:#999;line-height:1;font-size:@min; line-height:1;}
			a { color:#EF1C88; text-decoration:underline; line-height:1.4; margin-left:10px;
			}
		}
	}
	
}

/*============================
#video
============================*/
section#video {background:url(../img/bg-yellow-sq.png) repeat;padding-bottom:15px; overflow:hidden;
	@media @tablet{ padding-bottom:5px; padding:0px;}
	div.wrap {.w_auto; position:relative; padding:30px;
		div.frame { background:url(../img/video-frame.png) no-repeat; width:737px; height:515px; margin:0 auto; padding:130px 37px; position:relative; z-index:50;
			a {
				img { width:100%; height:auto;
				}
			}
		}
		
		img.ch1 {position:absolute; bottom:100px; left:0;z-index:15;
		}
		img.ch2 {position:absolute; bottom:100px; right:0;z-index:20;
		}
		img.ch3 {position:absolute;bottom:0; left:0;z-index:25;
		}
		img.ch4 {position:absolute; bottom:0; right:0;z-index:30;
		}
	}
	img.smp-head{ position:relative; top:6px;}
}

/*============================
#contents
============================*/
section#contents { background:url(../img/bg-yellow-sq.png) repeat; padding-bottom:50px; overflow:hidden;
	@media @tablet{ padding:12px;}
	ul {.w_auto;
		li { width:50%; float:left;
			@media @mobile{ float:none; width:100%;}
			h3 { margin:0; line-height:0;
				img {
				}
			}
			h4{ text-align:center; padding-bottom:10px;}
			div.cont-history { background:url(../img/history-bg.png) repeat-y;padding:10px; padding:0 60px 0 50px;background-size:contain;
				@media @mobile{ background-size:contain;padding:0 35px 0 30px;}
				a {
					img { width:100%; height:auto;.rounded-corners ; border:5px solid #000; margin-bottom:5px;
						@media @mobile{ border:3px solid #000;}
					}
				}
			}
			div.footer {
				img {
				}
			}
			div.cont-youtuber {background:url(../img/youtuber-bg.png) repeat-y; padding:10px;padding:0 50px 0 60px;background-size:contain;
				@media @mobile{ background-size:contain;padding:0 30px 0 35px;}
				a {
					img {width:100%; height:auto;.rounded-corners ; border:5px solid #000; margin-bottom:5px;
						@media @mobile{ border:3px solid #000;}
					}
				}
			}
		}
		&:after{.clear;}
	}
}

/*============================
#social
============================*/
div#social { position:fixed; top:20px; right:20px; z-index:200;
	@media @mobile{ position:static;
		ul{ text-align:center; padding:20px;}
		li{ display:inline-block;}
	}
	ul {
		li {
			a {
				img { width:54px; height:54px;
				}
			}
		}
		li.smp {
			a {
				img {
				}
			}
		}
	}
}
aside { background:#fff;
	ul { .w_auto; padding-bottom:15px;
		@media @mobile{ padding-bottom:0; padding:5px;}
		li { float:left; width:25%;
			@media @mobile{ width:50%; padding:5px;}
			a { padding:10px;
				p { color:#222; font-size:@min; text-align: center; padding-bottom:10px;
					@media @mobile{ text-align:left; font-size:10px;}
				}
				img {
				}
			}
		}
		&:after{.clear;}
	}
}
footer { border-top:1px solid #ddd; padding:30px; text-align:center; background:#fff;
	@media @mobile{ padding:16px;}
	p { font-size:@bm;
	}
}

#page-top{.mp0; position:fixed; bottom:-10px; right:0;
	@media @mobile{ position:static; text-align:center;
		img{ position:relative; top:10px;}
	}
}

/* youtube modal */
.mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-arrow:after,.mfp-arrow:before,.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}



.popup-youtube{ position:relative !important; display:block;
	.play{ position:relative; z-index:1000; background:none;
	}
	
	.hover-play{position:absolute; z-index:100; left:0; top:0; height:auto; width:100%;}
}
.video-container-1{
	background:#fff; width:100%;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	background:#fff;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}