/* LESS Document */
@import url(animate.css);
@import url(modal.css);
@import url(jquery.fs.boxer.min.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
@service:#c7b295;
@about:#89adc6;
@editorial:#8ab795;
@recruit:#c096d0;
@contact:#e09898;
@blog:#a1b5c4;

/* 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 @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;}

/* 基本設定 */
* { 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; color:#000; .mp0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin-top:92px; padding-top:-92px;
	@media @mobile{margin-top:50px; padding-top:-50px;}
}
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 @mobile{display:none;}
}

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

body.home{ padding-top:600px; background:#f2f1ed;
	@media @tablet{ padding-top:370px;}
	@media @tablet_l{padding-top:530px;}
	@media @mobile{/* background:url(../img/sp_index.jpg) no-repeat top center #f2f1ed;*/ background-size:contain; padding-top:10px;}
}
.pagetop{ position:fixed; bottom:0; right:0;
	a{ color:#fff; display:block; padding:10px;}
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
/*  overflow: hidden; */
}
  
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.noizewrap{ background:url(../img/noize.png) repeat; padding:2px 1px 1px 1px !important;/*.rounded-corners(10px);*/
	.noize{ background:#fff;/*.rounded-corners(10px);*/
		img{/*.rounded-corners(10px);*/}
	}
}

/*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: #f2f1ed;position: absolute;top: 0px;left:0; z-index:444000}
.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}



/* Necessary CSS */
.slider    { overflow:hidden; position:relative;}
.slider ul { margin:0; padding:0; width:auto;}
.slider li { float:left; margin:0 5px 0 0; list-style:none; }
/* IE6 issues */
.slider ul { width:100%; }


	div.wrap {overflow: hidden;}

/*============================
#header
============================*/
header#header { background:url(../img/head-bg.png) repeat-x; .w100; height:92px; position:fixed; top:0; left:0; z-index:100;
	div.wrap {.w_auto;
		@media @tablet{ padding:0 16px;}
		&:after{.clear;}
		h1 {float:left; padding-top:20px;
			img {
			}
		}

/*============================
		#nav
============================*/
		nav#nav { float:right;
			ul {
				li{ text-align:center; float:left; background:url(../img/menu-line.png) no-repeat left center; height:92px; min-width:108px; padding-top:30px;
					@media @tablet{ min-width:10px; padding:30px 10px 0;}
					a{ color:#222; font-size:@basic; display:block;
						span{ display:block; font-size:10px;}
					}
				}
				li.service { padding:30px 15px 0; 
					a {
						span { color:@service;
						}
					}
				}
				li.about {
					a {
						span {color:@about;
						}
					}
				}
				li.editorial {
					a {
						span {color:@editorial;
						}
					}
				}
				li.recruit {
					a {
						span {color:@recruit;
						}
					}
				}
				li.contact {
					a {
						span {color:@contact;
						}
					}
				}
				li.blog { background:url(../img/menu-blue-bg.jpg) no-repeat; padding:5px;
					@media @tablet{ min-width:10px; padding:5px 10px 0;}
					a { border:1px dashed #fff; color:#fff; padding:22px 0;
						@media @tablet{ padding:22px 10px;}
						span {
						}
					}
				}
			}
		}
	}
}

header#header.scroll{ height:50px; background-size:contain;
	div.wrap {
		h1{ padding:5px; padding-top:0px;
			a{ display:block; padding:5px;}
			img{  width:auto; height:20px; position:relative; top:-20px;}
		}
		nav#nav{
			ul{
				li{ height:50px; padding-top:13px; line-height:1.2;
					a{ font-size:11px;
						span{ font-size:9px;}
					}
				}
				li.blog{padding:5px;
					a{padding:7px 5px;}
				}
			}
		}
	}
}

.header__heading{background:url(../img/head-bg.png) repeat-x; background-size: contain;
	h1{
		a{
			img{ height:20px; width:auto;}
		}
	}
}
.nav-content{ background:#fcfbf9 url(../img/foot-head-line.png) repeat-x bottom left; padding-bottom:1px;
	ul{ padding:0 0px;
		li{ text-align:center; float:left;  width:50%; padding:5px;background:#fcfbf9 url(../img/foot-head-line.png) repeat-x bottom left;
			a{ color:#222; font-size:@basic; display:block;
				span{ display:block; font-size:10px;}
			}
		}
		li.service {
			a {
				span { color:@service;
				}
			}
		}
		li.about {
			a {background:url(../img/menu-line.png) no-repeat left center;
				span {color:@about;
				}
			}
		}
		li.editorial {
			a {
				span {color:@editorial;
				}
			}
		}
		li.recruit {
			a {background:url(../img/menu-line.png) no-repeat left center;
				span {color:@recruit;
				}
			}
		}
		li.contact { background:none;
			a {
				span {color:@contact;
				}
			}
		}
		li.blog { background:@blog; padding:5px;
			a { border:1px dashed #fff; color:#fff;
				span {
				}
			}
		}
		&:after{.clear;}

 	}
}

section#main{ position:fixed; top:0; left:0; z-index:-1; padding-top:100px; text-align:center; overflow:hidden; width:100%; text-align:center;
		canvas#canvas{ width:1200px; height:640px; margin:0 auto;}
		@media @tablet{ width:100%;
			canvas#canvas{ width:700px !important; height:373px !important; margin:0 auto;}
		}
		@media @tablet_l{ width:100%;
			canvas#canvas{ width:1000px !important; height:533px !important; margin:0 auto;}
		}
		@media @mobile{ padding-top:0px; padding-left:0px; position:relative;z-index:1; height:300px;
			canvas#canvas{ width:600px !important; height:320px !important; position:absolute; top:0px; left:50%; margin-left:-300px; z-index:0; display:block;}
		}
		@media @mobile_l{ padding-top:0px; padding-left:0px; position:relative;z-index:1; height:300px;
			canvas#canvas{ width:600px !important; height:320px !important;  position:absolute; top:0px; left:50%; margin-left:-300px; z-index:0; display:block;}
		}
}

/*============================
#menu
============================*/
section#menu {
	header { background:url(../img/index-3col-head.png) repeat-x center top; height:15px;
	}
	div.wrap {background:url(../img/index-3col-bg.png) repeat center top; padding-bottom:30px;
		@media @tablet{ padding:10px 16px 30px;}
		ul {.w_auto;margin-bottom:20px;
		@media @mobile{ padding:20px;}
			li { float:left; width:33.3333332%; padding:10px; padding-top:100px; position:relative;
				@media @mobile{ width:100%; float:none;padding-top:0;}
				@media @mobile_l{float:left; width:33.3333332%;padding-top:0;}
				span { position:absolute; top:10px; left:0; z-index:100;
					@media @mobile_l{top:20px; left:30px;}
					img {
						@media @mobile_l{ width:100px; height:auto;}
					}
				}
				a {
					img {
					}
				}
			}
		}
		div.more { background:url(../img/btn-bg-1.png) no-repeat; width:350px; height:60px; margin:0 auto; padding-left:40px;
			@media @mobile{ width:100%; height:50px; background-size:contain; background-position: center center;}
			a { color:#222; display:block; text-align:center; padding-top:18px;
				@media @mobile{ padding-top:13px;}
			}
		}
	}
}

/*============================
#brcb
============================*/
#brcb{ background:#f4f4f3 url(../img/foot-head-line.png) repeat-x bottom left; padding:10px;
	ul.syncer-brcb{overflow: hidden ;list-style-type: none ;.w_auto;
		li{float: left ;font-weight: 400 ; font-size:@min;
			&:after {content: ">" ;padding: 0 8px ;font-weight: 400 ;color:#959595;}
			&:first-child{ background:url(../img/icon-home.png) no-repeat; padding-left:25px;}
			&:last-child{
				&:after{content:none;}
			}
			a{ color:#959595; display:inline-block; padding-top:3px;}
		}
	}
}

/*============================
#pagetitle
============================*/
#pagetitle{ padding:30px 0; background:url(../img/sq-bg.png) repeat;
		@media @mobile{ text-align:center;padding:16px 0 16px;}
	h1,h2{.w_auto;
		@media @tablet{ text-align:center;}
		@media @tablet_l{ text-align:center;}
		@media @mobile{ text-align:center;}
		img{
			@media @mobile{ width:50%;}
		}
	}
}

#pagetitle.goosee{ padding-bottom:0;
		img{
			@media @mobile{ width:95%;}
		}
}
#pagetitle.workttl,#pagetitle.aboutttl{
	h1,h2{
		img{
		@media @mobile{ width:40%;}
		}
	}
}
#pagetitle.contactttl{
	@media @mobile{ text-align:center;padding:16px 0 20px;}
	h1,h2{
		img{
		@media @mobile{ width:50%;}
		}
	}
}


/*============================
#works
============================*/
section#works { position:relative; 
	background-image:url(../img/index-editorial-line_yoko.png),url(../img/index-editorial-line_yoko.png);
	background-repeat: repeat-x,repeat-x;
	background-position: left top, left bottom;
	background-color:#fff;
	padding:10px 0;
	@media @mobile{ overflow:visible;padding:10px;}
	h2 { position:absolute; left:0; top:10px; z-index:100;	
		@media @mobile{ position:static;
			img{ width:100%;}
		}
		img {
		}
	}
	
	.edi-list{ width:100%;padding-left: 239px;
		@media @mobile{padding-left:0px;}
		.item{ padding:5px; float:left;
			background-color:#fff;
			background-image:url(../img/index-editorial-line_yoko.png),url(../img/index-editorial-line_yoko.png),url(../img/index-editorial-line_tate.png),url(../img/index-editorial-line_tate.png);
			background-repeat: repeat-x,repeat-x,repeat-y,repeat-y;
			background-position: left top, left bottom,left top, right top;
				@media @mobile{ width:100%; float:none;}
			a { display:block;
				img { height:257px; width:210px;
					@media @mobile{ width:100%; height:auto;}
				}
			}
		}
	}
	
	.owl-nav{ display:none;}
	
	ul {
		@media @mobile{ width:auto;}
		li { padding:5px; float:left;
			background-color:#fff;
			background-image:url(../img/index-editorial-line_yoko.png),url(../img/index-editorial-line_yoko.png),url(../img/index-editorial-line_tate.png),url(../img/index-editorial-line_tate.png);
			background-repeat: repeat-x,repeat-x,repeat-y,repeat-y;
			background-position: left top, left bottom,left top, right top;
				@media @mobile{ width:100%; float:none;}
			a {
				img { height:257px; width:auto;
					@media @mobile{ width:100%; height:auto;}
				}
			}
		}
		&:after{.clear;}
	}

	/* Necessary CSS */
	.slider    { overflow:hidden; position:relative; width:100%;}
	.slider ul {  }
	.slider li { float:left;  }
	/* IE6 issues */
	.slider ul { width:100%; }

}

/*============================
#col2
============================*/
section#col2 {.w100;
	div.left { width:50%; float:left; background:#fcfbf5 url(../img/index-news-line-tate.png) repeat-y right top; padding-top:20px; 
		@media @tablet{ width:100%;}
		@media @mobile{ width:100%; float:none;background:#fcfbf5 url(../img/foot-head-line.png) repeat-x bottom left;}
		div.wrap { float:right;width:560px;padding:20px;min-height:500px;
			@media @tablet{ width:100%;}
			@media @tablet_l{ width:100%;}
			@media @mobile{ float:none; width:100%;}
			h3 { margin-bottom:20px;
				@media @tablet{ text-align:center;}
				@media @mobile{ text-align:center;}
				img {
				}
			}
			ul { margin-bottom:20px;
				li { border-bottom:1px dashed #bbb; padding:15px 0;
					a { display:block;
						&:after{.clear;}
						time { background:url(../img/index-news-time-bg.png) no-repeat; width:92px; height:30px; text-align:center; color:#fff; font-size:@min; display:block; padding-top:8px; float:left; margin-right:20px;
						}
						p { color:#222; font-size:@basic; padding-top:5px;
						}
					}
				}
			}
			div.facebook { background:url(../img/index-facebook-bg.png) no-repeat; width:520px; height:207px; padding:10px;
				@media @tablet{ margin:0 auto;}
				@media @tablet_l{ width:100%; background-size:contain; background:#fff; border:1px dotted #ddd; height:auto; min-height:100px;}
				@media @mobile{ width:100%; background-size:contain; background:#fff; border:1px dotted #ddd; height:auto; min-height:100px; display:none;}
			}
		}
		&:after{.clear;}
	}
	div.right {width:50%; float:right; background:#f1f8f8;padding-top:20px;
		@media @tablet{ width:100%;}
		@media @mobile{ width:100%; float:none;background:#f1f8f8;}
		div.wrap {float:left; width:560px; padding:20px;min-height:500px;
			@media @tablet{ width:100%;}
			@media @tablet_l{ width:100%;}
			@media @mobile{ float:none; width:100%;}
			h3 { margin-bottom:20px;
				@media @tablet{ text-align:center;}
				@media @mobile{ text-align:center;}
				img {
				}
				a { background:url(../img/index-blog-more.png) no-repeat; width:180px; height:50px; display:block; color:#222; float:right; font-weight:normal; text-align:center; font-size:@mid; padding-left:30px; padding-top:12px;
					@media @tablet{ display:none;}
					@media @mobile{ display:none;}
				}
			}
			ul {
				li {border-bottom:1px dashed #bbb; padding:15px 0;
					a { display:block; color:#222;
						div.thumb { background:url(../img/index-blog-thumb-bg.png) no-repeat; overflow:hidden; width:165px; height:110px; text-align:center; padding:10px; position:relative; float:left; margin-right:15px;
							@media @tablet{ width:30%;background:#fff; border:1px solid #ddd; margin-bottom:10px;}
							@media @tablet_l{ width:30%;background:#fff; border:1px solid #ddd; margin-bottom:10px;}
							@media @mobile{ float:none; width:100%; background:#fff; border:1px solid #ddd; margin-bottom:10px;  height:auto; 
							}
							img { 
								@media @mobile{}
							}
						}
						div.text{ float:right; width:340px;
							@media @tablet{ width:65%;}
							@media @tablet_l{width:65%;}
							@media @mobile{ float:none; width:100%;}
						}
						time {background:url(../img/index-blog-time-bg.png) no-repeat; width:92px; height:23px; text-align:center; color:#fff; font-size:@min; display:block; padding-top:4px;
							&:after{.clear;}
						}
						h4 { font-size:@mid; padding-top:5px;
						}
						p { font-size:@basic;
							span { text-decoration:underline;
							}
						}
						&:after{.clear;}
					}
				}
			}
			a.more { background:url(../img/index-blog-more.png) no-repeat; width:180px; height:50px; display:none; color:#222;  font-weight:normal; text-align:center; font-size:@mid; padding-left:30px; padding-top:12px; margin:10px auto;
				@media @tablet{ display:block;}
				@media @mobile{ display:block;}
			}
		}
		&:after{.clear;}
	}
	ul {
	}
}


/*============================
#about
============================*/
section#about {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	div.wrap {.w_auto; padding:50px 0;
		@media @tablet{ padding:16px;}
		@media @tablet_l{ padding:16px;}
		@media @mobile{ padding:16px 0;}
		h2 { text-align:center; margin-bottom:30px; color:@about; line-height:1.2; padding:16px;
			@media @tablet{ padding:16px; margin-bottom:16px;}
			@media @tablet_l{ padding:16px; margin-bottom:16px;}
			@media @mobile{ padding:16px 16px;margin-bottom:0px;text-align:left;}
			img {
			}
		}
		p{ margin-bottom:32px;
			@media @mobile{ margin-bottom:0;}
		}
		div.subvisual{ padding:0 16px 16px;
			img{}
		}
		ul { margin-bottom:30px;
			@media @mobile{ padding:16px; margin-bottom:0;}
			li { width:25%; padding:5px; float:left; text-align:center;
				@media @mobile{ width:50%;}
				a {
					img {
					}
				}
			}
			&:after{.clear;}
		}
		div.more { background:url(../img/btn-bg-1.png) no-repeat; width:350px; height:60px; margin:0 auto; padding-left:40px;margin-bottom:30px;
			@media @mobile{ width:100%; height:50px; background-size:contain; background-position: center center;}
			a { color:#222; display:block; text-align:center; padding-top:18px;
				@media @mobile{ padding-top:13px;}
			}
		}
		h3 { background:#e4e2d5; padding:16px 20px;
			strong { background:url(../about/left-line.png) no-repeat left center; padding-left:30px; font-size:@biggest;
			}
		}
		div.content { padding:30px;
			table { border:1px solid #e4e2d5; border-collapse:collapse; width:100%;
				tbody {
					tr {
						th {border:1px solid #e4e2d5; background:#f2efe9; padding:16px; width:20%;
							@media @mobile{ display: block; width:100%; text-align:left;}
						}
						td {border:1px solid #e4e2d5; background:#fff;padding:16px;
							@media @mobile{ display: block;}
						}
					}
				}
			}
			iframe { width:100%; border:none; background:#fff; margin-bottom:20px;
			}
			p { font-size:@basic;
			}
		}
	}
}


/*============================
#service
============================*/
section#service {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	.mp0;
	div.wrap {.w_auto; padding:50px 0;
		&:after{.clear;}
		@media @tablet{ padding:16px;}
		@media @tablet_l{ padding:16px;}
		@media @mobile{ padding:16px;}
		h2 { text-align:center; margin-bottom:30px; color:@service; line-height:1.2; padding:16px;
			@media @tablet{ padding:16px; margin-bottom:16px;}
			@media @tablet_l{ padding:16px; margin-bottom:16px;}
			@media @mobile{ padding:8px 8px 16px; margin-bottom:0px;text-align:left;}
			img {
			}
		}
		p { text-align:center; margin-bottom:30px;
			@media @mobile{ margin-bottom:0px;}
			img { max-width:100%;
			}
		}
		div.subvisual{ padding:0 0px 16px;}
		ul{ margin-bottom:50px;
			@media @mobile{ padding:16px 0;margin-bottom:16px;}
			li{ width:50%; padding:30px; padding-top:0;
				@media @mobile{ width:100%;padding:16px 0;}
			}
			&:after{.clear;}
				img{ width:100%;}
				h4 { font-size:@bigger; font-weight:normal;
					@media @mobile{ font-size:@mid; text-align:center;}
				}
				h3 { font-size:32px; margin-bottom:10px; font-weight:normal;
					@media @mobile{ font-size:@biggest;text-align:center;}
				}
				p { text-align:left; font-size:@basic; margin-bottom:20px;
					@media @mobile{ padding:0 16px;}
				}
				div.more { background:url(../service/more-1.png) no-repeat; width:180px; height:50px; float:right; text-align:center;  font-size:@mid;
					@media @mobile{ margin:0 auto; float:none;}
					a { color:#222; display:block;padding-left:40px; padding-top:12px;
					}
				}
				div.more.purple {background:url(../service/more-2.png) no-repeat;
				}
				div.more.blue {background:url(../service/more-3.png) no-repeat;
				}
				div.more.green {background:url(../service/more-4.png) no-repeat;
				}
		}
		ul.img-right {
			li {float:left;
				&:first-child{ float:right; padding:0;}
			}
		}
		ul.img-left {
			li { float:right;
				&:first-child{ float:left;padding:0;}
			}
		}

		div.main{ float:left; width:700px;
			@media @tablet{ float:none; width:100%;}
			@media @tablet_l{ float:none; width:100%;}
			@media @mobile{ float:none; width:100%;}

			h3 { background:#e4e2d5; padding:16px 20px; margin-bottom:10px;
				strong { background:url(../about/left-line.png) no-repeat left center; padding-left:30px; font-size:@biggest;
					@media @mobile{ font-size:20px;}
				}
			}
			div.contact { text-align:center; padding-top:30px;
				@media @mobile{ padding:16px;}
				a {
					img {
					}
				}
			}

		}
		
		/* graphic */
		div.main.graphic {.mp0;
			div.visual { background:url(../service/visual-graphic.png) no-repeat center center; background-size:contain; width:700px; height:204px;color:#fff; margin-bottom:30px; padding:40px 30px;
				@media @tablet{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px; height:auto;}
				@media @tablet_l{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @mobile{ width:100%; background-size:cover;padding:30px;margin-bottom:0px; height:auto;}
				h3 { background:none;padding:0px; font-size:40px; margin-bottom:0;.text-shadow;
					@media @mobile{ font-size:28px;}
				}
				h4 { font-size:25px; width:66%; line-height:1.2;.text-shadow;
					@media @mobile{ width:100%;}
				}
			}
			ul.lineup { padding:5px; margin:0; margin-bottom:30px;
				@media @mobile{ padding:5px 11px;}
				li { width:33.3333332%; float:left; padding:5px;
					@media @mobile{ width:50%;}
					img {
					}
					h5 { padding:10px; color:#848274;
						strong{background:url(../img/icon-check.png) no-repeat left center; padding-left:25px; padding-top:2px;}
					}
					p { padding:0 10px;
					}
					a.more{float:right; font-size:@min;display:inline-block; padding:5px; padding-left:25px;text-decoration:underline; }
					a.more.purple { color:#b391b5; background:url(../img/icon-arrow-purple.png) no-repeat left center; 
					}
					a.more.green { color:#519593;background:url(../img/icon-arrow-green.png) no-repeat left center;
					}
				}
			}
			p { text-align:left; font-size:@basic; margin-bottom:16px;
				@media @mobile{ padding:0 16px;}
				img {
				}
			}
		}
		
		/* ar */
		div.main.ar {
			div.visual { background:url(../service/visual-ar.png) no-repeat center center; background-size:contain; width:700px; height:204px;color:#fff; margin-bottom:10px; padding:40px 30px;
				@media @tablet{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @tablet_l{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @mobile{ width:100%; background-size:cover;padding:30px;margin-bottom:0px; height:auto;}
				h3 { background:none;padding:0px; font-size:40px; margin-bottom:0;.text-shadow;
					@media @mobile{ font-size:30px;}
				}
				h4 { font-size:25px; width:66%; line-height:1.2;.text-shadow;
					@media @mobile{ width:100%;}
				}
			}
			ul.col2 { margin-bottom:10px; padding-top:10px;
				@media @mobile{ padding-top:16px;}
				&:after{.clear;}
				li{ float:left; padding:0;}
				li.w30 { width:30%;
					@media @mobile{ width:100%;}
					img { width:100%;
					}
				}
				li.w70 {width:70%; padding-left:25px;
					@media @mobile{ width:100%; padding:16px 0px 0 0px;}
					h4 { font-weight:bold; font-size:@bigger; margin-bottom:10px;
					}
					p {
						strong {
						}
					}
				}
			}
			div.use { padding-top:10px; padding-bottom:25px;
				h4 { color:#848274; background:url(../img/icon-check-big.png) no-repeat left center; font-size:@biggest; padding-left:40px; padding-top:2px; margin-bottom:10px; margin-left:20px;
				}
				ul.col2 { margin-bottom:20px;
					@media @mobile{ margin-bottom:0; padding-bottom:0;}
					li { width:50%; float:left;
						@media @mobile{ width:100%;}
						img { width:100%;
						}
						p { padding-left:25px;
							@media @mobile{ padding:16px 0;}
						}
					}
					&:after{.clear;}
				}
				div.scene { background:#f5eed4; padding:15px;
					@media @mobile{ margin:0 16px;}
					div { border:2px solid #fff; padding:15px;
						h5 { margin-bottom:5px; font-size:@big;
							@media @mobile{ font-size:@mid;}
						}
						ul.list {.mp0; padding-left:20px;
							li { width:100%; .mp0; list-style-type:circle;
								@media @mobile{ font-size:@basic;}
							}
						}
					}
				}
			}
			div.sample{ text-align:left;
				ul{ margin-bottom:0;
					&:after{.clear;}
					li{ width:50%; padding:16px; float:left;
						text-align:center;
						img{ width:100%; height:auto;}
						strong{ display:block; margin-bottom:5px;}
					}
				}
				p{ text-align:left; padding:0 24px;}
			}
			div.function {
				h6 { background:#dacf8a; color:#fff; font-size:@big; padding:10px 30px;
				}
				ul { .mp0; padding:5px;
					li.col2-same { float:left; width:25%; .mp0; padding:5px;background:#eae7d9; border:5px solid #f9f7ef; position:relative;
						@media @mobile{ width:50%;}
						p {  text-align:center; .mp0;padding:15px; padding-bottom:50px;
							@media @mobile{ padding:10px;}
							img { width:auto;
								@media @mobile{ margin-bottom:10px;}
							}
							strong { display:block; color:#9b967e; font-size:@min; padding-top:10px; width:100%; padding:0 10px 10px; text-align:center; position:absolute; bottom:5px; left:0;
								@media @mobile{ position: static; padding:0;}
							}
						}
					}
				}
			}
		}
		
		/* comic */
		div.main.comic {
			div.visual { background:url(../service/visual-comic.png) no-repeat center center; background-size:contain; width:700px; height:204px;color:#fff; margin-bottom:10px; padding:40px 30px;
				@media @tablet{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @tablet_l{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @mobile{ width:100%; background-size:cover;padding:30px;margin-bottom:0px; height:auto;}
				h3 { background:none;padding:0px; font-size:40px; margin-bottom:0;.text-shadow;
					@media @mobile{ font-size:30px;}
				}
				h4 { font-size:25px; width:66%; line-height:1.2;.text-shadow;
					@media @mobile{ width:100%;}
				}
			}
			ul.col2 { margin-bottom:10px; padding-top:10px;
				@media @mobile{ padding-top:16px;}
				&:after{.clear;}
				li{ float:left; padding:0;}
				li.w30 { width:30%;
					@media @mobile{ width:100%;}
					img { width:100%;
					}
				}
				li.w70 {width:70%; padding-left:25px;
					@media @mobile{ width:100%; padding:16px 0px 0 0px;}
					h4 { font-weight:bold; font-size:@bigger; margin-bottom:10px;
					}
					p {
						strong {
						}
					}
				}
			}
			ul.lineup { padding:5px; margin:0; margin-bottom:30px;
				@media @mobile{ padding:5px 11px;}
				li { width:33.3333332%; float:left; padding:5px;
					@media @mobile{ width:50%;}
					img { width:100%;
					}
					h5 { padding:10px; color:#848274;
						strong{background:url(../img/icon-check.png) no-repeat left center; padding-left:25px; padding-top:2px;}
					}
					p { padding:0 10px;
					}
				}
			}
			div.flow { padding:16px 0;
				h4 { color:#8aaaaa; font-size:@biggest; margin-bottom:10px;
					@media @mobile{ padding-left:16px;}
					span { background:url(../service/flow-num.png) no-repeat; width:110px; height:35px; display:inline-block; text-align:center; margin-right:20px; font-size:@mid; color:#fff; padding-top:7px;
					}
				}
				ul.col2 { margin-bottom:32px;
					@media @mobile{ margin-bottom:10px;}
					li {
						img {
						}
						p { padding:0 0 0 25px;
							@media @mobile{ padding:16px 0 0 0;}
							strong {
							}
						}
					}
					&:after{.clear;}
				}
				div.arrow { border-bottom:1px dashed #aeaca7; text-align:center; height:1px; margin-bottom:40px;
					&:last-child{ display:none;}
					img { position:relative; top:-20px;
					}
				}
			}
		}
		/* web */
		div.main.web {
			div.visual { background:url(../service/service-web.png) no-repeat center center; background-size:contain; width:700px; height:204px;color:#fff; margin-bottom:10px; padding:40px 30px;
				@media @tablet{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @tablet_l{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @mobile{ width:100%; background-size:cover;padding:30px;margin-bottom:0px; height:auto;}
				h3 { background:none;padding:0px; font-size:40px; margin-bottom:0;.text-shadow;
					@media @mobile{ font-size:30px;}
				}
				h4 { font-size:25px; width:66%; line-height:1.2;.text-shadow;
					@media @mobile{ width:100%;}
				}
			}
			ul.col2 { margin-bottom:10px; padding-top:10px;
				@media @mobile{ padding-top:16px;}
				&:after{.clear;}
				li{ float:left; padding:0;}
				li.w30 { width:30%;
					@media @mobile{ width:100%;}
					img { width:100%;
					}
				}
				li.w70 {width:70%; padding-left:25px;
					@media @mobile{ width:100%; padding:16px 0px 0 0px;}
					h4 { font-weight:bold; font-size:@bigger; margin-bottom:10px;
					}
					p {
						strong {
						}
					}
				}
			}
			ul.lineup { padding:5px; margin:0; margin-bottom:30px;
				@media @mobile{ padding:5px 11px;}
				li { width:33.3333332%; float:left; padding:5px;
					@media @mobile{ width:50%;}
					img { width:100%;
					}
					h5 { padding:10px; color:#848274;
						strong{background:url(../img/icon-check.png) no-repeat left center; padding-left:25px; padding-top:2px;}
					}
					p { padding:0 10px;
					}
				}
			}
			div.results { padding:16px 0;
				h4 { color:#8aaaaa; font-size:@biggest; margin-bottom:10px;
					@media @mobile{ padding-left:16px;}
					span { background:url(../service/flow-num.png) no-repeat; width:110px; height:35px; display:inline-block; text-align:center; margin-right:20px; font-size:@mid; color:#fff; padding-top:7px;
					}
				}
				ul.col2 { margin-bottom:32px;
					@media @mobile{ margin-bottom:10px;}
					li {
						img {
						}
						p { padding:0 0 0 25px;
							@media @mobile{ padding:16px 0 0 0;}
							strong {
							}
						}
					}
					&:after{.clear;}
				}
				div.arrow { border-bottom:1px dashed #aeaca7; text-align:center; height:1px; margin-bottom:40px;
					&:last-child{ display:none;}
					img { position:relative; top:-20px;
					}
				}
			}
		}
		h4.result-h { color:#8aaaaa; font-size:@biggest; margin-bottom:10px;
		/* ad */
		div.main.ad {
			div.visual { background:url(../service/visual-ad.png) no-repeat center center; background-size:contain; width:700px; height:204px;color:#fff; margin-bottom:10px; padding:40px 30px;
				@media @tablet{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @tablet_l{ width:100%; background-size:cover;padding:30px 30px 0;margin-bottom:0px;}
				@media @mobile{ width:100%; background-size:cover;padding:30px;margin-bottom:0px; height:auto;}
				h3 { background:none;padding:0px; font-size:40px; margin-bottom:0;.text-shadow;
					@media @mobile{ font-size:30px;}
				}
				h4 { font-size:25px; width:66%; line-height:1.2;.text-shadow;
					@media @mobile{ width:100%;}
				}
			}
			div.lineup {padding-top:10px; padding-bottom:35px;
				h4 { color:#848274; background:url(../img/icon-check-big.png) no-repeat left center; font-size:@biggest; padding-left:40px; padding-top:2px; margin-bottom:15px; margin-left:20px;
					@media @mobile{ margin-bottom:10px;}
				}
				ul.col2 { margin-bottom:25px; padding-bottom:0;
					@media @mobile{ margin-bottom:0; padding-bottom:0;}
					li { width:50%; float:left; .mp0;
						@media @mobile{ width:100%;}
						img { width:100%;
						}
						p { padding-left:25px;
							@media @mobile{ padding:16px 0 0;}
						}
					}
					&:after{.clear;}
				}
				hr { height:0px; border:1px dashed #aeaca7; margin-bottom:20px;
				}
				a.more { background:url(../service/more-3.png) no-repeat; width:180px; height:50px; padding-left:40px; text-align:center; float:right; display:inline-block; color:#222; padding-top:12px;
				}
			}
			div.contact {
				a {
					img {
					}
				}
			}
		}
		

			ul.navi{ padding:0px; margin-bottom:0;position:relative; top:-30px; 
				@media @tablet_l{ top:0;}
				@media @tablet{ top:0;}
				@media @mobile{ display:block; top:0; margin-bottom:8px;}
				li{ width:19%; float:left; padding:3px;
					@media @mobile{ width:100%;}
					a{ display:block; background:#e1d8cb; color:#222; text-align:center; padding:16px; cursor:pointer; font-size:@basic;
						&:hover{ background:url(../app/bg1.png) repeat; color:#fff;}
						@media @mobile{ padding:4px;}
					}
					&:first-child{ padding-left:0;width:24%;
						@media @mobile{ width:100%;padding-left:3px;}
					}
					&:last-child{ padding-right:0;
						@media @mobile{ padding-right:3px;}
					}
				}
				li.active{
					a{ background:url(../app/bg1.png) repeat; color:#fff;}
				}
				&:after{.clear;}
			}

		/* app */
		div.main.app{
			ul.navi{ padding:0px; margin-bottom:16px;
				@media @mobile{ padding:16px; display:block !important;}
				li{ width:25%; float:left; padding:3px;
					@media @mobile{ width:100%; }
					a{ display:block; background:#e1d8cb; color:#222; text-align:center; padding:16px; cursor:pointer;
						&:hover{ background:url(../app/bg1.png) repeat; color:#fff;}
					}
					&:first-child{ padding-left:0;}
					&:last-child{ padding-right:0;}
				}
				&:after{.clear;}
			}
			
			ul.col2{
				li{ float:left; padding:8px;
					@media @mobile{ width:100%; float:none;padding:0px;}
					img{ width:100%; max-width:100%; height:auto;}
					p{ padding:16px; font-size:@mid;}
				}
				li.w30{ width:30%;@media @mobile{ width:100%; }}
				li.w70{ width:70%;@media @mobile{ width:100%; }}
			}

			ul.list { padding:5px; margin:0; margin-bottom:30px;
				@media @mobile{ padding:5px 11px;}
				li { width:33.3333332%; float:left; padding:5px;
					@media @mobile{ width:100%;}
					img { width:100%;
					}
					h5 { padding:10px; color:#848274;
						strong{background:url(../img/icon-check.png) no-repeat left center; padding-left:25px; padding-top:2px;}
					}
					p { padding:0 10px;
					}
				}
				&:after{.clear;}
			}
			
			ul.list.merit{
				
				li{ width:100%;
					img { width:50%; float:left; margin-right:20px;
						@media @mobile{ width:100%; margin-bottom:16px;}
						}
					h5 { color:rgba(255,130,0,1.00);
						strong{background:none; padding-left:0px; padding-top:2px; font-size:@biggest; font-weight:normal;}
					}
				}
			}


			ul.list.function{
				
					@media @mobile{ padding:5px 0;}
				
				li{
					@media @mobile{ width:50%; margin-bottom:0px; float:left;
						&:nth-child(2):after{.clear;}
						&:nth-child(4):after{.clear;}
						&:nth-child(6):after{.clear;}
						&:nth-child(8):after{.clear;}
						&:nth-child(6){
							p{ min-height:7em;}
						}
					}
					img{ border:1px solid #ddd; padding:40px 60px; background:#fff; text-align:center;}
					p{@media @mobile{ margin-bottom:0; padding:0; padding-bottom:1em;}
					}
				}
			}


			ul.list.qa{ margin-bottom:30px;
				
				li{ width:100%; float:none; border-bottom:1px dashed #e1d8cb;
					h5{ color:rgba(255,0,4,1.00); font-size:@big;
						strong{background:none; padding-left:0px; padding-top:2px; font-size:@big; font-weight:normal; color:#222; padding-left:10px;}
					}
					p{
						span{ color:rgba(96,194,40,1.00);font-size:@big; display:inline-block; padding:10px;}
					}
					img{}
				}
			}

		}


	}
}


/*============================
#recruit
============================*/
section#recruit {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	div.wrap {.w_auto; padding:50px 0;width:940px;
		@media @tablet{ padding:16px;width:100%;}
		@media @tablet_l{ padding:16px;width:100%;}
		@media @mobile{padding:16px;width:100%;}
		&:after{.clear;}
		div.read { background:url(../recruit/read-bg.png) no-repeat; width:940px; height:540px; margin:0 auto; padding-top:55px; margin-bottom:30px;
			@media @tablet{ width:100%; height:auto; background:none;padding-top:32px;}
			@media @tablet_l{ width:100%; height:auto; background:none;padding-top:32px;}
			@media @mobile{ width:100%; height:auto; background:none;padding-top:0px;}
			h2 { text-align:center; font-size:36px;
				@media @mobile{ font-size:@big;}
				strong { display:block; font-size:29px;
					@media @mobile{ font-size:@big;}
				}
			}
			p { padding:25px 100px; font-size:@big;
				@media @mobile{ padding:16px;font-size:@basic;}
			}
			ul.owl-carousel { width:700px; margin:0 auto; position:relative; padding:0 0px;
				@media @mobile{ width:100%; padding:0 18px;}
				li { padding-top:1px;
					@media @mobile{ padding-top:0;}
					a {
						img { border:1px solid #999;
						}
					}
				}
			}
			.owl-nav{
				.owl-prev{ position:absolute; left:-20px; top:0; width:18px; height:90px; background:url(../recruit/prev.png) no-repeat; text-indent:-8888em;
					@media @mobile{ left:0;}
				}
				.owl-next{position:absolute; right:-20px; top:0; width:18px; height:90px; background:url(../recruit/next.png) no-repeat; text-indent:-8888em;
					@media @mobile{ right:0;}
				}
			}
		}
		h3 { background:#e4e2d5; padding:16px 20px; margin-bottom:10px;
			strong { background:url(../about/left-line.png) no-repeat left center; padding-left:30px; font-size:@biggest;
				@media @mobile{ font-size:20px;}
			}
		}
		ul.accordion { padding:30px;
			@media @mobile{ padding:16px;}
			li { border:1px solid #e4e2d5; padding:25px; background:#faf9f6; margin-bottom:25px;
				h4 { color:#858379; font-size:@biggest;
					@media @mobile{ font-size:@mid;}
					span{ display:block; background:url(../recruit/close.png) no-repeat right center; background-size:36px; padding-right:40px; height:36px;
						@media @mobile{ padding-top:5px;}
					}
					span.open{ background:url(../recruit/open.png) no-repeat right center; background-size:36px;}
				}
				div.box { padding-top:15px; display:none;
					h5 { background:#dacf8a; padding:10px 20px; color:#fff; font-size:@big;
						@media @mobile{ padding:5px 10px; font-size:@mid;}
					}
					p { padding:15px 10px;
						@media @mobile{ padding:15px 5px;}
					}
				}
			}
		}
		div.contact { background:#f5eed4; padding:15px;
			div { border:2px solid #fff; padding:15px 20px; font-size:@basic;
				strong { display:block; margin-bottom:5px;
				}
				p {
				}
			}
		}
	}
}


/*============================
#editorial
============================*/
section#editorial {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left; padding-bottom:32px;
	div.wrap {.w_auto; padding:50px; text-align:center;
		@media @tablet{ padding:16px;width:100%;}
		@media @tablet_l{ padding:16px;width:100%;}
		@media @mobile{ width:100%;padding:16px;}
		h2 { text-align:center; padding-bottom:50px;color:@editorial; line-height:1.2; padding:0 16px; margin-bottom:50px;
			@media @tablet{ padding:16px;}
			@media @tablet_l{ padding:16px; margin-bottom:16px;}
			@media @mobile{ padding:16px; margin-bottom:16px;text-align:left;}
		}
		p {
			img {
			}
		}
		h3 { background:#e4e2d5; padding:16px 20px; margin-bottom:10px; margin-top:25px; text-align:left;
			strong { background:url(../about/left-line.png) no-repeat left center; padding-left:30px; font-size:@biggest;
				@media @mobile{ font-size:20px;}
			}
		}
		h4 { color:#222; background:url(../img/icon-check-big.png) no-repeat left center; font-size:@biggest; padding-left:40px; padding-top:2px; margin-bottom:15px; margin-left:20px;
					@media @mobile{ margin-bottom:10px;}
			span { display:inline-block; padding:5px 8px; background:#dacf8a; font-size:@basic; color:#222; position:relative; top:-5px; margin-left:20px;
			}
		}
		
		ul.edi-list{
				@media @mobile{ padding:0px;}
			li{width:25%; float:left; padding:8px;
				@media @tablet{ width:33.333333332%;}
				@media @tablet_l{ width:25%;}
				@media @mobile{ width:50%; margin-bottom:0px;}
				a{ display:block; padding:0px;}
				h4 { color:#222; background:url(../img/icon-check-big.png) no-repeat left center; font-size:@mid; padding-left:40px; padding-top:2px; margin-bottom:15px; margin-left:0px; text-align:left;
					@media @mobile{ margin-bottom:10px;}
				}
				a.thumb{ background:#fff; border:1px solid #ddd; position:relative; padding:5px;
					img{ max-width:90%; height:auto; margin:0 0 0 0;
					  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  	@media @mobile{top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}
  }
				}
				span { display:block; padding:5px 8px; background:#dacf8a; font-size:@basic; color:#222; position:relative; text-align:center; margin-bottom:16px;}
				
			}
			&:after{.clear;}
		}
				
			ul.owl-carousel { width:860px; margin:0 auto 30px; position:relative; padding:0 10px;
				@media @mobile{ width:100%; padding:0 18px;}
				li { padding-top:5px;
					@media @mobile{ padding-top:0;}
					a {
						img {
						}
					}
				}
			}
			.owl-nav{
				.owl-prev{ position:absolute; left:-20px; top:0; width:18px; height:90px; background:url(../recruit/prev.png) no-repeat; text-indent:-8888em;
					@media @mobile{ left:0;}
				}
				.owl-next{position:absolute; right:-20px; top:0; width:18px; height:90px; background:url(../recruit/next.png) no-repeat; text-indent:-8888em;
					@media @mobile{ right:0;}
				}
			}
		ul.owl-carousel { position:relative;
			li {
				a {
					img {
					}
				}
			}
		}
	}
}

.boxer-content {
      
	  @media @mobile{ }
    }
	#boxer.mobile{ z-index:1200; background: rgba(0,0,0,0.82);}
	#boxer.mobile .boxer-container{ background:none;}
	#boxer.mobile .boxer-content{ background:none;}

/*============================
#contact
============================*/
section#contact {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	div.wrap {.w_auto; padding:30px 0;width:940px;
		@media @tablet{ padding:16px;width:100%;}
		@media @tablet_l{ padding:16px;width:100%;}
		@media @mobile{ padding:16px;width:100%;}
		h3 { background:#e4e2d5; padding:16px 20px; margin-bottom:10px;
			strong { background:url(../about/left-line.png) no-repeat left center; padding-left:30px; font-size:@biggest;
				@media @mobile{ font-size:20px;}
			}
		}
		div.box { padding:20px 30px;
			@media @mobile{ padding:8px;width:100%;}
			table { border:1px solid #e4e2d5; border-collapse:collapse; width:100%; margin-bottom:32px;
				tbody {
					tr {
						th {border:1px solid #e4e2d5; background:#f2efe9; padding:16px; width:30%; text-align:left;
							@media @mobile{ display: block; width:100%; text-align:left;}
						}
						td {border:1px solid #e4e2d5; background:#fff;padding:10px 10px 10px 20px;
							@media @mobile{ display: block; padding:16px;}
						}

						th {
							span.must{ display:inline-block; text-align:center; background: url(../contact/must.png) no-repeat; float:right; width:47px; height:24px; color:#fff; font-size:@min; font-weight:normal; padding-top:5px;}
						}
						td {
							input{ width:100%; font-size:@mid; padding:10px; border: #f2efe9 solid 1px; color:#999;}
							input[type="text"]{}
							input[type="tel"]{}
							input[type="email"]{}
							input[type="radio"]{ width:auto;}
							label{ margin-right:10px;}
							textarea {width:100%; font-size:@mid; padding:10px; border:none; color:#999; border: #f2efe9 solid 1px;
							}
							.wpcf7-list-item{ @media @mobile{display:block;}}
						}
					}
				}
			}
			input[type="submit"] { background:url(../contact/submit.png) no-repeat; width:582px; height:103px; border:none; text-indent:-88888em; margin:0 auto; display:block;
				@media @mobile{ width:100%; background-position: center center;}
			}
		}
	}
}

/*============================
#news-single
============================*/
section#news-single {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	div.wrap {.w_auto; padding:50px 0;
		@media @mobile{padding:0;}
		&:after{.clear;}
		div.main {float:left; width:700px; background:#fff; position:relative;
			@media @tablet{ float:none; width:100%;}
			@media @tablet_l{ float:none; width:100%;}
			@media @mobile{ float:none; width:100%;}
			div.thumb { width:100%; text-align:center;
				img { max-width:100%; height:auto;
				}
			}
			time { float:right; font-size:@mid; padding-right:30px; position:absolute; width:50%;height:3em; background:#222; color:#fff; right:0; text-align:center; padding:.8em; font-size:@min;
			}
			h1 { padding:30px; font-size:@biggest; border-bottom:2px solid #eee; padding-bottom:20px; padding-top:2.5em;
				@media @mobile{ text-align:center; padding-top:0;}
			}
			h1.editorial{padding-top:0; text-align:center;}
			p.companyname{ font-size:@mid; padding-right:30px;  width:100%; height:3em; background:@blog; color:#fff;  left:0; text-align:center; padding:.8em; font-size:@min;}
			p.category { font-size:@mid; padding-right:30px; position:absolute; width:50%; height:3em; background:@blog; color:#fff;  left:0; text-align:center; padding:.8em; font-size:@min;
				a{ color:#fff;}
			}
			p.tag{ padding:16px; text-align:right;
				a{ color:@blog; font-size:@min; display:inline-block; padding:3px 6px; border:1px solid #eee; margin-left:5px;}
			}
			div { padding:30px;
				div{ padding:0;}
				h2{ padding-top:0;}
				img{ max-width:100%; height:auto;}
				.wp-caption{ display:inline-block;margin-bottom:20px; max-width:100%;
					img{ width:100%; height:auto;}
					.wp-caption-text{ font-size:@min; text-align:center; padding:5px; background:#eee;}
				}
				.alignright{ float:right; margin-left:20px;}
				.alignleft{ float:left; margin-right:20px;}
				p{ margin-bottom:16px;}
				
			}
			div.contents{ padding:16px 30px;
				@media @mobile{padding:16px;}
				h1{}
				h2{ border-bottom:2px solid @blog; padding-left:16px; margin-bottom:16px; padding-top:16px;}
				h3{ padding-left:16px;border-left:2px solid @blog;}
				h4{ text-align:center; background:@blog; padding:8px; color:#fff;}
				h5{}
				h6{}
				p{ padding:16px;}
				table{ width:100%; border-collapse:collapse; margin-bottom:32px;
					thead{ background:#eee; border-top:4px solid @blog;}
					tbody{}
					tr{
						th,
						td{ border:1px solid #ddd; padding:10px;}
					}
				}
				ul{ padding-left:16px; margin-left:16px;
					li{ margin-bottom:5px; list-style-type: circle;
						ul{
							li{list-style-type: disc;
								ul{
									li{list-style-type: square;
									}
								}
							}
						}
					}
				}
				ol{ padding-left:16px; margin-left:16px;
					li{ margin-bottom:5px; list-style-type: decimal;
						ol{
							li{list-style-type:cjk-ideographic;
								ol{
									li{list-style-type: upper-roman ;
									}
								}
							}
						}
					}
				}
			}
			
			ul.editorial-screen{padding:0 32px;
				@media @mobile{ padding:0 16px;}
				li{ text-align:center; margin-bottom:32px;
					img{ max-height:100%;}
				}
			}
			
			.paging{ padding:10px; border-top:2px solid #eee;
				&:after{.clear;}
				div{ width:49%;  padding:10px; font-size:@basic;
					@media @mobile{ width:100%;}
					a{ color:@blog; display:block;}
				}
				.next{ float:right;  a{ text-align:right;}}
				.prev{  float:left; a{}}
			}
			
			.latestpost{ padding:20px;
				h5{ text-align:center;}
				ul {
					li {border-top:1px dashed #bbb; padding:15px 0;
						a { display:block; color:#222;
							div.thumb { background:url(../img/index-blog-thumb-bg.png) no-repeat; overflow:hidden; width:165px; height:110px; text-align:center; padding:10px; position:relative; float:left; margin-right:15px;
								@media @tablet{ width:30%;background:#fff; border:1px solid #ddd; margin-bottom:10px;}
								@media @tablet_l{ width:30%;background:#fff; border:1px solid #ddd; margin-bottom:10px;}
								@media @mobile{ float:none; width:100%; background:#fff; border:1px solid #ddd; margin-bottom:10px;}
								img {
								}
							}
							div.text{
								@media @tablet{ width:65%;}
								@media @tablet_l{width:65%;}
								@media @mobile{ float:none; width:100%;}
							}
							time {background:url(../img/index-news-time-bg.png) no-repeat; width:92px; height:23px; text-align:center; color:#fff; font-size:@min; display:inline-block; padding-top:4px; display:none;
								&:after{.clear;}
							}
							h4 { font-size:@mid; padding-top:5px;
							}
							p { font-size:@basic;
								span { text-decoration:underline;
								}
							}
							&:after{.clear;}
						}
					}
				}
			}

		}
	}
}


/*============================
#sidebar
============================*/
aside#sidebar { float:right; width:260px;
		@media @tablet{  float:none; width:100%; padding-top:40px;}
		@media @tablet_l{  float:none; width:100%; padding-top:40px;}
	@media @mobile{ float:none; width:100%; padding-top:16px;}
	h4 { background:url(../img/side-head.png) no-repeat; height:61px; padding:18px;
		@media @mobile{ background:#d1c9b7;}
		span{ display:block; background:url(../img/icon-service.png) left center no-repeat; padding-left:40px; font-size:18px;}
		
	}
	h3 { background:url(../img/side-head.png) no-repeat; height:61px; padding:18px; text-align:center; color:#222;
		@media @tablet{ background:#d1c9b7;}
		@media @tablet_l{ background:#d1c9b7;}
		@media @mobile{ background:#d1c9b7;}
		span{ display:block; background:url(../img/icon-service.png) left center no-repeat; padding-left:40px; font-size:18px;}
		
	}
	ul { background:#f0ede7; padding:0; margin-bottom:20px !important;
		li { border-bottom:1px dashed #a8a5a1; padding:16px !important; width:100% !important; float:none !important;
			a { display:block; background:url(../img/icon-arrow.png) left center no-repeat; color:#8b877c; padding-left:25px; padding-top:2px; font-size:@basic;
			p{ margin-bottom:0 !important; text-align:left !important;}
			}
		}
	}
	.facebook{ margin:0 auto; text-align:center;
		@media @mobile{ display:none;}
	}
	p.banner { padding-bottom:0px !important; margin-bottom:6px !important;
		@media @tablet{display:inline-block; width:33.33333332%; margin-bottom:6px !important;}
		@media @tablet_l{display:inline-block; width:33.33333332%; margin-bottom:6px !important;}
		@media @mobile{ display:block; text-align:center;padding:8px 16px !important;}
		a {
			img {
			}
		}
	}
}

/*============================
#blog
============================*/
section#blog {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	div.wrap {.w_auto; padding:50px 0;overflow: hidden;
		&:after{.clear;}
		@media @tablet{ padding:16px;}
		@media @tablet_l{ padding:16px;}
		@media @mobile{ padding:16px 0;}
		h2 { text-align:center; margin-bottom:30px;
			@media @tablet{ padding:16px;}
			@media @tablet_l{ padding:16px;}
			@media @mobile{ padding:0 16px; margin-bottom:16px;}
			img {
			}
		}
		p { text-align:center; margin-bottom:30px;
			@media @mobile{ margin-bottom:0px;}
			img { max-width:100%;
			}
		}
		div.main{ float:left; width:700px;
			@media @tablet{ float:none; width:100%;}
			@media @tablet_l{ float:none; width:100%;}
			@media @mobile{ float:none; width:100%;}

			h3 { background:#e4e2d5; padding:16px 20px; margin-bottom:10px;
				strong { background:url(../about/left-line.png) no-repeat left center; padding-left:30px; font-size:@biggest;
					@media @mobile{ font-size:20px;}
				}
			}
			div.contact { text-align:center; padding-top:30px;
				@media @mobile{ padding:16px;}
				a {
					img {
					}
				}
			}

		}
		div.main{ text-align:center;
			ul.list{ padding:0 5px;
				li { float:left; width:50%;padding:10px; padding-top:0; margin-bottom:10px;
					@media @mobile{ width:100%;}
					a {  display:block; background:#fff;
						div.thumb { overflow:hidden; max-height:200px;
							img { width:100%;
							}
						}
						div.text { padding:20px; color:#222; position:relative;
							time { display:inline-block; padding:3px 6px; background:#222; color:#fff; font-size:@min; position:absolute; right:0; top:-2.1em;
							}
							h4 { margin-bottom:5px; padding-bottom:5px; border-bottom:1px dashed #ccc;
							}
							p { text-align:left; font-size:@min; margin-bottom:0;
								span {
								}
							}
						}
					}
				}
				&:after{.clear;}	
			}
		}
		aside{}
	}
}

/*============================
#categorylist
============================*/
section#categorylist {background:#f9f7ef url(../img/foot-head-line.png) repeat-x top left;
	div.wrap {.w_auto; padding:50px 0;
		&:after{.clear;}
		@media @tablet{ padding:16px;}
		@media @tablet_l{ padding:16px;}
		@media @mobile{ padding:16px;}
		h2 { text-align:center; margin-bottom:30px;
			@media @tablet{ padding:16px;}
			@media @tablet_l{ padding:16px;}
			@media @mobile{ padding:0 16px; margin-bottom:16px;}
			img {
			}
		}
		div.main{ float:left; width:700px; 
			@media @tablet{ float:none; width:100%;}
			@media @tablet_l{ float:none; width:100%;}
			@media @mobile{ float:none; width:100%;}

		}
		div.main{text-align:center;
			ul.list{ padding:0 5px;
				li { background:#fff; margin-bottom:10px; border-bottom:1px solid rgba(220,215,205,1.00);
					a {  display:block; color:#222; position:relative;
							time { display:inline-block; padding:10px 6px; background:#fff; color:@blog; text-align:center; font-size:@min; float:left; width:20%;
								@media @mobile{ width:100%; border-bottom:2px solid @blog;}
							}
							p { text-align:left; font-size:@basic; padding:10px; display:inline-block; float:right; width:80%; border-left:2px solid @blog;
								@media @mobile{ width:100%;border-left:none;}
								span {
								}
							}
							&:after{.clear;}
					}
				}
				&:after{.clear;}	
			}

		}
		aside{}
	}
}



/*============================
#footer
============================*/
footer#footer {background: url(../img/foot-head-line.png) repeat-x top left #dad3c4; padding:30px 0;
	div.wrap {.w_auto; overflow:visible;
		@media @tablet{ padding:0 16px;}
		div.left { float:left; width:200px;
			@media @tablet{  float:none; width:100%; text-align:center; margin-bottom:30px; padding-bottom:25px; background: url(../img/foot-head-line.png) repeat-x bottom left;}
			@media @tablet_l{ float:none; width:100%; text-align:center; margin-bottom:30px; padding-bottom:25px; background: url(../img/foot-head-line.png) repeat-x bottom left;}
			@media @mobile{ float:none; width:100%; text-align:center; margin-bottom:30px; padding-bottom:25px; background: url(../img/foot-head-line.png) repeat-x bottom left;}
			a { display:block; margin-bottom:20px;
				
				img {
					@media @tablet{}
				}
			}
			.sss{@media @tablet{ float:left;width:50%; text-align:right; padding-right:20px;}}
			.ddd{@media @tablet{ float:right; width:50%; text-align:left; padding-left:20px;}}
			p { font-size:@basic; margin-bottom:3px;
				
				span { background:url(../img/foot-icon-bg.png) no-repeat; color:#fff; text-align:center; padding-top:4px; width:52px; height:26px; display:inline-block; margin-right:10px;
				}
			}
			&:after{.clear;}
		}
		div.right { float:right; width:800px;
			@media @tablet{float:none; width:100%;}
			@media @tablet_l{float:none; width:100%;}
			@media @mobile{ float:none; width:100%;padding:0 16px;}
			ul {
				li { float:left; width:19%;
					@media @mobile{ float:none; width:100%;}
					h5 {border-left:1px solid #999;text-align:center; margin-bottom:10px;
						@media @mobile{ text-align:left; border-bottom:1px dashed #666; padding:5px; margin:10px;border-left:none;}
						a { color:#222; font-size:@mid; font-weight:normal; 
						}
					}
					p { padding-left:0px; 
						&:before{ content:"・"; display:inline-block;}
						a { color:#222; font-size:@min;
						}
					}
					a.red { width:167px; height:60px; display:block; background:url(../img/foot-btn-red.png) no-repeat; text-align:center; padding:5px; margin-bottom:20px;
						@media @tablet{ width:100%;height:auto; padding:5px; background:@contact; border:1px dotted #666;}
						@media @mobile{ width:100%;height:auto; padding:5px; background:@contact; border:1px dotted #666;}
						span { color:#fff;border:1px dashed #fff; color:#fff; height:50px; display:block; padding-top:12px;
							@media @tablet{ padding:5px; height:auto;}
							@media @mobile{ padding:5px; height:auto;}
						}
						
					}
					a.blue {width:167px; height:60px; display:block;background:url(../img/foot-btn-blue.png) no-repeat; text-align:center;padding:5px;
						@media @tablet{ width:100%;height:auto; padding:5px; background:@blog; border:1px dotted #666;}
						@media @mobile{ width:100%;height:auto; padding:5px; background:@blog; border:1px dotted #666;}
						span { color:#fff;border:1px dashed #fff; color:#fff; height:50px; display:block;padding-top:12px;
							@media @tablet{ padding:5px; height:auto;}
							@media @mobile{ padding:5px; height:auto;}
						}
					}
					&:nth-child(4){
						h5{border-right:1px solid #999;
							@media @mobile{border-right:none;}
						}
					}
					&:nth-child(5){ padding-left:20px;
						@media @mobile{padding:20px;}
					}
				}
				&:after{.clear;}
			}
		}
		&:after{.clear;}
	}
}

div.copyright { background: url(../img/copyright-head-line.png) repeat-x top left #9d988e; text-align:center; color:#fff; padding:20px; font-size:@min;
	@media @mobile{ text-align:left;}
}

.page-numbers{ display:inline-block; background:url(../blog/num-bg.png) no-repeat; width:52px; height:52px; line-height:1; margin-top:32px; font-size:@basic; color:#fff; line-height:50px;
	@media @mobile{ margin-top:16px;}
}
.page-numbers.current{ color:#222;}
.next.page-numbers{background:url(../blog/text-bg.png) no-repeat;width:82px; height:52px;}
.prev.page-numbers{background:url(../blog/text-bg.png) no-repeat;width:82px; height:52px;}


/* スマホメニュー */
#nav_smp{ height:50px; position:fixed; top:0; left:0; width:100%; z-index:1000;
.header {
  width: 100%;
  z-index: 3; }
  .header h1 {
    text-align: center;
    font-size: 15px;
    padding: 15px 0px 10px 0px;
    color: #fff; }
  .header .header__heading {
    background:;
    position: absolute;
    width: 100%;
    z-index: 3;height:50px;}

.nav-content {
  position: absolute;
  background:;
  width: 100%;
  top: -735px;
  z-index: 2;
  -webkit-transition: 1.5s top;
          transition: 1.5s top; }
  .nav-content ul li {
    font-size: 18px;
     }
    .nav-content ul li a {
      text-align: center;
      display: block;
      padding: 10px 0px;
}

.is-open .nav-content {
  top: 50px; }

#js-cover {
  background: @service;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0px;
  opacity: 0;
  z-index: 1; }

.menu-button {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  right: 10px;
  top: 10px; }
  .menu-button i {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background: @service;
    -webkit-transition: background 0.5s;
            transition: background 0.5s;
    position: relative;
    left: 5px;
    top: 14px; }
    .menu-button i:before,
    .menu-button i:after {
      content: "";
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 3px;
      background: @service;
      position: absolute;
      -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
              transform: rotate(0deg);
      -webkit-transition: all 0.3s !important;
              transition: all 0.3s !important; }
    .menu-button i:before {
      -webkit-transform: translateY(8px);
          -ms-transform: translateY(8px);
              transform: translateY(8px); }
    .menu-button i:after {
      -webkit-transform: translateY(-8px);
          -ms-transform: translateY(-8px);
              transform: translateY(-8px); }

.is-open .menu-button i {
  background: #fcfbf9; }
  .is-open .menu-button i:after {
    -webkit-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
            transform: translateY(0px) rotate(-45deg); }
  .is-open .menu-button i:before {
    -webkit-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
            transform: translateY(0px) rotate(45deg); }
}


/*owl*/
.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:a;animation-name:a}@-webkit-keyframes a{0%{opacity:1}to{opacity:0}}@keyframes a{0%{opacity:1}to{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-ms-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-item img{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:5pc;width:5pc;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png)no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale .1s ease;-moz-transition:scale .1s ease;-ms-transition:scale .1s ease;-o-transition:scale .1s ease;transition:scale .1s ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-ms-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}