@charset "utf-8";
/*******

all

********/
* {
	margin: 0;
	padding: 0;
	font-family: "M PLUS Rounded 1c";
}
body{	
	overflow-x: hidden;	
}
ul li{
	list-style-type: none;
}
a{
	text-decoration:none;
}
h1{
	font-size: 32px;
	font-weight: bold;
}
h2{
	font-size: 28px;
}
h3{
	font-size: 26px;
}
h4{
	font-size: 20px;
}
h5{
	font-size: 16px;
}
p{
	color: #150202;
	font-size: 16px;
}
object {
    pointer-events: none;
}
*:focus {
	outline: none;
}
/*******

共通パーツ

********/
.common-btn{
	background-color: #6BB84E;
	display: inline-block;
	width: 400px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	padding: 20px 16px;
	border-radius: 40px;
	transition: .4s;
	box-sizing: border-box;
	margin: 40px 0;
}
.common-btn:hover{
	background-color: #457672;
}
.common-btn-yellow{
	background-color: #FFD41E;
	display: inline-block;
	width: 220px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 40px;
	transition: .4s;
}
.common-btn-yellow:hover{
	background-color: #B59613;
}
.common-btn-gray{
	background-color: #a9a9a9;
	display: inline-block;
	width: 220px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 40px;
	transition: .4s;
}
.common-btn-gray:hover{
	cursor: default;
}
.common-btn-green{
	background-color: #14AAA2;
	display: inline-block;
	width: 220px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 40px;
	transition: .4s;
}
.common-btn-green:hover{
	background-color: #10746F;
}
.sub-title{
	width:1080px;
	max-width: 1280px;
	text-align: center;
	margin: 0 auto;
	padding: 18px 0;
}
.sub-underline {
	border-bottom: 1px solid #000;
	padding: 0 6px 2px;
}
.sub-title-senction{
	color: #6BB84E;
	margin: 0 auto;
}
.icon{
	padding: 0 8px;
	vertical-align: middle;
}
.sub-title hr{
	 height: 1px;
	 background-color:#150202;
	 width: 260px;
	 border: none;
	 margin:auto;
}
.sub-title-example .sub-title h1 span.h1-main {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    border: none;
    padding: 0;
}
.sub-title-example .sub-title h1 span {
    font-weight: 200;
    font-size: 16px;
    border-bottom: solid 1px #000000;
    padding: 0 7px 5px;
}
/*******

header

********/
header{
	background-color: #F3F4EF;
}
nav{
	position: relative;
	height: 140px;
	background-color: #ffffff;
	box-shadow: 0px 4px 6px -3px rgba(0,0,0,0.16);
		-webkit-box-shadow: 0px 4px 6px -3px rgba(0,0,0,0.16);
		-ms-box-shadow: 0px 4px 6px -3px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 4px 6px -3px rgba(0,0,0,0.16);
}
.inner{
	margin:0 auto;
	width:1080px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}
.menu-content-sp,
.header{
	display: none;
}
nav>.menu-content{
  align-items: center;
}
.menu{
	width: 800px;
	margin-top: -36px;
}
.menu-content {
	display: flex;
	justify-content: space-between;
}
.menu-content li{
	margin:0 6px;
	text-align: center;
}
.menu-content li a{
	color: #6bb84e;
	font-size:12px;
	display: block;
}

.menu-content li a:hover{
	background: url('/images/menuHover.png') center bottom no-repeat;
}

ul.menu-content li a img{	
	display: block;	
	height: 40px;	
	margin: 0 auto;
}
ul.menu-content li:nth-child(1) a img,	
ul.menu-content li:nth-child(2) a img,	
ul.menu-content li:nth-child(3) a img,	
ul.menu-content li:nth-child(5) a img{
	max-width:40px;
	margin: 0 auto;
}
ul.menu-content li:nth-child(6) a img,	
ul.menu-content li:nth-child(7) a img{	
	max-width:52px;	
	margin: 0 auto;
}
ul.menu-content li:nth-child(4) a img,
ul.menu-content li:nth-child(8) a img{	
	max-width:64px;
	margin: 0 auto;
}	
.logoImg{
	width: 364px;
}
.logo a{
	display: flex;
	align-items: center;
}
.pankuszu{
	background-color: #F3F4EF;
	box-shadow: 0px 1px 10px 0px inset rgba(0,0,0,.16);
	-moz-box-shadow: 0px 1px 10px 0px inset rgba(0,0,0,.16);
	-webkit-box-shadow:0px 1px 10px 0px inset rgba(0,0,0,.16);
}
.pankuszu ul{
	display: flex;
	margin: 0 auto;
	padding: 13px 0 9px;
	width: 940px;
    max-width: 1280px;
}
.pankuszu ul li{
	padding-right: 4px;
	color: #6BB84E;
}
.pankuszu ul li.pankuzu-black{
	color: #707070;
}
.pankuszu ul li a{
	color: #6bb84e;
}

/** new bread-crumbs style **/
.bread-crumbs{
	background-color: #F3F4EF;
	box-shadow: 0px 1px 10px 0px inset rgba(0,0,0,.16);
	-moz-box-shadow: 0px 1px 10px 0px inset rgba(0,0,0,.16);
	-webkit-box-shadow:0px 1px 10px 0px inset rgba(0,0,0,.16);
}
.bread-crumbs ul{
	display: flex;
	margin: 0 auto;
	padding: 13px 0 9px;
	width: 940px;
    max-width: 1280px;
}
.bread-crumbs ul li{
	padding-right: 4px;
	color: #6BB84E;
}
.bread-crumbs ul li.bread-crumbs-item{
	color: #707070;
}
.bread-crumbs ul li.bread-crumbs-item-home{
	color: #707070;
}
.bread-crumbs ul li.bread-crumbs-item:before{
	content: '>';
}
.bread-crumbs ul li.bread-crumbs-item-home:before{
	content: none;
}
.bread-crumbs ul li a{
	color: #6bb84e;
}

.bread-crumbs ul li a:hover{
	text-decoration: underline;
}

.follow-us ul{
	color: #6BB84E;
	display: flex;
	justify-content: flex-end;
}
.follow-us li hr{
	width: calc(100% - 1px);
    margin-top: 10px;
    color: #6BB84E;
    border: 0.5px #6BB84E solid;
    position: absolute;	
	left: 0;	
}
.follow-us li:nth-child(2),	
.follow-us li:nth-child(3){	
position: relative;	
background-color: #FFFFFF;	
}
.follow-us li:nth-child(2){
	padding:0 20px;
}
.follow-us li:nth-child(3){
	padding:0 10px;	
}
.logoFixImg{
	width: 280px;
    padding-right: 56px;
}
.fix-navigation{
    position: fixed;
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    background-color: #ffffff;
    padding: 38px 0 2px 0;
    box-shadow: 2px 1px 6px 3px rgba(0,0,0,.05);
    z-index: 999999;
}
/*******

footer

********/
.footer-trial{
	background-image: url(../images/footer/footer-trial-bg.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
	text-align: center;
	object-fit: cover;
	padding: 20px 0;
}
.footer-trial p{
	color: #ffffff;
	font-size: 38px;
}
.trialIcon{
	padding-right: 100px;
}
.trial-btn{
	display: inline-block;
	width: 280px;
	text-align: center;
	background-color: #ffffff;
	font-size: 16px;
	color: #6BB84E;
	text-decoration: none;
    padding: 16px 24px;
    border-radius: 32px;
	transition: .4s;
	margin: 40px 0;
}
.trial-btn:hover {
  background-color: #6BB84E;
  color: #FFF;
}
.trialImg{
	width: 100%;
}
.footer-map{
    background-color: #F2F8EF;
}
.footer-map-content{
	width: 1080px;
	max-width: 1280px;	
	margin: 0 auto;
	background-image: url(../images/footer/wd_patto.png);
	background-position: right bottom 10px;
	background-size: 230px;
	background-repeat: no-repeat;
}
.footer-2col{
	display: flex;
	justify-content: center;
	padding: 24px 0;
}
dl.footer-col-left{
	width: 100px;
}
dl.footer-col-section{
	width: 50%;
}
dl.footer-col-section:first-child {
	margin-right: 50px;
	margin-left: 46px;
}
.footer-col-wrap{
	display: flex;
	justify-content: space-between;
}
.footer-sns{
	color: #ffffff;
	display: flex;
}
.footer-sns a {
	display: flex;
	align-items: center;
	margin-left: 30px;
}
.footer-col-wrap a{
	color: #2c2c2c;
	font-size: 12px;
}
@media all and (-ms-high-contrast: none) {
	.footer-col{
		padding: 0 24px;
	}
}
.footlist li{
	padding: 4px 0;
}
.footlist li.footlist-end{
	padding: 0 0 16px 0;
}
.footer-copyright{
	width: 1080px;
	max-width: 1280px;
	margin: 0 auto;
	text-align: right;
	margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}
.footer-detail ul{
	display: flex;
}
.footer-detail ul li{
	padding-right: 14px;
	font-size: 12px;
	display: flex;
	align-items: center;
}
.footer-detail ul li.footer-detail-line::after{
	content: '';
	background-color: #ffffff;
	height: 14px;
    width: 1px;
    margin-left: 14px;
    display: inline-block;
}
.footer-detail li a{
	text-decoration:none;
	color: #ffffff;
	font-size: 14px;
}
ul.footlist span{
	font-size: 12px;
}
.footer-detail{
	background-color: #6BB84E;
	display: flex;
	align-items: center;
	height: 60px;
	font-weight: 200;
}
.footer-detail-content{
	display: flex;
	align-items: center;
	width: 1080px;
	margin: 0 auto;
	justify-content: space-between;
}
small{
	font-size: 10px;
	color: #626161;
}
.footer-copyright{
	padding: 10px 0;
}
.footer-contact{
    margin: 48px auto 0;
	background-color: #FDEE78;
}
.footer-contact-wrap{
	width: 1080px;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	padding: 40px 0;	
}
.footer-contact-wrap p{
	font-weight: 200;
}
.footer-contact-btn{
	margin:16px 0;
}
.footer-sns-sp{
	display: none;
}
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 40px;
}
.pagetop a {
    display: block;
    text-align: center;
    text-decoration: none;
    width:80px;
    height:80px;
    position: relative;
}
.pagetop a span{
  position: absolute;
  top: 50%;
  left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 100%;
	height: 100%;
}
.error-btn {
    display: block;
    margin: 40px auto;
}
/*******

clearfix

********/
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
/*******

sp

********/
@media screen and (max-width: 1080px) {
	/*******

	header

	********/	
	.menu-content,.fix-navigation{
		display: none;
	}
	.header{
		display: block;
	}
	.menu-content-sp{
		display: block;
		width: 100%;
		background-color: #ffffff;
	}
	.spLogoImg{
		margin:0 auto;
		display: block;
		width: 40vw;
	}
	.spFooterLogoImg{
		margin:0 auto;
		display: block;
		width: 30vw;		
	}
	.pankuszu ul{
		justify-content: center;
		width: 288vw;
	    max-width: 96%;
	}
	.pankuszu ul li .icon{
		display: none;
	}

	.bread-crumbs ul{
		justify-content: center;
		width: 288vw;
	    max-width: 96%;
	}
	.bread-crumbs ul li .icon{
		display: none;
	}

	/*******

	subtitle

	********/	
	.sub-title{
	    width: 288vw;
	    max-width: 100%;
	}
	.sub-title-senction{
	    width: 200vw;
	    max-width: 94%;	
	}	
	/*******

	footer

	********/
	.footer-trial{
		background-image: url(../images/footer/footer-trial-bg-sp.png);
	}
	.footer-detail,
	.footer-map{
		display: none;
	}
	.footer-sns-sp{
		display: block;
		padding: 5vw 0;
		background-color: #6BB84E;
	}
	.footer-copyright{
		text-align: center;
	    width: 288vw;
	    max-width: 100%;			
	}
    .footer-contact-wrap{
        width: 288vw;
        max-width: 100%; 
    }
	/*******

	navigation

	********/
	.menu-content-sp-logo{
		padding-left: 8vw;
	}
	.header {
		display: flex;
		justify-content: space-between;
		background: #ffffff;
		align-items: center;
		padding: 2vw 0;
		position: fixed;
	    width: 100%;
	    z-index: 9999999;
	    top: 0;  
	}
	.nav-button {
	  display: none;
	}
	.nav a {
	    color: #6BB84E;
	    text-decoration: none;
	    font-size: 3.1vw;
	    color: #448aff;
	  }
	.nav li {
	    display: inline-block;
	    margin: 0 10px;
	 }
	.nav-wrap.open {
		display: block;
	}
	.nav-wrap.close {
		display: none;
	}
	.nav-wrap {
		display: block;
	}
	.nav-button {
		display: block;
		cursor: pointer;
	}
	.nav-wrap {
		position: fixed;
		left: 0;
		top: 0;
		display: none;
		z-index: 10;
		background-color:#6BB84E;
		width: 100%;
		height: 100%;
	}
	.nav-sp-logo{
		height: 20vw;
	}
	.nav {
	  	position: relative;
	  	display: flex;
	  	flex-direction: column;
		flex-wrap: wrap;
	}
	.nav-content{
		overflow-y: auto;
    	overflow-x: hidden;
    	height: calc(100vh - 20vw - 4.0vw - 2.1vw - 2.1vw);
	}
	.nav li {
		display: block;
		padding: 3.6vw 2.1vw;
		border-bottom: solid 1px #ffffff; 
		font-weight: 200;
		margin: 0 3.2vw;
		min-height: 6.5vw;
	}
	.nav li.noborder{
		border-top: solid 1px #ffffff; 
		border-bottom: none; 
		padding: 5.6vw 2.3vw;
		margin: 0;
		height: inherit;
	}
	.nav li.fix{
		border-bottom: none; 
	}
	.nav li > a {
		display: inline-block;
		width: 100%;
	    font-size: 3.8vw;
	}
	.nav-content div.nav-footer{
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding:2.1vw 0;
		text-align: center;
		margin: 0;
		width: 100%;
	} 
	.nav-content div.nav-footer a{
		color: #6BB84E;
		font-size: 3.0vw;
		line-height: 4.0vw;
		border-right: 1px solid #5BB84E;
		padding: 0 2vw;
	}
	.nav-content div.nav-footer a:last-child{
		border:none;
		padding-right: 0;
	}
	.spNavIconImg{
		vertical-align: middle;
		margin: 0 2vw;
		width: 5vw;
	}
	.spNavIconImg2{
		vertical-align: middle;
		padding-right: 1vw;
		display: inline;
	}
	.spNavIcon2Img{
		margin: 0 auto;
		display: block;
	}
	.nav-wrap a {
	    color: #fff;
	    font-size: 3.2vw;
	  }
    .nav-wrap a span{
        font-size: 2.6vw;
    }
	.nav-button,
	.nav-button span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}
	.nav-button {
		z-index: 20;
		position: relative;
		width: 6vw;
    	height: 4vw;
	    right: 4vw;
	}
	.nav-button span {
		position: absolute;
	    left: 25%;
	    width: 50%;
		height: 0.55vw;
		background-color: #6BB84E;
		border-radius: 0.275vw;
	}
	.nav-button span:nth-of-type(1) {
	    top: calc(50% - 0.275vw - 2vw);
	}
	.nav-button span:nth-of-type(2) {
		top: calc(50% - 0.275vw);
	}
	.nav-button span:nth-of-type(3) {
		top: calc(50% - 0.275vw + 2vw);
	}
	.nav-button.active span {
	    width: calc(50% + 1vw);
	    left: calc(25% - 0.5vw);
	}
	.nav-button.active span:nth-of-type(1) {
		-webkit-transform: translateY(2vw) rotate(-45deg);
		transform: translateY(2vw) rotate(-45deg);
	}
	.nav-button.active span:nth-of-type(3) {
		-webkit-transform: translateY(-2vw) rotate(45deg);
		transform: translateY(-2vw) rotate(45deg);
	}
	.nav-button.active span:nth-of-type(2) {
		opacity: 0;
	}
	.nav-button{
		content: "";
	    margin: 0 auto;
		width: 11vw;
	    height: 10vw;
	    text-align: center;
	    right:3vw;
	    background: #ffffff;
	    border: #6BB84E 1.5px solid;
	    border-radius: 52%;
	    transition: all .3s ease-out;
	    backface-visibility: hidden;
	}
	.spNavLogoImg{
		margin: 0 auto;
		display: block;
	    width: 50vw;
	    padding: 5vw 0;
	}
	li.nav-tab label{
	    display: block;
	    color :#ffffff;
	    cursor :pointer;
	    transition: all 0.5s;
	    position: relative;
	    font-size: 3.8vw;
	}

	li.nav-tab input {
	    display: none;
	}

	li.nav-tab .spboxshow {
	    height: 0;
	    padding: 0;
	    overflow: hidden;
	    opacity: 0;
	    transition: 0.2s;
	    border-top: solid 1px #ffffff;
	}

.boxContentSP:checked + .spboxshow{
    height: auto;
    opacity: 1;
 	margin-top: 2.1vw;
    padding: 2.1vw 6.4vw;   
}
li.nav-tab label::after {
    margin-left:24px;
    transition: 0.2s;
    position: absolute;
    right: 0;
    margin-right: 12px;
    top: 0;
    margin-top: 18px;    	
}

li.nav-tab .label-arrow{
	display: inline-block;
	width: 3vw;
	height: 3vw;
	margin: 0 3vw;
	border-bottom: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	transform: rotate(45deg);
	position: absolute;
	top: 2vw;
	right: 0;
}
li.nav-tab .label-arrow.active{
	display: inline-block;
	width: 3vw;
	height: 3vw;
	margin: 0 3vw;
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-bottom: transparent;
	border-right: transparent;
	transform: rotate(45deg);
	position: absolute;
	top: 4vw;
	right: 0;	
}
.sp-nav-product p{
	color: #ffffff;
	font-size: 3.8vw;
}
.nav .sp-nav-product-content-btn{
	display: flex;
	margin: 2.1vw 0;
}
.navProductContentBtn{
	width: 20vw;
	background-color: #ffffff;
}
a.navProductContentBtn{
	color: #6BB84E;
	padding: 2.1vw 4.6vw;
	border-radius: 10vw;
}
.sp-nav-btn{
    margin: 1vw;
}
.nav hr{
	background-color: #6BB84E;
    box-shadow: none;
    border-color: #ffffff;

}
.sp-nav-product-table{
	display: table;
	padding-top: 2.1vw;
}
.sp-nav-product-table-rowsmall,
.sp-nav-product-table-row{
	display: table-cell;
}
.sp-nav-product-table-rowsmall p,
.sp-nav-product-table-row p{
	padding:2.1vw 0;
}
.sp-nav-product-table-rowsmall{
	padding-right: 2.8vw;
}
.sp-nav-product-table-row{
	border-left: 1px solid #ffffff;
	padding-left: 2.8vw;
}   

}
@media screen and (max-width: 680px) {
	h1{
		font-size: 6vw;
	}
	h2{
		font-size: 5vw;
	}
	h3{
		font-size: 4.8vw;
	}
	h4{
		font-size: 4.6vw;
	}
	h5{
		font-size: 4.6vw;
	}
	p{
		font-size: 3.2vw;
	}
	.icon{
		padding: 0 2.1vw;
	}
	.spLogoImg{
		width: 50vw;
		padding: 5vw 0 5vw 1vw;
	}
	.spFooterLogoImg{
		width: 50vw;
		padding: 5vw 0;		
	}
	/*******

	subtitle

	********/	
	.pankuszu{
		margin-top: -16vw;
	}	
	.pankuszu ul{
		padding: 2.3vw 0;
	}	
	.pankuszu ul li{
		padding-right: 1.2vw;
		font-size: 2.6vw;
	}
	.bread-crumbs{
		margin-top: -16vw;
	}	
	.bread-crumbs ul{
		padding: 2.3vw 0;
	}	
	.bread-crumbs ul li{
		padding-right: 1.2vw;
		font-size: 2.6vw;
	}	
	.sub-title{
	    width: 288vw;
    	max-width: 100%;
    	padding: 2vw 0;		
	}
	.sub-title-senction{
		max-width: 96%;
		width: 200vw;
	}
	.sub-title-senction p{
		font-size: 3.2vw;
	}
	.footer-copyright{
	    width: 288vw;
	    max-width: 100%;			
	}
	.footer-trial p{
		font-size: 6vw;
	}
	.topRight,
	.topLeft{
		width: 12vw;
    	height: 10vw;
	}
	.sub-title-example .sub-title h1 span.h1-main{
		font-size: 5vw;
	}
	.sub-title-example .sub-title-senction h2{
		font-size: 5vw;
	}
	/*******

	common

	********/	
	.common-btn{
		width: 106vw;
		font-size: 3.8vw;
	}
	.trial-btn{
		width: 64vw;
	}
	.footer-trial{
		padding: 0;
	}
	.footer-contact-wrap{
		padding: 6.3vw 0;
	}
	.footer-contact-wrap p{
		padding-bottom: 4.2vw;
	}
	.header{
		padding:0;
		box-shadow: 2.1vw 0 2.1vw 0 rgba(0,0,0,0.2);
	}
	section:first-of-type{
		margin-top: 29vw;
	}
	/*******

	nav

	********/
	nav{
		height: initial;
	}
	.pagetop{
		right: 3vw;
	}
	.error-btn{
		margin: 5.6vw auto;
		font-size: 3.2vw;
		padding: 4.2vw;
	}
	.common-btn {
	    width: 53vw;
	    padding: 3.2vw 0;
	}	
}
@media screen and (max-width: 320px) {
	.footer-contact-btn{
		font-size: 3.8vw;
	}
	.spNavIconImg2 {
    	width: 5vw;
	}
}





@media all and (-ms-high-contrast: none) and (max-width: 1080px) {
	.nav-button.active span:nth-of-type(1) {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: calc(50% - 0.275vw);
	}
	.nav-button.active span:nth-of-type(3) {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: calc(50% - 0.275vw);
	}
}