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

html { font-size: calc(112.5% + 0.25vw); }

/* ##################################################
	HEADER
################################################## */
nav.navbar,
.navbar-header,
a.navbar-brand,
.nav > li > a { height: 74px; }

nav.navbar { background-color: #FFF; border-bottom: none; }
nav.navbar .container {
	border-bottom: 1px solid #e6e6e6;
	padding: 0;
}
.navbar-header { position: relative; }
a.navbar-brand {
	background-image: url(../img/header_logo.gif);
	background-position: 15px center;
	background-repeat: no-repeat;
	padding: 0px 15px 0px 140px;
	font-size: 1.1em;
	line-height: 74px;
	font-weight: bold;
	color: #4d4d4d!important;
}
a.navbar-brand:hover,
a.navbar-brand:focus { color: #999!important; }

.navbar-nav > li { width: 91px; margin: 0 0 0 1px; float: left; }

.navbar-nav > li > a {
	padding: 0px 15px 0px 15px;
	text-align: center;
	font-size: 1.0em;
	line-height: 74px;
    background-image: linear-gradient(to bottom, #ffffff 0%, #e0f1e6 100%);
    background-repeat: repeat-x;
	color: #4d4d4d!important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a {
	text-decoration: none;
    background-image: linear-gradient(to bottom, #e0f1e6 0%, #70bf8c 100%);
	color: #FFF!important;
	font-weight: bold;
}

.btnMenu { display: none; }
.btnMenu.btnOn { background-position:left bottom; }

			@media (max-width: 991px) { /* sm以下（xs/sm）に適用 */

				#navbar { margin: 0!important; padding: 0!important; border-top:1px solid #e6e6e6; }
				.btnMenu {
					display: block;
					position:absolute;
					top:20px; right:18px;
					width:44px;
					height:34px;
					background-image:url(../img/btn_menu.gif);
					background-position:left top;
					background-repeat:no-repeat;
					background-size:44px auto;
					cursor:pointer;
					font: 0/0 a;
					text-shadow: none;
					color: transparent;
				}
				
				ul.navbar-nav { width:100%!important; margin: 0; background: #FFF; }
				ul.navbar-nav > li { width:calc(100% / 5 - 1px)!important; }
				ul.navbar-nav > li > a {
					font-size: 2vw;
					padding: 0px 5px 0px 5px;
					line-height: 74px;
				}
				a.navbar-brand {
					background-position: 30px center;
					background-size: 12vw auto;
					padding:  0px 0px 0px 19vw;
					font-size: 2vw;
				}
				
				/*テスト用
				section#secA1 > .container { background-image: none; }
				section#secA1 img,
				section#secA2 img { display: none; }
				*/
			}

			@media (max-width: 767px) { /* xsのみに適用 */
				.btnMenu { top:20px; right:20px; }
				ul.navbar-nav > li > a {
					font-size: 4vw;
					padding: 0px 2px 0px 2px;
				}
				.btnMenu {
					width:35px;
					height:30px;
					background-size:35px 60px;
				}
				a.navbar-brand {
					background-position: 20px center;
					background-size: 15vw auto;
					padding:  0px 0px 0px 24vw;
					font-size: 3vw;
				}
				
			}


/* ##################################################
	common / 共通
################################################## */
section { padding-bottom: 30px; }

p { font-size: 1.2em; }

h2 {
	font-size: 3em;
	text-align: center;
	font-weight: normal;
	line-height: 0.6em;
	margin: 40px 0 30px;
}
h2 > span {
	font-size: 0.5em;
	color: #666;
}
h2 > span:before {
	content: "\A" ;
	white-space: pre ;
}
	
			@media (max-width: 767px) { /* xsのみに適用 */
				h2 { font-size: 2em; }
				h2 > span { font-size: 0.5em; }
			}


/* ##################################################
	section / #secA / トップ
################################################## */

/* #secA1 */
section#secA1 {
	padding: 90px 0 0 ;
}

section#secA1 > .container {
	text-align: right;
	background-image: url(../img/img_main-graphic.png);
	background-position: 15px top;
	background-repeat: no-repeat;
}

/* #secA2 */
section#secA2 {
	background: #4cb773;
	color: #FFF;
}

.whBox { border: 1px solid #FFF; }
.grBox { border: 1px solid #4cb773; }
.whBox, .grBox { padding: 10px; font-size: 1.4em; }


			@media (max-width: 991px) { /* sm以下（xs/sm）に適用 */
				section#secA1 > .container {
					background-position: -20px top;
				}
				section#secA1 > .container > img { margin-right: -20px; }
				section#secA2 > .container > img { margin-left: -35px; }
			}

			@media (max-width: 767px) { /* xsのみに適用 */
				.whBox, .grBox { font-size: 1em; }
				.grBox span { transform: rotate(90deg); }
				section#secA1 > .container {
					background-size: 85vw auto ;
					/*background-size: auto 156px;*/
					background-position: -15px top;
					padding: 0;
				}
				section#secA1 > .container > img { margin-right: 0px; }
				section#secA1 > .container > img,
				section#secA2 > .container > img { width: 80vw; height: auto; /*width: 258px; height: auto;*/ }
				section#secA2 > .container > img { margin-left: -27px; }
			}

/* ##################################################
	section / #secB / 理 念
################################################## */
section#secB {
	background-image: url(../img/img_sec-b_bk.jpg);
	background-position: center bottom;
	background-size: cover;
	background-attachment:fixed;
}

section#secB > .container {
	background-image: url(../img/img_sec-b_arrow.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}

section#secB .box {
	background: rgba(255,255,255,0.75);
	padding: 15px 10px 5px;
	margin-bottom: 50px;
	border: 2px solid #4cb773;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

section#secB .box p {
	font-size: 1.5em;
	font-family: "ＭＳ Ｐ明朝", MS PMincho,"ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, serif;
	line-height: 1.2em;
}
section#secB .box p:first-child {
	color: #127e2a;
}

section#secB > .container > h2 {
	margin: 90px 0 30px;
}
			@media (max-width: 991px) { /* sm以下（xs/sm）に適用 */
					section#secB {
						background-attachment:scroll;
					}
			}
			@media (max-width: 767px) { /* xsに適用 */
				section#secB .box p {
					font-size: 1.1em;
				}
				section#secB > .container > h2 {
					margin: 40px 0 30px;
				}
				section#secB .box {
					margin-bottom: 25px;
				}
			}



/* ##################################################
	section / #secC / 業務内容
################################################## */
.card {
	width:calc((100% + 20px) / 3 - 20px);
	height:			188px;
	overflow:		hidden;
	margin:			0 20px 20px 0;
	position:		relative;
	padding: 5px 15px 20px;
	box-shadow:0px 0px 6px 3px #f0f0f0;
	-moz-box-shadow:0px 0px 6px 3px #f0f0f0;
	-webkit-box-shadow:0px 0px 6px 3px #f0f0f0;
	float: left;
}
.card:nth-of-type(3n) { margin-right: 0;}

.card a:hover { text-decoration: none; }

.card > a  > h4 {
	font-size: 1.2em;
	line-height: 1.4em;
	text-align: center;
	height: 2.2em;
}
.card > a  > p {
	font-size: 1em;
	text-align: left;
	color: #4d4d4d;
}

			@media (max-width: 767px) { /* xsのみに適用 */
				.cardWrapper { padding: 0; }
				.card {
					width:calc((100% + 20px) / 2 - 20px);
					padding: 0px 10px 20px;
				}
				.card:nth-of-type(3n) { margin-right: 20px;}
				.card:nth-of-type(2n) { margin-right: 0;}
				.card > a  > h4 {
					font-size: 0.9em;
					/*font-size: 3.8vw;*/
				}.card > a  > p {
					font-size: 0.9em;
					/*font-size: 3.8vw;*/
				}
			}

.card .caption {
	width:			100%;
	height:			100%;
	visibility:		hidden;
	font-size:		130%;
	color:			#fff;
	top:			0;
	left:			0;
	position:		absolute;
	text-align:		center;
	-webkit-transition:	all 0.4s step-end;
	transition:		all 0.4s step-end;
}
.card:hover .caption {
	visibility:		visible;
}
.card .caption p {
	font-size:		1.6em;
	padding-top:		75px;
	color:			#fff;
	opacity:		0;
}
.card:hover .caption p {
	opacity:		1;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
               0px 8px 13px rgba(0,0,0,0.1),
               0px 18px 23px rgba(0,0,0,0.1);
}
.card .mask1, .card .mask2 {
	width:			100%;
	height:			50%;
	position:		absolute;
	left:			0;
	background-color:	rgba(76,183,115,0.5);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.card .mask1 { top:-50%; }
.card:hover .mask1 { top:0; }
.card .mask2 { bottom:-50%; }
.card:hover .mask2 { bottom:0;}

.remodal h1 {
	font-size: 1.4em;
	border-bottom: 1px solid #999;
	padding-bottom: 10px;
}
.remodal p { text-align: left; margin-bottom: 15px; }
.remodal ul { margin: 0; }
.remodal ul li {
	margin-bottom: 10px;
	padding-left: 15px;
	list-style: none;
	background: url(../img/list_bullet.gif) no-repeat left 5px;
}
.remodal ul li p {
	font-size: 12px;
	color: #4d4d4d;
	margin: 5px 0 2px;
	padding: 4px 2px 0px ;
	border-bottom: 1px dotted #ccc;
}
.remodal ul li ul { margin: 0 0 20px; padding: 0; }
.remodal ul li ul li {
	font-size: 12px;
	color: #4d4d4d;
	margin-bottom: 1px;
	padding: 5px 0px 5px 5px;
	list-style: none;
	background-image: none;
	border-bottom: 1px dotted #ccc;
}


/* ##################################################
	section / #secD / 製 品
################################################## */
section#secD {
	background: #4cb773;
	color: #FFF;
}

section#secD > .container > h2 > span { color: #FFF; }

a.dataDL {
	display: block;
	padding: 15px;
	background: url(../img/pattern_01.gif);
	text-align: center;
	font-size: 1.2em;
	color: #000;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
a.dataDL:hover,
a.dataDL.btnOn { background: url(../img/pattern_01_on.gif); }



/* ##################################################
	section / #secE / 会社概要
################################################## */
section#secE > .container > .boxWp { position: relative; }
section#secE > .container > .boxWp > .box {
	border-bottom: 1px solid #ccc;
	padding:10px 0; 
}
section#secE > .container > .boxWp > .box > div:first-child {
	padding-bottom: 5px;
	color: #666666;
}
section#secE > .container > .boxWp > img.blocks {
	position: absolute;
	top:0; right: 0;
	z-index: 999;
}
			@media (max-width: 991px) { /* sm以下（xs/sm）に適用 */
				section#secE > .container > .boxWp > img.blocks {
					display: none;
				}
			}
			@media (min-width: 768px) { /* sm以上（sm/md/lg）に適用 */
				section#secE > .container > .boxWp > .box > div > span:before {
					content: "\A" ;
					white-space: pre ;
				}
			}

/* ##################################################
	section / #secF / 案内図
################################################## */
section#secF {
	background: #e0e0e0;
}

#mapArea {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#mapArea p {
	font-size: 1.1em;
}

/* ##################################################
	Footer
################################################## */
footer {
	padding: 30px 0 ;
	background: #333333;
	color: #FFF;
}
footer img { margin-bottom: 15px; }
footer p { font-size: 1.1em; }
footer p:last-child { font-size: 0.8em; }




	
/* =================================================

以下は微調整ツール

==================================================== */

hr { margin:5px 0; visibility:hidden; clear:both; } 

.noborder { border:none; }

.rc_10 {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.rc_5 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}



/* margin */
.mt0{ margin-top:0px!important;} .mb0{ margin-bottom:0px!important;} .ml0{ margin-left:0px!important;} .mr0{ margin-right:0px!important;}
.mt1{ margin-top:1px!important;} .mb1{ margin-bottom:1px!important;} .ml1{ margin-left:1px!important;} .mr1{ margin-right:1px!important;}
.mt2{ margin-top:2px!important;} .mb2{ margin-bottom:2px!important;} .ml2{ margin-left:2px!important;} .mr2{ margin-right:2px!important;}
.mt3{ margin-top:3px!important;} .mb3{ margin-bottom:3px!important;} .ml3{ margin-left:3px!important;} .mr3{ margin-right:3px!important;}
.mt4{ margin-top:4px!important;} .mb4{ margin-bottom:4px!important;} .ml4{ margin-left:4px!important;} .mr4{ margin-right:4px!important;}
.mt5{ margin-top:5px!important;} .mb5{ margin-bottom:5px!important;} .ml5{ margin-left:5px!important;} .mr5{ margin-right:5px!important;}
.mt10{ margin-top:10px!important;} .mb10{ margin-bottom:10px!important;} .ml10{ margin-left:10px!important;} .mr10{ margin-right:10px!important;}
.mt15{ margin-top:15px!important;} .mb15{ margin-bottom:15px!important;} .ml15{ margin-left:15px!important;} .mr15{ margin-right:15px!important;}
.mt20{ margin-top:20px!important;} .mb20{ margin-bottom:20px!important;} .ml20{ margin-left:20px!important;} .mr20{ margin-right:20px!important;}
.mt25{ margin-top:25px!important;} .mb25{ margin-bottom:25px!important;} .ml25{ margin-left:25px!important;} .mr25{ margin-right:25px!important;}
.mt30{ margin-top:30px!important;} .mb30{ margin-bottom:30px!important;} .ml30{ margin-left:30px!important;} .mr30{ margin-right:30px!important;}
.mt35{ margin-top:35px!important;} .mb35{ margin-bottom:35px!important;} .ml35{ margin-left:35px!important;} .mr35{ margin-right:35px!important;}
.mt40{ margin-top:40px!important;} .mb40{ margin-bottom:40px!important;} .ml40{ margin-left:40px!important;} .mr40{ margin-right:40px!important;}
.mt45{ margin-top:45px!important;} .mb45{ margin-bottom:45px!important;} .ml45{ margin-left:45px!important;} .mr45{ margin-right:45px!important;}
.mt50{ margin-top:50px!important;} .mb50{ margin-bottom:50px!important;} .ml50{ margin-left:50px!important;} .mr50{ margin-right:50px!important;}
.mt60{ margin-top:60px!important;} .mb60{ margin-bottom:60px!important;} .ml60{ margin-left:60px!important;} .mr60{ margin-right:60px!important;}
.mt100{ margin-top:100px!important;} .mb100{ margin-bottom:100px!important;} .ml100{ margin-left:100px!important;} .mr100{ margin-right:100px!important;}
.mt150{ margin-top:150px!important;} .mb150{ margin-bottom:150px!important;} .ml150{ margin-left:150px!important;} .mr150{ margin-right:150px!important;}
.mt200{ margin-top:200px!important;} .mb200{ margin-bottom:200px!important;} .ml200{ margin-left:200px!important;} .mr200{ margin-right:200px!important;}
.mt250{ margin-top:250px!important;} .mb250{ margin-bottom:250px!important;} .ml250{ margin-left:250px!important;} .mr250{ margin-right:250px!important;}
.mt300{ margin-top:300px!important;} .mb300{ margin-bottom:300px!important;} .ml300{ margin-left:300px!important;} .mr300{ margin-right:300px!important;}

/* padding */
.pl0 { padding-left:0!important; } .pr0 { padding-right:0!important; } .pt0 { padding-top:0!important; } .pb0 { padding-bottom:0!important; }
.pl1 { padding-left:1px!important; } .pr1 { padding-right:1px!important; } .pt1 { padding-top:1px!important; } .pb1 { padding-bottom:1px!important; }
.pl2 { padding-left:2px!important; } .pr2 { padding-right:2px!important; } .pt2 { padding-top:2px!important; } .pb2 { padding-bottom:2px!important; }
.pl3 { padding-left:3px!important; } .pr3 { padding-right:3px!important; } .pt3 { padding-top:3px!important; } .pb3 { padding-bottom:3px!important; }
.pl4 { padding-left:4px!important; } .pr4 { padding-right:4px!important; } .pt4 { padding-top:4px!important; } .pb4 { padding-bottom:4px!important; }
.pl5 { padding-left:5px!important; } .pr5 { padding-right:5px!important; } .pt5 { padding-top:5px!important; } .pb5 { padding-bottom:5px!important; }
.pl10 { padding-left:10px!important; } .pr10 { padding-right:10px!important; } .pt10 { padding-top:10px!important; } .pb10 { padding-bottom:10px!important; }
.pl15 { padding-left:15px!important; } .pr15 { padding-right:15px!important; } .pt15 { padding-top:15px!important; } .pb15 { padding-bottom:15px!important; }
.pl20 { padding-left:20px!important; } .pr20 { padding-right:20px!important; } .pt20 { padding-top:20px!important; } .pb20 { padding-bottom:20px!important; }
.pl25 { padding-left:25px!important; } .pr25 { padding-right:25px!important; } .pt25 { padding-top:25px!important; } .pb25 { padding-bottom:25px!important; }
.pl30 { padding-left:30px!important; } .pr30 { padding-right:30px!important; } .pt30 { padding-top:30px!important; } .pb30 { padding-bottom:30px!important; }
.pl35 { padding-left:35px!important; } .pr35 { padding-right:35px!important; } .pt35 { padding-top:35px!important; } .pb35 { padding-bottom:35px!important; }
.pl40 { padding-left:40px!important; } .pr40 { padding-right:40px!important; } .pt40 { padding-top:40px!important; } .pb40 { padding-bottom:40px!important; }
.pl45 { padding-left:45px!important; } .pr45 { padding-right:45px!important; } .pt45 { padding-top:45px!important; } .pb45 { padding-bottom:45px!important; }
.pl50 { padding-left:50px!important; } .pr50 { padding-right:50px!important; } .pt50 { padding-top:50px!important; } .pb50 { padding-bottom:50px!important; }
.pl60 { padding-left:60px!important; } .pr60 { padding-right:60px!important; } .pt60 { padding-top:60px!important; } .pb60 { padding-bottom:60px!important; }
.pl70 { padding-left:70px!important; } .pr70 { padding-right:70px!important; } .pt70 { padding-top:70px!important; } .pb70 { padding-bottom:70px!important; }
.pl80 { padding-left:80px!important; } .pr80 { padding-right:80px!important; } .pt80 { padding-top:80px!important; } .pb80 { padding-bottom:80px!important; }
.pl90 { padding-left:90px!important; } .pr90 { padding-right:90px!important; } .pt90 { padding-top:90px!important; } .pb90 { padding-bottom:90px!important; }
.pl100 { padding-left:100px!important; } .pr100 { padding-right:100px!important; } .pt100 { padding-top:100px!important; } .pb100 { padding-bottom:100px!important; }


.onlyPC { display: block; }
.onlySP { display: none; }

/* MediaQuery */
@media (max-width: 991px) { /* sm以下（xs/sm）に適用 */
	
}
@media (max-width: 1199px) { /* md以下（xs/sm/md）に適用 */
	
	
}
@media (max-width: 767px) { /* xsのみに適用 */
	.xs { display: block; }
	.sm { display: none; }
	.md { display: none; }
	.lg { display: none; }
	
	.onlyPC { display: none; }
	.onlySP { display: block; }
	
}
@media (min-width: 768px) { /* sm以上（sm/md/lg）に適用 */
	.xs { display: none; }
	.sm { display: block; }
	.md { display: none; }
	.lg { display: none; }
	
}
@media (min-width: 992px) { /* md以上（md/lg）に適用 */
	.xs { display: none; }
	.sm { display: none; }
	.md { display: block; }
	.lg { display: none; }
	
}
@media (min-width: 1200px) { /* lgのみに適用 */
	.xs { display: none; }
	.sm { display: none; }
	.md { display: none; }
	.lg { display: block; }
}