/* variables
--------------------------------------------------*/

@fontColorMain: #222222;
@fontColorSub: #333333;
@royalBlue: #1B3280;
@yellow: #FFBC00;
@englishFont: 'HelveticaNeue-CondensedBold', 'Roboto Condensed', sans-serif;
@jpFont: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

/* mixins
--------------------------------------------------*/

.fullScreen() {
	width: 100vw;
	height: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: relative;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.rounded-corners(@radius: 30px) {
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
}

/* common
--------------------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
body { font-family: @jpFont; }
li { list-style: none; }
a { text-decoration: none; }
.helv {font-family: 'HelveticaNeue-CondensedBold', 'Roboto Condensed', sans-serif;}
.serif {font-family: 'ヒラギノ明朝 Pro W3', "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-weight: 400;}
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* navigation
--------------------------------------------------*/

.side-nav{
	position: fixed; width: 198px; height: 100%; background-color: #DFDFDF; border-right: 2px solid #CECECE; z-index: 2; display: block;
	.mainlogo{
		position: relative; display: block; height: 80px;
		img {
			position: absolute; top: 20px; left: 10px;
		}
	}
	#forsp_btn {
		display: none;
	}
	li {
		position: relative; height: 35px;
		a {
			padding: 10px; color: @fontColorMain; font-size: 13px; font-weight: bold;
		}
		&:hover {
			background-color: @fontColorMain;
			a {
				color: #FFF;
			}
		}
		ul {
			position: absolute; top: 0px; left: 200px; list-style: none; display: none; z-index: 1; width: 200px; background-color: #333;
			li {
				position: relative; width: 200px;
				&:hover {
					background-color: #666;
				}
			}
		}
 	}
	div {
		position: absolute;
		bottom: 10px;
		left: 10px;
		.address {
			font-size: 11px; line-height: 20px; margin-top: 5px;
		}
		.telfax {
			font-size: 10px; line-height: 18px; color: @fontColorSub; margin-top: 5px;
		}
	}
}

@media only screen and(max-width: 1080px) {
	.side-nav {
		width: 150px;
		.mainlogo {
			height: 60px;
			img {
				width: 130px; height: auto;
			}
		}
	}
}

@media only screen and(max-width: 768px) {
	.side-nav {
		width: 100%; height: 58px; border-right: 0px; border-bottom: 2px solid #CECECE; z-index: 100; transition: all 0.4s;
		.mainlogo { width: 100px; }
		div { display: none; }
		ul {
			display: none;
			li {
		 		height: 33px;
				a {
					padding: 5px; font-size: 14px;
				}
			}
		}
		#forsp_btn {
			display: block; width: 28px; height: 28px ; position: absolute; right: 15px; top: 15px; z-index: 5;
			span {
				display: block; background: #666; width: 28px; height: 2px; position: absolute; transition: all 0.4s;
				&:first-child { top: 4px; }
				&:nth-child(2) { top: 12px; }
				&:last-child { bottom: 4px; }
			}
		}
		.active {
			span{
				&:first-child { transform: translateY(9px) rotate(45deg); }
				&:nth-child(2) { opacity: 0; }
				&:last-child { transform: translateY(-9px) rotate(-45deg); }
			}
		}
		p.linklang {
			display:none;
			text-align:center;
		}
	}
	.side-nav.active {
		height: 460px; transition: all 0.4s;
		ul.active {
			display: block; text-align: center;
		}
		p.linklang {
			display:block;
			text-align:center;
		}
	}
}

/* main
--------------------------------------------------*/
body {
	background-image: url('../images/top_BG_gradation.png'); background-size: contain;
}
.main{
	width: 1280px; position: relative; overflow: hidden; margin: 0 auto; border-left: 2px solid #CECECE; border-right: 2px solid #CECECE;
}
.container{
	padding-left: 200px; position: relative; background-color: #FFF;
}

@media only screen and(max-width: 1280px) {
	.main {
		width: 100%; margin: 0; border: 0px;
 	}
}

/* top-slider
--------------------------------------------------*/
.scroll-icon {
	position: absolute; z-index: 55; top: 670px; right: 50%; margin-right: -125px;
}

.slider-wrapper {
	position: relative; width: 100%; height: 800px;
	.top-slide {
		position: relative; width: 100%; height: 100%;
	}
	a {
		text-align: center; display: block; width: 100px; height: 25px; padding-top: 5px; background-color: @royalBlue; color: #FFF; font-weight: bold; font-size: 14px; .rounded-corners;
		&:hover {
			background-color: #EEE; color: @royalBlue;
		}
	}
}

.slide-CP {
	background-repeat: repeat-x;
	h3 {
		font-size: 30px; line-height: 50px; margin: 50px 0 0 50px;
	}
	.helv {
		font-size: 98px; margin: 0 0 0 50px;
	}
	h4 {
		font-size: 18px; font-weight: bold; margin: 0 0 0 50px;
	}
	.shade {
		position: absolute; width: 100%; height: 100%; background-size: cover; z-index: -2;
	}
	img {
		position: absolute; right: -300px; bottom: 5%; width: 100%; height: auto; z-index: -1;
	}
	a { margin: 20px 0 0 50px; }
}

.slide-SG {
	background-repeat: repeat-x;
	.visual {
		position: absolute; width: 250px; height: auto; z-index: -1;
	}
	h3 {
		font-size: 30px; line-height: 50px; margin: 50px 0 0 50px;
	}
	.helv {
		font-size: 98px; margin: 0 0 0 50px; line-height: 100px;
	}
	h4 {
		font-size: 18px; font-weight: bold; margin: 0 0 0 50px;
	}
	.shade {
		position: absolute; width: 100%; height: 100%; background-size: cover; z-index: -2;
	}
	.product {
		position: absolute; top: 0px; right: 50px; height: 98%; width: auto; z-index: -1;
	}
	.logo {
		position: absolute; bottom: 100px; left: 50px;
	}
	a { margin: 20px 0 0 50px; }
}

@media only screen and(max-width: 1080px) {
	.scroll-icon {
		top: 470px; margin-right: -100px;
	}
	.slider-wrapper {
		height: 600px;
		a {
			width: 80px; height: 20px; padding-top: 3px; font-size: 12px;
		}
	}
	.slide-CP {
		img {
			bottom: 2%; width: 95%;
		}
		h3 {
			font-size: 24px; line-height: 42px; margin: 30px 0 0 30px;
		}
		.helv {
			font-size: 88px; margin: 0 0 0 30px;
		}
		h4 { margin: 0 0 0 30px; }
		a { margin: 20px 0 0 30px; }
	}
	.slide-SG {
		h3 {
			font-size: 24px; line-height: 42px; margin: 30px 0 0 30px;
		}
		.helv {
			font-size: 75px; margin: 0 0 0 30px; line-height: 78px;
		}
		.logo {
			width: 280px; height: auto; bottom: 30px; left: 30px;
		}
		h4 { margin: 0 0 0 30px; }
		a { margin: 20px 0 0 30px; }
	}
}

@media only screen and(max-width: 768px) {
	.scroll-icon {
		top: 450px; margin-right: -25px;
	}
	.slider-wrapper {height: 500px;}
	.slide-SG {
		.visual { width: 200px; }
		.logo { width: 200px; }
	}
}

@media only screen and(max-width: 500px){
	.scroll-icon {
		top: 370px; margin-right: -20px; width: 40px; height: auto;
	}
	.slider-wrapper {height: 400px;}
	.slide-CP {
		img {
			bottom: 5%; width: 130%;
		}
		h3 {
			font-size: 18px; line-height: 32px; margin: 15px 0 0 15px;
		}
		.helv {
			font-size: 55px; margin: 0 0 0 15px;
		}
		h4 { margin: 0 0 0 15px; }
		a { margin: 20px 0 0 15px; }
	}
	.slide-SG {
		.visual { width: 150px; }
		h3 {
			font-size: 18px; line-height: 32px; margin: 15px 0 0 15px;
		}
		.product { height: 80%; top: 50px;}
		.helv {
			font-size: 42px; margin: 0 0 0 15px; line-height: 47px;
		}
		.logo {
		 	width: 120px; bottom: 15px; left: 15px;
		}
		h4 { margin: 0 0 0 15px; }
		a { margin: 20px 0 0 15px; }
	}
}

/* top-cont-common
--------------------------------------------------*/
.topbanner-wrapper {
	margin-top: 3px;
	div { // .top-******
		position: relative;
		.shade {
			position: absolute; background-size: cover; background-position: 50% 50%;
		}
		.textbox {
			h2 {
				font-size: 26px; line-height: 31px;
			}
			.helv {
				font-size: 14px; margin-top: 2px;
			}
			a {
				margin: 5px auto 0 auto; text-align: center; display: block; width: 100px; height: 25px; padding-top: 5px; background-color: @yellow; color: @fontColorMain; font-weight: bold; font-size: 14px; .rounded-corners;
				&:hover {
					background-color: @fontColorMain; color: @yellow;
				}
			}
		}
	}
}

@media only screen and(max-width: 1080px){
	.topbanner-wrapper {
		div .textbox {
		 	a {
				width: 80px; height: 20px; padding-top: 3px; font-size: 12px;
			}
			h2 {
				font-size: 24px; line-height: 29px;
			}
			.helv {
				font-size: 12px;
			}
		}
	}
}

/* top-cont-detail
--------------------------------------------------*/

.top-product {
	height: 350px; width: 100%;
	.shade {
		height: 100%; width: 100%; right: 0;
	}
	.image {
		position: absolute; height: 100%; width: 80%; background-size: cover; background-position: 50% 50%;
	}
	.textbox {
		position: absolute; right: 10%; top: 135px; text-align: center;
	}
}

.heightfix {
	height: 350px;
}

.top-install {
	position: relative; display: inline-block; height: 350px; width: 66.6%;
	.image {
		position: absolute; height: 100%; width: 90%; right: 0; background-size: cover; background-position: 50% 50%;
	}
	.shade {
		height: 100%; width: 100%; left: 0;
	}
	.textbox {
		position: absolute; left: 7%; top: 115px; text-align: center;
	}
}

.top-3min {
	position: relative; float: right; height: 350px; width: 33.3%;
	.image {
		position: absolute; height: 90%; width: 100%; background-size: cover; background-position: 50% 50%;
	}
	.shade {
		height: 100%; width: 100%; bottom: 0;
	}
	.textbox {
		position: absolute; bottom: 30px; right: 10%; text-align: right;
		a { float: right; }
	}
}

.top-story {
	position: relative; float: left; display: inline-block; height: 550px; width: 33.2%;
	.image {
		position: absolute; height: 90%; width: 100%; background-size: cover; background-position: 50% 50%;
	}
	.shade {
		height: 85%; width: 100%; bottom: 0; background-position: 50% 100%;
	}
	.textbox {
		position: relative; margin: 0 auto; padding-top: 480px; bottom: 30px; text-align: center;
		h2 {
			font-size: 24px!important;
		}
		.helv {
			font-size: 12px!important;
		}
	}
}

.top-info {
	position: relative; float: right; height: 250px; width: 66.6%; background-color: #DFDFDF;	overflow: auto;
	div {
		margin: 20px 35px 0 35px; border-bottom: 1px solid @fontColorSub; height: 40px;
		h4 {
			float: left; font-size: 28px; color: @royalBlue;
		}
		p {
			float: right; padding-top: 10px; font-weight: bold; font-size: 14px; color: @royalBlue;
		}
	}
	a {
		font-size: 13px; color: @fontColorSub;
		p {
			margin: 20px 0 0 35px;
		}
		span {
			font-size: 16px; font-family: "Times New Roman"; font-weight: bold; font-style: italic; margin-right: 25px;
		}
	}
}

.top-profile, .top-recruit {
		margin-top: 1px; margin-left: 1px; position: relative; float: left; display: inline-block; height: 299px; width: 33.2%;
	.image {
		position: absolute; height: 90%; width: 100%; background-size: cover; background-position: 50% 20%;
	}
	.shade {
		height: 150%; width: 100%; bottom: 0; background-position: 50% 100%;
	}
	.textbox {
		position: relative; margin: 0 auto; padding-top: 230px; bottom: 30px; text-align: center;
		h2 {
			font-size: 24px!important;
		}
		.helv {
			font-size: 12px!important;
		}
	}
}

.top-contact {
	position: relative; width: 100%; height: 200px;
	.image {
		position: absolute; height: 100%; width: 100%; background-size: cover; background-position: 50% 50%;
	}
	a { z-index: 15; display: block; position: absolute; width: 100%; height: 100%; }
	.textbox {
		position: relative; margin: 0 auto; padding-top: 75px; text-align: center; width: 150px; z-index: 10;
		* {
			color: #FFF;
		}
	}
}

@media only screen and(max-width: 1080px){
	.top-product {
		height: 250px;
		.textbox {
			top: 90px;
		}
	}
	.top-install {
		height: 250px;
		.textbox {
			top: 80px; left: 4%;
		}
	}
	.top-3min {
		height: 250px;
		.shade {
			height: 130%;
		}
		.textbox {
			right: 5%; bottom: 15px;
		}
	}
	.heightfix {
		height: 250px;
	}
	.top-story {
		height: 400px;
		.shade {
			height: 110%;
		}
		.textbox {
			padding-top: 345px;
			h2 {
				font-size: 22px!important;
			}
			.helv {
				font-size: 11px;
			}
		}
	}
	.top-info {
		height: 175px;
		div {
			height: 30px;
			h4 { font-size: 20px;}
			p { padding-top: 2px; }
		}
		a p {
			margin-top: 7px;
			span { margin-right: 8px;}
		}
	}
	.top-profile, .top-recruit {
		height: 225px;
		.shade {
			height: 150%;
		}
		.textbox {
			padding-top: 170px;
			h2 {
				font-size: 22px!important;
			}
			.helv {
				font-size: 11px;
			}
		}
	}
	.top-contact {
		height: 150px;
		.textbox {
			padding-top: 50px;
		}
	}
}
@media only screen and(max-width: 768px){
	.top-product {
		height: 200px;
		.shade {
			width: 120%;
		}
		.textbox {
			top: 70px; right: 5%;
		}
	}
	.top-install {
		height: 200px; width: 100%;
		.shade {
			width: 120%;
		}
		.textbox {
			top: 55px; left: 5%;
		}
	}
	.top-3min {
		height: 200px; width: 100%; float: none; margin-top: -3px;
		.image {
			height: 100%;
		}
		.shade {
			width: 100%; height: 100%; right: 0;
		}
	}
	.heightfix {
		height: 403px;
	}
	.top-story {
		height: 200px; width: 50%; z-index: 5;
		.image {
			height: 100%;
		}
		.shade {
			width: 100%; height: 180%;
		}
		.textbox {
			padding-top: 150px;
			h2 {
				font-size: 18px!important;
			}
			.helv {
				font-size: 10px!important; margin-top: -2px!important;
			}
		}
	}
	.top-info {
		height: 200px; width: 50%; z-index: 5;
		div {
			margin: 0 20px; height: 35px;
			h4 {
				font-size: 18px; padding-top: 10px;
			}
			p { padding-top: 10px; }
		}
		a {
			font-size: 11px;
			p {
				margin: 10px 0 0 20px;
			}
			span {
				font-size: 13px;
				margin-right: 10px;
			}
		}
		.textbox {
		}
	}
	.top-profile, .top-recruit {
		height: 200px; width: 49.5%;
		.shade {
			width: 100%; height: 180%;
		}
		.textbox {
			padding-top: 150px;
			h2 {
				font-size: 18px!important;
			}
			.helv {
				font-size: 10px!important; margin-top: -2px!important;
			}
		}
	}

}

@media only screen and(max-width: 500px){
	.top-product, .top-install, .top-3min {
		.textbox {
			h2 {
				font-size: 18px!important; line-height: 20px!important;
			}
			.helv {
				font-size: 10px!important; margin-top: 2px!important;
			}
		}
	}
	.top-info {
		div {
			margin: 0 10px;
			h4 { font-size: 16px; }
			p { font-size: 12px; }
		}
		a p {
			margin: 3px 0 0 10px;
		}
		a span:after {
			content: "\A"; white-space: pre;
		}
	}

	.top-story, .top-profile, .top-recruit {
		.shade {
			height: 150%;
		}
	}
}

/* footer
--------------------------------------------------*/
footer {
	background-color: #B9B9B9; width: 100%; height: 75px; margin-top: 3px;
	p {
		font-family: @englishFont; font-weight: 700; font-size: 10px; padding-left: 200px; padding-top: 30px; text-align: center;
	}
}

@media only screen and(max-width: 1080px){
	.container {
		padding-left: 150px;
	}
	footer p {
		padding-left: 150px;
	}
}

@media only screen and(max-width: 768px){
	.container {
		padding-left: 0;
		padding-top: 60px;
	}
	footer {
		height: 50px;
		p {
			padding-top: 20px;
			padding-left: 0;
		}
	}
}

/* under-common
--------------------------------------------------*/
.under-visual {
	height: 600px; width: 100%; position: relative; background-position: 50% 50%; background-size: cover;
	.shade {
		width: 70%; height: 100%; position: absolute; background-size: cover; background-position: 50% 50%; right: 0;
	}
	h3 {
		position: absolute; right: 100px; top: 270px; font-size: 30px; text-align: right;
	}
	h2 {
		position: absolute; right: 100px; top: 320px; font-size: 99px; letter-spacing: -0.025em;
		span:after {
			content: " "; white-space: pre;
		}
	}
	p {
		position: absolute; right: 100px; top: 440px; font-size: 18px; line-height: 36px; text-align: right;
	}
}
.under-wrapper {
	position: relative; width: 900px; margin: 0 auto;
}

.btn {
	margin: 5px auto 0 auto; text-align: center; display: block; height: 25px; padding-top: 5px; background-color: @yellow; color: @fontColorMain; font-weight: bold; font-size: 14px; .rounded-corners;
	&:hover {
	background-color: @fontColorMain; color: @yellow;
	}
}

@media only screen and(max-width: 1280px){
	.under-wrapper {
		width: 90%;
	}
}

@media only screen and(max-width: 1080px){
	.under-visual {
		height: 500px;
		h3 {
			right: 50px; top: 220px; font-size: 26px;
		}
		h2 {
			right: 50px; top: 260px; font-size: 75px;
		}
		p {
			right: 50px; top: 350px; font-size: 16px; line-height: 34px;
		}
	}
	.btn {
		height: 20px; padding-top: 3px; font-size: 12px;
	}
}

@media only screen and(max-width: 768px){
	.under-visual {
		height: 400px;
		h3 {
			right: 20px; top: 170px; font-size: 18px;
		}
		h2 {
			right: 20px; top: 200px; font-size: 55px;
		}
		p {
			right: 20px; top: 260px; font-size: 13px; line-height: 28px;
		}
	}
}
@media only screen and(max-width: 650px){
	.under-visual h2 {
		font-size: 40px; text-align: right; line-height: 45px;
		span:after { content: "\A" }
	}
}

/* develop-story
--------------------------------------------------*/
.story {
	.story-visual {
		background-position: 50% 50%; background-size: cover;
	}
	.SG-pic {
		width: 450px; height: auto;
	}
	.story-nav {
		h3 {
			float: left; font-size: 26px; line-height: 40px; padding-left: 15px; border-left: 6px solid @fontColorMain;
		}
		ul {
			float: right; padding-left: 15px; border-left: 6px solid #E0E0E0;
			li {
				margin: 7px 0;
				a {
					color: @fontColorMain; font-size: 15px; opacity: 0.5;
					span { font-size: 20px; }
				}
			}
		}
	}
	.story-box {
		margin-top: 75px;
		.col-pic {
			position: relative; width: 35%;
			h4 {
				text-align: center; font-size: 26px; margin: 15px 0;
			}
			img {
				width: 100%; height: auto; margin-top: 60px;
			}
		}
		.col-text {
			position: relative; width: 60%;
			img { display: inline-block; margin: 0px 20px 15px 0; }
			h4 {
				display: inline-block; font-size: 26px; line-height: 35px;
			}
			p {
				font-size: 15px; line-height: 32px; margin-top: 50px;
			}
		}
	}
	#story01 , #story03 {
		.col-pic { float: left; }
		.col-text { float: right; }
	}
	#story02 {
		.col-pic { float: right; }
		.col-text { float: left; }
	}
	#story02 , #story03 {
		border-top: 1px solid #DDD; padding-top: 50px;
	}
	.btn {
		width: 175px; margin: 40px auto 40px auto;
	}

}

@media only screen and(max-width: 1280px){
	.story {
		.story-box {
			.col-pic {
				img { margin-top: 50px; }
			}
			.col-text {
				h4 { font-size: 24px; }
				p { margin-top: 40px; }
			}
		}
	}
}

@media only screen and(max-width: 1080px){
	.story {
		.story-nav {
			h3 {
				float: none; font-size: 22px;
			}
			ul {
				float: none; margin-top: 25px;
			}
		}
		.story-box {
			.col-pic {
				img { margin-top: 50px; }
			}
			.col-text {
				h4 { font-size: 18px; }
				p {
					margin-top: 40px; font-size: 14px;
				}
			}
		}
	}
}

@media only screen and(max-width: 768px){
	.story {
		.SG-pic {
			display: block; margin: 0 auto;
		}
		.story-nav {
			h3 {
				font-size: 18px; line-height: 30px;
			}
			ul {
				float: none; margin-top: 25px;
				li a {
					font-size: 13px;
					span { font-size: 16px; }
				}
			}
		}
		.story-box {
			margin-top: 50px;
			.col-pic {
				img { margin-top: 30px; }
			}
			.col-text {
				h4 { font-size: 16px; }
				p {
					margin-top: 20px; font-size: 13px;
				}
			}
		}
	}
}
@media only screen and(max-width: 650px){
	.story {
		.SG-pic { width: 80%; }
		.story-nav {
			h3 { float: none; }
			ul {
				float: none; margin-top: 25px;
			}
		}
		.story-box {
			.col-pic {
				width: 50%;
			}
			.col-text {
				width: 80%;
				img { margin-right: 5px; }
				h4 { font-size: 15px; }
				p { font-size: 13px; }
			}
		}
		#story01 , #story03 {
			.col-pic {
				float: none; margin: 0 auto 20px auto;
			}
			.col-text {
				float: none; margin: 0 auto;
			}
		}
		#story02 {
			.col-pic {
				float: none; margin: 0 auto 20px auto;
			}
			.col-text {
				float: none; margin: 0 auto;
			}
		}
	}
}

/* installation case
--------------------------------------------------*/
.installation {
	.under-visual {
		background-size: cover; background-position: 50% 50%;
		h3 { top: 240px; }
		h2 span { color: #FFF; }
		p .font { font-size: 11px; }
	}
	.product {
		width: 125px; height: auto; display: inline-block; margin: 10px 0px 0 15px;
	}
	.product2 {
		width: 255px; height: auto; display: inline-block; margin: 40px 50px 30px 15px;vertical-align: middle;
		.btn {
			float: left;
    		margin: 20px 30px;
			padding: 6px 20px 0px;
		}
	}
	.logo {
		height: 130px; width: auto; display: inline-block; margin: 35px 0 0 5px; vertical-align: top;
	}
	#installation-nav {
		display: inline-block; padding-left: 35px; border-left: 6px solid @fontColorMain; margin: -10px 0 0px 20px; margin-bottom: 40px;
		li {
			margin-bottom: 15px;
			&:last-child { margin-bottom: 0; }
			a {
				color: @fontColorMain;
				&:hover { color: #1078BF; }
			}
		}
	}
	#installation-nav.plusscroll {
		overflow-y: scroll;
		padding: 30px 0px 30px 70px;
		margin: 60px 0;
		height: 300px;
		max-width: 480px;
		width:100%;
		vertical-align: middle;
	}
	
	.case-box {
		.image2 {
			 width: 100%; position: relative; background-repeat: no-repeat; height: 350px;
 			.yellow-circle {
				width: 135px; height: 135px; background: @yellow; .rounded-corners(135px); display: block; text-align: center;
				span {
					display: block; padding-top: 50px; font-weight: 700; font-size: 26px;
				}
			}
			h2 {
				text-align: center;font-size: 26px;color: #222;
				span {
					font-size: 22px;
					&:before {
						content: "\A"; white-space: pre;
					}
				}
			}
		}
	}
	.case-box.lefter {
		.image2 {
			 background-position: 0% 50%;
			 background-color:#e5e5e5;
 			.yellow-circle {
				position: absolute; top: 40px; left: 300px!important;
			}
			h2 {
				position: absolute; right: 0; top: 80px; z-index: 1; width: 690px;
			}
			p {
				text-align: center; font-size: 26px; color: #222;  position: absolute; right: 0; top: 185px; z-index: 1; width: 690px; line-height:1.4;
			}
			.tobtnpdf {
				 position: absolute;right: 0;top: 280px;z-index: 1;width: 690px;text-align: center;
				 img {float:none!important; width:209px;}
			}
		}
		.image2::before {
			content:"";
			position:absolute;
			top:0;
			left:273px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 0px 350px 120px;
			border-color: transparent transparent #e5e5e5 transparent;
		}
	}
	.case-box.righter {
		.image2 {
			 background-position: 100% 50%;
			 background-color:#c9c9c9;
 			.yellow-circle {
				position: absolute; top: 40px; right: 300px!important;
			}
			h2 {
				position: absolute; left: 0; top: 80px; z-index: 1; width: 690px;
			}
			p {
				text-align: center; font-size: 26px; color: #222; position: absolute; left: 0; top: 185px; z-index: 1; width: 690px; line-height:1.4;
			}
			.tobtnpdf {
				 position: absolute;left: 0;top: 280px;z-index: 1;width: 690px;text-align: center;
				 img {float:none!important; width:209px;}
			}
		}		
		.image2::before {
			content:"";
			position:absolute;
			top:0;
			right:273px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 120px 350px 0px;
			border-color: transparent transparent #c9c9c9 transparent;
		}
		
	}
	.case-box {
		.image {
			width: 100%; height: 350px; position: relative; background-size: cover; background-position: 50% 50%;
			.yellow-circle {
				width: 135px; height: 135px; background: @yellow; .rounded-corners(135px); display: block; text-align: center; position: absolute; top: 50px;
				span {
					display: block; padding-top: 50px; font-weight: 700; font-size: 26px;
				}
			}
			h2 {
				text-align: center; font-size: 26px; color: #FFF;	padding-top: 100px; text-shadow: 0px 0px 3px #222222;
				span {
					font-size: 22px;
					&:before {
						content: "\A"; white-space: pre;
					}
				}
			}
			p {
				text-align: center; font-size: 26px; color: #FFF;	margin-top: 20px; text-shadow: 0px 0px 3px #222222;
			}
		}
		.cf { margin-top: 50px; }
		img {
			width: 35%; height: auto;
		}
		.text-box {
			width: 60%;
			h3 {
				font-size: 26px; line-height: 35px; margin-bottom: 10px;
			}
			p {
				font-size: 15px; line-height: 35px; letter-spacing: 0.025em;
			}
		}
		.link {
			width: 60%; margin: 30px 0 50px 0;
			.small {
				font-size: 13px; margin-top: 5px;
			}
			.btn { width: 175px; }
		}
	}
	#vol01, #vol03 {
		.yellow-circle { left: 50px; }
		img { float: left; }
		.text-box, .link, .btn { float: right; }
		.small { float: left; }
	}
	#vol02, #vol04 {
		.yellow-circle { right: 50px; }
		img { float: right; }
		.text-box, .link, .btn { float: left; }
		.small { float: right; }
	}
	.case-link {
		position: relative; text-align: center; padding: 50px 0; border-top: 1px dotted @fontColorMain;
		li {
			display: inline-block; width: 200px; margin-right: 50px;
			&:last-child { margin-right: 0px; }
		}
	}
}

@media only screen and(max-width: 1080px){
	.installation {
		.product2 {
			 display: block; margin: 40px auto 0px;
			.btn {
				float: none;
			}
		}
			
		#installation-nav.plusscroll {
			overflow-y: scroll;
			padding: 10px 0px 10px 20px;
			margin: 10px auto;
			height: 200px;
			display:block;
			vertical-align: middle;
		}

		.under-visual h2 { font-size: 68px; }
		.under-visual h3 { top: 190px; }
		.logo { display: none; }
		.case-box {
			.image {
				height: 300px;
				.yellow-circle {
					top: 30px; width: 115px; height: 115px;
					span {
						padding-top: 45px; font-size: 22px;
					}
				}
				h2 {
					font-size: 22px; padding-top: 95px;
					span { font-size: 20px; }
				}
				p {
					font-size: 22px; margin-top: 15px;
				}
			}
			.text-box {
				h3 { font-size: 22px; }
				p { font-size: 14px; }
			}
		}
		.case-box.lefter {
			.image2 {
				height: 300px;
				.yellow-circle {
					    top: 20px;width: 85px;height: 85px;left: 1%!important;right: initial!important;
					span {
						padding-top: 30px; font-size: 19px;
					}
				}
				h2 {
					font-size: 20px; padding-top: 0px;color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);top: 110px; width: 100%;
					span { font-size: 18px; }
				}
				p {
					font-size: 16px; margin-top: 15px;color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);top: 180px; width: 100%;
				}
				.tobtnpdf {
					 position: absolute;right: 0;top: 250px;z-index: 1;width: 100%;text-align: center;
					 img {float:none!important; width:209px;}
				}
			}
			.text-box {
				h3 { font-size: 22px; }
				p { font-size: 14px; }
			}
			.image2::before {
				border-width: 0 0px 300px 120px;
			}
		}
		.case-box.righter {
			.image2 {
				height: 300px;
				.yellow-circle {
					top: 20px; width: 85px; height: 85px; left: initial!important;    right: 1%!important;
					span {
						padding-top: 30px; font-size: 19px;
					}
				}
				h2 {
					font-size: 20px; padding-top: 0px;color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);top: 110px; width: 100%;
					span { font-size: 18px; }
				}
				p {
					font-size: 16px; margin-top: 15px;color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);top: 180px; width: 100%;
				}
				.tobtnpdf {
					 position: absolute;right: 0;top: 250px;z-index: 1;width: 100%;text-align: center;
					 img {float:none!important; width:209px;}
				}
			}
			.text-box {
				h3 { font-size: 22px; }
				p { font-size: 14px; }
			}
			.image2::before {
				border-width: 0 120px 300px 0px;
			}
		}

		#vol01, #vol03 {
			.yellow-circle { left: 5%; }
		}
		#vol02, #vol04 {
			.yellow-circle { right: 5%; }
		}
		.case-link {
			padding: 30px 0;
			li {
				width: 150px; margin-right: 30px;
			}
		}
	}
}

@media only screen and(max-width: 768px){
	.installation {
		.under-visual h2 { font-size: 50px; }
		.under-visual h3 { top: 140px; }
		.case-box {
			.image {
				height: 250px;
				.yellow-circle {
					top: 20px; width: 100px; height: 100px;
					span {
						padding-top: 35px; font-size: 20px;
					}
				}
				h2 {
					font-size: 20px; padding-top: 70px;
					span { font-size: 18px; }
				}
				p {
					font-size: 20px; margin-top: 10px;
				}
			}
			.image2 {
				height: 250px;
				.yellow-circle {
					top: 20px; width: 100px; height: 100px;
					span {
						padding-top: 35px; font-size: 20px;
					}
				}
				h2 {
					font-size: 20px; padding-top: 70px;
					span { font-size: 18px; }
				}
				p {
					font-size: 20px; margin-top: 10px;
				}
			}
			.text-box {
				h3 { font-size: 20px; }
				p { font-size: 13px; }
			}
		}
	}

}

@media only screen and(max-width: 650px){
	.installation {
		.under-visual {
			h3 { top: 115px; }
			h2 { top: 175px; }
			p { top: 275px; }
			h2 span { color: @fontColorMain; }

		}
		.product { width: 100px; }
		#installation-nav {
			padding-left: 15px;
			li {
				margin-bottom: 7px;
				a { font-size: 13px; }
			}
		}
		.case-box {
			.image {
				height: 200px;
				.yellow-circle {
					top: -20px; width: 85px; height: 85px;
					span {
						padding-top: 30px; font-size: 18px;
					}
				}
				h2 {
					font-size: 16px; padding-top: 55px;
					span { font-size: 14px; }
				}
				p {
					font-size: 14px; margin-top: 10px;
				}
			}
			.image2 {
				height: 200px;
				.yellow-circle {
					top: -20px; width: 85px; height: 85px;
					span {
						padding-top: 30px; font-size: 18px;
					}
				}
				h2 {
					font-size: 16px; padding-top: 55px;
					span { font-size: 14px; }
				}
				p {
					font-size: 14px; margin-top: 10px;
				}
			}
			img {
				width: 50%; display: block; margin: 0 auto;
			}
			.text-box {
				margin: 20px auto 0 auto; width: 80%;
				h3 {
					font-size: 18px; text-align: center;
				}
				p {
					line-height: 28px;
				}
			}
			.link {
				margin: 30px auto 50px auto;
				.small { text-align: center; margin: 5px auto 10px auto; }
			}
		}
		#vol01, #vol02, #vol03, #vol04 {
			img, .text-box, .link, .small, .btn { float: none; }
		}
		.case-link {
			padding: 25px 0;
			li {
				display: block; width: 150px; margin: 0 auto 10px auto;
				&:last-child { margin-right: auto; }
			}
		}
	}
}
@media only screen and(max-width: 500px){
	.installation {
		.under-visual {
			p {
				line-height: 22px;
				.br:after {
					content: "\A"; white-space: pre;
		 		}
			}
		}
		.logo {
		 	display: inline-block; height: 75px; margin-left: 20px;
	 	}
		#installation-nav {
			margin-top: 15px;
		}
	}
}

/* 3 minutes R
--------------------------------------------------*/
.three-min {
	.under-visual {
		h3 { top: 230px; }
	}
	.three-min-box {
		margin-top: 60px;
		img {
			width: 45%; height: auto;
		}
		table {
			width: 45%;
			th {
				font-size: 50px; font-weight: 400; color: @royalBlue; padding-right: 15px;
			}
			.title {
				font-size: 20px; line-height: 25px;
			}
			td {
				font-size: 14px; line-height: 28px;
			}
		}
	}
	.q1, .q3 {
		img { float: left; }
		table { float: right; }
	}
	.q2, .q4 {
		img { float: right; }
		table { float: left; }
	}
	.three-min-link {
		position: relative; text-align: center; padding: 50px 0; border-top: 1px dotted @fontColorMain; margin-top: 50px;
		li {
			display: inline-block; width: 150px; margin-right: 30px;
			&:last-child { margin-right: 0px; }
		}
	}
}

@media only screen and(max-width: 1080px){
	.three-min {
		.under-visual {
			h3 { top: 180px; }
		}
		.three-min-box {
		img { width: 40%; }
		margin-top: 50px;
			table {
				width: 55%;
				th { font-size: 44px; }
				.title { font-size: 18px; }
				td { font-size: 13px; }
			}
		}
		.three-min-link {
			padding: 40px 0; margin-top: 50px;
			li {
				width: 125px; margin-right: 10px;
			}
		}
	}
}

@media only screen and(max-width: 768px){
	.three-min {
		.under-visual {
			h3 { top: 140px; }
		}
	}
}

@media only screen and(max-width: 650px){
	.three-min {
		.three-min-box {
		img {
			width: 80%; display: block; margin: 0 auto;
		}
		margin-top: 40px;
			table {
				width: 80%; display: block; margin: 20px auto 0 auto;
				th { font-size: 36px; }
				.title {
					font-size: 17px; line-height: 20px
				}
				td { line-height: 24px; }
			}
		}
		.q1, .q3 {
			img { float: none; }
			table { float: none; }
		}
		.q2, .q4 {
			img { float: none; }
			table { float: none; }
		}
		.three-min-link {
			padding: 30px 0; margin-top: 40px;
			li {
				width: 150px; margin: 0 auto 10px auto;
			}
		}
	}
}

/* product lineup
--------------------------------------------------*/
.product {
	.under-visual h2 span { color: #FFF; }
	.product-lead, .product-main, .product-sub, .product-contact {
		margin-top: 3px; width: 100%;
	}
	.product-lead {
		height: 175px;
		h3 {
			text-align: center; font-weight: 400; font-size: 22px; line-height: 48px; padding-top: 40px;
			span {
				content: ""; white-space: pre;
			}
		}
	}
	.product-main {
		position: relative; height: 450px;
		h2 {
			position: absolute; font-size: 65px; line-height: 75px; top: 50px; left: 50px;
		}
		h4 {
			position: absolute; font-size: 18px; top: 115px; left: 50px;
		}
		h3 {
			position: absolute; font-size: 26px; line-height: 40px; top: 165px; left: 50px;
		}
		.btn-box {
			position: absolute; top: 260px; left: 50px;
		}
		.btn {
			width: 150px; display: inline-block;
		}
	}
	.CP {
		.product {
			position: absolute; right: -50px; bottom: 20px; height: 90%; width: auto;
		}
		.shade {
			position: absolute; height: 100%; width: 100%; left: 0; background-size: cover; background-position: 0% 50%; z-index: 0;
		}
	}
	.SG {
		h4 { top: 190px; }
		h3 { top: 240px; }
		.btn-box { top: 335px; }
		.shade {
			position: absolute; height: 100%; width: 100%; right: 0; background-size: cover; background-position: 100% 50%; z-index: 0;
		}
		.product {
			position: absolute; right: 80px; top: -10px; height: 105%; width: auto;
		}
		.visual {
			position: absolute; height: 85%; width: auto;
		}
		.logo {
			position: absolute; width: 170px; height: auto; top: 250px; left: 400px;
		}
	}
	.product-sub {
		height: 225px; position: relative;
		span:after {
			content: "\A"; white-space: pre;
		}
		.visual {
			position: absolute; width: 45%; height: 100%;
		}
		.product {
			position: absolute; height: 180px; width: auto; left: 45%; top: 30px;
		}
		h2 {
			font-size: 26px; padding: 20px 0 15px 0; margin-left: 30px;
		}
		p {
			font-size: 17px; font-weight: 400; margin-left: 30px;
		}
	}
	.sub1, .sub3 {
		.visual {
			background-position: 22% 50%; background-size: 150%; background-repeat: no-repeat;
		}
		div { right: 0; }
	}
	.sub2, .sub4 {
		.visual {
			background-position: 78% 50%; background-size: 150%; background-repeat: no-repeat;
		}
		div { left: 0; }
		h2, p, .btn-box { margin-left: 45%; }
		h2 span {
			font-size: 10px; margin-left: 10px;
		}
	}
	.sub2 {
		.visual { background-position: 65% 50%; background-size: cover;}
		p { width: 50%; }
	}
	.sub3 {
		.orange { color: #F08400; }
		h2 { padding-top: 15px; }
		.btn {
		 	width: 220px; margin-left: 30px;
			p {
				margin-left: 22px; margin-top: -2px;
			}
		}
	}
	.sub4 {
		height: auto; padding-bottom:10px;
		.visual { background-position: 85% 50%; background-size: cover;}
		.min {
			font-size: 14px;
			&:after { content: ""; }
		}
		.btn {
		 	width: 240px; display: inline-block;
			p {
				margin-left: 22px; margin-top: -2px;
			}
		}
		.sp-btn { display: none; }
	}
	.product-contact {
		height: 225px; background-color: @yellow;
		img , div {
			display: inline-block; vertical-align: middle; margin: 70px 0 0 28%;
		}
		div { margin-left: 10px; }
		.btn {
	 		background-color: #FFF; width: 190px; margin: 5px 0;
		}
	}
	.youtube-btn {
		background-color: #FF2222; color: #FFF; position: relative;
		img {
			display: inline-block; width: 25px; height: auto; position: absolute; padding: 3px 10px; top: 3px; left: 0;
		}
		p { margin-left: 10px; }
	}
}

@media only screen and(max-width: 1080px){
	.product {
		.product-lead {
			height: 150px;
			h3 {
				font-size: 18px; line-height: 40px;
			}
		}
		.product-main {
			height: 400px;
			.btn { width: 125px; }
		}
		.CP {
			.product { height: 70%; }
		}
		.SG {
			.product { right: 5px; }
		}

		.product-sub {
			height: 200px;
			.visual { width: 40%; }
			.product {
				height: 150px; left: 45%; top: 30px;
			}
			h2 {
				font-size: 22px; padding: 15px 0 15px 0; margin-left: 20px;
			}
			p {
				font-size: 14px; margin-left: 20px;
			}
			.btn {
				p { margin-left: 20px; }
			}
		}
		.youtube-btn {
			img {
				width: 20px; position: absolute; padding: 3px 10px; top: 2px;
			}
		}
		.sub2, .sub4 {
			div { left: 0; }
			h2, p, .btn-box { margin-left: 42%; }
		}
		.sub3 {
			.btn {
				margin-left: 20px; width: 180px;
			}
		}
		.sub4 {
			height: 280px;
			.min { font-size: 12px; }
			.visual { background-position: 95% 50%; }
			.btn { width: 200px; }
		}
		.product-contact {
			height: 200px;
			img , div { margin: 55px 0 0 13%; }
			div { margin-left: 10px; }
		}
	}

}

@media only screen and(max-width: 768px){
	.product {
		.product-lead {
			height: 150px;
			h3 {
				font-size: 16px; line-height: 30px; padding-top: 30px;
				span:after { content: "\A"; }
			}
		}
		.product-main {
			height: 300px;
			.btn { width: 125px; }
			h2 {
				font-size: 45px; line-height: 50px; top: 30px; left: 30px;
			}
			h4 {
				font-size: 16px; top: 75px; left: 30px;
			}
			h3 {
				font-size: 18px; line-height: 30px; top: 105px; left: 30px;
			}
			.btn-box {
				top: 170px; left: 30px;
			}
		}
		.CP {
			.product { height: 80%; }
		}
		.SG {
			h4 { top: 125px; }
			h3 { top: 155px; }
			.product { right: 45px; }
			.btn-box { top: 230px; }
			.logo {
				width: 120px; top: 160px; left: 230px;
			}
		}
		.product-sub {
			.product {
				left: 40%; top: 20px;
			}
			h2 { font-size: 16px; }
			p {
				font-size: 12px; line-height: 18px; width: 35%;
				span:after { content: ""; }
			}
		}
		.sub2 {
			height: 225px;
			h2 {
				line-height: 16px;
				span {
					margin-left: 0;
					&:before {
						content: "\A"; white-space: pre;
					}
				}
			}
			p {
				width: 55%; line-height: 16px;
			}
		}
		.sub3 {
			p .orange:after { content: "\A"; }
			.btn {
				width: 150px;
				p { width: 95%; margin: 0 0 0 15px;}
			}
		}
		.sub4 {
			height: auto; padding-bottom:10px;
			p { width: 55%; }
			.btn {
				width: 180px;
				p { width: 100%; margin: 0 0 0 10px;}
			}
		}
		.product-contact {
			height: 150px;
			img , div { margin: 40px 0 0 15%; }
			img {
				width: 90px; height: auto;
			}
			div {
				margin-left: 10px;
				h2 { font-size: 18px;}
			}
		}
	}
}

@media only screen and(max-width: 650px){
	.product {
		.under-visual h2 span { color: @fontColorMain; }
		.product-main {
			height: 250px;
			.btn {
		 		width: 100px;
				p { margin-left: 22px; }
			}
			h2 {
				font-size: 35px; line-height: 40px; top: 20px; left: 20px;
			}
			h4 {
				font-size: 12px; top: 55px; left: 20px;
			}
			h3 {
				font-size: 15px; line-height: 25px; top: 85px; left: 20px;
			}
			.btn-box {
				top: 140px; left: 20px;
			}
		}
		.CP {
			.product { right: -50px; }
		}
		.SG {
			h4 { top: 105px; }
			h3 { top: 135px; }
			.btn-box { top: 190px; }
			.product { right: 20px; }
			.logo {
				width: 100px; top: 140px; left: 180px;
			}
		}
		.sub2 {
			.visual { background-position: 95% 50%; }
		}
		.sub4 {
			.visual { background-position: 95% 50%; }
		}
		.product-contact {
			height: 120px;
			img , div { margin: 30px 0 0 15%; }
			img { width: 70px; }
			div {
				margin-left: 10px;
				h2 { font-size: 16px;}
			}
		}

	}
}

@media only screen and(max-width: 500px){
	.product {
		.product-lead {
			height: 125px;
			h3 {
				font-size: 14px; line-height: 28px; padding-top: 25px;
			}
		}
		.CP {
			.product { height: 65%; }
		}
		.SG {
			.product {
				height: 90%; top: 15px; right: -5px;
		 	}
		}
		.product-sub {
			.visual { width: 50%; }
			.product { display: none; }
			p { width: 45%; }
		}
		.sub1, .sub3 {
			.visual { background-position: 0% 50%; }
		}
		.sub2 {
			.visual { background-position: 100% 50%; }
			h2, p, .btn-box { margin-left: 50%; }
		}
		.sub4 {
			.visual { background-position: 110% 50%; }
			h2, p, .btn-box { margin-left: 45%; }
			h2, p { letter-spacing: -0.03em; }
			h2 { padding-bottom: 5px; }
			.min { font-size: 10px; }
			.sp-btn { display: inline-block; }
			.btn {
				width: 170px;
				p { margin: 0 0 0 5px; }
			}
		}
		.product-contact {
			height: 170px;
			img , div {
				display: block; margin: 0px auto; padding-top: 20px;
			}
			img { width: 70px; }
			div {
				margin-left: 10px;
				h2 { display: block; text-align: center; font-size: 16px;}
				.btn { margin: 5px auto; }
			}
		}
	}
}

/* company profile
--------------------------------------------------*/
.company {
	.under-visual {
		h2 span { color: #FFF; }
	}
	.philosophy, .principle, .at-last, .info-area, #gmap {
		margin-top: 3px;
	}
	.philosophy {
		height: 450px; background-size: cover; background-position: 50% 50%;
		p {
			text-align: right; font-size: 14px; line-height: 36px; padding: 50px 75px ; color: #FFF; letter-spacing: 0.2em; text-shadow: 0px 0px 3px #222;
		}
	}
	.principle {
		height: 300px; background-size: cover; background-position: 50% 50%;
		h2 {
			font-size: 26px; text-align: center; padding-top: 20px;
		}
		ul {
			text-align: center; padding-top: 40px;
			li {
				display: inline-block; text-align: center; vertical-align: middle; position: relative; padding: 0 1.25%;
				h3 {
					font-size: 200px; color: #FFF; position: absolute; left: 50%; margin-left: -50px; z-index: 1; top: -30px;
				}
				h4 {
					 z-index: 2; position: relative; font-weight: 600; font-size: 22px; line-height: 28px;
				}
				p {
					 z-index: 2; position: relative; font-size: 13px; line-height: 20px; font-weight: 600;
				}
				&:first-child, &:last-child {
					h4 { padding: 20px 0 5px 0; }
				}
				&:nth-child(2), &:nth-child(3) {
					h4 { padding: 35px 0 18px 0; }
				}
			}
		}
	}
	.at-last {
		height: 250px; background-size: cover; background-position: 50% 50%;
		p {
			text-align: center; font-size: 18px; line-height: 46px; color: #FFF; padding-top: 20px; text-shadow: 0px 0px 3px #333;
		}
		.btn {
			width: 155px; margin-top: 15px;
		}
	}
	.info-area {
		height: auto; position: relative;
		.under-wrapper {
			width: 800px; position: relative;
		}
		h2 {
			text-align: center; font-weight: 400; font-size: 26px; padding-bottom: 15px; margin-top: 20px;
		}
		table {
			margin-top: 20px;
			* { font-size: 13px; }
			th, td {
				text-align: left; font-weight: 400; line-height: 22px; padding: 0 15px 10px 0;
			}
		}
		.overview { float: left; }
		.relation { float: right; }
		.access {
			position: relative; font-size: 13px; margin-top: 20px;
			img {
				position: absolute; width: 75px; height: auto; right: 0; top: -35px;
			}
			clear: both; width: 100%; margin: 20px auto; padding-top: 20px;
			ul {
				text-align: center;
				li { display: inline-block; }
			}
		}
	}
	#gmap { height: 350px; }
}

@media only screen and(max-width: 1080px){
	.company {
		.philosophy {
			height: 400px;
			p {
				line-height: 32px; padding: 40px 20px 0 0;
			}
		}
		.principle {
			height: 450px;
			h2 {
				font-size: 26px; padding-top: 20px;
			}
			ul {
				padding-top: 40px; width: 550px; margin: 0 auto;
				li {
					width: 250px; height: 170px;
					h3 { font-size: 180px; }
					h4 {
						font-size: 20px; line-height: 28px;
					}
					p {
						font-size: 13px; line-height: 20px;
					}
					&:first-child, &:last-child {
						h4 { padding: 10px 0 5px 0; }
					}
					&:nth-child(2), &:nth-child(3) {
						h4 { padding: 25px 0 18px 0; }
					}
				}
			}
		}
		.info-area {
			.under-wrapper { width: 70%; }
			.overview { float: none; }
			.relation { float: none; }
			.relation th span:after { content: "　"; }
		}
	}
}
@media only screen and(max-width: 768px){
	.company {
		.philosophy {
			height: 300px;
			p {
				font-size: 12px; line-height: 26px; padding-top: 25px;
			}
		}
		.principle {
			height: 420px;
			h2 {
				font-size: 20px; padding-top: 25px;
			}
			ul {
				padding-top: 30px; width: 85%;
				li {
					h3 { font-size: 180px; }
					h4 {
						font-size: 18px; line-height: 26px;
					}
					p {
						font-size: 13px;
					}
				}
			}
		}
		.at-last {
			height: 200px;
			p {
				font-size: 16px; line-height: 38px;
			}
			.btn { width: 135px; }
		}
		#gmap { height: 300px; }
	}
}
@media only screen and(max-width: 650px){
	.company {
		.under-visual {
			h2 span { color: @fontColorMain; }
		}
		.philosophy {
			background-position: 65% 50%;
			p {
				font-size: 12px; letter-spacing: 0.05em;
			}
		}
		.principle {
			height: 750px;
			ul { width: 75%; }
		}
		.info-area {
			height: auto;
			.under-wrapper { width: 90%; }
			div {
				* { font-size: 12px; }
				h2 {
					font-size: 20px; padding-bottom: 15px;
				}
				th, td {
					line-height: 18px;
				}
			}
			.access {
				img {
					width: 50px; top: -15px;
				}
			}
		}
	}
}
@media only screen and(max-width: 500px){
	.company {
		.principle {
			h2 { font-size: 16px; }
		}
		.at-last {
			p {
				font-size: 12px; line-height: 28px; padding-top: 40px;
			}
			.btn { width: 135px; }
		}
		.info-area {
			div {
				* { font-size: 11px; }
				h2 { font-size: 18px; }
				th, td {
					padding: 0px 10px 5px 0;
				}
			}
		}
		#gmap { height: 250px; }
	}
}

/* detail-cleanpacker
--------------------------------------------------*/
.detail-cp {
	.detail-visual {
		position: relative; height: 800px;
		.product{
			position: absolute; height: 68%; width: auto; right: -200px; top: 100px; z-index: 5;
		}
		h3, h2, h4, h5, p {
			position: relative; margin-left: 50px; z-index: 10;
		}
		h3 {
			font-size: 22px; padding-top: 50px;
		}
		h2 {
			font-size: 76px; padding-top: 10px;
		}
		h4 {
			font-size: 18px; padding-top: 10px;
		}
		h5 {
			font-size: 22px; padding-top: 405px;
		}
		p {
			font-size: 15px; padding-top: 10px; width: 85%;
		}
	}
	.detail-slider-wrapper {
		position: relative; width: 100%; height: 100%;
		.detail-slider-cont {
			position: relative; width: 100%; height: 400px; background-position: 50% 50%; background-size: cover; text-align: center;
			p {
				color: #FFF; font-size: 26px; padding-top: 130px;
			}
			a {
				padding-top: 20px; margin: 0 auto; display: block;
			}
			small {
				color: #FFF; font-size: 15px; padding-top: 10px;
			}
		}
	}
	.bx-controls {
		height: 100%; width: 100%; position: relative;
		.bx-prev, .bx-next {
			position: absolute; width: 60px; height: 80px; top: -240px; background: no-repeat;
		}
		.bx-prev {
		 	left: 50px; background-image: url('../svgs/icon_prevmovie.svg');
	 	}
		.bx-next {
		 	right: 50px; background-image: url('../svgs/icon_nextmovie.svg');
	 	}
	}
	.reason {
		height: 400px;
		h2 {
			font-weight: 400; font-size: 26px; text-align: center; padding-top: 40px;
		}
		ul {
			text-align: center; padding-top: 40px;
			li {
				display: inline-block; text-align: center; position: relative; margin: 0 8px; vertical-align: top;
				small { font-size: 20px; }
				h3 {
					display: block; width: 70px; height: 70px; .rounded-corners(70px); background-color: @yellow; font-size: 58px; margin: 0 auto 15px auto;
				}
				h4 {
				 	font-size: 15px; text-align: left;
			 	}
				p {
					font-size: 13px; line-height: 20px; width: 200px; text-align: left; padding-top: 10px;
				}

			}
		}
	}
	.usecase {
		height: auto; position: relative; background-size: contain;
		h2 {
			font-weight: 400; font-size: 26px; text-align: center; padding-top: 40px;
		}
		h4 {
			font-weight: 400; font-size: 16px; line-height: 30px; text-align: center; padding-top: 10px;
		}
		ul {
			text-align: center; padding-top: 30px; position: relative;
			li {
				display: inline-block; text-align: center; position: relative; margin: 0 10px; vertical-align: top; width: 22%; height: 520px; background-color: #FFF; .rounded-corners(5px);
				h3 {
					font-size: 16px; letter-spacing: -0.025em; padding: 10px 0; margin: 10px; border-bottom: 1px solid #222;
				}
				p {
					font-size: 11px; text-align: left; margin: 10px;
				}
				.small {
					font-size: 9px;
					span { font-weight: bold; }
				}
				img {
					width: 90%; height: auto;
				}
			}
		}
		h5 {
			font-size: 14px; text-align: center; padding: 30px 0;
		}
	}
	.spec {
		h2 {
			font-weight: 400; font-size: 26px; text-align: center; padding: 40px 0;
		}
		.image {
			float: left; width: 47%; position: relative;
			h3 {
				font-size: 20px; font-weight: 400;
			}
			img {
				width: 95%; height: auto; margin-top: 15px;
			}
		}
		.text {
			float: right: width: 47%;
			h4 {
				font-size: 15px; line-height: 26px; padding-bottom: 5px;
			}
			.elect {
				font-size: 13px; padding-bottom: 20px;
				span {
			 		font-weight: 700; margin-right: 15px;
				}
			}
			h3 {
				font-weight: 400; font-size: 22px; padding-bottom: 5px;
			}
			.desc {
				font-size: 13px; line-height: 20px; width: 100%;
			}
		}
		h5 {
			font-weight: 400; font-size: 20px; line-height: 32px; text-align: center; padding: 20px 0;
		}
		ul {
			margin-bottom: 30px; text-align: center;
			li {
			 margin: 0 10px; display: inline-block;
		 	}
			a { width: 150px; }
		}
	}
}

@media only screen and(max-width: 1080px){
	.detail-cp {
		.detail-visual {
			height: 700px;
			.product{
				height: 62%; right: -250px; top: 130px;
			}
			h3, h2, h4, h5, p { margin-left: 30px; }
			h3 { padding-top: 30px; }
			h5 { padding-top: 340px; }
			p {
				font-size: 14px; width: 90%;
			}
		}
		.bx-controls {
			.bx-prev { left: 30px; }
			.bx-next { right: 30px; }
		}
		.reason {
			height: 350px;
			h2 {
				font-size: 22px; padding-top: 30px;
			}
			ul {
				padding-top: 20px;
				li {
					margin: 0 3px;
					small { font-size: 16px; }
					h3 {
						width: 50px; height: 50px; .rounded-corners(50px); font-size: 42px; margin: 0 auto 15px auto;
					}
					h4 { font-size: 12px; }
					p {
						font-size: 12px; width: 140px; padding-top: 5px;
					}
				}
			}
		}
		.usecase {
			h2 {
				font-size: 22px; padding-top: 30px;
			}
			h4 {
				font-size: 14px; line-height: 26px;
			}
			ul {
				padding-top: 20px; width: 550px; margin: 0 auto;
				li {
					margin: 0 5px 10px 5px; height: 500px; width: 45%;
					h3 { font-size: 14px; }
					p { font-size: 11px; }
					.small { font-size: 9px; }
				}
			}
			h5 {
				font-size: 13px; padding: 20px 0;
			}
		}
		.spec {
			h2 {
				font-size: 22px; padding-top: 30px;
			}
			.image {
				width: 60%; float: none; margin: 0 auto;
			}
			.text {
				float: none: width: 47%;
			}
		}
	}
}
@media only screen and(max-width: 768px){
	.detail-cp {
		.detail-visual {
			height: 600px;
			.product{
				height: 62%; right: -100px; top: 90px;
			}
			h3, h2, h4, h5, p { margin-left: 30px; }
			h3 { font-size: 18px; }
			h2 {
		 		font-size: 60px; padding-top: 0px;
		 	}
			h4 {
		 		font-size: 18px; padding-top: 0px;
		 	}
			h5 {
			 	font-size: 16px; padding-top: 270px;
			}
			p { font-size: 13px; }
		}
		.detail-slider-wrapper {
			.detail-slider-cont {
				height: 300px;
				p {
					font-size: 20px; padding-top: 70px;
				}
				a { padding-top: 15px; }
				small { font-size: 13px; }
			}
		}
		.bx-controls {
			.bx-prev, .bx-next {
				width: 60px; height: 80px; top: -190px;
			}
			.bx-prev { left: 20px; }
			.bx-next { right: 20px; }
		}
	}
}
@media only screen and(max-width: 720px){
	.detail-cp {
		.detail-visual {
			.product{
				right: -250px;
			}
		}
	}
}
@media only screen and(max-width: 650px){
	.detail-cp {
		.reason {
			height: auto;
			h2 {
				font-size: 20px; padding-top: 30px;
			}
			ul {
				width: 80%; margin: 0 auto;
				li {
					margin: 0 10px;
					p { width: 180px; }
				}
			}
		}
		.usecase {
			h2 {
				font-size: 20px; padding-top: 30px;
			}
			h4 {
				font-size: 13px; line-height: 26px;
			}
			ul {
				width: 90%; margin: 0 auto;
				li {
					margin: 0 5px 10px 5px; height: 500px; width: 45%;
				}
			}
			h5 { font-size: 12px; }
		}
		.spec {
			h2 {
				font-size: 20px; padding-top: 30px;
			}
			.text {
				h4 {
					font-size: 13px; line-height: 22px;
				}
				.elect {
					font-size: 12px;
					span { margin-right: 10px; }
				}
				h3 { font-size: 16px; }
				.desc { font-size: 12px; }
			}
			h5 {
				font-size: 16px; line-height: 26px;
			}
		}
	}
}
@media only screen and(max-width: 500px){
	.detail-cp {
		.detail-visual {
			height: 400px;
			.product{
				height: 62%; right: -100px; top: 30px;
			}
			h3, h2, h4, h5, p { margin-left: 15px; }
			h3 {
				font-size: 14px; padding-top: 15px;
			}
			h2 { font-size: 40px; }
			h4 { font-size: 14px; }
			h5 {
			 	font-size: 13px; padding-top: 150px;
			}
			p {
				font-size: 10px; width: 90%;
			}
		}
		.detail-slider-wrapper {
			.detail-slider-cont {
				height: 200px;
				p {
					font-size: 15px; padding-top: 45px;
				}
				a {
			 		padding-top: 7px;
					img {
						width: 50px; height: auto;
					}
			 	}
				small { font-size: 12px; }
			}
		}
		.bx-controls {
			.bx-prev, .bx-next {
				width: 40px; height: 60px; top: -130px;
			}
			.bx-prev {
				left: 20px; background-size: 100%;
			}
			.bx-next {
				right: 20px; background-size: 100%;
			}
		}
		.reason {
			h2 { font-size: 16px; }
			ul li { margin: 10px; }
		}
		.usecase {
			h2 { font-size: 16px; }
			h4 {
				font-size: 12px; line-height: 24px; padding: 15px 10% 0 10%;
			}
			ul {
				li {
					margin: 0 5px 10px 5px; height: auto; width: 100%;
				}
			}
			h5 { padding: 15px 10%; }
		}
		.spec {
			.image {
				width: 90%; margin-bottom: 15px;
			}
		}
	}
}
@media only screen and(max-width: 400px){
	.detail-cp {
		.detail-visual {
			.product{
				height: 55%; right: -120px; top: 50px;
			}
		}
	}
}

/* detail-shunkangyouko
--------------------------------------------------*/
.detail-sg {
	.detail-visual {
		position: relative; height: 800px;
		.product{
			position: absolute; height: 95%; width: auto; left: 50%; top: 20px; z-index: 5;
		}
		.hand {
			position: absolute; width: 50%; height: auto;
		}
		h3, h2, h4, .logo, h5, p {
			position: relative; margin-left: 50px; z-index: 10;
		}
		h3 {
			font-size: 22px; padding-top: 150px;
		}
		h2 {
			font-size: 76px; padding-top: 10px;
		}
		h4 { font-size: 18px; }
		.logo { padding-top: 20px; }
		h5 {
			font-size: 22px; padding-top: 50px;
		}
		p {
			font-size: 15px; padding-top: 20px; line-height: 30px;
			span { font-size: 20px; }
		}
	}
	.detail-slider-wrapper {
		position: relative; width: 100%; height: 100%;
		.detail-slider-cont {
			position: relative; width: 100%; height: 400px; background-position: 50% 50%; background-size: cover; text-align: center;
			p {
				color: #FFF; font-size: 26px; padding-top: 130px;
			}
			a {
				padding-top: 20px; margin: 0 auto; display: block;
			}
			small {
				color: #FFF; font-size: 15px; padding-top: 10px;
			}
		}
	}
	.bx-controls {
		height: 100%; width: 100%; position: relative;
		.bx-prev, .bx-next {
			position: absolute; width: 60px; height: 80px; top: -240px; background: no-repeat;
		}
		.bx-prev {
		 	left: 50px; background-image: url('../svgs/icon_prevmovie.svg');
	 	}
		.bx-next {
		 	right: 50px; background-image: url('../svgs/icon_nextmovie.svg');
	 	}
	}
	.reason {
		height: 550px;
		h2 {
			font-weight: 400; font-size: 26px; text-align: center; padding-top: 40px;
		}
		ul {
			text-align: center; padding-top: 40px; width: 800px; margin: 0 auto;
			li {
				display: inline-block; text-align: center; position: relative; margin: 0 5px; vertical-align: top;
				small { font-size: 20px; }
				h3 {
					display: block; width: 70px; height: 70px; .rounded-corners(70px); background-color: @yellow; font-size: 58px; margin: 0 auto 15px auto;
				}
				p {
					font-weight: 700; font-size: 15px; line-height: 26px; width: 250px; text-align: left; padding-top: 10px;
				}

			}
		}
	}
	.qanda {
		background-size: contain;
		h2 {
			font-weight: 400; font-size: 26px; text-align: center; padding-top: 40px;
		}
		h4 {
			font-weight: 400; font-size: 16px; text-align: center; padding: 15px 0;
		}
		div {
			width: 90%; background-color: #FFF; .rounded-corners(5px); margin: 0 auto; text-align: center;
			img {
				width: 250px; height: auto; display: inline-block; vertical-align: top; padding: 25px 15px 25px 25px;
			}
			ul {
				display: inline-block; vertical-align: top; padding: 25px 25px 25px 15px; color: #414141; width: 57%;
				li {
					margin-bottom: 25px; text-align: left;
					&:last-child { margin-bottom: 0; }
					h3 {
						font-size: 20px; padding-bottom: 5px; border-bottom: 1px solid #414141;
					}
					p {
						font-size: 15px; padding-top: 5px;
					}
				}
			}
		}
		h5 {
			font-weight: 400; font-size: 15px; text-align: center; padding: 20px 0;
		}
	}
	.elevation {
		background-size: contain; height: auto; position: relative;
		h2 {
			font-weight: 400; font-size: 26px; text-align: center; padding: 40px 0;
		}
		.cf {
			width: 90%; background-color: #FFF; .rounded-corners(5px); margin: 0 auto 30px auto; text-align: center; position: relative;
			div {
				display: inline-block; width: 30%; padding: 25px 15px 25px 25px;
				.product {
					width: 90%; height: auto; text-align: left;
				}
				p {
					font-size: 15px; line-height: 25px;
				}
		 	}
			.figure {
				display: inline-block; width: 55%; height: auto; padding: 25px 25px 25px 15px;
			}
		}
		span {
			display: block; height: 30px; width: 100%;
		}
	}
	.link {
		h5 {
			font-weight: 400; font-size: 20px; line-height: 32px; text-align: center; padding: 20px 0;
		}
		ul {
			margin-bottom: 30px; text-align: center;
			li {
			 margin: 0 10px; display: inline-block;
		 	}
			a { width: 150px; }
		}
	}
}

@media only screen and(max-width: 1080px){
	.detail-sg {
		.detail-visual {
			height: 700px;
			.product { height: 90%; }
			.hand { width: 60%; }
			h3, h2, h4, .logo, h5, p { margin-left: 30px; }
			h3 { padding-top: 120px; }
			h2 { line-height: 80px; }
			h5 { padding-top: 20px; }
			p {
				font-size: 14px; width: 90%;
			}
		}
		.bx-controls {
			.bx-prev { left: 30px; }
			.bx-next { right: 30px; }
		}
		.reason {
			height: auto;
			h2 {
				font-size: 22px; padding-top: 30px;
			}
			ul {
				padding: 20px 0; width: 550px;
				li {
					margin: 0 3px;
					small { font-size: 16px; }
					h3 {
						width: 50px; height: 50px; .rounded-corners(50px); font-size: 42px; margin: 0 auto 15px auto;
					}
					h4 { font-size: 12px; }
					p {
						font-size: 12px; width: 160px; padding-top: 5px; line-height: 20px;
					}
				}
			}
		}
		.qanda {
			h2 {
				font-size: 22px; padding-top: 30px;
			}
			div {
				img { margin: 20px 20px 0 20px; }
				ul {
					width: 80%; margin: 0px 20px 20px 20px;
					li {
						margin-bottom: 20px; text-align: left;
						h3 { font-size: 16px; }
						p { font-size: 13px; }
					}
				}
			}
		}
		.elevation {
			h2 {
				font-size: 22px; padding-top: 30px;
			}
			.cf {
				div {
				 	width: 25%;
					p { font-size: 13px; }
			 	}
			}
		}
	}
}
@media only screen and(max-width: 768px){
	.detail-sg {
		.detail-visual {
			height: 600px;
			.product { left: 45%; }
			h3 {
			 	font-size: 18px; padding-top: 90px;
			}
			h2 {
		 		font-size: 60px; line-height: 60px; padding-top: 5px;
		 	}
			h4 {
		 		font-size: 18px; padding-top: 0px;
		 	}
			h5 {
			 	font-size: 16px; padding-top: 20px;
			}
			p { font-size: 13px; }
		}
		.detail-slider-wrapper {
			.detail-slider-cont {
				height: 300px;
				p {
					font-size: 20px; padding-top: 70px;
				}
				a { padding-top: 15px; }
				small { font-size: 13px; }
			}
		}
		.bx-controls {
			.bx-prev, .bx-next {
				width: 60px; height: 80px; top: -190px;
			}
			.bx-prev { left: 20px; }
			.bx-next { right: 20px; }
		}
		.elevation {
			h2 { font-size: 16px; }
			.cf {
				div {
					width: 70%;
					.product { width: 150px; }
			 	}
				.figure { width: 95%; padding: 10px;}
			}
			span { height: 10px; }
		}
	}
}

@media only screen and(max-width: 650px){
	.detail-sg {
		.reason {
			height: auto;
			h2 {
				font-size: 20px; padding-top: 30px;
			}
			ul {
				padding: 20px 0; width: 80%; margin: 0 auto;
				li {
					margin: 0 10px;
					p { width: 180px; }
				}
			}
		}
		.link {
			h5 {
				font-size: 16px; line-height: 26px;
			}
		}
		.qanda {
			h2 { font-size: 16px; }
			h5 { font-size: 13px; }
		}
	}
}
@media only screen and(max-width: 500px){
	.detail-sg {
		.detail-visual {
			height: 400px;
			h3, h2, h4, .logo, h5, p { margin-left: 15px; }
			h3 {
				font-size: 14px; padding-top: 45px;
			}
			h2 {
				font-size: 40px; line-height: 40px;
			}
			h4 { font-size: 14px; }
			.logo { width: 100px; }
			h5 {
			 	font-size: 13px; padding-top: 10px;
			}
			p {
				font-size: 11px; width: 95%; line-height: 20px; padding-top: 10px;
				span { font-size: 13px; }
			}
		}
		.detail-slider-wrapper {
			.detail-slider-cont {
				height: 200px;
				p {
					font-size: 15px; padding-top: 45px;
				}
				a {
			 		padding-top: 7px;
					img {
						width: 50px; height: auto;
					}
			 	}
				small { font-size: 12px; }
			}
		}
		.bx-controls {
			.bx-prev, .bx-next {
				width: 40px; height: 60px; top: -130px;
			}
			.bx-prev {
				left: 20px; background-size: 100%;
			}
			.bx-next {
				right: 20px; background-size: 100%;
			}
		}
		.reason {
			h2 { font-size: 16px; }
			ul li { margin: 10px; }
		}
		.qanda {
			h2 { font-size: 16px; }
			h5 { font-size: 13px; }
		}
		.link {
			h5 { font-size: 13px; }
		}
	}
}

/* 404 not found
--------------------------------------------------*/
.not-found {
	height: 100vh;
	div {
		width: 100%; height: 100%; background-size: contain;
		* {
			text-align: center; width: 80%; margin: 0 auto;
		}
		h2 {
			font-size: 120px; padding-top: 50px; line-height: 130px;
		}
		.btn {
			width: 150px; margin-top: 30px;
		}
	}
}
@media only screen and(max-width: 768px){
	.not-found {
		div {
			h2 {
				font-size: 75px; line-height: 80px;
			}
			h3 { font-size: 16px; }
			p { font-size: 13px; }
			.btn { width: 120px; }
		}
	}
}

/* recruit
--------------------------------------------------*/
.recruit {
	div {
		.visual {
			height: 190px; background-size: cover; background-position: 50% 50%;
			h2 {
				text-align: center; color: #FFF; font-size: 26px; font-weight: 500; padding-top: 80px;
			}
		}
		.btn {
			width: 250px; margin-bottom: 30px;
		}
		span:after {
			content: "\A"; white-space: pre;
		}
	}
	.intro {
		p {
			text-align: center; font-size: 14px; line-height: 36px; letter-spacing: 0.1em; padding: 40px 0 25px 0;
			span:after { content: ""; }
		}
	}
	.overview {
		ul {
			width: 900px; text-align: center; margin: 40px auto;
			li {
				display: inline-block; vertical-align: top; width: 260px; border-right: 1px dotted @fontColorMain; padding: 0 20px;
				h3 {
					font-size: 22px; line-height: 32px; padding-bottom: 20px;
				}
				p {
					font-size: 13px; line-height: 22px; text-align: left;
				}
				&:first-child { padding-left: 0px; }
				&:last-child {
					padding-right: 0px; border-right: 0px;
				}
			}
		}
	}
	.recruitment {
		p {
			font-size: 18px; line-height: 40px; padding: 20px 0; text-align: center;
		}
		table, .link-box {
			width: 800px; margin: 0 auto;
		}
		table {
			border-collapse: collapse;
			th, td {
		 		font-size: 17px; border: 1px solid #BBB; padding: 15px; color: #493B34;
			}
			th {
			 	font-weight: 400; background-color: #EFEFEF; letter-spacing: 0.05em; width: 130px;
			}
			td { text-align: left; }
			.top th {
				font-size: 18px; background-color: #493B34; color: #FFF;
			}
		}
		.link-box {
			div {
				float: left; padding-top: 20px;
				.btn { margin: 10px auto; }
				p {
					line-height: 33px; padding-top: 10px;
				}
			}
      .link {
        float: right;
        .youtube-btn {
		      background-color: #FF2222; color: #FFF; position: relative;
        }
        img {
				  width: 250px; height: auto; padding-top: 35px;
        }

      }
		}
	}
}

@media only screen and(max-width: 1080px){
	.recruit {
		div {
			.visual {
				height: 170px;
				h2 {
					font-size: 21px; padding-top: 70px;
				}
			}
			.btn { width: 200px; }
		}
		.intro {
			p {
				line-height: 32px; padding: 30px 0 20px 0;
				span:after { content: "\A"; }
			}
		}
		.overview {
			ul {
				width: 85%;
				li {
					display: block; width: 100%; border-right: 0px; padding: 15px 0; margin: 0 auto; border-bottom: 1px dotted @fontColorMain;
					h3 {
						font-size: 20px; line-height: 30px; padding-bottom: 10px;
					}
					&:last-child {
						border-bottom: 0px; padding-bottom: 0;
					}
				}
			}
		}
		.recruitment {
			p {
				font-size: 16px; line-height: 36px;
			}
			table, .link-box {
				width: 85%;
			}
			table {
				th, td { font-size: 15px; }
				th { width: 100px; }
				.top th { font-size: 16px; }
			}
			.link-box {
				div {
					p {
						font-size: 14px; line-height: 30px;
					}
				}
				img {
					width: 220px; padding-top: 30px;
				}
			}
		}
	}
}

@media only screen and(max-width: 768px){
	.recruit {
		div {
			.visual {
				height: 150px;
				h2 {
					font-size: 18px; padding-top: 65px;
				}
			}
		}
		.recruitment {
			p {
				font-size: 14px; line-height: 30px;
			}
			table {
				th, td { font-size: 13px; }
				th { width: 80px; }
				.top th { font-size: 14px; }
			}
			.link-box {
				div {
					p {
						font-size: 13px; line-height: 28px;
					}
				}
				img {
					width: 200px; padding-top: 35px;
				}
			}
		}
	}
}

@media only screen and(max-width: 500px){
	.recruit {
		div {
			.visual {
				height: 120px;
				h2 {
					font-size: 13px; padding-top: 50px;
				}
			}
		}
		.intro p { font-size: 11px; }
		.overview ul li {
		 	h3 { font-size: 16px; }
		 	p { font-size: 12px; }
		}
		.recruitment {
			p {
				font-size: 11px; line-height: 26px; width: 85%; margin: 0 auto;
			}
			table {
				th, td { font-size: 11px; }
				th { width: 50px; }
				.top th { font-size: 12px; }
			}
			.link-box {
				div {
					float: none;
					p {
						font-size: 11px; line-height: 28px;
					}
				}
				img {
					float: none; width: 200px; padding-top: 35px; margin: 0 auto; display: block
				}
        .link {
					float: none;
        }
			}
		}
	}
}

/* sitemap
--------------------------------------------------*/
.sitemap {
	height: auto;
	div {
		height: 120px; width: 90%;
		* {
			display: inline-block; vertical-align: middle; padding-top: 20px;
		}
		h2 {
			font-size: 30px; margin-left: 20px;
		}
	}
	ul {
		font-weight: 700; font-size: 15px; margin-bottom: 40%;
		li {
			border-bottom: 1px solid #AAAAAA; padding: 10px 5%;
			&:hover {
				background-color: @yellow; color: #FFF;
			}
			a {
				width: 100%; height: 100%; display: block; color: @fontColorMain;
				span { font-size: 9px; }
			}
		}
	}
}

@media only screen and(max-width: 768px){
	.sitemap {
		div {
			height: 90px; width: 85%;
			img {
				width: 50px; height: auto;
			}
			h2 { font-size: 20px; }
		}
		ul {
			font-size: 13px;
			li { padding: 8px 7.5%; }
		}
	}
}

/* information
--------------------------------------------------*/
.information {
	.title {
		margin-top: 50px; margin-bottom: 25px; border-bottom: 1px solid @fontColorMain; padding-bottom: 5px;
		* { color: @royalBlue; }
		h2 {
			font-size: 28px; float: left;
		}
		p {
			font-weight: 700; font-size: 15px; float: right; padding-top: 5px;
		}
	}
	.info-nav {
		ul li { display: inline-block; }
		#info-category-nav {
			font-weight: 700; font-size: 14px; margin-bottom: 30px;
			li {
				padding-right: 20px;
				&:last-child { padding-right: 0; }
			}
			a { color: @fontColorSub; }
		}
		#info-years-nav {
			font-family: "Times New Roman"; font-weight: bold; font-style: italic; font-size: 16px; margin-bottom: 30px;
			li {
				padding-right: 20px;
				&:last-child { padding-right: 0; }
			}
			a { color: @fontColorSub; }
		}
	}
	.info-list {
		li {
			display: block; margin-bottom: 0px;
			* {
				display: inline-block; vertical-align: middle; margin-bottom: 15px;
			}
			a {
				color: @fontColorSub;
				.info-category(@color) {
					width: 80px; height: 20px; color: #FFF; text-align: center; font-size: 12px; font-weight: 600; background-color: @color; .rounded-corners(20px); margin-right: 10px;
				}
				.category-product { .info-category(#C70011); }
				.category-news { .info-category(#D98000); }
				.category-event { .info-category(#7EA619); }
				.category-blog { .info-category(#0080CE); }
				p {
					font-size: 12px;
					span {
						font-family: "Times New Roman"; font-weight: bold; font-style: italic; font-size: 16px; margin-right: 10px; margin-bottom: 0;
					}
				}
				.info-new {
					font-weight: 700; color: #FFF; background-color: #E95504; font-size: 10px; text-align: center; width: 30px; height: 15px; letter-spacing: 0.1em; margin-left: 10px;
				}
			}
		}
	}
	.contents {
		position: relative; color: @fontColorSub; border-top: 1px solid @fontColorMain; padding-top: 5px;
		&:before {
			content: " "; display: block; height: 1px; width: 100%; background-color: @fontColorMain; margin-bottom: 20px;
		}
		p {
			font-size: 14px; line-height: 25px;
		}
		.info-category(@color) {
			width: 80px; height: 20px; color: #FFF; text-align: center; font-size: 12px; font-weight: 600; background-color: @color; .rounded-corners(20px); margin-bottom: 10px;
		}
		.category-product { .info-category(#C70011); }
		.category-news { .info-category(#D98000); }
		.category-event { .info-category(#7EA619); }
		.category-blog { .info-category(#0080CE); }
		.info-title {
			font-size: 14px; line-height: 26px; font-weight: bold; display: inline-block; vertical-align: bottom;
			span {
				font-family: "Times New Roman"; font-weight: bold; font-style: italic; font-size: 16px; margin-right: 10px; margin-bottom: 0;
			}
		}
		.info-new {
			font-weight: 700; color: #FFF; background-color: #E95504; font-size: 10px; text-align: center; width: 30px; height: 15px; letter-spacing: 0.1em; margin: 0 0 5px 10px; display: inline-block;
		}
		img {
			display: block; margin: 20px 0; width: 100%; height: auto;
		}
    .no-width {
      width: auto;
    }
	}
	.controls {
		font-size: 12px; margin-bottom: 40px; margin-top: 30px;
		li {
			display: inline-block;
			a { color: @fontColorMain; }
		}
		.back { margin-right: 15px; }
		.next { margin-left: 15px; }
		.btn {
			width: 140px; margin: 20px 0;
		}
	}
}

@media only screen and(max-width: 768px){
	.information {
		.title { margin-top: 30px; }
		.info-nav {
			#info-category-nav {
				font-size: 12px; margin: 0 auto 15px auto; text-align: center;
			}
			#info-years-nav {
				font-size: 14px; margin: 0 auto 20px auto; text-align: center;
			}
		}
		.info-list {
			li {
				* { margin-bottom: 10px; }
				a {
					.info-category(@color) {
						display: block; width: 60px; height: 15px; font-size: 10px; background-color: @color; .rounded-corners(15px);
					}
					.category-product { .info-category(#C70011); }
					.category-news { .info-category(#D98000); }
					.category-event { .info-category(#7EA619); }
					.category-blog { .info-category(#0080CE); }
					.info-new {
						margin-left: 0px; position: absolute; left: 80px; top: 0px;
					}
				}
			}
		}
		.contents {
			&:before { margin-bottom: 15px; }
			.info-title {
				font-size: 14px; line-height: 26px; font-weight: bold; display: inline-block; vertical-align: bottom;
				span {
					font-family: "Times New Roman"; font-weight: bold; font-style: italic; font-size: 16px; margin-right: 10px; margin-bottom: 0;
				}
			}
			p { font-size: 12px; }
			.info-category(@color) {
				display: block; width: 60px; height: 15px; font-size: 10px; background-color: @color; .rounded-corners(15px);
			}
			.category-product { .info-category(#C70011); }
			.category-news { .info-category(#D98000); }
			.category-event { .info-category(#7EA619); }
			.category-blog { .info-category(#0080CE); }
			img {
				margin: 15px 0; width: 100%;
			}
		}
		.controls {
			margin: 20px auto 25px auto; text-align: center;
			.btn {
				width: 100px; margin: 15px auto;
			}
		}
	}
}

/* contact
--------------------------------------------------*/
.contact {
	h2, h3 {
		font-size: 30px; font-weight: 700;
		a { color: @yellow; }
	}
	p {
		font-size: 15px; line-height: 26px; color: #595757; padding: 15px 0;
		span { color: #E50012; }
	}
	h2 { padding-top: 50px; }
	h3 { padding-left: 15px; }
	img, h3 {
		display: inline-block; vertical-align: middle; padding-top: 30px;
	}
	.mail-form {
		border-top: 1px solid #BBB; margin-top: 30px;
		table {
			width: 100%; border-collapse: collapse;
			th, td {
		 		font-size: 15px; font-weight: 400; border: 1px solid #BBB; padding: 15px; color: #595757;
			}
			th {
				width: 185px; background-color: #E5E5E6;
				span { color: #E50012; }
			}
			td {
				input, textarea { border: 1px solid #BBB; }
				input { width: 100%; }
				textarea {
					width: 100%; height: 200px;
				}
			}
		}
	}
	.form-btn {
		font-size: 20px; letter-spacing: 0.4em; text-align: center; padding-top: 8px; color: @fontColorMain; background-color: @yellow; display: block; width: 225px; height: 37px; margin-bottom: 25px;.rounded-corners(8px);
	}
	.conf {
		.btn {
			width: 200px; margin: 30px 0; display: inline-block;
		}
	}
	.thx, .err {
		.btn {
			width: 200px; margin: 30px 0;
		}
	}
}
@media only screen and(max-width: 768px){
	.contact {
		h2, h3 { font-size: 20px; }
		img {
			height: 75px; width: auto;
		}
		h3 { padding-left: 5px; }
		p {
			font-size: 12px; line-height: 18px; padding: 10px 0;
		}
		h2 { padding-top: 30px; }
		img, h3 {
			display: inline-block; vertical-align: middle; padding-top: 30px;
		}
		.mail-form {
			img {
				width: 75px; height: auto;
			}
			table {
				th, td {
			 		font-size: 12px; padding: 15px;
				}
				th { width: 100px; }
			}
		}
		.form-btn {
			font-size: 16px; padding-top: 2px; width: 150px; height: 30px;
		}
	}
}

/* added170315 productpage & side-nav
--------------------------------------------------*/
header {
	nav {
		.banner {
			width: 100%; height: auto;
			margin-top: 10px;
			img {
				width: 100%; height: auto;
			}
		}
	}
	.banner-sp {
		display: none;
		position: fixed; z-index: 100;
		bottom: 0;
		width: 100%; height: 60px;
		img {
			width: 100%; height: auto;
			position: absolute;
			bottom: 0;
		}
	}
	p.linklang {
		padding:10px 0 0 10px;
		a {
			margin: 5px auto 0 auto; text-align: center; display: inline-block; width: 150px; height: 25px; padding-top: 5px; background-color: @yellow; color: @fontColorMain; font-weight: bold; font-size: 14px; .rounded-corners;
			&:hover {
				background-color: @fontColorMain; color: @yellow;
			}
		}
	}
}
.product { .sg2 {
  .visual {
    background-position: 130% 40%;
    background-size: 150%;
  }
	.product {
		top: 15px; left: 32%;
		height: 200px;
	}
	.btn {
		display: inline-block;
    width: 150px;
		p {
			width: 100%;
			margin-left: 20px;
			margin-top: -2px;
		}
	}
}}
@media only screen and(max-width: 1080px){
	.product { .sg2 {
			.product {
				top: 15px; left: 26%;
				height: 180px;
			}
			.btn {
				p {
					margin-left: 10px;
				}
			}
	}}
}

@media only screen and(max-width: 768px){
	header {
		nav {
			.banner {
				display: none;
			}
		}
		.banner-sp {
			display: block;
		}
	}
	.product {
		.sg2 {
			h2 {
				margin-top: 10px;
			}
			.product {
				left: 22%;
			}
			.btn {
				width: 100px;
				p {
					margin-top: 0px;
				}
			}
		}
	}
}