@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : underline; color: #000; }
a:hover{ color: #000; text-decoration: none;}
a:hover img{
	opacity: 0.6;
  	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)";
}
	
ul, ol { list-style : none}
img { vertical-align : middle}

/* @end */


/* @group Fluid-img */

img { max-width : 100%}

/* @end */


/* @group HTML */

html {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight:500;
font-size : 100%; /*16px*/
line-height : 1.5;
letter-spacing: 0.1em;}
body { width: 100%;}

/* @end */

/* @group Heading */

h1 {
font-size : 1.25rem; /* 20px */
line-height : 1 /* 20px */ } 

h2 {
font-size : 1em; /* 16px */
line-height : 1.3333 /* 48px */ } 

h3 {
font-size : 0.875em; /* 14px */
line-height : 1; /* 24px */
margin-bottom : 1em } 

.red{ color: #fd0000;}

/* @end */

/* @group Header */
header{ width: 100%; background: #fffaed; }
header .hgr{ width: 93.75%; margin:0 auto; overflow: hidden; }
header .hgr h1{ float: left; width: 50%; padding: 26px 0}
header .hgr nav{ width:54px; float: right; margin-top: 15px; text-align: center;}
header .hgr .tgm{ font-size: 0.6875rem}
header .hgr .tgm a{ margin-bottom: 2px}
/* @end */

/* @group ハンバーガーメニュー */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 50px;
  height: 36px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #4b8b4b;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 16px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(16px) rotate(-45deg);
  transform: translateY(16px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  left: 200%;
  opacity: 0;
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-18px) rotate(45deg);
  transform: translateY(-16px) rotate(45deg);
}

/* @end */

/* @group ヘッダーメニュー　dropdown-menu */
.smp-dpmenu{ 
				position:fixed; 
				top: 80px;
    			right: 0;
    			bottom: 0;
    			left: 0;
				z-index:2;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				-webkit-transition-duration:1s;background:#fffaed;padding:0;max-height:0;
				 text-align: left; font-size: 1.125rem;
}
.smp-dpmenu.open{padding:5px 0 0 0; max-height:14em;}
.dropdown-menu{  overflow:hidden; width:100%; height: 100%; overflow-y: auto;  }

.dropdown-menu li{ line-height:1em;list-style:none; border-bottom: #999 dotted 1px;  padding:26px 3%; overflow: hidden; margin-left: 0; }
.dropdown-menu li:first-child{ border-top: 1px solid #ccc;}
.dropdown-menu li a{display:block;width:100%;height:100%;color:#000;  padding-left: 25px; float: left; width: 100%; text-decoration: none;}
.dropdown-menu li a.btn{ float: left; background: none; width: 46%; padding-left: 0px; text-align: right;}
.dropdown-menu li.dr-title{ border-bottom: 4px solid #fbf3d4; font-size: 1.25rem; padding: 30px 3%;}
.dropdown-menu li.dr-title a{ color: #4b8b4b; background: none; padding-left: 0;}

       
/* @end */

/* @group Main Contents HOME */

main{ width: 100%; display: block;}
.main-img{ width: 100%; background: url(images/main-img.jpg) no-repeat left top; background-size: cover; text-align: center; padding: 35px 0 }
.main-img h1{ padding-top: 20px;}
.main-img h3{ font-size: 1rem; padding-top: 20px; color: #3e3717}
.main-img h4{ font-size: 1.125rem; padding-top: 10px; color: #1d611d}
.main-img p{ font-size: 1rem; padding-top: 20px}

.concept{ width: 100%; }
.concept h2 img{ width: 100% }
.concept .concept-box{ background: #7dc144; text-align: center;}
.concept .concept-box h1{ border-bottom: 1px solid #fff; padding: 30px 0; width: 100%;}
.concept .concept-box h1 img{ width: 80%}
.concept .concept-box p{ padding: 30px 0;}
.concept .concept-box p img{ width: 90%}

.banner-area{ width: 93.75%; margin: 30px auto;}
.banner-area .two-list{ overflow: hidden; width: 100%;}
.banner-area .two-list a{ width: 49%; float: left; margin-right: 2%; display: block;}
.banner-area .two-list a:nth-child(2n){ margin-right: 0;}
.banner-area img{ margin: 10px 0; width: 100%}
.sub-read img{ margin: 10px 0; width: 100%}
.sub-read .attention{ width: 93.75%; margin: 10px auto;}

h1.green-line-blownicon{ border-bottom: 5px solid #99d681; padding-bottom: 18px; position: relative; }
h1.green-line-blownicon:after{
position: absolute;
content: " ";
display: block;
border-bottom: solid 5px #6c543a;
bottom: -5px;
width: 88px;
left: 0;
}


.staff{ width: 93.75%; margin: 40px auto;}
.staff-box{ margin-top: 20px; overflow: hidden;}
.staff-box .staff-in{ width: 49%; float: left; margin-right: 2%}
.staff-box .staff-in:nth-child(2n){margin-right: 0;}
.staff-box .staff-in h2{ font-size:0.875rem; color: #6c543a; margin-top: 20px; text-align: center;}
.staff-box .staff-in h1{ font-size: 1.375rem; margin-top: 20px; padding-bottom: 20px; padding-top: 20px; border-bottom: 1px dotted #000; border-top: 1px dotted #000; text-align: center; line-height: 120%;}
.staff-box .staff-in h1 span{ color: #a3a3a3; font-size: 0.875rem; display: block; }

.company{ width: 93.75%; margin: 0 auto;}
h1.company-line:after{ width: 45px;}
.company h2{ font-size: 1.125rem; margin-bottom: 10px; margin-top: 20px;}
.company p{ line-height: 170%; font-size: 1rem;}
.infomation{ width: 100%; overflow: hidden; margin-top: 40px}
.infomation .info-box{ width: 49%; float: left; margin-right: 2%}
.infomation .info-box:nth-child(2n){margin-right: 0}
.dot-underline{ color: #469627; font-size: 1.125rem; border-bottom: 1px dashed #000; padding-bottom: 10px; margin-bottom: 10px; }
.map-box{ width: 100%; margin-top: 40px}
h2.underline-green{ margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #99d681;}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 30px 0 0 0
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.maptxt{ margin-bottom: 30px; text-align: right}

footer{ background: #fff9de; padding: 45px 0; text-align: center; margin-top: 70px}

/* @end */

/* @group Main Contents Under  */

main.under{ width: 100%; margin: 50px 0}
ul{ width: 100%; }
ul li{ list-style: disc; margin-left: 5%; line-height: 160%; font-size: 1rem}

/* price  */
.price{ width: 93.75%; margin: 0 auto;}
.pricebox{ margin-top: 40px}
.pricebox h2{ color: #000; font-size: 1rem}
.pricebox h2 span{ font-size: 0.875rem}
p.attention-brown-box{ border-bottom: 1px dashed #a08400; border-top: 1px dashed #a08400; padding: 20px 0; text-align: left; color:#a08400; font-size: 1rem; margin: 50px 0 20px }
.price p{ font-size: 1rem}
.area{ margin: 40px auto; width: 93.75%}
h1.pricetitle:after{ width: 130px;}

/* voice  */
.voice p{ text-align: center;}
h1.voice-title{ color: #4b8b4b; font-size: 1.5625rem; margin-bottom: 20px; text-align: center; line-height: 150%}
.pattern{ background: url(images/pattern-bg.png); padding: 30px 3%; overflow: hidden; margin-top: 50px}
.pattern .detail{  width: 40%; float: left;}
.pickup{ font-size: 0.875rem; color: #fff; font-weight: bold; background: #ff4d2a; padding: 8px 10px; border-radius: 4px; display: inline; }
.pattern .detail h2{ font-size:1.4375rem; margin-top: 20px; margin-bottom: 10px }
.pattern .detail p{ text-align: left; font-size: 0.875rem; margin-top: 10px}
.pattern .paper{ float: right; width: 55%}
.voice-box{ width: 93.75%; margin: 40px auto;}
.voice-box h2{ font-size: 1.3125rem;}
.voice-box p{ text-align: left}
.voice-box p span.bold{ font-weight: bold;}


/* recruit  */
table{ width: 93.75%; margin: 30px auto; font-size: 0.875rem}
table, th,td{  
	border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
padding: 15px 2%;
text-align: left;}
table th{ width: 35%}

/* @end */