@charset "UTF-8";
/* ----------------------------------------------------------------------------------------------------
*  基本情報
* --------------------------------------------------------------------------------------------------*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);	

html,body{	height:100%;}
html{
	font-size:62.5%;
    overflow-y: scroll;
}

body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
	list-style-type: none;
	font-style: normal;
	font-weight: normal;
	font-family : "Noto Sans Japanese",sans-serif;
	text-align: left;
	color:#003F23;
	font-size: 1.4rem;
}

body a {
	text-decoration:none;
	color:#003F23;
}

body{min-width:1080px;}
img{vertical-align: bottom;}
*{box-sizing: border-box;}

.light{font-weight: 200!important;}
.regular{font-weight: 400!important;}
.medium{font-weight: 500!important;}
.semibold{font-weight: 600!important;}
.bold{font-weight: 700!important;}

a.fade:hover,
a.img_fade:hover img,
input[name="submitConfirm"]:hover,
input[name="submitBack"]:hover,
input[name="mwform_submitButton-687"]:hover{
	opacity: .5;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}

a.fade,
a.img_fade img,
a,
input[name="submitConfirm"],
input[name="submitBack"],
input[name="mwform_submitButton-687"]{
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}

.wrap{
	width: 980px;
	margin: auto;
}

.sp{
	display: none!important;
}

.br{
	display:none!important;
}
.br_pc{
	display:block!important;
}

/* ----------------------------------------------------------------------------------------------------
*  header
* --------------------------------------------------------------------------------------------------*/
#header{
	background: rgba(255,255,255,038);
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 9999;
	height:67px;
	position:relative;
}
#header .wrap{
	font-size:0;
}
#header h1{
	height:65px;
	margin:0;
	display: inline-block;
	vertical-align: middle;
}
#header.clone{
	width: 100%;
	position: fixed;
	top: 0px;
	z-index: 9999;
}
/*--------nav--------------------------*/
#header .nav{
	display: inline-block;
	vertical-align: middle;
	margin: 0 34px 0 63px;
}
#header .nav .main_menu{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:630px;
}
#header .nav .main_menu > li{
	position: relative;
}
#header .nav .main_menu > li > a{
	color: #003F23;
	font-size: 1.4rem;
	font-weight: 600;
	display: block;
	text-align: center;
	/*width: 122px;*/
	height: 67px;
	line-height:67px;
	letter-spacing: 1px;
}
#header .nav .main_menu > li > a:hover{
	opacity:0.5;
}
#header .nav .main_menu > li > a span{
	position: relative;
	padding:0 0 0 1.6rem;
}
#header .nav .main_menu > li > a span::before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:1.2rem;
	height:1.2rem;
	border-radius:100%;
	background:#003F23;
	margin-top:-0.6rem;
}
#header .nav .main_menu > li > a span::after{
	content:'';
	position:absolute;
	top:50%;
	left:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border-radius:100%;
	background:#fff;
	margin-top:-0.4rem;
}
#header .sub_menu{
	display: none;
	position: absolute;
	z-index: 999;
}
#header .sub_menu li{
	background: #ebebeb;
	width: 146px;
	text-align: center;
	margin-top: 1px;
}
#header .sub_menu li a{
	color: #003F23;
	font-size: 1.2rem;
	display: block;
	padding: 13px 0;
}
#header .main_menu li a:hover{
	opacity:0.5;
}
#header .sns{
	display: inline-block;
	vertical-align: middle;
}
#header .sns ul{
	overflow:hidden;
}
#header .sns ul li{
	float:left;
}
#header .sns ul li+li{
	margin-left:15px;
}

.headline{
	position:relative;
	height:185px;
	text-align:center;
	background:url(../img/common/headline_bg.jpg) center center no-repeat;
	background-size:cover;
}
.headline::before{
	content:'';
	position:absolute;
	top:0;
	right:0;
	width:232px;
	height:185px;
	background:url(../img/common/headline_img.png) 0 0 no-repeat;
}
.headline span{
	position:absolute;
	top:50%;
	left:50%;
	display:inline-block;
	width:300px;
	font-weight:500;
	line-height:1.0;
	color:#003F23;
	font-size:2.6rem;
	text-align:center;
	background:rgba(255,255,255,0.8);
	padding:12px 0;
	transform: translate(-50%, -50%);
}
.headline.about{
	background:url(../img/common/ttl_about.jpg) center center no-repeat;
	background-size:cover;
}
.headline.about{
	background:url(../img/common/ttl_about.jpg) center center no-repeat;
	background-size:cover;
}
.headline.company{
	background:url(../img/common/ttl_company.jpg) center center no-repeat;
	background-size:cover;
}
.headline.contact{
	background:url(../img/common/ttl_contact.jpg) center center no-repeat;
	background-size:cover;
}
.headline.service_lower{
	background:url(../img/common/ttl_service_lower.jpg) center center no-repeat;
	background-size:cover;
}
.headline.service{
	background:url(../img/common/ttl_service.jpg) center center no-repeat;
	background-size:cover;
}
.headline.strength{
	background:url(../img/common/ttl_strength.jpg) center center no-repeat;
	background-size:cover;
}
.headline.thought{
	background:url(../img/common/ttl_thought.jpg) center center no-repeat;
	background-size:cover;
}
.headline.works{
	background:url(../img/common/ttl_works.jpg) center center no-repeat;
	background-size:cover;
}
.headline.privacy{
	background:url(../img/common/ttl_privacy.jpg) center center no-repeat;
	background-size:cover;
}
.subhead{
	text-align: center;
	color:#003F23;
	font-size:2.7rem;
	font-weight: 500;
	letter-spacing: 1px;
	margin:47px 0 39px;
}
.product_ttl{
	margin: 0 auto;
	padding-bottom: 15px;
	text-align: center;
	font-weight:500;
	font-size: 2.1rem;
    position: relative;
	line-height: 1.3;
}
.product_ttl::after{
	content: "";
	width:80px;
	border-bottom: 4px solid #003F23;
    position: absolute;
    left: 50%;
    right: 0;
    bottom: 0;
	margin-left: -40px;
}
.product_ttl.long::after{
	width:250px;
	margin-left:-125px;
}

/* ----------------------------------------------------------------------------------------------------
*  footer
* --------------------------------------------------------------------------------------------------*/

/*--------instagram--------------------------*/
#instagram-footer .instagram-title{
	text-align: center;
	font-size: 1.4rem;
	color: #6b6b6b;
}

/* Instagram footer area **********/
#instagram-footer {
	text-align:center;
	overflow:hidden;
}
.instagram-title {
	margin-bottom:30px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:14px;
}
#instagram-footer #instafeed li {
	width:12.5%;
	display:inline;
	float:left;
}
#instagram-footer #instafeed li img {
	max-width:100%;
	vertical-align:middle;
}
#instagram-footer .#instafeed li img:hover {
	opacity:.87;
}
#instagram-footer p.clear {
	font-size: 11px;
	border-bottom: 1px solid #eee;
	display: inline-block;
	margin-top: 5px;
}
#instafeed{
	overflow:hidden;
/*	width:100%;
	height:125px;
   margin: 0 auto;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-box;
    box-pack: justify;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -o-box-pack: justify;
    -ms-box-pack: justify;
*/
}
/*--------pagetop--------------------------*/
.pagetop{
	position:fixed;
	bottom: 30px;
	left: auto;
	right:0;
	z-index: 99;
}
.pagetop p{
	width: 50px;
	margin: 0 30px 0 auto;
	text-align: right;
}


/*--------footer--------------------------*/

#footer{
	margin-top: 140px;
	position: relative;
}
#footer .wrap{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
#footer .btn01{
	width:125px;
}
#footer .btn01 img{
	width:100%;
	height:auto;
}

#footer .foot_menu{
	float:left;
	padding:5px 0 0;
}
#footer .foot_menu li+li{
	margin-top:13px;
}
#footer .foot_menu li a{
	color:#fff;
}
#footer .foot_menu li a:hover{
	text-decoration:underline;
}
#footer .foot_menu li a span{
	position: relative;
	padding:0 0 0 1.6rem;
}
#footer .foot_menu li a span::before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:1.2rem;
	height:1.2rem;
	border-radius:100%;
	background:#fff;
	margin-top:-0.6rem;
}
#footer .foot_menu li a span::after{
	content:'';
	position:absolute;
	top:50%;
	left:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border-radius:100%;
	background:#003F23;
	margin-top:-0.4rem;
}
#footer .foot_bnr{
	float:right;
	padding:5px 0;
}
#footer .foot_bnr li+li{
	margin-top:10px;
}
#footer .footer_contents{
	background: #003F23;
	padding: 15px 0;
}
#footer .logo{
	float: left;
}
#footer .footer_address{
	padding:20px 0 10px;
}
#footer .footer_address .wrap{
	width:820px;
	display: flex;
	align-items: flex-start;
}
#footer .footer_address .inner{
	width:620px;
}
#footer .footer_address p{
	line-height:1.6;
}
#footer .footer_address ul{
	font-size:0;
}
#footer .footer_address ul li{
	display:inline-block;
	line-height:1.6;
}
#footer .footer_address ul li+li{
	margin-left:1em;
}
#footer .copy{
	font-size: 1.4rem;
	margin:30px 0 0;
}

#tab {
	width: 50px;
	height: 140px;
	background: url(../img/common/tab_pc.png) no-repeat;
	margin:0 0 20px auto;
	z-index:999999;
}
#tab a {
	display: block;
	width: 100%;
	height: 100%;
}
#tab:hover {
	width: 210px;
	-webkit-transition: width ease-in-out 0.5s;
	-moz-transition: width ease-in-out 0.5s;
	-ms-transition: width ease-in-out 0.5s;
	-o-transition: width ease-in-out 0.5s;
	transition: width ease-in-out 0.5s;
}

@media screen and (max-width: 768px) {

body{
	min-width: 100%;
}
img{
	max-width: 100%;
}
.wrap{
	width: 96%;
}

.pc{
	display: none!important;
}
.sp{
	display: block!important;
}
.br{
	display:block!important;
}
.br_pc{
	display:none!important;
}

/* ----------------------------------------------------------------------------------------------------
*  header
* --------------------------------------------------------------------------------------------------*/
#header{
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	height: 50px;
	padding: 0;
}
#header nav{
	display:none!important;
}
#header h1 {
	width: 110px;
	height:auto;
	margin-top: 4px;
	margin-left: 0%;
}
#header .toggle{
	width: 50px;
	height: 50px;
	top: 0px;
	right: 0%;
	position: absolute;
	cursor: pointer;
	overflow: hidden;
	background: #003F23;
}
#header .toggle > div{
	position: relative;
}
#header .toggle span{
	width:28px;
	height:2px;
	background-color: #fff;
	position:absolute;
}
#header .toggle span:nth-child(1){
	top: 16px;
	left: 11px;
}
#header .toggle span:nth-child(2){
	top: 25px;
	left: 11px;
}
#header .toggle span:nth-child(3){
	top: 33px;
	left: 11px;
}
#header span{
	transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
}
#header .toggle.action span:nth-child(1){
	top:25px;
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#header .toggle.action span:nth-child(2){
	background-color:rgba(255,255,255,0);
}
#header .toggle.action span:nth-child(3){
	top:25px;
	-o-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#header .spnav .spmain_menu{
	position: absolute;
	top: 50px;
	left: 0;
	background: #fff;
	width: 100%;
	display: none;
  overflowinstafeed:auto;
  position: fixed;
  z-index: 100;
}
#header .spnav .spmain_menu > li {
	position: relative;
	float: none;
	border-bottom: 1px solid #003f23;
}
#header .spnav .spmain_menu > li:first-child {
	border-top: 1px solid #003f23;
}
#header .spnav .spmain_menu > li > a {
	font-size: 1.4rem;
	font-weight: bold;
	display: block;
	text-align: left;
	width: 100%;
	height: 50px;
	line-height:50px;
	padding-left: 15px ;
	position: relative;
}
#header .spnav .spmain_menu a:after {
	position: absolute;
	content: '';
	top: 50%;
	right: 5%;
	width: 4px;
	height: 4px;
	border-top: 1px solid #010101;
	border-right: 1px solid #010101;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#header .spnav .spmain_menu li.accordion> a:after{
	display: none;
}
#header .spnav .spmain_menu li.accordion> span{
	position: absolute;
	display: block;
	height: 50px;
	width: 11.5%;
	top: 0;
	right: 0;
	background: url(../img/common/navy_plus.png) no-repeat center center;
	background-size:6px 6px ;
	border:none;
	transform:none;
	z-index: 2;
}
#header .spnav .spmain_menu li.accordion> span.sub_open {
	position: absolute;
	top: 0;
	right: 0%;
	width: 11.5%;
	height: 50px;
	background: url(../img/common/navy_line.png) no-repeat center center;
	background-size: auto 1px;
	border: none;
	transform: none;
}
#header .spsub_menu{
	display: none;
	position: static;
	background: #fff;
	padding-top: 0px;
}
#header .spsub_menu li {
	background: #fff;
	width: 100%;
	text-align: left;
	margin-top: 0;
	border-top: 1px solid #003f23;
}
#header .spsub_menu li a{
	font-weight: normal;
	width: 100%;
	height:40px;
	line-height:40px;
	padding: 0 0 0 30px ;
	position: relative;
	display:block;
}
#header .tel{
	position: absolute;
	top: 0;
	right: 51px;
}



/* ----------------------------------------------------------------------------------------------------
*  contents
* --------------------------------------------------------------------------------------------------*/

#contents{
	padding-top: 50px;
}
.product_ttl{
	padding-bottom: 10px;
	font-size: 1.6rem;
}
.headline{
	height:125px;
}
.headline::before{
	width:156px;
	height:125px;
	background:url(../img/common/headline_img.png) 0 0 no-repeat;
	background-size: auto 100%;
}
.headline span{
	font-size:2.0rem;
}
.subhead{
	font-size:1.8rem;
	line-height:1.6;
	margin:5% 0;
}


/* ----------------------------------------------------------------------------------------------------
*  footer
* --------------------------------------------------------------------------------------------------*/
/*--------instagram--------------------------*/
#instafeed {
	height:auto!important;
}
#instafeed li {
	width:25%!important;
	height:auto!important;
}
#instafeed li img{
	width:100%!important;
}
#instagram-footer ul#instafeed > li:nth-child(8), #instagram-footer ul#instafeed > li:nth-child(7), #instagram-footer ul#instafeed > li:nth-child(6), #instagram-footer ul#instafeed > li:nth-child(5) {
    display: none;
}
/*--------pagetop--------------------------*/
.pagetop{
	margin:0;
	right:10px;
	bottom:10px;
}
.pagetop p{
	margin:0 0 0 auto;
}

/*--------footer--------------------------*/

#footer{
	margin-top: 40px;
	position:static;
}
#footer .wrap{
	display: block;
	text-align: center;
}
#footer .footer_contents{
	padding: 5% 0 ;
}
#footer .btn01{
	float:none;
	display:block;
	width:30%;
	margin:0 auto 5%;
}
#footer .foot_menu{
	float:none;
	width:100%;
	padding:0;
	margin:0;
}
#footer .foot_menu li{
	font-size:1.2rem;
	text-align: center;
}
#footer .foot_bnr li+li{
	margin-top:2%;
}
#footer .foot_bnr{
	float:none;
	width:100%;
	padding-top:0;
}
#footer .foot_bnr li img{
	width:100%;
	height:auto;
}

#footer .logo{
	float: none;
	text-align:center;
}
#footer .tel{
	float: none;
	margin: 25px auto 0;
}
#footer .tel p{
	text-align:center;
}
#footer .info{
	text-align:center;
}
#footer .info span{
	display:block;
}
#footer .info span+span{
	margin-left:0px;
}
#footer .link{
	margin-top: 30px;
	text-align:center;
}
#footer .right .btn01{
	width:45%;
	float: left;
	text-align:center;
}
#footer .right .btn02{
	width:45%;
	float: right;
	text-align:center;
}
#footer .right .btn01 img,#footer .right .btn02 img{
	width:100%;
}
#footer .right .banner{
	margin-top: 30px;
}
#footer .right .banner img{
	width:100%;
}
#footer .right .banner p + p{
	margin-top: 15px;
}

#footer .footer_address .wrap{
	width:auto;
	padding:0 5%;
	display: block;
}
#footer .footer_address{
	padding:5% 0;
}
#footer .footer_address .inner{
	float:none;
	width:auto;
}
#footer .logo{
	display:block;
	width:50%;
	margin:0 auto 3%;
}
#footer .footer_address ul li{
	display:block;
}
#footer .footer_address ul li+li{
	margin-left:0;
}
#footer .copy{
	font-size: 1.2rem;
	text-align: center;
	padding-top: 0;
	margin:5% 0 0;
}

#tab {
	width: 50px;
	height: 50px;
	background: url(../img/common/tab_sp.png) no-repeat;
	z-index:999999;
}
#tab a {
	display: block;
	width: 100%;
	height: 100%;
}
#tab:hover {
	width: 50px;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

}


/* ------------------------------
    clearfix
------------------------------ */

.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */