@charset "utf-8";

/* INDEX KV */
.kv-area {
  position: relative;
  margin-bottom:10em;
  /* background: rgba(0,0,0,0.5); */
}
.kv-area > img{ object-fit:cover; width:100%; height:100%; position:absolute; left:0; top:0; }
.kv-area h1 {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.kv-area h1 b {
  font-size: 500%;
  font-weight: 600;
  display: block;
  line-height: 1.2;
}
.kv-area h1 span {
  font-size: 100%;
  letter-spacing: 0.15em;
  display: block;
  font-weight: 400;
  margin-left: .3em;
}
.kv-area h1.bk { color:#222; text-shadow:0 0 5px #fff; }
.kv-btns-area {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
}
.kv-area.company {  }
.kv-area.company h1 {  }
.kv-area.product,.kv-area.news{ margin-bottom:0; background:#E5EAF3; } 
.kv-area.product .inner,.kv-area.news .inner { padding: 3em 0 6em; }

.kv-area .inner{ max-width:1280px; margin:0 auto; width: 90%; padding: 10em 0; }
.kv-area .read{ background:rgba(229, 234, 243, .9); transform: translateY(4em); position:relative;  max-width: 750px; float: right; padding: 2.5em 3em;}
.kv-area .read p{ margin:.5em 0; line-height:2; }

.kv-area .inner.shutten{ position:relative; }
.kv-area .inner.shutten > p{ position:absolute; right:0; }
.kv-area .inner.shutten > p a{ color:#fff; font-size:90%; opacity:0.8; transition:.3s opacity; }
.kv-area .inner.shutten > p a:hover{ opacity:1; }

.kv-btns-area .btns-wrap a {
  width: 400px;
  height: 60px;
  font-size: 140%;
  height: 3.75em;
  width: 27.25em;
}
.kv-area.type1{ background:#E5EAF3; margin-bottom: 6em; }
.kv-area.type1 h1,.kv-area.news h1 { text-shadow:none; color:#333; }
.kv-area.type1 h1 b,.kv-area.news h1 b{background-clip: text; -webkit-background-clip: text; color:transparent; background-image: linear-gradient(90deg, var(--color-base), #029ced); background-repeat:no-repeat; display: inline-block;}
.kv-area.type1 .inner { padding:4em 0 5em; }

.kv-area.type2{ height:400px; }
.kv-area.type2:after { height:1px; background:#ccc; width: 90%; left:5%; display:none; }
.kv-area.type2 h1{ color:#333; text-shadow:none; }
.kv-area.type2 h1 .jp { color:#777; }

/* aboutus */
.aboutus .kv-area { min-height:100svh; }
.aboutus .kv-area > img{position: fixed;}
.aboutus .kv-area .read{ background:rgba(0, 0, 0, .7); transform: translateY(6em); position:relative;  max-width: 750px; float: none; padding: 2.5em 3em; color: #fff;}
.aboutus .kv-area .read h3{ font-size:130%; border-bottom:1px solid #fff; padding-bottom:.8em; margin-bottom:.8em; }
.aboutus .kv-area .read h3 b{ font-size:200%; display:block; font-weight:600; line-height:1.3; }
.bgb{ background:#1F3B5B; position:relative; z-index:1; margin-bottom:80svh; }
.about-core-main,.about-core{ position:relative; z-index:1; }
.about-core-main{ display:flex; align-items:center; justify-content:center; width:90%; margin:0 auto 10rem; }
.about-core-main h3{ color:#fff; font-size:120%; letter-spacing:0.05em; padding:0 3em 0 1em; line-height:1.5; }
.about-core-main h3 b{ display:block; font-size:380%; font-weight:600;font-family:var(--f-noto); }
.about-core-main h3 span{ opacity:.5; }
.about-core-main img{ max-width:720px; width:60%; }

.about-core{ color:#fff; padding-bottom:8rem; }
.about-core-tit{ display:flex; align-items:center; justify-content: space-between; width:90%; }
.about-core-tit.reverse{ margin-left:10%; flex-direction:row-reverse; }
.about-core-tit .ph{ max-width:1100px;width:57.5%; clip-path: inset(0 0 0 100%); }
.about-core-tit.play .ph{ animation: insetWipeIn .6s cubic-bezier(0.33, 1, 0.68, 1) 1 normal both; }
.about-core-tit .txt{ max-width: 600px; width:38%; opacity:0; }
.about-core-tit.play .txt{ animation: fadeIn .5s .3s forwards; }
.about-core-tit .txt h3{ vertical-align:middle; letter-spacing:0.05em; margin-bottom:1em; }
.about-core-tit .txt h3 b{ display:inline-block; vertical-align:middle; opacity:.5; font-size:550%; font-weight:600; line-height:1.2; }
.about-core-tit .txt h3 span{ color:#029CED; display:inline-block; vertical-align:middle; margin-left:1em; }
.about-core-tit .txt h3 span.core2{ color:#00BA8E; }
.about-core-tit .txt h3 span.core3{ color:#E3B500; }
.about-core-tit .txt h3 strong{ display:block; font-size:200%; font-weight:600; line-height:1.5; }
.about-core-tit .txt p{ margin-bottom:1rem; opacity:.8; }
.core2-txt{ width:80%; margin:5rem auto 0; justify-content:space-between; display:flex; }
.core2-txt > div{ width:48%; }
.core2-txt-in{ height:16rem; overflow:hidden; transform:height .5s; }
.core2-txt-in.on{ height:auto; }
.core2-txt h2{ margin-bottom:2rem; }
.core2-txt h3{ margin-bottom: 1rem;}
.core2-txt-sec{ margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid #899FC7; }
.core2-txt ul.list li:not(.end)::before { background-color:#fff; }
.core3-txt{ border:1px solid #fff; width:90%; margin:8rem auto 0; max-width:1200px; padding:3rem;}
.core3-txt h3{ font-size:170%; letter-spacing: 0.1em; text-align:center; }
.core3-txt p{ margin-top:1rem; opacity:.8; }
#aboutus-img{ position:fixed; left:0; top:0; height:100svh; width:100%; }
#aboutus-img > img{ object-fit:cover; width:100%; height:100%; }
.about-other{ position:relative; z-index:1; background:#fff; padding:10rem 5%; }
.about-other.bg2{ background:#E8ECF4; }
.about-other-in{ max-width:1280px; margin:0 auto; }
.about-other-in .ph{ border-radius:2rem; overflow:hidden; margin-bottom:3rem; }
.about-other-in .txt{ max-width:1000px; width:90%; margin:0 auto; }
.about-other-in .txt h3{ font-size:240%; }
.about-other-in .txt p{ margin-top:1rem; }
ul.icon-list{ display:flex; gap:2rem; margin-top:2rem; }
ul.icon-list li{ width: 25%; text-align:center; background:#fff; border-radius:1rem; padding:1.5rem; }
ul.icon-list li img{}
ul.icon-list li h4{ font-size:120%; margin:.5rem 0; }
ul.icon-list li p{ font-size:90%; text-align:left; opacity:.8; }
.about-end{ background:url(/img/aboutus/ph7.webp) no-repeat center center; background-size:cover; color:#fff; position:relative; z-index:1; padding:15rem 0; }
.about-end-in{ max-width:1000px; width:90%; margin:0 auto; }
.about-end-in h3{ font-size:240%; position:relative; text-align:center; margin-bottom:1em; padding-bottom:.8em; line-height:1.5; text-shadow:3px 3px 5px rgba(0, 0, 0, .5); }
.about-end-in h3:before{ width:10rem; height:3px; content:""; position:absolute; left:calc(50% - 5rem); bottom:0; background:#fff; }
.about-end-in p{ margin-top:1rem; line-height:2; }

@keyframes insetWipeIn {
    0% {
        clip-path: inset(0 100% 0 0)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}


.tit-area{position: relative;}
.tit-area .inner{ max-width:1280px; margin:0 auto; width: 90%; padding: 6em 0; }
.tit-area h1{ position: relative; letter-spacing:0.05em; }
.tit-area h1 b{font-size: 300%; font-weight: 400; display: block; line-height: 1.2; color: var(--color-base);}
.tit-area h1 span{ font-weight: 400; color:#777; font-size: 80%; }

.tit-area.map{ background-color:#E5EAF3; overflow:hidden; margin-bottom:6em; }
.tit-area.map > img{ object-fit:cover; width:100%; max-width: 1690px; height:800px; position:absolute; left:50%; top:114px; transform:translateX(-45%); }
.tit-area.map .inner{ height:740px; }
.tit-area.map .base{ position:relative; height:100%; transform:translateX(5%); }
.tit-area.map .abroad{ position:absolute; left:5%; top:10%; display:flex; align-items:center; gap:1em; }
.tit-area.map .abroad dt{ color:var(--color-base); font-weight:600; font-size:80%; }
a.map-link{ display:inline-block; line-height:1.3; padding:.5em 1em; background:#fff; border-radius:3px; box-shadow:2px 2px 10px rgba(0, 0, 0, .1); color:#000; margin:.3em 0; transition:var(--tra1); }
a.map-link:hover{ text-decoration:none; color:var(--color-base2); }
.tit-area.map .japan a.map-link{ position:absolute; }
a.map-link#tokyo{ right:22%; top:46%; }
a.map-link#iruma{ right:15%; top:30%; }
a.map-link#futu{ right:24%; top:61%; }
a.map-link#hamamatsu{ right:24%; bottom:19%; }
a.map-link#nagoya{ left:35%; top:32%; }
a.map-link#kobe{ left:26%; top:54%; }

@media screen and (max-width: 1280px) {
  .tit-area.map > img{height:62vw; position:absolute; left:50%; top:7rem; }
  .tit-area.map .inner{ height:57vw; }
  .about-core-tit { width:95%; }
  .about-core-tit.reverse { margin-left:5%; }
  .core2-txt { width:90%; }
  .about-end { padding:10rem 0; }
}
@media screen and (max-width: 810px) {
  .about-core-main{ display:block; text-align:center; }
  .about-core-main h3 { padding:0; margin-bottom:2rem; }
  .about-core-main img { width:100%; }
  .about-core-tit { display:block; margin:0 auto; width:90%; }
  .about-core-tit.reverse { margin-left:auto; }
  .about-core-tit .ph { width: 100%; }
  .about-core-tit .txt { width: 90%; margin:2rem auto 0; }
  .core2-txt { flex-direction:column; gap:4rem; }
  .core2-txt > div { width:100% }
  .about-other-in .ph { border-radius: 1rem; }
  .about-other { padding:5rem 5%; }
  .about-other-in .txt h3 { line-height:1.5; }
  ul.icon-list{ flex-wrap:wrap; gap:1rem; }
  ul.icon-list li{ width:calc(50% - .5rem); border-radius: .5rem; }
}
@media screen and (max-width: 600px) {
  .about-other-in .txt h3 { font-size:160%; }
  .about-end-in h3 { font-size:160%; }
}

/* conntents */
.cont{ max-width:1280px; width:90%; margin:0 auto 5em; }
.cont.s{  max-width:1050px; }
.cont.wid{ display:flex; justify-content:space-between; }
.cont.wid > h2{ width:20%; margin-top:1em; }
.cont.wid > .inner{ width:75%; }
.cont.map > .inner{ display:flex; justify-content:space-between; }
.cont.map .txt{ width:33%; margin-top:3em; position:relative; padding-right:1em; z-index:2; }
.cont.map .txt .ph{ width:110%; max-width:450px; margin-bottom:2em; }
.cont.map .txt h2{ margin-bottom:.6em; }
.cont.map .txt .access{ border-top:1px solid #ccc; margin-top:.6em; padding-top:.6em; }
.cont.map ul.contact{ display:flex; gap:0 2em; font-size:120%; flex-wrap:wrap; margin-top:.6em; }
.cont.map ul.contact li{ display:flex; align-items:center; gap:.5em; }
.cont.map ul.contact li b{ color:var(--color-base); font-weight:500; font-size:80%; }
.cont.map ul.contact li a{ color:#000; }
.cont.map .map-area{ width:67%; text-align:right; }
.cont.map .map-area > div{ background-color:#E5EAF3; padding:.6em; }
.cont.map .map-area .map{ height:38em; }
.cont.map .map-area a{ background-color:#E5EAF3; display:inline-block; color:var(--color-base); padding:0 1em .6em; transition:.5s; }
.cont.map .map-area a:hover{ color:var(--color-base2); text-decoration:none; }

.cont.news{ max-width:900px; margin-top:1em; }


#local{  position:relative; max-width:1280px; width:90%; margin:8em auto; padding:1em 0; }
#local:before{ content:""; background:#e5ebf6; width:1400px; position:absolute; height:100%; top:0; left:calc(50% - 700px); border-radius:5px; }
#local ul{ position:relative; display:flex; justify-content:center; gap:2em; font-size:90%; }
#local ul a{ color:#000; display:block; padding:1em; transition:var(--tra1); position:relative; }
#local ul a:before{ content:""; width:0; height:1px; transition:var(--tra1); background:var(--color-base); position:absolute; left:50%; bottom:.5em; }
#local ul .on a{ color:var(--color-base); } 
#local ul a:hover{ color:var(--color-base); text-decoration:none; }
#local ul a:hover:before{ width:100%; left:0; }

/* INDEX レイアウト */
.index-list{ max-width:1280px; width: 90%; margin: 0 auto 5em; }
.index-list ul{ display:flex; flex-wrap:wrap; gap:3%; width:100%; }
.index-list li{ max-width:400px; width:31.3%; margin-bottom:3em; }
.index-list li .img{ border-radius:.8em; box-shadow:10px 10px 0 rgba(4, 60, 163, .15); overflow:hidden; margin-bottom:1.5em; transition:var(--tra1); }
.index-list li .img img{ transition:var(--tra1); }
.index-list li a{ color:#000; display:block; }
.index-list li h3{ font-weight:400; display:flex; justify-content:space-between; align-items:center; padding-left:.5em; font-size:120%; line-height:1.5; transition:.6s; }
.index-list li h3:after{ content:"→"; border-radius:100px; border:1px solid #ccc; color:#aaa; height:2.2em; width:2.2em; text-align:center; padding-top:.3em; box-sizing:border-box; font-size:90%; transition:var(--tra1);  }
.index-list li a:hover{ text-decoration:none; color:var(--color-base); }
.index-list li a:hover .img{ box-shadow:none; }
.index-list li a:hover .img img{ transform:scale(1.1); }
.index-list li a:hover h3:after{ background-color:var(--color-base); border-color:var(--color-base); color:#fff; transform:scale(1.1) translateX(10px); }




.index-flex2,.index-flex2-text{ display:flex; flex-wrap:wrap; max-width:1350px; margin: 0 auto; gap:50px; }
.index-flex2 li,.index-flex2-text li{ width:calc(50% - 25px); text-align:center; opacity:0;  } 
.index-flex2 li .text{ position:absolute; left:0; top:45%; transform:translateY(-50%); width:100%; color:#fff; text-shadow:0 0 5px #000; }
.index-flex2 li .text span,.index-flex2-text h3 span{ font-family:  var(--en-go); font-size: 120%;  margin-bottom: .3em; font-weight: 400; display: block; transition:.6s; letter-spacing: 0.05em; opacity: 0.7;}
.index-flex2 li .text b,.index-flex2-text h3 b{ font-family: var(--f-min); font-weight: 400; font-size: 240%; transition:.6s; line-height: 1.4;}
.index-flex2 li a,.index-flex2-text li a{display:block; position:relative; transition:.3s; background: #222;}
.index-flex2 li a:hover,.index-flex2-text a:hover{ text-decoration:none; }
.index-flex2 li .img{ overflow:hidden; }
.index-flex2 li .img img{ filter:saturate(0%); transition:.6s cubic-bezier(0.215, 0.61, 0.355, 1); opacity:0.3; }
.index-flex2 li a:hover .img img{ filter:saturate(100%); transform:scale(1.1); opacity:.8;  }
.play .index-flex2 li,.index-flex2-text li{ animation: fade 1s forwards; }
.play .index-flex2 li:nth-of-type(2),.index-flex2-text li:nth-of-type(1){ animation-delay: .2s; }
.play .index-flex2 li:nth-of-type(3),.index-flex2-text li:nth-of-type(2){ animation-delay: .4s; }
.play .index-flex2 li:nth-of-type(4),.index-flex2-text li:nth-of-type(3){ animation-delay: .6s; }
.play .index-flex2 li:nth-of-type(5),.index-flex2-text li:nth-of-type(4){ animation-delay: .8s; }
.play .index-flex2 li:nth-of-type(6),.index-flex2-text li:nth-of-type(5){ animation-delay: 1s; }
.play .index-flex2 li:nth-of-type(7),.index-flex2-text li:nth-of-type(6){ animation-delay: 1.2s; }
.play .index-flex2 li:nth-of-type(8),.index-flex2-text li:nth-of-type(7){ animation-delay: 1.4s; }

.index-flex2-text li{ min-height:25em; }
.index-flex2-text li.s{ min-height:12em; }
.index-flex2-text li .text{ text-align:left; padding:3em; position:relative; }
.index-flex2-text li .text h3{ margin-bottom:1em; }
.index-flex2-text li .text p{ font-size:120%; color:#999; }
.index-flex2-text li a{ background:#fff; box-shadow:0 0 20px #eee; position:relative; height:100%; display:flex; align-items:center; }
.index-flex2-text li a:after{ content: ""; position:absolute; left: 0; top: 0; width:8em; height:1px; background:var(--color-red); transition: .4s cubic-bezier(0.33, 1, 0.68, 1); }
.index-flex2-text li a:before{ content: ""; position:absolute; right: 2em; top:calc(50% - 4px); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transition: var(--tra1); }
.index-flex2-text li a:hover:before{ right:1em; }
.index-flex2-text li a:hover:after{ width:100%; }
.index-flex2-text li a:hover h3{ color:#222; }

/* flex レイアウト */
.flex2{ display:flex; max-width:1350px; margin: 0 auto; justify-content:space-between; gap:3.5em; }
.flex2.wrap{ flex-wrap: wrap; }
.flex2 > div{ width:48%; }

.qua{ display:flex;margin: 0 auto; justify-content:space-between; gap:3em; }
.qua .img{ width:320px; }
.qua .txt{ width:calc(100% - 320px - 3em); }

.flex2 .sns a{ text-decoration:none; font-size:110%; display:block; }
.flex2 .sns a h3{ font-family: var(--en-min); font-size:170%; font-weight:300; margin:1em 0 .5em; display:flex; align-items:center; }
.flex2 .sns a h3 img{ height:1.4em; width:auto; display:inline-block; margin-right:.5em; }
.flex2 .sns a img{ transition:.3s; }
.flex2 .sns a:hover img{ filter:var(--hover-brightness); }


.flex-list{ display:flex; justify-content:center; gap:2em; }
.flex-list li{ width:33%; text-align:center; }
.flex-list li .text{ font-family: var(--f-min); font-weight: 400; font-size: 180%; margin-top:.5em; }
.flex-list li .text span{ font-size:70%; display:block; font-family: var(--en-go); color:#aaa; letter-spacing:0.05em; }

.flex-img{  display:flex; align-items:center; gap:5%; }
.flex-img.rev{ flex-direction:row-reverse; }
.flex-img > div{ width:40%; margin-bottom:0; } 
.flex-img > div.img,.flex-img > div.calender{ width:60%; } 
.flex-img.effect > div{ opacity:0; }
.flex-img.play  > div{ animation: fade2 1s .4s forwards; }
.flex-img.play  > div.img{ animation-delay:0s; }
.flex-img > div.calender{ font-size:120%; }


#history-area{ position:relative; }
#history-area:before{ content:""; position:absolute; left:50%; top:0; transform: translateX(-280px); height:100%; width:1px; background:rgba(0, 0, 0, .2); }
.history{ padding:5em 0; }
.history .inner{ display:flex; justify-content:space-between; max-width:1280px; width:90%; margin:0 auto; position:relative; }
.history .period{ width:25%; position:relative; }
.history .period > div{ position:absolute; left:0; top:0; transform:translateY(2em); }
.history .period h2{ line-height:1.2; margin-bottom:1.5em; }
.history .period h2 span{ color:#999; font-size: 120%; font-weight:400; display:block; }
.history .period h2 b{ font-size:290%; font-weight:400; font-family: "Noto Serif JP", serif; display:block; }
.history .period p{ font-size:85%; color:#555; line-height:1.9; text-align:justify; }
.history .text{ width:68%; padding-top:1em; }
.history .text .ph-r{ float:right; width:30%; }
.history .text .year{ width:67%; margin:1em 0 3em; }
.history .text .year h3{  font-weight:400; letter-spacing:0.05em; line-height:1; position:relative; color: #555;}
.history .text .year > h3:before{ content:""; width:11px; height:11px; position:absolute; left:-55px; top:60%; transform:translateY(-50%); background:#043CA3; border-radius:100px; }
.history .text .year h3 b{ color:#043CA3; opacity:.5; font-size:300%; font-weight:400; display:inline-block; width: 2.7em; transform:translateY(.1em); }
.history .text .year h4{ border-bottom:1px solid #043CA3; color: #043CA3; font-weight:400; font-size:120%; letter-spacing:0.05em; padding-bottom:.2em; margin:1em 0 0; }
.history .text .year .txt{}
.history .text .year .txt h3{ font-size:130%; line-height:1.4; color:#000; margin:.5em 0 .2em; }
.history .text .year .txt h3 span{ font-size:80%; }
.history .text .year .txt p{ font-size:90%; color:#333; }
.history .text .year .img{ display:flex; align-items:center; gap:1.5em; margin-top:1.5em; }

.history.p1{ padding-top:0; }
.history.p2{ background:#F6FCFF; }
.history.p2 .period h2 b{ color:#304874; }
.history.p2 .text .year h3 b{ color:#304874; }
.history.p2 .text .year > h3:before{ background:#304874; }
.history.p2 .text .year h4{ border-color:#304874; color:#304874; }
.history.p3{ background:#FFFCF4; }
.history.p3 .period h2 b{ color:#6D582A; }
.history.p3 .text .year h3 b{ color:#6D582A; }
.history.p3 .text .year > h3:before{ background:#6D582A; }
.history.p3 .text .year h4{ border-color:#6D582A; color:#6D582A; }
.history.p4{ background:#FFF7F5; }
.history.p4 .period h2 b{ color:#CD743D; }
.history.p4 .text .year h3 b{ color:#CD743D; }
.history.p4 .text .year > h3:before{ background:#CD743D; }
.history.p4 .text .year h4{ border-color:#CD743D; color:#CD743D; }
.history.p5{ background:#FAFFF5; }
.history.p5 .period h2 b{ color:#48B18F; }
.history.p5 .text .year h3 b{ color:#48B18F; }
.history.p5 .text .year > h3:before{ background:#48B18F; }
.history.p5 .text .year h4{ border-color:#48B18F; color:#48B18F; }


.catalog{ background-color:#fff; }
.catalog .name{ background:var(--color-bg2); margin-bottom:2.5em; position:relative; }
.catalog .name a,.catalog .name p{ display:block; color:#fff; padding:1em 2em; transition: var(--tra1); }
.catalog .name span {font-weight: 400; font-size: 120%; display: block; line-height: 1.4; }
.catalog .name b  { font-family:var(--f-min2); font-weight: 300; font-size: 200%; letter-spacing: 0.05em; line-height: 1.2; }
.catalog .name a:before{ content: ""; position:absolute; right: 1.5em; top:calc(50% - 4px); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transition: var(--tra1); filter:brightness(100); }
.catalog .name a:hover{ text-decoration:none; background-color:rgba(0, 0, 0, .3); }
.catalog .name a:hover:before{ right:.5em; }
.catalog .download-list{ width:92%; margin:0 auto; }
.catalog .download-list li{ width:30%; }
.catalog .download-list li p { margin-top:.5em; font-size: 120%; }
.catalog .pro-mov{ justify-content:center; align-items: center; width:90%; margin:0 auto; text-align:center; }
.catalog .pro-mov a{ margin-bottom:5.5%; }


.flex2 > div.catalog.wide{ width:100%; }
.catalog.wide .pro-mov{ gap:2%; width: 94%; }
.catalog.wide .pro-mov a{ width:23.5%; }
.catalog.wide .pro-mov a{ margin-bottom:3%; }



.catalog.discontinue{ background-color:rgba(255, 255, 255, .8); }
.catalog.discontinue .name{ background:none; }
.catalog.discontinue .name a,.catalog.discontinue .name p{ padding-right:7em; color:#666; border-bottom:1px solid #ccc; }
.catalog.discontinue .name:before{ content: "廃 番"; font-size: 120%; position:absolute; right: 1em; top:50%; transform: translateY(-50%); background-color:#666; color:#fff; display:inline-block; padding:.2em 1em; text-align:center; }
.discontinue-area{ margin: 6em auto 0; border:1px solid #666; }
.discontinue-area h2{ padding:.6em 1.2em; font-size:130%; border-bottom:1px solid #666; background-color:#ccc; color:#222; }
.discontinue-area .flex2{  padding:4%; }

.cons-area{ display:flex; justify-content:center; text-align:center; gap:3%; background:var(--color-bg1); padding:5%; margin-top:2em; margin-bottom:4em; width:100%; }
.cons-area .cons{ width:25%; }
.cons-area .cons.item3 { width:79%; }
.cons-area .cons.item3 > ul > li{ width:33%; }
.cons-area .cons.item2 { width:52%; }
.cons-area .cons.item2 > ul > li{ width:50%; }
.cons-area .cons h3{ background-color:#666; color:#fff; font-size:120%; padding:.5em; margin-bottom:1em; }
.cons-area .cons > ul{ display:flex; justify-content:center; gap:2em; }
.cons-area .cons > ul > li { margin-bottom: 2%; display: flex; position:relative; }
.cons-area .cons > ul > li > a { background: #fff; display: flex; flex-direction: column; text-align: center; padding: 3em 2em; text-decoration: none; transition:.3s; width:100%;  }
.cons-area .cons > ul > li > a .in{ display: table; }
.cons-area .cons > ul > li > a h4{ display: table-caption; caption-side: bottom; }
.cons-area .cons > ul > li > a h4 span{ margin-bottom: 0.5em; font-weight:600; display:block; }
.cons-area .cons > ul > li > a h4 b{ font-family: var(--f-min); font-weight:400; font-size:180%;  }
.cons-area .cons > ul > li > a p{ margin-top:1em; text-align:left; line-height: 1.6; }
.cons-area .cons > ul > li > a img{ transition:.3s; max-width: 250px; width:100%;  }
.cons-area .cons > ul > li > a:hover{ color:#222; }
.cons-area .cons > ul > li > a:hover img{ filter:var(--hover-brightness); }
.cons-area .cons > ul > li:hover .online-store{ opacity:1; visibility:visible; }

.cons-area.successor{ padding-top:10em; position:relative; }
.successor > h2{ position:absolute; left:0; top:3em; text-align:center; width:100%; display:flex; justify-content:center; font-size:120%; align-items:center; font-weight:300; gap:1em; }
.successor > h2 span{ padding:.2em 1em; border:1px solid #ccc; background-color:#fff; }
.successor > h2 a{ font-size:180%; font-family:var(--f-min2); font-weight:300; }


.cons-area .cons > ul > li > a.contact:before{ content:"お問い合わせ"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--color-bg2); color:#fff; z-index:4; font-size:120%; padding:.5em 2em; }
.cons-area .cons > ul > li > a.end:before{ content:"販売終了となりました"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#999; color:#fff; z-index:4; font-size:120%; padding:.5em 1em; width:11em; }
.cons-area .cons > ul > li > a.end{ pointer-events:none; }
.cons-area .cons > ul > li > a.end img{ opacity:0; }
.cons-area .cons > ul > li > a.end h4{ opacity:0; }

.online-store{ position:absolute; right: -55%; top:50%; transform: translateY(-55%); box-shadow:0 0 10px rgba(0, 0, 0, .2); background:var(--color-bg2); padding:0 5px 5px; width:70%; z-index:5; visibility: hidden; opacity:0; transition:.3s; }
.online-store li.tit{ color:#fff; padding:.5em; letter-spacing:.5em; margin-bottom:.2em; }
.online-store li{ margin-top:2px; }
.online-store li a img{ transition:.3s; }
.online-store li a img:hover{ filter:var(--hover-brightness); }

.parts{ background-color:#fff; display:flex; gap: 1em; justify-content:space-between; padding:4%; align-items:center; margin-bottom:2em; }
.parts > .img{ width:300px; display:flex; align-items:center; justify-content:center; } 
.parts > .txt{ width:50%; }
.parts > .txt h3{ font-size:130%; font-weight:400; line-height:1.3; }
.parts > .txt h3 b{ font-family:var(--f-min2); font-weight:300; font-size:160%; display:inline-block; margin-right:.5em; }
.parts > .txt h3 span{}
.parts > .txt p.price{ font-family:var(--f-min2); font-weight:300; font-size:140%; margin-bottom:.5em; }
.parts > .txt p.price b{ font-size:130%; }
.parts > .txt dl{ display: flex; flex-wrap: wrap; justify-content:space-between; font-size:110%; }
.parts > .txt dt{ width:7em; padding-top:.3em; }
.parts > .txt dd{ width:calc(100% - 7.5em); padding-top:.3em; }
.parts > a.link-btn{ height:3em; width:200px; }
.parts > .spacer{ height:0.25em; width:200px; }


a.file_icon{ display:flex; align-items:center; gap:.5em; color:#fff; background:var(--color-bg2); padding:1em 2em; position:relative; transition: var(--tra1); }
a.file_icon:before{ content:""; width:2em; height:2em; background:no-repeat center center; background-size:contain; }
a.file_icon.ex:before{ background-image:url(../img/file_xls.svg); }
a.file_icon.wo:before{ background-image:url(../img/file_doc.svg); }
a.file_icon.ppt:before{ background-image:url(../img/file_ppt.svg); }
a.file_icon.pdf:before{ background-image:url(../img/file_pdf.svg); }
a.file_icon:after{ content: ""; position:absolute; right: 1em; top:calc(50% - 4px); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transform: rotate(90deg); transition: var(--tra1); filter:brightness(100);  }
a.file_icon:hover{ background-color: #000; text-decoration:none; }
a.file_icon:hover:after{ transform: rotate(90deg) translateX(5px); }


/* index-msg */
p.index-msg{ font-size:220% !important; letter-spacing:0.2em; text-align:center; font-family:var(--f-min); font-weight: 400; padding-bottom:0em; position:relative; line-height:2; }
p.index-msg span{ display:inline-block; background: linear-gradient(transparent 70%, var(--color-bg1) 70%); line-height:1.2; font-size:110%; }
.bg p.index-msg span{ background: linear-gradient(transparent 70%, #fff 70%); }
p.index-msg b{ font-weight: 400; font-size:120%; }
/*
p.index-msg:after{ content:""; width:5em; height:1px; bottom:3em; left:50%; transform: translateX(-50%); display:block; background-color:#999; position:absolute; }*/
p.index-msg.about{ padding-top:3em; padding-bottom:8em; }
p.index-msg.about:after{ display:none; }

.msg{ max-width:750px; margin:5em auto; font-size:130%; }
.msg p{ margin-bottom:1em; line-height:2.5; }
.msg .name{ line-height:1.8; }
.msg .name b{ font-weight: 400; font-size:150%; }

#main-bg{ background:url(../img/business/main_bg.jpg) no-repeat center center; position:fixed; top:0; left:0; width:100%; height:100%; }

/* about */
.about-flex{ display:flex; justify-content:space-between; align-items:flex-end;  z-index:1; max-width:1500px; margin:0 auto; }
.about-flex.row{ flex-direction: row-reverse; }
.about-flex .ph{ width:55%; overflow:hidden; }
.about-flex .ph img{ transition:1s cubic-bezier(0.215, 0.61, 0.355, 1); transform:scale(2); }
.about-flex .ph.play img{ transform:scale(1); }
.about-flex .txt{ width: 40%; position:relative; }
.about-flex .txt > div{ max-width:700px; margin: 0 auto 6em; width:90%; padding:6em 0 0 6em; position:relative; text-align:left; }
.about-flex .txt h2{ font-family:var(--f-min); font-weight: 400; font-size:220%; color:#333; margin-bottom:.8em; position: relative; z-index:1; }
.about-flex .txt p{ font-size:110%; line-height:2.4; margin-bottom:2.5em;  }
.about-flex .txt p.subtxt{ position:absolute; left:-1.5em; top:-.5em;  margin:0;   }
p.subtxt{ line-height:1 !important; font-size:8rem !important; color:var(--color-bg2); opacity: .15; position:relative; }
p.subtxt.line:before{ content:""; position:absolute; left:0; top:50%; background-color:var(--color-bg2); width:100%; height:1px; }
p.subtxt.line span{ background-color:#fff; position:relative; z-index:1; display:inline-block; padding-right:.3em; }
.about-flex{ align-items:center; }
.about-flex.sus .txt p { margin-bottom:0; }

.about-fea{ position:relative; }
.about-fea:before{ content:""; position:absolute; left:0; top:0; width:0; height:100%; transition:.6s cubic-bezier(0.33, 1, 0.68, 1); background:var(--color-bg1); }
.about-fea p.subtxt{ position:absolute; top:-.5em; left:5%; }
.about-fea .cont-inner{ position:relative; z-index:1; opacity:0; transition:1s .3s cubic-bezier(0.33, 1, 0.68, 1); transform:translateY(4em); }
.about-fea.play:before{ width:97%; }
.about-fea.play .cont-inner{ opacity:1; transform:translateY(0); }

.about-flex2{ display:flex; justify-content:space-between; max-width:1500px; margin:5em auto; }
.about-flex2 .ph{ width:55%; overflow:hidden; transform:translateX(-10%); }
.about-flex2.right{ flex-direction:row-reverse; }
.about-flex2.right .ph{ transform:translateX(10%) } 
.about-flex2 .ph img{  }
.about-flex2 .txt{ width: 45%; position:relative; }
.about-flex2 .txt p.copy1{ padding:4em 0 2em; transform:translateX(-5em); font-size:280%; }

.maparea{ display:flex; align-items:center; justify-content:space-between; }
.maparea .ph{ width:35%; position:relative; z-index:2; transform:translateX(0); }
.maparea .ph .txt{ position:absolute; left:0; bottom:0; width:100%; background:rgba(0, 0, 0, .7); color:#eee; padding:.6em 1em; font-size:110%; }
.maparea .ph .txt h3{ font-family: var(--f-min); font-weight: 400; font-size:130%; color:#fff; }
.maparea .map{ width:63%; display:flex; flex-wrap:wrap; justify-content:right; }
.maparea .map .gmap{ width:100%; height:40em; }
.maparea .map .gmap iframe{ width:100%; height:100%; }
.maparea .map a.more{ font-size:100%; width:16em; margin-top:1em; }

.about-network .subtxt { text-align:center; color:#fff; opacity:1; }
.about-network .subtxt + p{ text-align:center; font-size:120%; margin-top:1em; }
.about-network .tit{ opacity:0; transition:1s cubic-bezier(0.33, 1, 0.68, 1); transform:translateY(6em); }
#netmap{ position:relative; opacity:0; transition:1.5s .3s; }
.about-network.play .tit,.about-network.play #netmap{ opacity:1; transform:translateY(0); }
#map-point li,
#map-point li:before,#map-point li:after{ position:absolute; width:1em; height:1em; background:#d00e28; border-radius:1em; }
#map-point li:before,#map-point li:after{ content: ""; animation: map-point 3.5s infinite cubic-bezier(0.33, 1, 0.68, 1); }
#map-point li:after{ animation-delay:1.5s; }
#map-point li.ajia1{ top:42.5%; left:44%; }
#map-point li.ajia2{ top:43.5%; left:40.5%; }
#map-point li.ajia3{ top:47%; left:38.5%; }
#map-point li.ajia4{ top:51%; left:38.5%; }
#map-point li.ajia5{ top:54%; left:39%; }
#map-point li.ajia6{ top:52%; left:32%; }
#map-point li.ajia7{ bottom: 42.5%; left:33%; }
#map-point li.ajia8{ bottom: 41%; left:34%; }
#map-point li.ajia9{ bottom: 42.5%; left:35%; }
#map-point li.ajia10{ bottom: 36%; left:34%; }
#map-point li.ajia11{ bottom: 30%; left:36.5%; }
#map-point li.ajia12{ bottom: 15%; left:46.5%; }
#map-point li.ajia13{ bottom: 13%; left:53%; }
#map-point li.east1{ bottom: 28%; right:16.5%; }
#map-point li.east2{ bottom: 25%; right:16%; }
#map-point li.west1{ top:27.5%; left:4.7%; }
#map-point li.west2{ top:41.5%; left:4%; }
#map-point li.west3{ top:41%; left:5%; }
#map-point li.west4{ top:38%; left:6%; }
#map-point li.west5{ top:34%; left:7%; }
#map-point li.west6{ top:35%; left:8.5%; }
#map-point li.west7{ top:39%; left:9.5%; }
#map-point li.west8{ top:50.5%; left:21.5%; }
#map-point li.west9{ bottom:17%; left:12.5%; }

@keyframes map-point {
  from {
    transform: scale(1);
    opacity: .25;
  }
    to {
    transform: scale(7);
    opacity: 0;
  }
}

ul.en-text-list{}
ul.en-text-list li{ margin:1em auto 4em; }
ul.en-text-list h3{ margin-bottom:1em; }
ul.en-text-list h3 b{ font-size:350%; line-height:1.3; }
ul.en-text-list h3 b.en{ font-family:var(--en-min); font-weight:400; color:#999999; }
ul.en-text-list h3 span{ font-size:120%; display:block; letter-spacing:0.1em; }
ul.en-text-list p{ font-size:110%; line-height:2; }

#product-nav{ max-width:1280px; margin:0 auto 1rem; width:90%; transform:translateY(-3rem); }
#product-nav ul{ display:flex; justify-content: space-around; align-items: flex-end; overflow: hidden; font-size:110%; position: relative; z-index: 2;}
#product-nav ul li{  flex:1; position:relative; }
#product-nav ul li:not(:first-child):not(:last-child):not(.active):before,
#product-nav.news ul li:not(:first-child):not(.active):before{ content:""; height:1.5rem; width:1px; background:#7489B0; left:-1px; top:50%; transform:translateY(-50%); position:absolute; z-index:1; }
#product-nav ul li:first-child a{ border-radius:3px 0 0 0; }
#product-nav ul li a{ display:flex; align-items: center; background:#fff;  justify-content:center; overflow:hidden; height:4rem; color:#000; transition:.3s background,.3s color; position:relative; }
#product-nav ul li.active{   }
#product-nav ul li.active a{ color:#fff; font-weight:600; background:var(--color-base); font-size:120%; height:5rem; border-radius:3px 3px 0 0; z-index:2; box-shadow:0 0 10px rgba(0, 0, 0, .3); }
#product-nav ul li.active a span{ position:relative; display:inline-block; }
#product-nav ul li.active a span:before{ content:""; position:absolute; left:50%; transform: translateX(-50%); bottom: -2px; background:rgba(255, 255, 255, .5); width:100%; height:3px; }
#product-nav ul li a.catalog{ padding:0 1rem; border-radius:0; font-size:85%; color:#fff; background: #7187ae; border-radius: 0 3px 0 0; }
#product-nav ul li a.catalog:after{ display:none; }
#product-nav ul li a.catalog b::before { width:2em; height:2em; }
#product-nav ul li:not(.active) a:not(.catalog):hover{ text-decoration:none; color:var(--color-base); }
#product-nav ul li.active a:hover{ text-decoration:none; }
#product-nav .txt{ background-color:#efefef; padding:2rem 3rem; border-radius: 0 0 3px 3px; transform:translateY(-5px); }

#product-cont{ width:90%; margin:0 auto 100px; position:relative; }
#product-search{ position:absolute; top:0; width:300px; padding-top:1rem; }
#product-search.fixed{ position:fixed; }
#product-search > div{ overflow:hidden; background:#E5EAF3; border-radius:5px; border:1px solid #7489B0; padding:5%; }
#product-search h3{ font-size:85%; }
.selectList{}
.selectList li{ margin:8px 0; }
.selectList.type-yoko{ display:flex; gap:8px; }
.checkBtn {
    display: flex;
    align-items: center;
    text-align: left;
    position: relative;
    padding: 0 1.2rem;
    height: 3rem;
    font-weight: 500;
    background: #fff;
    transition: .3s;
    border-radius: 3px;
    font-size: 95%;
}
.checkBtn:hover { color:var(--color-base); background:rgba(255, 255, 255, .7); }
.checkBtn .text{ line-height:1.4; }
.checkBtn .text > span{ display:block; font-weight:normal; }
input[type="checkbox"]{ display:none; }
input:checked + .checkBtn {
    background: #7489B0;
    border: none;
    color: #fff;
}
input:checked + .checkBtn .check {
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: .2rem;
    top: .2rem;
    background: url(../img/icon_ok.svg) no-repeat center center;
    background-size: contain;
}

#product-item{ margin-left:calc(300px + 3%); width:calc(97% - 300px);  padding-top:5px; }
#product-item p.number{ letter-spacing:0.05em; font-weight:500; margin-bottom:1rem; }
#product-item p.number b{ font-size:150%; color:var(--color-base); }
.proitem-list{ display:flex; gap:2rem; flex-wrap:wrap; }
.proitem{ width:calc(33% - 1.4rem); border-radius:5px; border:2px solid #DCDCDC; padding:1rem; position:relative; transition:var(--tra1); }
.proitem a.modal-link{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; }
.proitem a.modal-link:before{ content:""; width:1.3rem; height:1.3rem; background:url(../img/modal.svg) no-repeat; background-size:contain; position:absolute; right:.5rem; bottom:.5rem; opacity:0.5; transition: .5s;}
.proitem a.modal-link:hover:before{ opacity:1; }
.proitem:hover{ border-color:var(--color-base2); }
.proitem:hover .ph img{ transform:scale(1.15); }

.proitem .ph{ overflow:hidden; border-radius:3px; }
.proitem .ph img{ transition:var(--tra1); }
.proitem h3{ font-size:120%; margin:1rem 0 1rem; line-height:1.4; }
ul.protag{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:1rem; font-size:80%;  }
ul.protag li{ padding: .2rem .5rem; background:#E5EAF3; color:var(--color-base); border-radius:3px; }
ul.protag li.ctg2{ color:#008299; background:#E5F3F2; }
ul.protag li.ctg3{ color:#A67100; background:#F3EFE5; }
p.maker{ font-size:80%; }
p.maker a{ position:relative; z-index:3; }

.catalog-list{ display:flex; flex-wrap:wrap; gap:2rem 2%; }
.catalog-list li{ width:32%; background:#F1F8F9; padding:2rem; border-radius:5px; }
.catalog-list li.wid{ width:100%; }
.catalog-list li > a{ display:block; padding-right:0 !important; }
.catalog-list li a{ transition:.3s filter; }
.catalog-list li a img{ display:block; margin:0 auto 1.5rem; max-width:240px; width:100%; transition: .3s box-shadow; box-shadow:2px 2px 1rem rgba(0, 0, 0, .15); }
.catalog-list li a img.yoko{ max-width:100%; }
.catalog-list li a:hover{ filter:brightness(1.1) saturate(1.1); text-decoration:none; }
.catalog-list li a:hover img{ box-shadow:none; }
.catalog-list li .maker { margin-top:.5rem; }
.catalog-list li .maker a:hover{ text-decoration:underline; }
.catalog-list li h2{ margin-bottom:.5rem; font-weight:700; }
.cata-flex{ display:flex; flex-wrap:wrap; gap:2%; justify-content:center; margin:1rem 0; }
.cata-flex a{ width:23.5%; text-align:center; padding:0!important; font-weight:600; }
.cata-flex a img{ margin-bottom:1rem !important; }


.careers-info{ max-width:900px; margin: 0 auto; font-size:120%; }
.careers-info > p{ text-align:center; margin-bottom:2em; }
.careers-info > ul > li{ margin-bottom:1em; }
.careers-info > ul > li > h3{ display: flex; justify-content: space-between; align-items: center; background: var(--color-bg1); position: relative; padding:1em 3.5em  1em 1.5em; font-size:120%; cursor:pointer; font-weight:normal; transition:.4s; }
.careers-info > ul > li > h3:hover{ opacity:.7; }
.careers-info > ul > li > h3 span{ font-weight:normal; font-size:80%; opacity:.8; }
.careers-info > ul > li > h3 b{ position:absolute; top:50%; right:1.5em; width: 15px; height: 15px; transform:translateY(-50%);  }
.careers-info > ul > li > h3 b:before,.careers-info > ul > li > h3 b:after{ content:""; position:absolute;  background-color:#838a93; width:100%; height:1px; top:50%; left:50%; transition:.4s; }
.careers-info > ul > li > h3 b:before{  }
.careers-info > ul > li > h3 b:after{ transform:rotate(90deg); }
.careers-info > ul > li > h3.active{ background: #838a93; color:#fff; }
.careers-info > ul > li > h3.active b:before,.careers-info > ul > li > h3.active b:after{ background-color:#fff; }
.careers-info > ul > li > h3.active b:before{ transform:rotate(45deg); }
.careers-info > ul > li > h3.active b:after{ transform:rotate(135deg); }

.careers-item{ padding:1.5em 1em; display:none; }
.careers-item > h2{ font-size:200%; display:flex; justify-content:space-between; align-items:center; padding-bottom:1em; gap:1em; }

a.careers-btn{ background: var(--color-red); padding: .8em 1em; font-size:60%; text-align:center; color:#fff !important; line-height:1.4; font-weight:normal; width:35%; max-width:200px; transition:.4s; display:block; }
a.careers-btn span{ display:block; font-size:75%; }
a.careers-btn:hover{ text-decoration:none; filter:brightness(1.2); }
a.careers-btn.type2{ width:90%; max-width:300px; font-size:120%;  margin:2em auto; }


@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  }
.scroll-infinity{ position:relative; height:16em }
.scroll-infinity__wrap {
  display: flex; position: absolute; left: -5.5%; top: 0; gap: 4em;
}
.scroll-infinity__list {
  display: flex; gap: 4em; justify-content: space-between; align-items: center;
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item { width: calc(100vw / 6); }
.scroll-infinity__item.w1{ width: calc(100vw / 3); }
.scroll-infinity__item.w2{ width: calc(100vw / 4); }
.scroll-infinity__item.w3{ width: calc(100vw / 9); }
.scroll-infinity__item.t1{ transform:translateY(-3em); }
.scroll-infinity__item.t2{ transform:translateY(2em); }
.scroll-infinity__item.t3{ transform:translateY(4em); }

.splide-wrapper{ width:90%; margin:0 auto; max-width:1000px; }
.splide.slide-thum { max-width:600px; font-family:var(--en-go); font-size:200%; }
.splide.slide-thum .splide__list{  }
.splide.slide-thum .splide__list li{ color:#aaa; }
.splide.slide-thum .splide__list li p{ display:inline-block; position:relative; padding-bottom:.5em; }
.splide.slide-thum .splide__list li p:after{ content:""; width:0; height:1px; position:absolute; left:50%; bottom:0; background-color:#222; transition:var(--tra1); }
.splide.slide-thum .splide__list li.is-active p:after{ width:100%; left:0; }
.splide.slide-thum .splide__list li.is-active{ color:#222; border:none !important; }
.splide.slide-main{ font-size:125%; }
.splide.slide-main .splide__list li{ display:flex; align-items:center; justify-content:space-between; }
.splide.slide-main .ph{ width:40%; text-align:center; color:#888; }
.splide.slide-main .txt{ width:55%; }
.splide.slide-main .txt h3{ font-size:200%; }

.splide.slide-main .splide__arrow--prev { left:-15%; }
.splide.slide-main .splide__arrow--next { right:-15%; }
.splide.slide-main .custom-arrow {
  width: 4em;
  height: 4em;
  background: #fff;
  border: 1px solid #ccc;
}
.splide.slide-main .custom-arrow img { width: 22%; }
.splide.slide-main .custom-arrow.splide__arrow--prev img { transform: rotate(-180deg); }

p.copy1{ font-size:250%; letter-spacing:0.2em;  font-family:var(--f-min); font-weight: 400; position:relative; color:#222; }
p.copy1 span{ display:inline-block; background: #fff; line-height:1.2; font-size:110%; padding:.1em 0 0 .2em; }
p.copy2{ font-size:200%; letter-spacing:0.2em;  font-family:var(--f-min); font-weight: 400; position:relative;}



/* contact */
#contact-form{ position:relative; max-width:1000px; margin:0 auto 8em; width:90%; }
.contact-step{ position:absolute; top:0; padding-top:2em; }
.contact-step.fixed{ position:fixed; }
.contact-step ul{ position:relative; }
.contact-step ul:before{ content:""; position:absolute; left:5px; top:.6em; width:1px; height:calc(100% - 1.2em); background-color:#ccc; }
.contact-step li{ position:relative; padding-left:1.5em; margin-bottom:1.5em; color:#555; }
.contact-step li:before{ content:""; position:absolute; left:0; top:calc(50% - 5px); width:11px; height:11px; background-color:#ccc; border-radius:10px; }
.contact-step li.act{ font-weight:bold; color:#000; }
.contact-step li.act:before{ background:#029CED; }
.requireNum{ position:relative; }
.requireNum > div{ background:#5B75A6; color:#fff; border-radius:5px; text-align:center; font-weight:500; padding:1.4em 1.4em 1em; letter-spacing:0.03em; line-height:1.3; transition:.3s; }
.requireNum > div span{ display:block; font-size:80%; letter-spacing:0; }
.requireNum > div b#requireNumCont{ font-size:170%; }
.requireNum > div b{ font-weight:600; font-size:140%; }
.requireNum > div:last-child{ background:#fff; color: var(--color-green); border: 3px solid var(--color-green); position:absolute; left:0; top:0; opacity:0; }
.requireNum.comp > div:first-child{ opacity:0; }
.requireNum.comp > div:last-child{ opacity:1; }

.contact-input{ margin-left:15em; font-size:90%; padding-top:2em; }
.contact-input p{ line-height:2.2; }
.form-sec{ margin:3em auto; }
.form-sec h3{ position:relative; display:flex; align-items:center; gap:.8em; letter-spacing:0.1em; font-size:110%; font-weight:500; margin-bottom:.7em; }
.form-sec h3:before{ content: "任 意"; width:5em; font-size:70%; font-weight:600; color:#fff; background-color:#999; text-align:center; line-height:1; padding:.5em 0; border-radius:3px; letter-spacing:0;  }
.form-sec.require h3:before{ content: "必 須"; background:#043CA3; }
.form-sec textarea{ width:100%; height:10em; }
.form-sec input{ min-width:17em; }
.form-sec input:focus,.form-sec textarea:focus{ box-shadow:0 0 .8em rgba(2, 156, 237, .5); background-color:#fff;  }
.form-sec input.err,.form-sec textarea.err{ box-shadow:0 0 .8em rgba(255, 0, 0, .5); background-color:#FFF6F6;  }
.form-sec .form-in{ display:flex; align-items:center; flex-wrap: wrap; gap:2%; }
input[name="company"],input[name="department"],input[name="mail"],input[name="address"]{ width:100%; }
ul.emsg{ margin-top:1em; font-weight:500; font-size: 95%; color:#fff; background-color:#E04C4E; border-radius:3px; padding:.7em 1em .6em; display:inline-block; }
ul.emsg li:not(:first-child){ margin-top:.4em; }
ul.emsg li{ position:relative; padding-left:1.3em; }
ul.emsg li:before{ content:""; background:url(/img/icon_err.svg) no-repeat center center; width:1em; height:1em; position:absolute; left:0; top:calc(50% - .5em); }
.count{ text-align:right; color:#777; }
.mail-input{ font-size:200%; color:var(--color-base); }

button, input, select, textarea {
  font-family: var(--f-go);
  font-weight: 400;
  outline: none;
  border: none;
  font-size: 100%;
  vertical-align: middle;
  -webkit-appearance: none;
  padding: 0;
  background:#F6F6F6; border-radius:3px; font-size: 110%;
}
input, textarea { padding:1.2em; transition:.3s; }
label,button {  cursor: pointer }
::placeholder { color:#999; transition:.3s; }
:focus::placeholder {  color: #fff; }

.contact-privacy{ border-top:1px solid #999; padding-top:3em; }
#contact-privacypolicy{ height:13em; overflow-y:scroll; border:1px solid #ccc; padding:1.5em; border-radius: 3px; margin:2em 0; font-size:90%;  }
#contact-privacypolicy p{ line-height:1.8; margin-bottom:1em; }

button.input-btn,.input-btn{ max-width:28em; width: 80%; margin:2em auto; background: #043ca3; background-image: linear-gradient(90deg, var(--color-base), #029ced); color:#fff; padding:1.5em 2em; font-size:120%; letter-spacing: 0.1em; font-weight: 600; border-radius:5px; display:block; transition:var(--tra1); text-shadow:none; position:relative; }
button.input-btn:not(:disabled):hover,
.input-btn:not(:disabled):hover{ filter: saturate(160%) brightness(1.1); text-decoration:none; }
button.input-btn:after,.input-btn:after{ content:""; background:url(/img/icon_arr.svg) no-repeat center center; width:1em; height:1em; position:absolute; right:1em; top:calc(50% - .5em); transition:var(--tra1);  }
button.input-btn:not(:disabled):hover:after,
.input-btn:not(:disabled):hover:after{ right:.3em; }
button.input-btn:disabled,.input-btn:disabled { background: #777; background-image: linear-gradient(90deg, #777, #777); }

.contact-step button.input-btn{ background:#555; font-size:95%; letter-spacing: 0.01em; width:100%; padding:1em 1.5em; margin:0 auto; }
.contact-step button.input-btn:after{ right:auto; left:.5em; transform:scaleX(-1); }
.contact-step button.input-btn:hover{ background:#000; filter: none; }

.checkbtn{ max-width:24em; margin:1rem auto; }
.checkbtn .toggle-button{ padding: 1rem; }
.toggle-button {
    display: inline-flex;
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #F6F6F6;
    padding: .6rem 1rem .6rem .5rem;
    cursor: pointer;
    font-size: 110%;
    font-weight: 500;
    transition: .3s;
}
.toggle-button:hover{ background-color: #fff; }
.short-toggle.toggle-button {display: inline-flex}
.toggle-button > div {
    display: inline-block;
    position: relative;
    width: 3rem;
    height: 1.5rem;
    border-radius: 50px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: content-box;
    cursor: pointer;
    transition: .3s;
}
.toggle-button:has(:checked) {
    border-color: var(--color-green);
    background: #fff;
}

.toggle-button > div::after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #777;
    content: '';
    transition: .3s;
}
.toggle-button:has(:checked) > div::after {
    left: 1.5rem;
    background-color: var(--color-green);
}
.toggle-button input,.toggle-check input {
    display: none;
}

table.conf{ width:100%; border-top:1px solid #ccc; margin:2.5em auto; font-size:110%; }
table.conf th,table.conf td{ border-bottom:1px solid #ccc; padding:1.8em 0; vertical-align:middle; }
table.conf th{ width:10em; letter-spacing:0.1em; }
table.conf td{ padding-left:2em; }
.thanks h2{ font-size:200%; font-weight:400; color:var(--color-base); }
.thanks p{ border-bottom:1px solid #ccc; margin:1em auto 3em; padding-bottom:3em; }
.thanks .input-btn{ margin-left:0; }




.factory{ padding:1em 0 5em; }
.factory li{ display:flex; justify-content:space-between; flex-wrap:wrap; align-items: center; gap:2em; margin:5em auto; }
.factory .copy2{ line-height:2.5; letter-spacing: 0.1em; font-size:155%; }
.factory .txt1{ width:45%; }
.factory .txt1 .copy2{ margin-top:5em; }
.factory .txt2{ width:90%; text-align:center;  margin:5em auto 3em; }
.factory .txt3{ width:41%; margin-top:5em; }
.factory .txt4{ width:90%; text-align:center;  margin:7em auto 4em; }
.factory .ph1{ width:48%; }
.factory .ph2{ width: 50%; transform:translate(3em , 10em); }
.factory .ph3{ width:48%; margin:5em 0 0 3%; }
.factory .ph4{ width:28%; margin-right:20%; }
.factory .ph5{ width:24%; margin:6em 0 6em 10%; }
.factory .ph6{ width:56%; }
.factory .ph7{ transform:translate(-3em , 10em); }
.factory .ph8{ width:48%; margin-right:10%; }
.factory .ph9{ width:24%; margin:10em 0 0 10%; transform:translate(0 , 8em); }



/* news */
.ctg-tab { padding-top:5em; transform:translateY(-5em); }
.ctg-tab + .cont-section.thin-style:not(.bg) { padding-top:2.5em; }
.ctg-tab ul{ margin: 0 auto; text-align:center; display: flex; justify-content: center; flex-wrap: wrap; width:90%; max-width:1350px; }
.ctg-tab li{  font-size: 120%; letter-spacing: 0.05em; margin-bottom:1em; }
.ctg-tab li:not(:first-child):before{ content: "/"; display: inline-block; margin: 0 2em; }
.ctg-tab li a{ display: inline-block; position: relative; font-family:var(--f-min); font-weight:400;  }
.ctg-tab li a:hover{ text-decoration: none; }
.ctg-tab li a.current{ font-weight: 500; color: #222; }
.ctg-tab li a:before{ content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background-color: var(--color-base); transition: var(--tra1); }
.ctg-tab li a:hover:before,.ctg-tab li a.current:before{ width: 100%; left: 0; }

#news-area{ display:flex; justify-content:space-between; max-width:1350px; margin:0 auto; }
#news-nav{ width:10%; font-family: var(--en-min); font-weight:300; padding-top:2em;  }
#news-nav li{ font-size:200%; margin-bottom:1em; }
#news-nav li.current a{ border-bottom:1px solid #999; }
#news-nav li a{ color:#999;  transition:.3s; display:block; }
#news-nav li.current a{ color:#222; }
#news-nav li a:hover{ opacity:0.5; text-decoration:none; }

#newstit{ max-width:900px; margin:0 auto; padding:5em 0 0; width:90%; font-size:110%; }
#newstit .main{ width: 100%; padding-top: 56.25%; position: relative; overflow: hidden; }
#newstit .main img { position: absolute;left: 0;top: 50%;transform: translateY(-50%); width: 100%;} 
#newstit h1{ font-size: 190%; font-family: var(--f-min2); color:#333; font-weight: 400; padding: .5em 0 0; }
#newstit .sub{ display:flex; gap:2em; margin-top:2em; align-items:center; }
#newstit  time{ font-family: var(--en-min); font-weight:300; color:#777; font-size:120%; }

.news-main{ max-width:900px; margin:0 auto 2em; font-size:120%; line-height:2.5 !important;  }
.news-main table{ line-height:1.8 !important; }
.news-page{  overflow:hidden; max-width:900px; margin:5em auto 6em; position:relative; font-size:120%; border-top:1px solid #ddd; padding-top:1em; }
.news-page li{ font-family: var(--en-go); font-weight:300; }
.news-page li.prev{ position:absolute; left:0; top:1em}
.news-page li.next{ position:absolute; right:0; top:1em; }
.news-page li.top{ text-align:center; margin:0 auto; }
.news-page li a{ color:#999; transition:.3s; padding:.2em; display:inline-block; }
.news-page li a:hover{ text-decoration:none; color:#222; }


.pager .pagination {
  text-align: center;
  padding: 3em 0 2em;
}
.pager ul.pagination { display:flex; justify-content:center; flex-wrap:wrap; }
.pager .pagination li {
  margin: 0 3px;
  padding: 0;
  width: 4em;
  height: 4em;
  text-align: center;
  position: relative;
  border-radius: .3em;
}
.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  text-decoration: none;
  transition: all  .3s ease;
  border-radius: 3px;
  font-family: var(--en-go); font-weight:400;
  font-size: 130%;
}
.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}
.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #fff;
  font-weight: 500;
  background: var(--color-bg2);
}


.note-img{ display:flex; align-items:center; gap:2em; }
.note-img .img{ width:25%; } 
.note-img .txt h3{ font-family: var(--f-min); font-weight: 400; font-size: 120%; border-bottom:1px solid #ccc; margin-bottom:.3em; padding-bottom:.3em; } 

#catalog.ctg-tab ul{ margin-bottom:5em; }

/* FAQ */
.qa{ max-width:1000px; margin: 0 auto; font-size:120%; border-bottom:1px solid #ccc; }
.qa li{ border-top:1px solid #ccc; transition:.3s; }
.qa .q{ position:relative; padding:1em 1em 1em 2.5em;  font-family: var(--f-min); font-weight:400; font-size: 130%; transition:.3s; }
.qa .q:hover{ cursor:pointer; background-color:var(--color-bg1); }
.bg .qa :not(.open) .q:hover{ background-color:#fff; }
.qa .q:before{ content:"Q"; position: absolute; left: .5em; top: 50%; transform: translateY(-55%); font-family: var(--en-min); font-weight: 400; font-size: 140%;　color:var(--color-bg2);　} 
.qa .a{ padding:2em 5% 3.5em; display:none; }
.qa .a p{ margin:1em auto; }
.qa li.open{ border-color:var(--color-bg2); }
.qa .open .q{ background:var(--color-bg2); color:#fff; }
.qa .open .a{  }
.imgarea{}
.imgarea img{ display:inline-block; margin-right:1em; }

.modal-in .qa .a{ display:block; }
.modal-in .qa{ border:none; }
.modal-in .qa .q{ background:var(--color-bg2); color:#fff; border:none; }
.modal-in .qa .q:hover { pointer-events:none; }
.modal-in .qa .nomodal{ display:none; }
.modal-in .qa li{ border:none; }

.check-faq{ margin: .3em; display:none; border:2px solid #ccc; padding:1em; }
.check-faq h3{position: relative;}
.check-faq h3:before{ content:"Check"; font-family: var(--en-go); padding: 0 0.5em; background-color:var(--color-red); color:#fff; display:inline-block; margin-right:.5em; animation: blinking 1s ease-in-out infinite alternate; }
.check-faq h4{ font-weight:normal; }
.check-faq h4 b{ font-family:var(--f-min); font-weight:400; font-size: 110%; display:inline-block; margin-right:.5em; }
.check-faq h4 span{ font-size:90%; }
.check-faq > div > div{ background-color:#fff; margin-top:.5em; padding:.5em .8em; }
.check-faq a{ display:block; }
@keyframes blinking {
0% {opacity: 0;}
50% {opacity: 1;}
}


/* FAQここから */
.faq-area h2.t2{ font-size:80%; }
a.faqlink {
    color: var(--color-red);
}

table.faqtable {
    table-layout: fixed;
    width: 100%;
}
table.faqtable a.link-btn{ font-size:100%; width:90%; margin:0 auto; }
.table-scroll table.faqtable  {
    min-width: 640px;
}
table.faqtable thead th {
    background: #ccc;
    text-align: center;
    color: #333;
    border: none;
}
table.faqtable thead th {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
}
table.faqtable th ,
table.faqtable td {
    border: 1px solid #eee;
    vertical-align: middle;
    padding: 1em 0.5em;
    text-align: center;
    background: #fff
}
table.faqtable tbody tr > *:first-child {
    position: sticky;
    left: 0px;
    top: auto;
    z-index: 1;
}
table.faqtable .bglabel span {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #838a93;
    line-height: 1;
    padding: 1em;
    font-family: var(--f-min);
    color: #fff;
}
table.faqtable td .link-btn {
    padding: 0.75em 1em;
}
.video-wrap {
    width: 100%;
    aspect-ratio: 15.9/9;
    line-height: 1;
}
.video-wrap iframe {
    width: 100%;
    height: 100%
}

.annobox {
    padding: 0.75em;
    border: 2px dotted #ccc
}

.ib {display: inline-block;}


@media screen and (max-width: 1350px) {
  .splide.slide-main .splide__arrow--prev { left:-9%; }
  .splide.slide-main .splide__arrow--next { right:-9%; }
  #map-point li,#map-point li:before,#map-point li:after{ width:.8em; height:.8em; }
  p.subtxt{ font-size:9vw !important; }

  #product-search { width: 20rem; }
  #product-item { margin-left: calc(20rem + 3%);  width: calc(97% - 20rem); }
}

@media screen and (max-width: 1400px) {
  #history-area:before{ transform: translateX(0); left:30.2%; }
  .history .text .year > h3:before{ left:-9.8%; }

  .proitem { width: calc(50% - 1rem); }

}

@media screen and (max-width: 1000px) {
  .qua .img{ width:35%; }
  .qua .txt{ width:75%; }
}

@media screen and (max-width: 810px) {
  .kv-area.type1 { margin-bottom:3em; }
  .kv-area h1 { padding-bottom:2em; }
  .kv-area .inner{ padding:6em 0; }
  .index-list ul{ gap:4%;}
  .index-list li{ max-width:600px; width:48%; }
  .tit-area.map{ background:none; margin-bottom:0; }
  .tit-area.map .inner { height:auto; }

  .cont.wid{ display:block; }
  .cont.wid > h2{ width:100%; margin:1em 0; }
  .cont.wid > .inner{ width:100%; }
  .cont.map { margin-bottom:7em; }
  .cont.map > .inner { display:block; }
  .cont.map .txt { width:100%; }
  .cont.map .txt .ph { width:100%; max-width: 900px; }
  .cont.map .map-area { width:100%; margin-top:1em; }
  .cont.map .map-area .map { height:45vh; }

  #local { margin:4em auto; padding: 2em 0; }
  #local ul { flex-wrap:wrap; gap:0 2em; }
  #local ul a { padding:.5em; }
  

  .index-flex2{ gap:1em; font-size:80%; }
  .index-flex2 li{ width:calc(50% - .5em);  } 
  .index-flex2 li .text{ top:50%; }

  .index-flex2-text{ display:block; }
  .index-flex2-text li{ width:100%; min-height:0; margin-bottom:3em; }
  .index-flex2-text h3 b{ font-size:200%; }
  .img-link .text h3 { font-size:180%; }

  .flex-list{ flex-wrap:wrap; }
  .flex-list li{ width:45%; }
  .flex-list li .text{ font-size: 150%; }

  .flex-img { display:block; }
  .flex-img.rev{ flex-direction:reverse; }
  .flex-img > div{ width:100%;  } 
  .flex-img > div.img{ width:100%; margin-bottom: 6em;} 
  .flex-img > div.calender{ width:100%; margin-top: 4em; }

  .qua{  flex-direction:column; gap:2em; }
  .qua .img{ width:100%; max-width:320px; margin:0 auto; }
  .qua .txt{ width:100%; }

  .flex2.wrap > div{ width:100%; }

  p.index-msg { font-size:200% !important; }
  p.index-msg.message { font-size:150% !important; letter-spacing: 0.1em; }
  .msg { margin:3em auto; font-size: 120%; }

  .catalog.wide .pro-mov{ gap:4%; width: 90%; }
  .catalog.wide .pro-mov a{ width:48%; }
  .catalog.wide .pro-mov a{ margin-bottom:5.5%; }

  #history-area:before{ left:5%; }
  .history .text .year > h3:before{ left:-5.4%; }
  .history .inner{ display:block; }
  .history .period{ width:100%; padding-left:2em; }
  .history .period > div{ position:static; transform:translateY(0); }
  .history .text{ width:100%; padding-left:2em; }
  .history .text .year{ width:100%; margin:3em 0 2em; }
  .history .text .ph-r{ margin:0 0 1em 1em; }
  .history .text .ph-r.spmt{ margin-top:2em; }


  #product-nav {transform: translateY(-2rem); margin-bottom: 0;}
  #product-nav ul{ flex-wrap:wrap; border-radius:4px 4px 0 0; overflow:hidden; border:1px solid #7489B0; }
  #product-nav ul li{  width:50%; flex:none; border:1px solid #7489B0; }
  #product-nav ul li.active a { height:4rem; box-shadow:none; border-radius:0; }
  #product-nav ul li a.catalog { border-radius:0; } 
  #product-nav .txt { padding: 2rem; }
  #product-search { width:100%; position:static; padding-top:0; margin-bottom:1rem; font-size:110%; }
  #product-search.fixed { position: static; }
  #product-search > div { padding:0 5%; }
  .pro_search{ padding:3% 0 2.5%; text-align:center; font-weight:600; color:var(--color-base); position:relative;  }
  .pro_search_in{ border-top:1px solid #7489B0; padding-top:1rem; display:none; }
  .pro_search_close{ background:#777; color:#fff; text-align:center; padding:2.5% 0; border-radius:3px; margin:2% auto 5%; font-size:90%; font-weight:600; position:relative; }
  .pro_search.active:after{ transform:translateY(-60%) rotate(180deg); }
  .pro_search:before,.pro_search_close:before{ content:""; background:var(--color-base); width:1.4rem; height:1.4rem; position:absolute; right:0; top:50%; transform:translateY(-50%); border-radius:3px; }
  .pro_search:after,.pro_search_close:after{ content:""; width:0; height:0; position:absolute; right:.4rem; top:50%; transform:translateY(-50%); z-index:1; border-style: solid; border-right: .3rem solid transparent; border-left: .3rem solid transparent; border-top: .45rem solid #fff; border-bottom: 0; transition:.5s; }
  .pro_search_close:before{ right:.6rem; background:#fff; }
  .pro_search_close:after{ transform:translateY(-60%) rotate(180deg); right:1.1rem; border-top-color:#777; }
  #product-item { margin-left: 0;  width:100%; }
  .proitem-list { gap: 1rem; }
  .proitem {  width: calc(50% - .5rem); }
  .selectList:not(.type-yoko) { display:flex; flex-wrap:wrap; gap:.6rem; margin:.5rem 0 0; }
  .selectList:not(.type-yoko) li{ width:calc(50% - .3rem); margin:0; }
  .selectList + h3{ margin-top:1rem; }

  .catalog-list{ gap:2rem 4%; }
  .catalog-list li{ width:48%; padding:2rem 1.5rem; }
  .catalog-list li.wid{ width:100%; }
  .cata-flex{ gap:2rem 4%; }
  .cata-flex a{ width:48%; }




  .ctg-tab li:not(:first-child):before{ margin: 0 1em; }
  #news-area{ display:block; }
  #news-nav{ width:100%; padding-top:0;  }
  #news-nav ul{ display:flex; justify-content:center; gap:2em; flex-wrap:wrap; }
  #news-list{ width:100%; }
  .pager .pagination li { width: 3em; height: 3em; }

  .cons-area { flex-wrap:wrap; padding: 8% 8% 0; }
  .cons-area .cons { width:100%; margin-bottom:2em; }
  .cons-area .cons > ul > li { margin-bottom:1em; }
  .cons-area .cons.item2,.cons-area .cons.item3 { width: 100%; }
  .cons-area .cons.item2 > ul,
  .cons-area .cons.item3 > ul{ flex-wrap:wrap; }
  .cons-area .cons.item2 > ul > li,
  .cons-area .cons.item3 > ul > li { width: auto; margin:0 auto; }
  .online-store{ display:none; }

  


  p.subtxt { font-size: 15vw !important; }
  p.index-msg.about { font-size:160% !important; padding-bottom: 6em; }
  .about-flex{ display:block; }
  .about-flex .ph{ width:80%; }
  .about-flex .txt{ width: 75%; position:relative; margin:10% 0 0 20%; }
  .about-flex .txt p.subtxt { left:-1em; }
  .about-flex .txt h2{ font-size:200%; }
  .about-flex .txt p{ font-size:120%;  }
  .about-flex.sus .ph{ margin:3em auto; width:100%; }
  .about-flex.sus .txt{ margin:1em auto; width:90%; }
  .about-flex.sus .txt h2{ text-align:center; font-size:180%; }

  .about-fea p.subtxt { left:0; }
  .cont-section.about-fea { padding: 5em 5%; }
  .about-fea.play::before { width: 100%; }
  .about-flex2 { display: block; }
  .about-flex2 .ph{ width:100%; transform:translateX(-6%); }
  .about-flex2.right .ph{ transform:translateX(6%); margin-bottom:3em; } 
  .about-flex2 .txt{ width: 100%;  }
  .about-flex2 .txt p.copy1{ padding:0 0 1em; transform:translate(0 , -.5em); font-size:250%; }
  .scroll-infinity__list--left { animation-duration: 60s; }
  .scroll-infinity__item { width: calc(100vw / 3); }
  .scroll-infinity__item.w1{ width: calc(100vw / 1.5); }
  .scroll-infinity__item.w2{ width: calc(100vw / 2); }
  .scroll-infinity__item.w3{ width: calc(100vw / 4.5); }
  .scroll-infinity{ height:10em }
  .scroll-infinity__wrap { gap: 2em; }
  .scroll-infinity__list { gap: 2em; }
  .splide-wrapper { width: 85%; }
  .splide.slide-main .splide__arrow--prev { left:-3.2em; }
  .splide.slide-main .splide__arrow--next { right:-3.2em; }
  .splide.slide-main .custom-arrow {
    width: 2.5em;
    height: 2.5em;
  }
  .splide.slide-main { margin-top:1.5em; }
  .splide.slide-main .splide__list li{ display:block; }
  .splide.slide-main .ph{ width:90%; margin:1em auto 0; }
  .splide.slide-main .txt{ width:100%; }
  .splide.slide-main .txt h3{ font-size:160%; }
  #map-point li,#map-point li:before,#map-point li:after{ width:.4em; height:.4em; }

  #contact-form { margin-bottom:5em; }
  .contact-step{ z-index:2; left:50%; transform:translateX(-50%); width:80%; max-width:20em; }
  .contact-step ul { display:none; }
  .requireNum > div {padding: .4em 0 .3em; font-size: 115%; width: 100%;}
  .requireNum > div span { display:inline-block; }
  .contact-input { margin:0; padding:7em 0 4em; }
  .contact-input.thanks{ padding:4em 0 2em; }
  .form-sec input { min-width: 10em;}
  input[name="name1"],input[name="name2"],input[name="kana1"],input[name="kana2"],input[name="postcode"],input[name="tel"]{ width:49%; }
  table.conf th{ width:7em; }




  .factory{ padding:0 0 5em; }
  .factory li{ gap:2em; margin:3em auto; }
  .factory .txt2{ width:90%; margin:3em auto; }
  .factory .txt3{ width:40%; margin-top:5em; }
  .factory .txt4{ width:90%; text-align:center;  margin:5em auto 1em; }
  .factory .ph1{ width:48%; }
  .factory .ph2{ width:60%; transform:translate(3em , 5em); }
  .factory .ph3{ width:60%; margin:5em 0 0 3%; }
  .factory .ph4{ width:38%; margin-right:10%; }
  .factory .ph5{ width:34%; margin:0 0 6em 10%; }
  .factory .ph6{ width:55%; }
  .factory .ph7{ transform:translate(-1em , 5em); }
  .factory .ph8{ width:48%; margin-right:10%; }
  .factory .ph9{ width:24%; margin:10em 0 0 10%; transform:translate(0 , 8em); }

  .careers-info > ul > li > h3 { display:block; }
  .careers-info > ul > li > h3 span{ display:block; }
  .careers-item{ padding:1.5em 0; }
  .careers-item > h2 { display:block; line-height:1.4; font-size:160%; }
  .careers-item .table-spec th { min-width:8em; }
  a.careers-btn{ max-width:300px; width: 90%; margin: 1em auto 0; }


  .parts{ gap: 0; flex-wrap: wrap; justify-content: space-between;  }
  .parts > .img{ width:30%; } 
  .parts > .txt{ width:65%; }
  .parts > .txt p.price{ font-family:var(--f-min2); font-weight:300; font-size:140%; margin-bottom:.5em; }
  .parts > .txt p.price b{ font-size:130%; }
  .parts > .txt dl{ display: block; font-size:110%; }
  .parts > .txt dt{ width:100%; font-weight:600; }
  .parts > .txt dd{ width:100%; padding-top:0; }
  .parts > a.link-btn{ width:30%; }
  .parts > .spacer{ height:0.25em; width:200px; }

}

@media screen and (max-width: 600px) {
  .index-list li{ width:90%; margin:0 auto 3em; }
  .index-list li h3{ font-size:140%; }

  .index-flex2{ gap:0; font-size:100%; }
  .index-flex2 li{ width:100%; margin-bottom:2em;  } 
  .index-flex2 li .text{ }


  .tit-area h1 b { font-size:240%; }
  .tit-area h1 span { font-size:90%; }

  .ctg-tab { padding-top:3em; transform:translateY(-3em); }

  .flex2{ display:block; }
  .flex2 > div{ width:100%; margin-bottom:1em; }
  .flex2.wrap > div{ margin-bottom:2em; }

  .history .text .year > h3:before{ left:-8.2%; width:9px; height:9px; }

  .factory{ padding:0 0 2em; }
  .factory li{ gap:2em; margin:3em auto; }
  .factory .copy2{ font-size:120%; }
  .factory .txt1{ width:100%; }
  .factory .txt1 .copy2{ margin-top:2em; text-align:center; }
  .factory .txt3{ width:100%; margin-top:0; text-align:center; }
  .factory .txt4{ margin:3em auto 1em; }
  .factory .ph1{ width:80%; margin:0 auto; }
  .factory .ph2{ width:50%; transform:translate(0 , 0); margin:4em 0 0 40%; }
  .factory .ph6{ width:80%; }
  .factory .ph7{ width: 60%; transform:translate(0 , 0); margin:4em 0 0 30%; }
  .factory .ph8{ width:50%; margin-right:0; }
  .factory .ph9{ width:35%; margin:5em 0 0 5%; transform:translate(0 , 2em); }

  .catalog-list li{ width:100%; }

  .parts{ display: block; padding:5%;  }
  .parts > .img{ width:90%; margin:0 auto 1em; } 
  .parts > .txt{ width:100%; }
  .parts > a.link-btn{ width:70%; margin:1em auto; }

  table.store-table,table.store-table tr,table.store-table tbody,table.store-table td{ display:block; width:100%; }
  table.store-table th{ display:none;  }
  table.store-table td{ padding:0 .5em; }
  table.store-table td:not(:last-child){ border:none;   }
  table.store-table td:first-child{ padding-top: .8em;}
  table.store-table td:last-child{ padding-bottom: .8em; }
  table.store-table td a{ font-size:120%; }

}