@charset "utf-8";
/*  font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;
/*--------------------------------------------------------
	reset
---------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
ul,ol { list-style-type: none; }
em,strong,th,address { font-style: normal; font-weight: normal; text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; vertical-align: bottom; }
a{ outline: none;}
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }
/*-------------------------------------------------
	base
--------------------------------------------------*/
body {position: relative; background: #fff; color: #000; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5;  -webkit-text-size-adjust:100%;}
a{outline: none;}
/*txt img active*/
::selection ,
::-moz-selection { background:#666; }
img::selection,
img::-moz-selection { background:none; }
/*cookie*/
#onetrust-banner-sdk{ outline: none; }
p,
h1,
h2,
h3,
li{  font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
/*-------------------------------------------------
	font アンチエイリアス
--------------------------------------------------*/
/* 解像度 1x：subpixel、解像度 2x：grayscale */
h1,h2,.number,p
{ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; }
@media only screen and 
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
h1,h2,.number,p
{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
/*-------------------------------------------------
	txt
--------------------------------------------------*/
.txt_l { font-size: 48px; letter-spacing: 5px; line-height: 1.2;}
.txt_m { font-size: 18px; letter-spacing: 2px; line-height: 1.8;}
@media (max-width: 1300px) {
.txt_l { font-size: 3.69vw; letter-spacing: 0.38vw; }
.txt_m { font-size: 1.385vw; letter-spacing: 0.15vw;}
}/*END*/ 
@media (max-width: 1100px) {
.txt_m { font-size: 1.48vw; letter-spacing: 0.07vw;}
}/*END*/ 
@media (max-width: 1000px) {
.txt_l { font-size: 35px; letter-spacing: 5px;}
.txt_m { font-size: 18px; letter-spacing: 2px;}
}/*END*/ 
@media (max-width: 540px) {
.txt_l { font-size: 30px; letter-spacing: 5px;}
.txt_m { font-size: 16px; letter-spacing: 2px;}
}/*END*/ 
@media (max-width: 400px) {
.txt_l { font-size: 26px; letter-spacing: 5px;}
}/*END*/ 
@media (max-width: 330px) {
.txt_l { font-size: 24px; letter-spacing: 5px;}
}/*END*/ 
/*-------------------------------------------------
	header
--------------------------------------------------*/
header .inner{ display: flex;align-items: center; width: 100%; max-width: 2400px; margin: 0 auto;height: 100px;}
header .inner img{ width: 70px; height: auto; margin: 0 20px;}
header .inner h1{ font-size: 24px; color: #666;}
@media (max-width: 1600px) {
header .inner{height: 80px;}
}/*END*/ 
@media (max-width: 500px) {
header .inner{ display: flex;align-items: center; width: 100%; max-width: 2400px; margin: 0 auto;height: 80px;}
header .inner img{ width: 50px; height: auto; margin: 0 10px;}
header .inner h1{ font-size: 20px; }
}/*END*/ 
@media (max-width: 390px) {
header .inner img{ width: 40px; margin: 0 8px;}
header .inner h1{ font-size: 18px; }
}/*END*/ 
@media (max-width: 350px) {
header .inner img{ width: 40px; margin: 0 8px;}
header .inner h1{ font-size: 16px; }
}/*END*/ 
/*-------------------------------------------------
	main
--------------------------------------------------*/
#main img{ width: 100%;}
/*-------------------------------------------------
	total
--------------------------------------------------*/
#total { width: 100%; height: 410px;background: #fb5c5c;display: flex; align-items: center; justify-content: center;}
#total .inner{  max-width: 1600px; color: #fff; text-align: center;}
#total .inner h2{ font-size: 60px; letter-spacing: 10px;}
#total .inner h3{ font-size: 120px; letter-spacing: 5px;}
#total .inner h3 .sp1{ font-size: 72px;}
#total .inner h3 .sp2{ font-size: 80px;}
@media (max-width: 1600px) {
#total { height: 25.6vw;}
#total .inner h2{ font-size: 3.75vw; letter-spacing: 0.62vw;}
#total .inner h3{ font-size: 7.5vw; letter-spacing: 0.31vw;}
#total .inner h3 .sp1{ font-size: 4.5vw;}
#total .inner h3 .sp2{ font-size: 5vw;}
}/*END*/ 
/*-------------------------------------------------
	lead
--------------------------------------------------*/
#lead { width: 100%; display: flex; align-items: center; justify-content: center;}
#lead .inner{ width: 85%;  max-width: 1270px;  text-align: center; margin: 110px auto;}
#lead .inner .br_1{ display: none;}
#lead .inner .br_2{ display: block;}
#lead .inner .co_inner{ margin-top: 90px;display: flex; align-items: center; }
#lead .inner .co_inner .img_box{width: 60%;}
#lead .inner .co_inner .img_box .bag{width: 57%;}
#lead .inner .co_inner .img_box .model{width: 40%; margin-top: -16.5%; margin-left: 47%; position: relative; z-index: -1;}
#lead .inner .co_inner .txt_box{width: 43%;max-width: 452px; text-align: left;margin-left: 1.5%; margin-top: -10%;}
@media (max-width: 1300px) {
#lead .inner .co_inner .txt_box { max-width: 34.76vw;}
}/*END*/ 
@media (max-width: 1100px) {
#lead .inner .co_inner .txt_box { max-width: 35vw;}
}/*END*/ 
@media (max-width: 1000px) {
#lead .inner{ margin: 80px auto;}
#lead .inner .co_inner{ display: block;margin-top: 100px;}
#lead .inner .co_inner .img_box{width: 100%; margin-left: 8%;}
#lead .inner .co_inner .img_box .bag{width: 57%;}
#lead .inner .co_inner .img_box .model{width: 40%; margin-top: -16.5%; margin-left: 47%; position: relative; z-index: -1;}
#lead .inner .co_inner .txt_box{width: 100%;max-width: 452px; text-align: left; margin: 80px auto 0;}
}/*END*/ 
@media (max-width: 800px) {
#lead .inner .br_1{ display: block;}
}/*END*/ 
@media (max-width: 600px) {
#lead .inner{ margin: 65px auto;}
#lead .inner .co_inner{ display: block;margin-top: 80px;}
#lead .inner .co_inner .txt_box{margin: 60px auto 0;}
}/*END*/ 
@media (max-width: 540px) {
#lead .inner .co_inner .txt_box{ width: 90%;}
#lead .inner .br_2{ display: none;}
}/*END*/ 
@media (max-width: 450px) {
#lead .inner .co_inner .img_box{ margin-left: 0%;}
#lead .inner .co_inner .img_box .bag{width: 70%;}
#lead .inner .co_inner .img_box .model{width: 45%; margin-top: -5%; margin-left: 55%;}
}/*END*/ 
/*-------------------------------------------------
	design
--------------------------------------------------*/
#design { width: 100%; display: flex; align-items: center; justify-content: center; background: #f1f1f1;}
#design .inner{ width: 86%; text-align: center; margin: 110px auto;}
#design .inner p{ margin-top: 75px;}
#design .inner img{ margin-top: 75px;}
@media (max-width: 1000px) {
#design .inner{ margin: 80px auto;}
#design .inner p br{ display: none;}
#design .inner h2 span,
#design .inner p span{ display: inline-block;}
#design .inner p{  width: 80%;margin: 50px auto 0;text-align: left;}
#design .inner img{ margin-top: 50px;}
}/*END*/ 
@media (max-width: 610px) {
#design .inner h2{ width: 80%; margin: 0 auto;}
#design .inner h2 span.del_1{ display: none;}
}/*END*/ 
@media (max-width: 600px) {
#design .inner{ margin: 65px auto;}
#design .inner p{  width: 85%;}
#design .inner img{ scale: 1.05;}
}/*END*/ 
@media (max-width: 420px) {
#design .inner{ margin: 65px auto;}
#design .inner p{  width: 85%;}
#design .inner img{ scale: 1.09;}
}/*END*/ 
/*-------------------------------------------------
	cycle
--------------------------------------------------*/
#cycle { width: 100%; display: flex; align-items: center; justify-content: center;}
#cycle .inner{ width: 85%;  max-width: 1270px;  text-align: center; margin: 110px auto;}
#cycle .inner p{ margin-top: 75px;}
#cycle .inner img{ margin-top: 75px;}
#cycle .inner p br.br_1{ display: none;}
@media (max-width: 1000px) {
#cycle .inner{ margin: 80px auto;}
#cycle .inner p br{ display: none;}
#cycle .inner p br.br_1{ display: block;}
#cycle .inner p span{ display: inline-block;}
#cycle .inner p{  width: 70%;margin: 50px auto 0;text-align: left;}
#cycle .inner img{ margin-top: 65px;}
}/*END*/ 
@media (max-width: 600px) {
#cycle .inner{ margin: 65px auto;}
#cycle .inner p{  width: 85%;}
#cycle .inner img{ scale: 1.15;}
}/*END*/ 
/*-------------------------------------------------
	banner
--------------------------------------------------*/
#banner { margin-top: 50px;width: 100%; display: flex; align-items: center; justify-content: center; background-image: url(../img/banner.jpg); background-repeat: no-repeat;background-size: 100%;}
#banner .inner{ width: 85%;text-align: center; height: 26.5vw;display: flex; align-items: center; justify-content: center;}
#banner .inner p{ font-size: 36px; color: #fff;}
@media (max-width: 1600px) {
#banner .inner p{ font-size: 2.25vw; color: #fff;}
}/*END*/ 
@media (max-width: 1000px) {
#banner .inner p{ font-size: 3vw; color: #fff;}
}/*END*/ 
@media (max-width: 500px) {
#banner .inner p{ font-size: 3.5vw; color: #fff;}
}/*END*/ 
/*-------------------------------------------------
	process
--------------------------------------------------*/
#process { width: 100%; display: flex; align-items: center; justify-content: center;}
#process .inner{ width: 85%;margin: 110px auto 0; max-width: 1180px;}
#process .inner h2{ text-align: center;}
#process .inner ul{ margin-top: 110px;}
#process .inner ul li{  display: flex;  margin: 60px auto;}
/*-----左側----*/
#process .inner ul li .pro_l { width: 30%;}
#process .inner ul li .pro_l .titile_box{ font-size: 24px;padding: 22px 0; margin: 0 auto 50px; border-radius: 30px;width: 100%; max-width: 300px; background: #f2f2f2; text-align: center;}
#process .inner ul li .pro_l .line_t{ width: 1px; height: 75%; margin: 10% auto;background: #bcbcbc;}
/*-----右側----*/
#process .inner ul li .pro_r { width: 50%;margin: 12% auto 0; display: flex; align-items: center; justify-content: center;}
#process .inner ul li .pro_r .co_inner{ margin: 0 auto;}
/*-----img----*/
#process .inner ul li .pro_r .co_inner .img_box {display: flex; align-items: center; width: 60%;}
#process .inner ul li.egm .pro_r .co_inner .img_box {width: 65%;}
#process .inner ul li .pro_r .co_inner .img_box img.cs_1{ margin-right: 15%;}
#process .inner ul li.moririn .pro_r .co_inner .img_box img.cs_1{ width: 90%;}
/*-----logo----*/
#process .inner ul li .pro_r .co_inner .logo_grn{ margin-top: 30px; max-width: 175px;}
#process .inner ul li .pro_r .co_inner .logo_egm{ margin-top: 30px;max-width: 400px; width: 50%;}
#process .inner ul li .pro_r .co_inner .logo_sanetu{ margin-top: 30px;max-width: 280px; width: 80%; }
#process .inner ul li .pro_r .co_inner .logo_moririn{ margin-top: 30px;max-width: 200px; width: 50%; }
/*-----txt----*/
#process .inner ul li .pro_r .co_inner .txt_box{ margin-top: 20px;text-align: left;}
#process .inner ul li .pro_r .co_inner .txt_box span { display: inline-block;}
@media (max-width: 1250px) {
/*-----右側----*/
#process .inner ul li .pro_r { width: 70%;margin-left: 10%;}
#process .inner ul li.moririn .pro_r { width: 50%;margin-left: 10%;}
#process .inner ul li.grn .pro_r .co_inner .img_box {width: 45%;}
}
@media (max-width: 1000px) {
#process .inner{ width: 90%;margin: 80px auto 0;}
#process .inner ul{ margin-top: 80px;}
#process .inner ul li{ width: 90%; display: block;  margin: 100px auto; justify-content: center;align-items: center; }
/*-----左側----*/
#process .inner ul li .pro_l { width: 100%; }
#process .inner ul li .pro_l .titile_box{ margin: 0 auto;}
#process .inner ul li .pro_l .line_t{ display: none;}
/*-----右側----*/
#process .inner ul li .pro_r {width: 100%;margin: 50px auto !important;display: block;}
/*-----img----*/
#process .inner ul li .pro_r .co_inner .img_box { width: 60%; margin: 0 auto;}
#process .inner ul li.grn .pro_r .co_inner .img_box {transform: translate(-55%, 0%);}
#process .inner ul li.moririn .pro_r .co_inner .img_box {transform: translate(-55%, 0%);}
#process .inner ul li.egm .pro_r .co_inner .img_box {width: 60%;}
#process .inner ul li.moririn .pro_r{ width: 80%;}
/*-----logo----*/
#process .inner ul li .pro_r .co_inner .logo_grn{ margin: 30px auto; max-width: 175px;}
#process .inner ul li .pro_r .co_inner .logo_egm{ margin: 30px auto; max-width: 400px; width: 50%;}
#process .inner ul li .pro_r .co_inner .logo_sanetu{ margin: 30px auto; max-width: 280px; width: 80%;justify-content: center;display: flex; }
#process .inner ul li .pro_r .co_inner .logo_moririn{ margin: 23px auto; max-width: 200px; width: 50%; }
/*-----txt----*/
#process .inner ul li.egm .pro_r .co_inner .txt_box,
#process .inner ul li.sanetu .pro_r .co_inner .txt_box,
#process .inner ul li.moririn .pro_r .co_inner .txt_box{ text-align: center;}
#process .inner ul li.moririn .pro_r .co_inner .txt_box br{ display: none;}
}/*END*/ 
@media (max-width: 600px) {
#process .inner{ width: 90%;margin: 80px auto 0;}
#process .inner ul{ margin-top: 50px;}
/*-----img----*/
#process .inner ul li .pro_r .co_inner .img_box { width: 80%; margin: 0 auto;}
#process .inner ul li.egm .pro_r .co_inner .img_box {width: 80%;}
#process .inner ul li.grn .pro_r .co_inner .img_box {width: 80%;display: block;transform: initial;}
#process .inner ul li.grn .pro_r .co_inner .img_box img{margin-top: 20px;}
#process .inner ul li.moririn .pro_r .co_inner .img_box{ width: 100%;display: block;margin: 0 auto;transform:initial;text-align: center;}
#process .inner ul li.moririn .pro_r .co_inner .img_box img{margin: 20px auto 0;}
#process .inner ul li .pro_l .co_inner .titile_box{ font-size: 20px;}
#process .inner ul li.moririn .pro_r .co_inner .img_box img.cs_1{ width: 100%;}
/*-----logo----*/
#process .inner ul li .pro_r .co_inner .logo_egm{width: 100%;}
}/*END*/ 
/*---------make10--------*/
#process .make10 {  margin-top: 200px;text-align: center; }
#process .make10 h2.txt_l { letter-spacing: 0;}
#process .make10 .img_box { width: 80%; margin: 50px auto 0;}
#process .make10 .txt_box { width: 80%; margin: 50px auto 0;}
@media (max-width: 1000px) {
#process .make10 {  margin-top: 20vw;text-align: center; }
#process .make10 .img_box { width: 80%; margin: 5vw auto 0;}
#process .make10 .txt_box { width: 80%; margin: 5vw auto 0;}
}
/*-------------------------------------------------
	popup
--------------------------------------------------*/
#popup { width: 100%; display: flex; align-items: center; justify-content: center;}
#popup .inner{ width: 85%;  text-align: center; margin: 150px auto;}
#popup .inner h2 .line{ background: linear-gradient(transparent 60%, #fffb8e 50%);}
#popup .inner p{ margin-top: 75px;}
#popup .inner .img_box{ width: 90%; max-width: 1300px; margin: 50px auto 0;flex-wrap: wrap;}
#popup .inner .img_box img{ width: 40%; margin: 2.5% 2.5%;}
@media (max-width: 1000px) {
#popup .inner{ margin: 120px auto;}
#popup .inner p br{ display: none;}
#popup .inner  span{ display: inline-block;}
#popup .inner p{  width: 80%;margin: 50px auto 0;text-align: left;}
#popup .inner .img_box{ width: 90%; max-width: 1300px; margin: 50px auto 0;flex-wrap: wrap;}
#popup .inner .img_box img{ width: 85%; margin: 2.5% 2.5%;}
}/*END*/ 
@media (max-width: 750px) {
#popup .inner .img_box img{ width: 90%; margin: 2.5% 2.5%;}
}/*END*/ 
@media (max-width: 600px) {
#popup .inner{ margin: 100px auto;}
#popup .inner p{  width: 85%;}
}/*END*/ 
@media (max-width: 450px) {
#popup .txt_l { font-size: 22px; letter-spacing: 5px;}
}/*END*/ 
@media (max-width: 330px) {
.txt_l { font-size: 24px; letter-spacing: 5px;}
}/*END*/ 
/*-------------------------------------------------
	popup
--------------------------------------------------*/
#zoutei { width: 100%; display: flex; align-items: center; justify-content: center; background: #f1f1f1;}
#zoutei .inner{ width: 85%;  text-align: center; margin: 150px auto;}
#zoutei .inner p{ margin: 75px auto 0; width: 1020px;}
#zoutei .inner p span{ display: inline-block;}
#zoutei .inner .img_box{ width: 70%; max-width: 1000px; margin: 75px auto 0;flex-wrap: wrap;}
@media (max-width: 1300px) {
#zoutei .inner p{ width: 800px;}
}/*END*/ 
@media (max-width: 1000px) {
#zoutei .inner{ margin: 120px auto;}
#zoutei .inner p br{ display: none;}
#zoutei .inner  span{ display: inline-block;}
#zoutei .inner p{  width: 80%;margin: 50px auto 0;text-align: left;}
#zoutei .inner .img_box{ width: 90%; max-width: 1300px; margin: 50px auto 0;flex-wrap: wrap;}
}/*END*/ 
@media (max-width: 600px) {
#zoutei .inner{ margin: 100px auto;}
#zoutei .inner p{  width: 85%;}
}/*END*/ 

@media (max-width: 330px) {
.txt_l { font-size: 24px; letter-spacing: 5px;}
}/*END*/ 
/*-------------------------------------------------
	footer
--------------------------------------------------*/
footer{ padding: 70px 0;width: 100%; background: #666666;display: flex; align-items: center; justify-content: center;}
footer .inner{ width: 85%; max-width: 850px;} 
footer .inner h2{ margin-bottom: 30px;font-size: 22px; line-height: 2; letter-spacing: 2px; color: #fff;} 
footer .inner p{ font-size: 16px; line-height: 2; letter-spacing: 2px; color: #fff;}
footer .inner p.com{ margin-top: 55px;}
footer .inner  span{ display: inline-block;}
footer .inner p .br_1{ display: none; }
@media (max-width: 1060px) {
footer .inner h2{ font-size: 20px}
footer .inner p{ font-size: 14px; }
}/*END*/ 
@media (max-width: 940px) {
footer .inner p .br_1{ display: block; }
}/*END*/