@charset "UTF-8";
/* CSS Document */
html {
	font-size: 62.5%;
}
body {
	width: 100%;
	height: 100%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 200;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	color: #40220f;
}
h1,h2,h3{
	font-weight: 200;
}

/* ---------------------------------------------------------------------------- /
/   header
/* ----------------------------------------------------------------------------*/
header{
	position: fixed;
	top: 0;
	width: 100%;
	padding: 15px 0;
	background-color: #376c30;
	z-index: 9999;
}
header .logo{
	position: absolute;
	top: 3px;
	left: 3%;
}
header .logo p{
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	color: #fff;
	font-size: 2.4rem;
	line-height: 2;
	letter-spacing: 0.2em;
}
header .logo p.small{
	font-size: 1.5rem;
}
header .logo img{
    margin-top: 5px;
	width: 200px;
}
header .sns{
	position: absolute;
	top: 12px;
	right: 3%;
}
header .sns ul{
	font-size: 0;
}
header .sns li{
	display: inline-block;
	width: 30px;
	margin-right: 5px;
}
header .sns li:last-child{
	margin-right: 0;
}
header .sns li img{
	width: 100%;
}

@media only screen and (max-width: 1024px) {
header{
	padding: 0;
}
header .logo{
	display: none;
}
header .sns{
	top: 13px;
	right: 100px;
}
}

/*  mainimg
/* --------------------------------------------------------------------------- */
.mainimg {
	position: relative;
	margin-top: 56px;
}
.mainimg h1{
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	width: 700px;
	font-size: 4rem;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: center;
}

@media only screen and (max-width: 425px) {
.mainimg h1{
	width: 100%;
	font-size: 1.8rem;
}
}


/*  info_block
/* --------------------------------------------------------------------------- */
.info_block {
	padding: 80px 0;
}
.info_block .info_box {
	padding: 50px 40px;
	margin: 0 auto;
	max-width: 800px;
	border: 1px solid #376c30;
}
.info_block .info_box h2{
	margin-bottom: 30px;
	font-size: 20px;
	text-align: center;
}
.info_block .info_box p{
	line-height: 1.8;
}
@media only screen and (max-width: 425px) {
	.info_block {
		padding: 30px 0;
	}
	.info_block .info_box {
		padding: 40px 20px;
		margin: 0 auto;
		max-width: 800px;
		border: 1px solid #376c30;
	}
}

/*  top_about_area
/* --------------------------------------------------------------------------- */
.top_about_area{
	padding: 50px 0 350px;
	background-image: url(../img/about_bk.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.top_about_area .aboutbox h2{
	margin-bottom: 30px;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
}
.top_about_area .aboutbox h2 span{
	display: inherit;
	font-size: 1.8rem;
	line-height: 1.8;
}
.top_about_area .aboutbox p{
	font-size: 1.6rem;
	font-weight: 200;
	line-height: 1.8;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
}
.top_about_area .aboutbox p br{
	display: block;
}
.top_about_area .aboutbox a{
	display: block;
	width: 265px;
	margin: 100px auto 0;
	padding: 10px 0;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
	border: 1px solid #fff;
}
.top_about_area .aboutbox a:hover{
	color: #376c30;
	background-color: #fff;
	transition: 0.3s;
}

@media only screen and (max-width: 768px) {
.top_about_area{
	padding: 50px 0 150px;
	background-image: url(../img/about_bk.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
}
@media only screen and (max-width: 425px) {
.top_about_area .aboutbox p{
	text-align: left;
}
.top_about_area .aboutbox p br{
	display: none;
}
}


/*  top_product_area
/* --------------------------------------------------------------------------- */
.top_product_area{
	background-color: #376c30;
}
.top_product_area .row{
	margin-left: 0;
	margin-right: 0;
}
.top_product_area .col-md-6{
	padding-left: 0;
	padding-right: 0;
}
.top_product_area .product{
	padding: 100px 30px;
}
.top_product_area .product h2{
	margin-bottom: 50px;
	font-size: 4rem;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
}
.top_product_area .product .txt{
	position: relative;
	padding: 0 20px;
	margin: 0 auto;
	max-width: 300px;
	height: 300px;
}
.top_product_area .product .txt2,
.top_product_area .product .txt3{
	position: relative;
	padding: 0 20px;
	margin: 0 auto;
	max-width: 300px;
	height: 300px;
}
.top_product_area .product .txt h3{
	margin-bottom: 40px;
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
}
.top_product_area .product .txt p,
.top_product_area .product .txt2 p,
.top_product_area .product .txt3 p{
	margin-bottom: 30px;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 0.1em;
	color: #fff;
}
.top_product_area .product .txt a,
.top_product_area .product .txt2 a,
.top_product_area .product .txt3 a{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	width: 210px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
	border: 1px solid #fff;
}
.top_product_area .product .txt a:hover,
.top_product_area .product .txt2 a:hover,
.top_product_area .product .txt3 a:hover{
	color: #376c30;
	background-color: #fff;
	transition: 0.3s;
}

.top_product_area .img1{
	width: 100%;
	height: 600px;
	background-image: url(../img/productimg1.jpg);
	background-size: cover;
	background-position: center;
}
.top_product_area .img2{
	width: 100%;
	height: 600px;
	background-image: url(../img/productimg2.jpg);
	background-size: cover;
	background-position: center;
}
.top_product_area .img3{
	width: 100%;
	height: 600px;
	background-image: url(../img/productimg3.jpg);
	background-size: cover;
	background-position: center;
}

@media only screen and (max-width: 1024px) {
.top_product_area .product .txt h3{
	margin-bottom: 40px;
	font-size: 2rem;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
}
}
@media only screen and (max-width: 425px) {
.top_product_area .product{
	padding: 100px 0 20px;
}
.top_product_area .product .txt{
	padding: 0;
	margin: 0 auto 80px;
	max-width: 100%;
	height: auto;
}
.top_product_area .product .txt2,
.top_product_area .product .txt3{
	padding: 0;
	margin: 0 auto 80px;
	max-width: 100%;
	height: auto;
}
.top_product_area .product .txt a,
.top_product_area .product .txt2 a,
.top_product_area .product .txt3 a{
	position: static;
}
.top_product_area .img1{
	height: 350px;
}
.top_product_area .img2{
	height: 350px;
}
.top_product_area .img3{
	height: 350px;
}
}

/*  hatimania_area
/* --------------------------------------------------------------------------- */
.hatimania_area{
	padding: 130px 0 0;
	background-color: #f8f8e4;
}
.hatimania_area .hatimania{
	padding: 100px 0;
	background-color: #f8b62d;
}
.hatimania_area .hatimania .inner{
	max-width: 1000px;
	margin: 0 auto;
}
.hatimania_area .hatimania .inner h2{
	margin-bottom: 50px;
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	text-align: center;
}
.hatimania_area .hatimania .inner img{
	width: 220px;
	margin: 0 auto 50px;
}
.hatimania_area .hatimania .inner h3{
	margin-bottom: 50px;
	font-size: 4rem;
	letter-spacing: 0.1em;
	text-align: center;
}
.hatimania_area .hatimania .inner p{
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}
.hatimania_area .hatimania .inner p br{
	display: block;
}

.hatimania_area .hatimania .inner a{
	display: block;
	width: 265px;
	margin: 100px auto 0;
	padding: 10px 0;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: #40220f;
	text-align: center;
	border: 1px solid #40220f;
}
.hatimania_area .hatimania .inner a:hover{
	color: #fff;
	background-color: #40220f;
	transition: 0.3s;
}

@media only screen and (max-width: 425px) {
.hatimania_area .hatimania .inner{
	padding: 0 15px;
}
.hatimania_area .hatimania .inner h3{
	text-align: left;
}
.hatimania_area .hatimania .inner p{
	text-align: left;
}
.hatimania_area .hatimania .inner p br{
	display: none;
}
}

/*  top_access_area
/* --------------------------------------------------------------------------- */
.top_access_area{
	padding: 100px 0;
	background-color: #f8f8e4;
}
.top_access_area .box{
	max-width: 1000px;
	margin: 0 auto 80px;
}
.top_access_area .box .txt{
	margin-top: 80px;
}
.top_access_area .box .txt img{
	width: 350px;
	margin-bottom: 50px;
}
.top_access_area .box .txt p.tel{
	padding-left: 60px;
	font-size: 4rem;
	color: #376c30;
	background-image: url(../img/telicon.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: left center;
}
.top_access_area .box .txt p{
	font-size: 1.6rem;
	color: #376c30;
}
.top_access_area .box .txt a{
	display: block;
	width: 265px;
	margin: 80px 0 0;
	padding: 10px 0;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: #376c30;
	text-align: center;
	border: 1px solid #376c30;
}
.top_access_area .box .txt a:hover{
	color: #fff;
	background-color: #376c30;
	transition: 0.3s;
}

.top_access_area .contact{
	max-width: 800px;
	margin: 0 auto 80px;
	padding: 0 50px;
}
.top_access_area .contact h2{
	margin-bottom: 30px;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #376c30;
	text-align: center;
}
.top_access_area .contact h2 span{
	display: inherit;
	font-size: 1.8rem;
	line-height: 1.8;
}
.top_access_area .contact p{
	margin-bottom: 30px;
	font-size: 1.8rem;
	color: #376c30;
	text-align: center;
}

.top_access_area .contact dl{
	margin-bottom: 30px;
}
.top_access_area .contact dt{
	margin-bottom: 5px;
	font-size: 1.6rem;
	font-weight: 200;
	color: #376c30;
}
.top_access_area .contact input{
	width: 100%;
	height: 30px;
	border: 1px solid #376c30;
}
.top_access_area .contact .btn-area input{
	height:auto;
}
.top_access_area .contact textarea{
	width: 100%;
	margin-bottom: 30px;
	border: 1px solid #376c30;
}
.top_access_area .contact .submit_button {
	display: block;
	width: 250px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: #fff;
	background-color: #376c30;
}
.top_access_area .contact .submit_button:hover {
	color: #376c30;
	background-color: #fff;
	transition: 0.3s;
}

.top_access_area .telmail{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
}
.top_access_area .telmail h3{
	padding: 10px 0;
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	color: #376c30;
	text-align: center;
	border-top: 1px solid #376c30;
	border-bottom: 1px solid #376c30;
}
.top_access_area .telmail p.tel{
	width: 330px;
	margin: 30px auto;
	padding-left: 60px;
	font-size: 4rem;
	color: #376c30;
	background-image: url(../img/telicon.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: left center;
}
.top_access_area .telmail p.mail{
	margin: 30px 0;
	font-size: 4rem;
	color: #376c30;
	text-align: center;
}

#contact{
	margin-top:-100px;
	padding-top:100px;
}

@media only screen and (max-width: 425px) {
.top_access_area .col-md-7,
.top_access_area .col-md-5{
	padding-left: 0;
	padding-right: 0;
}
.top_access_area .box .txt a{
	margin: 80px auto 0;
}
.top_access_area .box .txt p.tel{
	font-size: 3rem;
}
.top_access_area .box .txt p.tel a{
	margin: 0;
	padding: 0;
	font-size: 3rem;
	color: #376c30;
	border: none;
	text-align: left;
}
.top_access_area .contact{
	padding: 0;
}
.top_access_area .contact p{
	text-align: left;
}
.top_access_area .telmail{
	padding: 0;
}
.top_access_area .telmail h3{
	font-size: 1.8rem;
}
.top_access_area .telmail p.tel{
	width: 260px;
	font-size: 3rem;
}
.top_access_area .telmail p.tel a{
	font-size: 3rem;
	color: #376c30;
}
.top_access_area .telmail p.mail{
	font-size: 2rem;
}
}
@media only screen and (max-width: 320px) {
.top_access_area .telmail h3{
	font-size: 1.7rem;
}
}


/* ---------------------------------------------------------------------------- /
/   About
/* ----------------------------------------------------------------------------*/
.low_mainimg{
	position: relative;
	margin-top: 56px;
}
.low_mainimg h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	width: 700px;
	font-size: 4rem;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: center;
}
.low_mainimg h1 span{
	display: inherit;
	font-size: 1.8rem;
	line-height: 1.8;
}

@media only screen and (max-width: 425px) {
.low_mainimg h1{
	width: 100%;
	font-size: 1.8rem;
}
}

/*  about_area
/* --------------------------------------------------------------------------- */
.about_area{
	padding: 100px 0;
	background-color: #f8f8e4;
}
.about_area .box{
	max-width: 800px;
	margin: 0 auto;
}
.about_area .box p{
	margin-bottom: 20px;
	font-size: 1.8rem;
	line-height: 2;
	letter-spacing: 0.1em;
	color: #376c30;
}

@media only screen and (max-width: 768px) {
.about_area .box{
	padding: 0 15px;
}
}

/* ---------------------------------------------------------------------------- /
/   Company
/* ----------------------------------------------------------------------------*/
/*  company_area
/* --------------------------------------------------------------------------- */
.company_area{
	padding: 100px 0;
	background-color: #f8f8e4;
}
.company_area .company{
	max-width: 1000px;
	margin: 0 auto 100px;
}
.company_area .company table{
	width: 100%;
	border-collapse: collapse;
}
.company_area .company th{
	width: 20%;
	padding: 10px 3%;
	font-size: 1.8rem;
	font-weight: 200;
	color: #376c30;
	-moz-text-align-last: justify;
	text-align-last: justify;
	text-justify: inter-ideograph;
	border: 1px solid #376c30;
}
.company_area .company td{
	width: 80%;
	padding: 10px 3%;
	font-size: 1.8rem;
	font-weight: 200;
	color: #376c30;
	border: 1px solid #376c30;
}

.company_area .box{
	max-width: 1000px;
	margin: 0 auto;
}
.company_area .box2{
	max-width: 1000px;
	margin: 150px auto 0;
}
.company_area .box h2{
	margin-bottom: 80px;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #376c30;
	text-align: center;
}
.company_area .box h2 span{
	display: inherit;
	font-size: 1.8rem;
	line-height: 1.8;
}
.company_area .box .txt{
	margin-top: 200px;
}
.company_area .box2 .txt{
	margin-top: 20px;
}
.company_area .box .txt img{
	width: 275px;
	margin-bottom: 50px;
}
.company_area .box .txt p.tel{
	padding-left: 60px;
	font-size: 4rem;
	color: #376c30;
	background-image: url(../img/telicon.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: left center;
}
.company_area .box .txt p,
.company_area .box2 .txt p{
	font-size: 1.6rem;
	color: #376c30;
}
.company_area .box2 .txt h3{
	margin: 10px 0 20px;
	font-size: 4rem;
	color: #376c30;
}
.company_area .box2 .txt a{
	display: block;
	width: 265px;
	margin: 60px 0 0;
	padding: 10px 0;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: #376c30;
	text-align: center;
	border: 1px solid #376c30;
}
.company_area .box2 .txt a:hover{
	color: #fff;
	background-color: #376c30;
	transition: 0.3s;
}

@media only screen and (max-width: 768px) {
.company_area .box .txt{
	margin-top: 50px;
}
.company_area .box2{
	margin: 100px auto 0;
}
.company_area .col-md-7,
.company_area .col-md-5,
.company_area .col-sm-6{
	padding-left: 0;
	padding-right: 0;
}
}
@media only screen and (max-width: 425px) {
.company_area .company th{
	display: inline-block;
	width: 100%;
	-moz-text-align-last: auto;
	text-align-last: auto;
	color: #fff;
	background-color: #376c30;
	border-bottom: none;
}
.company_area .company td{
	display: inline-block;
	width: 100%;
	border-bottom: none;
}
.company_area .company td.bo{
	border-bottom: 1px solid #376c30;
}
.company_area .company td a{
	color: #376c30;
}
.company_area .box .txt p.tel{
	width: 260px;
	font-size: 3rem;
}
.company_area .box .txt p.tel a{
	font-size: 3rem;
	color: #376c30;
}
.company_area .box2 .txt p.tel a{
	display: inline;
	margin: 0;
	padding: 0;
	color: #376c30;
	border: none;
	text-align: left;
}
.company_area .box2 .txt p.tel a:hver{
	background-color: none;
}
.company_area .box2 .txt a{
	margin: 60px auto 0;
}
}



/* -------------------------------------- /
/   Footer
/* ------------------------------------- */
.footer{
	padding: 50px 0 20px;
	background-color: #376c30;
	text-align: left;
}
.footer .box{
	max-width: 1000px;
	margin: 0 auto;
}

.footer .box .add img{
	width: 350px;
	margin-bottom: 30px;
}
.footer .box .add p.tel{
	padding-left: 60px;
	font-size: 4rem;
	color: #fff;
	background-image: url(../img/telicon2.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: left center;
}
.footer .box .add p{
	font-size: 1.6rem;
	color: #fff;
}

.footer .footer_menu{
	width: 220px;
	margin-left: auto;
}
.footer .footer_menu li{
	margin-bottom: 5px;
}
.footer .footer_menu li:last-child{
	margin-top: 10px;
}
.footer .footer_menu li a{
	font-size: 1.8rem;
	color: #fff;
}
.footer .footer_menu li a:hover{
	color: #40220f;
	transition: 0.3s;
}
.footer .footer_menu li img{
	width: 193px;
}

.footer .copy{
	margin-top: 50px;
	padding: 10px 0;
	font-size: 1.2rem;
	text-align: center;
	color: #fff;
}

@media (max-width: 425px){
.footer .col-sm-6{
	padding-left: 0;
	padding-right: 0;
}
.footer .box .add{
	margin-bottom: 50px;
}
.footer .box .add p.tel{
	font-size: 3rem;
}
.footer .box .add p.tel a{
	font-size: 3rem;
	color: #fff;
}
.footer .footer_menu{
	margin-left: 0;
}
.footer .copy{
	font-size: 1rem;
}
}

/*---------------------------------  /
/*  page-top
/*--------------------------------- */
#page-top{
	width: 50px;
	display: none;
	position: fixed;
	right: 20px;
	bottom: 30px;
	z-index: 9999;
}
#page-top img{
	width: 100%;
}
#move-page-top{
	color: #fff;
	line-height: 50px;
	text-decoration: none;
	display: block;
	cursor: pointer;
}
@media (max-width: 425px){
#page-top{
	width: 40px;
	right: 10px;
	bottom: 20px;
}
}