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

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}/*お決まり1 */



@font-face {
	font-family: 'Noto Sans JP';
    src: url('../../font/NotoSansJP-Bold.otf') format("opentype");
	font-weight: 700;
	font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../../font/NotoSansJP-Light.otf') format("opentype");
	font-weight: 300;
	font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../../font/NotoSansJP-Medium.otf') format("opentype");
	font-weight: 500;
	font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../../font/NotoSansJP-Regular.otf') format("opentype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../../font/NotoSansJP-Thin.otf') format("opentype");
	font-weight: 100;
	font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../../font/NotoSansJP-Medium.otf') format("opentype");
	font-weight: 400;
	font-style: normal;
}
html{
	font-size: 62.5%;/*16×62.5％＝10px*/
	font-family: 'Noto Sans JP',sans-serif;
}

img{
	max-width: 100%;
	height: auto;
}
a[href^="tel:"]{
    pointer-events: none;
}
	
.img_pc{
	display: block;
}

.img_sp{
	display: none;
}
.img_sp2{
	display: none;
}
.overflow{
	overflow: hidden;
}
.off-1500px{
	display: block;
}
.on-1500px{
	display: none;
}
main{
	background-color: #FFFEEC;
	padding-bottom: 100px;
}
#topbutton {
   position: fixed; /* ←表示場所を固定 */
   bottom: 18px;   /* ←下端からの距離 */
   right: 18px;    /* ←右端からの距離 */
	width: 80px;     /* ←横幅 */
	height: 80px;
   /* ▼最初は非表示にしておく */
   display: none;  /* ▼配色・配置・文字の装飾など */
   background:  rgba(253,123,170,0.7); 
   border-radius: 20px;  /* ←角丸の半径 */
   text-align: center;  /* ←文字の位置 */
   font-size: 2rem;     /* ←文字サイズ */
   font-weight: bold;   /* ←文字の太さ */
   margin: 0px;          /* ←外側の余白 */
   padding-top: 25px;       /* ←内側の余白 */
	z-index: 1000;
}
#topbutton a {
   /* ▼リンクの装飾 */
   color: #000000;          
   text-decoration: none; 
}



.language-area{
	background-color: #25B173;
	padding: 5px 0;
}
.language{	
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
	max-width: 964px;
}

.japanese{
	color: white;
	background-color: #FB7BA8;
	padding: 5px 20px;
	border-radius: 5px;
	margin-right: 8px;
	font-size: 1.4rem;
	font-weight: 500;
	display: block;
}
.chinese{
	color:#000000;
	background-color: #fff;
	padding: 5px 20px;
	border-radius: 5px;
	font-size: 1.4rem;
	font-weight: 500;
	display: block;
}
.chinese:hover{
	background-color: #C7C7C7;
}
.header{
	margin: 0 auto;
	max-width: 980px;
	background-color:white;
	display: flex;
	justify-content: space-between;
}
.logo{
	margin: 15px auto 15px 20px;
}
.logo a img{
	width: 349px;
}
.menu-area{
	margin-top: 24px;
	text-align: right;
}
.menu{
	display: inline-block;
	height: 60px;
	padding:20px 20px 20px;
	vertical-align: middle;
	font-size: 1.6rem;
	font-weight: 500;
	color: #000000;
}


.try01::after{
	content: "";
	width: 20px;
	border-style: solid;
	border-width: 0 11px 14px 11px;
	border-color: transparent transparent #25b172 transparent;
	display: block;
	margin: 10px auto 0;
}

.try:hover::after{
	content: "";
	width: 20px;
	border-style: solid;
	border-width: 0 11px 14px 11px;
	border-color: transparent transparent #25b172 transparent;
	display: block;
	margin: 10px auto 0;
}

.menu-contact{
	background-color: #17A599;
	color: #fff;
	border-radius: 10px;
	width: 140px;
	text-align: center;	
}
.menu-contact:hover{
	background-color: #0D8EA7;
}
.top::before {
	content: "";
	width: 100%;
	height: 5px;
	background-color: #25B173;
	display: block;
}

.top{
	background-image: url("../../img/product/top-back.png");
	height: 350px;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: -100;
}
.top-title{
	font-weight: 500;
	text-align: center;
	margin-top: 150px;
	color: #fff;
	font-size: 4.8rem;
	text-shadow: 3px 3px 7px #242424;
	z-index: 1;
	letter-spacing: 10px;
	position: relative;
}
.dotted-box01{
	margin: 30px auto;
	top: 50px;
	box-sizing : border-box;       /* 罫線も含む長さ       */
	width  : 230px;               /* BOXの幅              */
	max-width : 500px;           /* BOXの最大幅          */
	height   : 6px;              /* BOXの高さ            */
	padding   : 0px;            /* 文字の位置合わせ     */
	font-size  : 0px;               /* 文字サイズ           */
/* 	text-align  : center;       文字位置             */
	color  : #66cc00;         /* 文字色               */
/*	background : rgba(255, 204, 153, 0.10);  BOXの背景色     */
	border   : 2px dotted #66cc00;   /* 枠線の指定           */
	border-radius : 1px;         /* 角丸の指定           */  
}
.top-illustration{
	position: absolute;
	right: 50px;
	bottom: 0;
	z-index: -50;
}

/*-----SECTION01------*/ 
.section01{
	max-width: 1500px;
	margin: 0 auto;
}
.second-title-area{
	padding: 110px 0;
	display: flex;
	justify-content: center;
}
.second-title01{
	width: 490px;
}
.contents{
	position: relative;
	height: 20px;

}
.contents-before::before{
    content: "";
    height: 1px;
    width: 90px;
    background-color: #000;
    display: block;
    margin: 25px 75px auto auto;
}

.contents-after::after{
    content: "";
    height: 1px;
    width: 90px;
    background-color: #000;
    display: block;
    margin:25px auto auto 75px;
}

.diamond{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 13.3px;
  height: 13.3px;
  margin: 20px 40px auto auto;
}
.diamond-after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 13.3px;
  height: 13.3px;
  margin: 20px  auto auto 40px;
}
.diamond__inner {
  width: 0;
  height: 0;
  border-top: 6.6px solid transparent;
  border-right: 6.6px solid #FF0000;
  border-bottom: 6.6px solid transparent;
  border-left: 0 solid transparent;
}

.diamond__inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6.6px;
  width: 0;
  height: 0;
  margin: auto 0;
  border-top: 6.6px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 6.6px solid transparent;
  border-left: 6.6px solid #FF0000;
}

.efforts{
	display: inline-block;
	width: 275px;
	height: 560px;
	margin: 0 25px auto auto;
	vertical-align: top;
}
.efforts:last-child{
	margin-right: 0;
}

.title-4th-01{
    font-size: 2.6rem;
    font-weight: 800;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
    -webkit-text-fill-color: #006837;
    text-shadow: 3px 3px 5px #666666;

	text-align: center;
}

.title-4th-01::before{
	content: "";
	width: 100%;
	display: block;
	height: 4px;
	border-bottom: solid 1px #00A99D;
	border-top: solid 1px #00A99D;
	margin-bottom: 10px;
}
.title-4th-01::after{
	content: "";
	width: 100%;
	display: block;
	height: 4px;
	border-bottom: solid 1px #00A99D;
	border-top: solid 1px #00A99D;
	margin-top: 10px;
}
.efforts-title{
	width: 100%;
	margin: 20px auto;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2.2rem;
	height: 70px;
}
.efforts-text{
	font-size: 1.7rem;
	line-height: 2.4rem;
	height: 220px;
	font-weight: 300;
}
.section02{
	max-width: 1500px;
	margin: 0 auto;
	
}
.second-title02{
	width: 370px;
}
/*
.second-title02{
	font-weight: 800;
	font-size: 3.6rem;
	-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FF0000;
    -webkit-text-fill-color: #FFFF00;
    text-shadow: 3px 3px 5px #666666;
	padding-top: 5px;
}*/
.contents-section02{
	border-right: 6.6px solid #F7931E;
}
.contents-section02::after{
	border-left: 6.6px solid #F7931E;
}
.quality-wrapper{
	display: flex;
	justify-content: space-between;
	padding-bottom: 20px;
	width: 95vw;
	margin: 0 auto;
	max-width: 1000px;
}
.quality{
	max-width: 550px;
	width: 52vw;
}


.quality-text{
	font-size: 1.7rem;
	font-weight: 300;
	line-height: 2.8rem;
	padding-right: 10px;
}
.quality-title{
	font-size: 2rem;
	font-weight: 500;
	color: #36A0DA;
	text-align: center;
	margin: 10px auto 30px;
}
.center{
	text-align: center;
}

.quality-wrapper img{
	width: 41vw;
    height: 25vw;
    max-width: 450px;
    max-height: 280px;
}
.quality .center img{
	width: 50vw;
	height: auto;
}
/*-----sextion03------*/ 
.section03{
	max-width: 1000px;
	padding: 100px 30px 100px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.section03 a {
    width: 400px;
    display: block;
}
.section03 a:nth-child(2){
	margin: 0 30px;
}

/*-----section04------*/ 
.section04{
    margin: 0 auto;
    background-color: #fff;
    width: 96vw;
	max-width: 1000px;
	padding: 60px 2vw 50px;
}
.tertiary-title{
	font-size: 3.0rem;
	font-weight: 500;
	margin-bottom: 10px;
}
.accentline{
	height: 8px;
	width: 280px;
	background-color: #0071BC;
	max-width: 1500px;
}
.accentline::after{
	content: "";
    display: block;
    width: 500px;
    width: -webki-calc(92vw - 280);
    width: calc(92vw - 280px);
    box-sizing: border-box;
    height: 8px;
    padding: 0px;
    font-size: 0px;
    border: 1px dotted #8DCDF3;
    border-radius: 1px;
    margin: 0 0 0px 280px;
	max-width: 660px;
}
.flex{
	display: flex;
	margin: 40px auto;
	justify-content: space-between;
}

.flex-after{
	display: block;
    height: 1px;
    background-color: #333333;
    margin: 0 auto;
    width: 85vw;
	max-width: 900px;
}
.product{
	display: flex;
	max-width: 700px;
}
.product img{
	margin-right: 1vw;
    width: 15vw;
    height: 17.3vw;
	max-width: 150px;
	max-height: 170px;
}
.product-box{
	width: 28vw;
	max-width: 280px;
}
.accentline-02{
	width: 100%;
	height: 4px;
	background-color: #29ABE2;
	display: block;
}
.product-title{
    font-size: 2.2rem;
    font-weight: 500;
    border-bottom: dotted 1px #29ABE2;
    border-top: solid 1px #29ABE2;
    margin: 4px auto;
    padding: 10px 0;
    color: #29ABE2;

}
.product-text{
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 2.3rem;
	margin-top: 20px;
}	
/*-----section05----*/
.section05{
	margin: 100px auto;
    padding: 60px 2vw 50px;
    background-color: #fff;
	width: 96vw;
	max-width: 1000px;
}


.accentline01-section05{
	height: 8px;
    width: 380px;
    background-color: #62C0E9;
	max-width: 1500px;
}
.accentline01-section05::after {
    content: "";
    display: block;
    width: 400px;
    width: -webki-calc(90vw - 360);
    width: calc(90vw - 360px);
    box-sizing: border-box;
    height: 8px;
    padding: 0px;
    font-size: 0px;
    border: 1px dotted #8DCDF3;
    border-radius: 1px;
    margin: 0 0 0px 380px;
	max-width: 570px;
}
/*-----section06----*/
.section06{
	margin: 100px auto;
    padding: 60px 2vw 50px;
    background-color: #fff;
	width: 96vw;
	max-width: 1000px;
}
.accentline01-section06{
	height: 8px;
    width: 380px;
    background-color: #00A99D;
}

.accentline01-section06::after {
    content: "";
    display: block;
    width: 400px;
    width: -webki-calc(90vw - 360px);
    width: calc(90vw - 360px);
    box-sizing: border-box;
    height: 8px;
    padding: 0px;
    font-size: 0px;
    border: 1px dotted #8DCDF3;
    border-radius: 1px;
    margin: 0 0 0px 380px;
	max-width: 570px;
}

.machine-wrapper{
	margin: 50px auto;
    max-width: 1440px;
    position: relative;
    height: 28vw;
	max-height: 280px;
}

.container{
	display: inline-block;
	vertical-align: top;
	position: absolute;
	bottom: 0;
	width: 33vw;
	max-width: 330px;
	right: 10px;
}
.machine-box{
	display: inline-block;
	position: relative;
}

.machine-img01{
	background-position: top 20px left 1vw;
	background-image: url("../../img/product/machine-img-back.jpg");
	background-repeat: no-repeat;
	background-size: 19vw 21vw;
	display: inline-block;
	vertical-align: top;
	width: 24vw;
	max-width: 240px;
}
.machine-img02{
	background-position: top 20px left 1vw;
	background-image: url("../../img/product/machine-img-back.jpg");
	background-repeat: no-repeat;
	background-size: 19vw 21vw;
	display: inline-block;
	vertical-align: top;
	width: 22vw;
	max-width: 230px;
}
.machine-img03{
	background-position: top 20px left 1vw;
	background-image: url("../../img/product/machine-img-back.jpg");
	background-repeat: no-repeat;
	background-size: 19vw 21vw;
	display: inline-block;
	vertical-align: top;
	width: 24vw;
	max-width: 250px;
}
.machine-img04{
	background-position: top 20px left 1vw;
	background-image: url("../../img/product/machine-img-back.jpg");
	background-repeat: no-repeat;
	background-size: 19vw 21vw;
	display: inline-block;
	vertical-align: top;
	width: 24vw;
	max-width: 230px;
}
.machine{
    display: inline-block;
    width: 26vw;
    vertical-align: top;
	padding-top: 25px;
	max-width: 260px;
	position: static;
	margin-left: 20px;
}
.accentline-03{
	width: 100%;
	height: 4px;
	background-color: #00A99D;
	display: block;
}
.machine-title{
    font-weight: 500;
	border-bottom: dotted 1px #00A99D;
    border-top: solid 1px #00A99D;
	color: #00A99D;
	font-size: 2.2rem;
	margin: 4px auto;
	padding: 15px 0;
}
.machine-text{
	font-weight: 300;
    font-size: 1.6rem;
    line-height: 2.5rem;
    margin-top: 20px;
}
/*-----footer------*/ 

.footer-top{
	margin-top: 160px;

	width: 100%;
	height: 2px;
	background-color: #e5e5e5;
	margin-bottom: 100px;
}
.footer-logo{
	margin-top: -58px;
}
.groupcompany-wrapper{
	max-width: 964px;
	margin: 0 auto;

}
.footer-back{
	background-image:url("../../img/common/footer02.png");
	background-position: bottom;
	background-repeat: repeat-x;
	height: 400px;
	width: 100%;
	display: block;
	margin-top: -220px;
}
.groupcompany{
	display: inline-block;
	width: 309px;
	height: 175px;
	vertical-align: top;
}
.groupcompany-text{
	margin: 15px 2px 0px;
	font-weight: 500;
	font-size: 1.7rem;
	line-height: 2.4rem;
}
.groupcompany:not(:nth-child(3n+3)) {
    margin-right: 15px;
}

.footer-contact{
	max-width: 964px;
	margin: 0 auto;
	display: flex;
}
.footer-contact-back{
	background-color: #D7E9A4;
	width: 100%;
}
.footer-contact-text{
	 font-size: 2.4rem;
	line-height: 3.6rem;
	text-align: left;
	margin-top: 45px;
	font-weight: 500;
}
.footer-tel-button{
	margin: 25px 40px 25px 10px;
}
.footer-contact a .footer-tel-button:hover{
	opacity: 0.7;
}
.footer-mail-button{
	margin: 25px auto 25px;
	height: 110px;
	width: 200px;
	border-radius: 10px;
	background-color: #0EA79B;
	border: 1px solid;
	border-color: #026838;
	display: flex;
	padding-top: 43px;
	justify-content: center;
}
.footer-mail-button img{
	width: 30px;
	height: 20px;
	
}
.footer-mail-button p{
	font-size: 2.1rem;
	color: #fff;
	font-weight: 500;
	padding-left: 10px;
}
.footer-mail-button:hover{
	background-color: #0D8EA7;
}

.footer-local-outer{
	background-color: #22B373;
	font-size: 1.4rem;
}
.footer-local{
	max-width: 964px;
	padding-top: 20px;
	margin: 0 auto 20px;
	display: flex;
}
.footer-local img{
	display: inline-block;
	
}
.footer-local p{
	display: inline-block;
	margin: 0 30px 0 0px;
	color: #fff;
	font-weight: 300;
}
.footer-local p:hover{
	color: #000;
}
.cip{
	max-width: 964px;
	margin: 0 auto 20px;
}
.cip img{
		display: inline-block;
}
.cip p{
	display: inline-block;
	margin: 0 30px 0 0px;
	color: #fff;
	font-weight: 300;
}
.cip a p:hover{
	color: #000;
}


.copy{
	max-width: 964px;
	margin: 0 auto;
	color: #FFFFFF;
	padding-bottom: 20px;
	font-weight: 300;
}

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

	.img_pc{
		display: block;
	}

	.img_sp{
		display: none;
	}
	.off-1500px{
		display: none;
	}
	.on-1500px{
		display: inline-block;
	}
	/*----header----*/
	.top-illustration{
		right: 0vw;
		bottom: 0;
		width: 40vw;
		min-width: 400px;
	}
	.chinese{
		display: block;
	}
	/*----section01----*/
	.efforts-wrapper{
		display: flex;
		justify-content: center;
		padding: 0 1vw;
	}
	.efforts-wrapper02{
		display: flex;
		justify-content: center;
	}
	.efforts-wrapper .efforts{
		margin: 0 5vw 0 0;
		
	}
	.efforts-wrapper02 .efforts{
		margin: 30px 5vw 0 0;
	}
	.efforts-wrapper .efforts:nth-child(3){
		margin-right: 0;
	}
	.efforts-wrapper02 .efforts:nth-child(2){
		margin-right: 0;
	}

	.efforts {
		width: 280px;
		height: 580px;
		margin: 0;
	}
	.efforts img{
		width: 100%;
	}
	.efforts-title{
		font-size: 1.7rem;
	}
	.efforts-text{
		height: 230px;
	}

	
	.diamond{
	  margin: 20px 2vw auto auto;
	}
	.diamond-after{
	  margin: 20px  auto auto 1.5vw;
	}
	.contents-before::before {
		width: 6vw;
		margin: 26px 4.2vw auto auto;
	}
	.contents-after::after {
		width: 6vw;
		margin: 26px auto auto 4vw;
	}

}
@media screen and (max-width:1010px){
	
	
	.img_pc{
		display: block;
	}

	.img_sp{
		display: none;
	}
		

	
	/*----head----*/
	.logo a img{
		width: 310px;
	}
	.logo{
		    margin: 15px auto 15px 20px;
	}
	.header{
		max-width: 97vw;
		margin: 0 auto 0 0;
	}
	.menu{
		width: auto;
		padding:25px 7px;
	}
	.menu-contact{
		padding: 25px 5px;
	}
	.japanese{
		display: block;
	}
	.chinese{
		display: block;
	}
/*----section01-----*/
	.efforts-wrapper .efforts{
		margin: 0 2vw 0 0;
		
	}
	.efforts {
		width: 253px;
		height: 560px;
		margin: 0;
	}
	.efforts-text{
		height: 250px;
	}

	/*----section03-----*/
	
	.section03{
		display: flex;
		width: 755px;
		justify-content: center;
		margin: 80px auto;
		padding: 0;
		flex-wrap: wrap;
	}
	.section03 a:nth-child(2) {
		margin : 0 0 0 65px;
	}
	.section03 a:nth-child(3) {
		margin : 20px 0 0 0;
	}

	.section03 a{
		width: 330px;
		display: block;
	}

	.section03 a img{
		width: 330px;
		display: block;
	}

	/*----section04-----*/
	
	.font-size-small{
		font-size: 1.6rem;	
		padding: 13px 0;
	}
	
	/*-----section06----*/
	.machine-wrapper {
		height: 400px;
	}
	.machine{
		padding-top: 0;
	}
	.machine-box img{
		margin-top: -20px;
	}
	
	
	
	
	.machine-img03{
		vertical-align: top;
		width: 24vw;
		
	}
		
	.machine-img04{
		vertical-align: top;
		
		
	}
	/*---footer----*/
	.footer-contact{
		max-width: 96vw;
	}
	.footer-contact-text{
		font-size: 2.0rem;
		margin-top: 30px;
	}
	.footer-tel-button{
		width: 45vw;
		margin: 25px 4vw 25px 1.2vw; 
	}
	.footer-mail-button p{
		font-size: 1.8rem;
	}
	.footer-mail-button{
		width: 20vw;
		height: 10vw;
		padding-top: 3.5vw;
	}
	.footer-mail-button img{
		width: 2.8vw;
    	height: 2vw;
	}
	.footer-local{
		max-width: 96vw;
	}
	.cip{
		max-width: 96vw;
	}
	.copy{
		max-width: 96vw;
	}
	.chinese{
		display: block;
	}	
	
}
	
	
@media screen and (max-width:768px){
	a[href^="tel:"]{
		pointer-events: auto;
	}
	#topbutton{
		display: none;
		width: 0px;     /* ←横幅 */
		height: 0px;
	}

	.off-1500px{
		display: inline-block;
	}
	.on-1500px{
		display: none;
	}
	
	.language-area{
		padding: 0;
		height: 20px;
	}
	.header{
		width: 99vw;

	}
	.logo a img {
		width: auto;
		height: 45px;
	}
	.logo {
		margin: 10px auto 10px 15px;
	}

	.dotted-box01{
		margin: 15px auto;
		width: 200px;
	}

	/*============
	nav
	=============*/
	nav {
		display: block;
		position: fixed;
		top: 0;
		left: -300px;
		bottom: 0;
		width: 300px;
		background: #22B573;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 3;
		opacity: 0;
	}
	.open nav {
		left: 0;
		opacity: 1;
	}
/*	nav .inner {
	  padding: 20px;
	}*/
	nav .inner ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	nav .inner ul li {
		position: relative;
		margin: 0;
/*		border-bottom: 1px dashed rgb(255, 255, 255);*/
		font-size: 4.0rem;
	}
	nav .inner ul li a {
		display: block;
		color: #fff;
		font-size: 2.4rem;
		padding: 15px;
		text-decoration: none;
		transition-duration: 0.2s;
		text-align: center;
	}
	nav .inner ul li a:hover {
		background: #218254;
	}
	.example {
	  height: 1px;
		position: relative;
	}
	.example::before {
		content: "";
		background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 15px);
		background-size: 15px 1px;
		background-repeat: repeat-x;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	  nav {
		left: -100vw;
		width: 100%;
		height: 400px;
		padding: 20px 3.5vw;
	  }
	/*============
	.toggle_btn
	=============*/
	.toggle_btn {
		display: block;
		position: fixed;
		top:  -webkit-35px;
		top:  35px;
		right: 2.5vw;
		width: 40px;
		height: 40px;
		transition: all .5s;
		cursor: pointer;
		z-index: 3;
	}
	.toggle_btn span {
		display: block;
		position: absolute;
		left: 0;
		width: 40px;
		height: 5px;
		background-color: #999999;
		border-radius: 0px;
		transition: all .5s;
	}
	.toggle_btn span:nth-child(1) {
		top: 0px;
	}
	.toggle_btn span:nth-child(2) {
		top: 16px;
	}
	.toggle_btn span:nth-child(3) {
		bottom: 3px;
	}
	.open .toggle_btn span {
		display: none;
	}
	/*============
	#mask
	=============*/
	#mask {
		display: none;
		transition: all .5s;
	}
	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:  #22B573;
		opacity: .3;
		z-index: 2;
		cursor: pointer;
	}
	/*============
	main
	=============*/
/*	main {
	  padding: 50px;
	}*/
	main h1 {
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		text-align: center;
	}
	.language{
		justify-content: center;
		padding-top: 20px;
	}
	.japanese{
		font-size: 2.0rem;
		padding: 10px 35px;
		margin-right: 15px;
	}
	
	.chinese{
		font-size: 2.0rem;
		padding: 10px 35px;
	}
	.top::before{
		display: none;
	}
	.top{
		background-image: url("../../img/product/sp/top-back.png");
		height: 47vw;
 	 	min-height: 350px;
	}
	.top-title {
		margin: 0;
		padding-top: 15vw;
		font-size: 3.7rem;
	}
	.top-illustration{
		min-width: 300px;
	}
	
	/*----section01-----*/
	
	.second-title01 {
		width: 300px;
	}
	.second-title-area {
    	padding: 60px 0;
	}
	.contents-before::before {
		margin: 13px 7.5vw auto auto;
	}
	.diamond {
		margin: 7.5px 3vw auto auto;
	}
	
	.diamond-after {
		margin: 7.5px auto auto 3vw;
	}
	.contents-after::after {
		margin: 13px auto auto 7.5vw;
	}
	.efforts-wrapper {
		display: inline-block;
		padding: 0;
		padding: 0 2.5vw;
	}
	.efforts-wrapper .efforts {
    	 margin: 0 3vw 0 0;
	}
	.efforts-wrapper .efforts:nth-child(even){
		margin: 0;
	}
	.efforts-wrapper .efforts:nth-child(3) {
		margin-right: 3vw;
	}
	.efforts{
		width: 44vw;
		height: 600px;
	}
	.efforts:nth-child(5){
		margin-top: 20px;
	}
	.efforts-mt-40{
		margin-top: -40px;
	}
	.title-4th-01 {
    	font-size: 2.0rem;
	}
	.efforts-title {
		font-size: 1.6rem;
	}
	.efforts-title-h40 {
		height: 40px;
	}
	.efforts-text{
		font-size: 1.5rem;
		height: 230px;
	}
	.efforts-text-last{
		height: 200px;
	}
	
	/*----section02-----*/
	
	
	.second-title02 {
		width: 270px;
	}

	.contents-before::before {
		margin: 17px 7.5vw auto auto;
		
	}
	.diamond {
		margin: 11px 3vw auto auto;
	}
	.contents-after::after {
		margin: 17px auto auto 7.5vw;
		
	}
	.diamond-after {
		margin: 11px auto auto 3vw;
	}
	.quality-wrapper {
		display: block;
   		width: 94vw;
	}
	.quality{
		width: 100%;
		max-width: none;
	}
	.quality-text {
		font-size: 1.5rem;
		line-height: 2.4rem;
		width: 90vw;
		max-width: 600px;
		margin: 0 auto;
		padding-right: 0;
	}
	.quality-title {
		font-size: 2.2rem;
		margin: 30px auto 40px;
	}
	.quality .center img {
		width: 90vw;
		height: auto;
		max-width: none;
	}
	.quality-wrapper img {
		width: 90vw;
		height: auto;
		max-width: none; 
		display: block;
		margin: 60px auto 0;
	}
	/*----section03----*/
	.section03 {
		display: flex;
		width: 94vw;
		justify-content: center;
		margin: 80px auto;
		padding: 0;
		flex-wrap: wrap;
	}
	.section03 a {
		width: 42vw;
	}
	.section03 a img{
		width: 42vw;
	}
	.section03 a:nth-child(2) {
		margin: 0 0 0 5vw;
	}
	/*----section04-----*/
	.section04 {
		padding: 60px 4vw 20px;
		width: 100%;
	}
	.tertiary-title {
		font-size: 2.5rem;
	}
	.accentline {
		height: 6px;
		width: 200px;
	}
	.accentline::after {
		width: -webki-calc(92vw - 210px);
		width: calc(92vw - 210px);
		height: 6px;
		border-radius: 1px;
		margin: 0 0 0px 200px;
	}
	.flex {
		display: block;
		margin: 0px auto;
	}
	.product{
		max-width: none;
		margin: 50px auto;
	}
	.product img{
		width: 33vw;
		height: 38.5vw;
		max-height: none;
		max-width: none;
		margin-right: 2vw;
	}
	.product-box{
		max-width: none;
		width: 57vw;
	}
	.product-title {
		font-size: 1.8rem;
		padding: 8px 0;
	}
	.product-text{
		font-size: 1.4rem;
		margin-top: 15px;
	}

	/*----section05----*/
	.accentline01-section05 {	
		width: 280px;
	}
	.section05 {
		padding: 60px 4vw 10px;
	}
	.accentline01-section05::after {
		width: -webki-calc(92vw - 300px);
		width: calc(92vw - 300px);
		margin: 0 0 0px 280px;
	}
	/*----section06----*/
	.section06 {
		padding: 60px 4vw 20px;
		width: 100%;
		margin: 0 auto;
	}
	.accentline01-section06::after {
		width: -webki-calc(92vw - 290px);
		width: calc(92vw - 290px);
		margin: 0 0 0px 280px;
	}
	.accentline01-section06 {
		width: 280px;
	}
	.machine-wrapper{
		max-height: none;
		height: auto;
	}
	.machine-box {
		display: flex;
		position: static;
	}
	.container {
		max-width: 530px;
		width: 80vw;
		right: 10px;
		display: block;
		position: static;
		margin: 30px auto 0;
	}
	.machine-img01{
		max-width: 280px;
		width: 40vw;
		background-size: 38vw 43vw;
		height: 42.1vw;
	}
	.machine-img02{
		max-width: 280px;
		width: 40vw;
		background-size: 37vw 43vw;
		height: 50vw;
	}
	.machine-img03{
		max-width: 280px;
		width: 40vw;
		background-size: 37vw 43vw;
		height: 32vw;
	}
	.machine-img04{
		max-width: 280px;
		width: 40vw;
		background-size: 37vw 43vw;
		height: 34vw;
	}
	.machine{
		width: 48vw;
		max-width: none;
		margin-left: 2vw;
	}
	/*---footer-----*/
	.footer-top {
		margin-top: 12.5vw;
		margin-bottom: 9.5vw;
	}

	.footer-logo{
		width: 39vw;
		margin-top: -8.7vw;
	}
	.groupcompany-wrapper{
		width: 95vw;
		
	}
	.groupcompany{
		width: 46vw;
		height: 26vw;
	}
	
	.groupcompany:not(:nth-child(3n+3)) {
		margin-right: 0;
	}
	.groupcompany:not(:nth-child(2n+2)) {
			margin-right: 2.4vw;
		}
	.groupcompany-text {
		margin: 1.5vw 0 3.1vw;
		font-size: 2.65vw;
		line-height: 3.2vw;
	}
	.groupcompany a img{
		width: 100%;
	}
	.footer-back{
		background-image: url("../../img/common/sp/footer02.png");
		background-size: cover;
		height: 55vw;
		margin-top: -30vw;
	}
	.footer-contact{
		max-width: 100vw;
		display: block;
		text-align: center;
		padding: 7vw 0;
	}
	.footer-contact-text{
		font-size: 3.7vw;
		margin-top: 0;
		text-align: center;
		line-height: 3.7vw;
	}
	.footer-tel-button {
		width: 75vw;
		margin: 6.2vw auto;
	}
	
	.footer-mail-button {
		width: 75vw;
		height: 15vw;
		margin: 0 auto;
		padding-top: 0;
		align-items: center;
	}
	.footer-mail-button img{
		width: 5vw;
		height: 3.5vw;
	}
	.footer-mail-button p{
		font-size: 3.9vw;
	}
	.img_pc{
		display: none;
	}

	.img_sp{
		display: inline;
	}
		
}
@media screen and (max-width:550px){
	.img_pc{
		display: none;
	}

	.img_sp{
		display: inline;
	}
		
	.off-1500px{
		display: inline-block;
	}
	.on-1500px{
		display: none;
	}
	
	.top {
		height: 47vw;
		min-height: 250px;
	}
	.top-illustration {
		min-width: 250px;
	}
	/*----section01----*/
	.second-title01 {
		width: 260px;
	}
	.second-title-area {
		padding: 40px 0;
	}
	.efforts-wrapper{
		display: block;
		width: 95vw;
		margin: 0 auto;
		padding: 0;
	}
	.efforts-wrapper .efforts{
		margin: 0 auto 50px;
		padding: 0;
		display: block;
		width: 90vw;
		height: auto;
	}
	.efforts-wrapper .efforts:nth-child(even){
		margin: 0 auto 50px;
	}
	.efforts-text{
		height: auto;
		padding-bottom: 20px;
	}
	.efforts img{
		width: 90vw;
		text-align: center;
		margin: 0 auto;
	}
	/*----section02----*/
	.second-title02 {
		width: 230px;
	}
	.quality-title {
   		 font-size: 2.0rem;
	}	
	/*----section03----*/
	.section03 {
   		display: block;
		width: 94vw;
		justify-content: center;
		margin: 60px auto;
		padding: 0;
		flex-wrap: wrap;
	}
	.section03 a {
		width: 70vw;
		margin: 0 auto 20px;
	}
	.section03 a img{
		width: 70vw;
		margin: 0 0 20px 0;
	}
	.section03 a:nth-child(2) {
		margin: 0 auto 20px;
	}
	.section03 a:nth-child(3) {
		margin: 0 auto;
	}
	
	
	
	.img_pc{
		display: none;
	}

	.img_sp{
		display: inline;
	}
		
	
	.footer-mail-button p{
		font-size: 2.5rem;
	}
	.footer-mail-button img{
		width: 25px;
		height: 18px;
	}

	
	
}
@media screen and (max-width:370px){
	
	.contents-after::after{
		height: 0;
	}
	.contents-before::before{
		height: 0;
	}
	
	.footer-local p {
  		margin: 0 15px 0 0px;
	}
	
	
}