/* text */
.tx-ct{font-size:16px;font-weight:300;line-height:1.4;}
.tx-ft{font-size:12px;font-weight:300;line-height:1.2;}
.tx-center{text-align:center !important;}
.tx-left{text-align:left !important;}
.tx-right{text-align:right !important;}
.upercase{text-transform:uppercase;}
.indent{text-indent:5vw}
.tx-i{font-style: italic;}

.tx-black{color:#000}
.tx-white{color:#fff}

/* tx */
.tx-ct1{font-size:var(--font-ct1);}
.tx-ct2{font-size:var(--font-ct2);}
.tx-ct3{font-size:var(--font-ct3);}
.tx-a{font-size:var(--font-a);}
.topic-ss{font-size:var(--font-ss);}
.topic-sm{font-size:var(--font-sm);}
.topic-m{font-size:var(--font-m);}
.topic-l{font-size:var(--font-l);}
.topic-xl{font-size:var(--font-xl);}
.topic-x{font-size:var(--font-x);}
.topic-xx{font-size:var(--font-xx);}
.topic-xxx{font-size:var(--font-xxx);}
.topic-xxxx{font-size:var(--font-xxxx);}

.text-shdow-w{text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white;}

/* button */
.btn-1{width: max-content;padding: 6px 2rem;color:var(--white1);background:var(--tem2);border-radius: 3rem;font-size: 1.6em;line-height: 1;font-weight:400;display: flex;justify-items: center;justify-content: center;margin: auto;}
.btn-1:hover{color:var(--white1);background:var(--tem1);}

.btn-2{width: max-content;padding: 6px 2rem;color:var(--white1);background:var(--red1);font-size: 1.6em;line-height: 1;font-weight:400;display: flex;justify-items: center;justify-content: center;margin: auto;}
.btn-2:hover{color:var(--white1);background:var(--tem2);}

.btn-3{width: max-content;padding: 6px 1rem;color:var(--black1);background:transparent;border:3px solid #000;font-size: 1.2em;line-height: 1;font-weight:400;display: flex;justify-items: center;justify-content: center;margin: auto;}
.btn-3:hover{color:var(--white1);background:var(--red1);border:3px solid var(--red1);}


/* tx in content */
.topic-1{font-size:30px;font-size:clamp(24px, 5vw, 40px);font-weight:600;line-height:.9;}




/* structure */
.maxcol{max-width:var(--maxcol);margin: auto;}

.top-hf{
	z-index: 1000;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: auto;
      color: #fff;      
      display: flex;
      align-items: center;      
    }
    .sections-container {
      position: relative;
    }
    .section {
      width: 100vw;
      min-height:100vh;
      display: flex;
      align-items: center;
      font-size: 3rem;
      color: #fff;
      transition: background 0.5s;
      position: relative;
    }
	.section-in{width:100%;height:100%;padding:0;display:grid;margin:auto;justify-items:center;align-items:center;overflow: hidden;}
	.section.last {
  height: 100vh;
  min-height: 100vh;
  align-items: flex-start;display:grid;}
	.section.last .section-in {
  height: 100%;
  align-items: start;overflow-y: auto;
}
    .nav-dots {
      position: fixed;
      top: 50%;
      right:16px;
	  padding:1rem 8px;
	  border-radius:16px;
      transform: translateY(-50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      gap: 12px;
	  background: rgb(0 0 0 / 15%);
    mix-blend-mode: difference;
    }
	.nav-dot-wrapper {
  display: flex;
  align-items: center;flex-direction: row-reverse;
  cursor: pointer;position: relative;padding:4px;
}
    .nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff8;      
      transition: background 0.3s, border 0.3s;
    }
	.nav-dot:hover{background:#fff;}
    .nav-dot-wrapper.active .nav-dot {
  background-color: #fff;
}

.nav-dot-label {
  font-size: 14px;
  color: #fff8;
  user-select: none;display:none;padding:6px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.3s ease;
  white-space: nowrap;position:absolute;right:18px;top:-8px;
}
.nav-dot-wrapper.active .nav-dot-label {color: #fff;background:var(--tem1);}
.nav-dot-wrapper:hover .nav-dot-label {
  opacity: 1;color: #fff;background:var(--tem1);
  visibility: visible;display:grid;
  transform: translateX(0);
}
    @media (max-width: 600px) {
      .top-hf{ font-size: 1.1rem;}
      .section{ font-size: 2rem; }
      .nav-dots{ right: 14px; }
      .nav-dot{ width: 6px; height: 6px; }
    }

.overtop-call{z-index:998;display:flex;padding:8px 1rem;color:white;background:var(--tem1);position:fixed;bottom:0;right:50%;transform:translateX(50%);}


/* section */
    .section-1 { background: #000; }
    .section-2 { background: #fff;}
    .section-3 { background: #fff; }
    .section-4 { background: #fff; }
.section-1,.sec2-ft-cover,.section-3,.section-4,.section-contact
{background-position: center center !important;background-size: cover !important;background-repeat:no-repeat !important;}

.section-1{width:100%;display:grid;padding:60px 8vw;}
.sec1-rw{width:100%;display:grid;grid-template-columns:1fr auto;grid-gap:5vw;padding:3rem;align-items:center;justify-items:center;}
	.sec1-rw:before{content:"";width:6px;height:30vh;position:absolute;left:0;top:50%;transform: translateY(-50%);background:var(--tem1);}
.sec1-rw-ct{width:100%;display:grid;justify-content: center;}
.sec1-logo{width:100%;display:grid;max-width:300px;}
	.sec1-logo image{display:flex;object-position: center;object-fit: cover;}
.sec1-tx{width:100%;display:grid;}
.sec1-tx h2{color:white;text-align:center;line-height:1;}



.section-2{width:100%;display:grid;padding:0;}
.sec2-rw{width:100%;display:grid;padding:3rem 0;grid-gap:1rem;}
.sec2-rw-r1{width:100%;display:grid;padding:0 8vw;}
	.sec2-topic{width:100%;display:grid;}
	.sec2-h2{font-weight:800;color:var(--tem1);line-height:1;}
.sec2-rw-r2{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-gap:10vw;padding:0 8vw;}
	.sec2-rw-r2:after{content:"";width:1px;height:100%;display:grid;position:absolute;left:50%;background:rgb(0 0 0 / 7%);}
.sec2-rw-r2 p{color:#222;font-size:18px;font-size:var(--font-ct1);line-height:1.3;font-weight:400;}
.sec2-tx-mark{font-weight:600;color:black;}
.sec2-ft-cover{width:100%;height:100%;min-height:30vh;}



.section-3{width:100%;display:grid;padding:0;}
.sec3-rw{width:100%;height:100%;display:grid;grid-template-columns:auto auto;}
.sec3-topic-area{z-index:3;width:100%;height:100%;padding:120px 10vw 2rem;display:grid;align-items: center;justify-content: center;background:var(--tem1);transform: skewX(-20deg);}
.sec3-topic-area-in{display:grid;align-items: center;justify-content: center;transform: skewX(20deg);}
	.sec3-tx-r1{text-align: center;display: flex;justify-content: center;align-items: baseline;}
	.sec3-tx-r2{text-align: center;display: flex;justify-content: center;align-items: baseline;}
	.sec3-tx-r3{text-align: center;display: flex;justify-content: center;align-items: baseline;}
	.sec3-tx-r1 span,.sec3-tx-r2 span,.sec3-tx-r3 span{line-height:1;}
.sec3-cover-area{z-index:2;width:250px;height:100%;display:grid;transform: skewX(-20deg);overflow:hidden;}
.sec3-cover{width:100vw;left:-30vw;display:grid;align-items: center;justify-content: center;transform: skewX(20deg);}



.section-4{width:100%;display:grid;padding:60px 8vw;}
.sec4-rw{width:100%;display:grid;padding:2rem;grid-gap:1rem;}
.sec4-r1{width:100%;display:grid;}
.sec4-r1-h{width:100%;display:grid;justify-content:center;}
	.sec4-tx1{color:var(--black1);font-weight:600;line-height:.8;text-align:center;}
	.sec4-tx2{color:var(--tem1);font-weight:600;line-height:1;text-align:center;}
	.sec4-tx3{font-size:22px;font-size:clamp(22px, 2.2vw, 36px);font-weight:300;color:var(--tem4);padding:8px;text-align:center;}
.sec4-r2{width:100%;display:grid;padding:1rem;grid-gap:2rem;grid-template-columns:1fr 1fr;justify-items:center;}	
	.sec4-tx4{font-size:20px;font-size:clamp(20px, 2vw, 30px);font-weight:600;color:var(--tem1);text-transform:uppercase;line-height:.8}
	.sec4-tx5{font-size:18px;font-size:clamp(18px, 1.6vw, 24px);font-weight:300;color:var(--tem4);margin-bottom:8px;}
	.sec4-tx6{font-size:16px;font-size:var(--font-ct1);font-weight:300;color:var(--tem4);line-height:1.2}

.sec4-ff{width:100%;max-width:90%;display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;}
.sec4-f-icon{display:flex;width:100px;height:100px;border-radius:50%;overflow:hiddne;background:white;justify-content:center;align-items:center;background-position: center center !important;background-size: 70% !important;background-repeat:no-repeat !important;}
.sec4-f-ct{width:100%;display:grid;}



.section-pc{width:100%;display:grid;padding:60px 5vw;    justify-content: normal;}
.secpc-rw{width:100%;height: 100%;display:grid;align-items: center;padding:2rem;grid-gap:1rem;grid-template-columns:repeat(4,1fr);}
.product-card{width:100%;height:100%;display:grid;overflow:hidden;clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%);}
.pc-cover{position:absolute;left:0;top:0;display:flex;width:100%;height:100%;}
	.pc-cover{justify-content:center;align-items:center;background-position: center center !important;background-size: cover !important;background-repeat:no-repeat !important;}
.pc-name1{position:absolute;left:0;top:0;width:100%;background:var(--tem1);}
.pc-topic{width:100%;display:grid;font-size:18px;font-size:clamp(18px, 1.6vw, 24px);font-weight:600;color:white;text-align:center;padding:6px;}
.pc-name2{position: absolute;left:5px;top:60px;writing-mode: vertical-rl;text-orientation: mixed;text-align:left;font-size: 30px;font-size:clamp(20px, 5vw, 40px);font-weight: 600;line-height: 0.7;text-transform: uppercase;opacity: .9;mix-blend-mode: screen;
color:#fff;}
.pc-detail{background:rgb(206 0 0 / 90%);display: grid; align-items: center;width: 100%;opacity:0;-webkit-transition: all 0.3s ; transition: all 0.3s;}
.pc-detail-tx{text-align:center;font-size:16px;color:#fff;padding:1rem;}
.product-card:hover .pc-detail{opacity:1;}




.section-5{width:100%;display:grid;padding:0;}
.sec5-rw{width:100%;display:grid;padding:80px 8vw 3rem;grid-gap:2rem;grid-template-columns:1fr 1fr;align-items:start;}



.section-ref{width:100%;display:grid;padding:0;background-color:#000;}
.secref-rw{width:100%;height:100%;display:grid;padding:0;}
.ref-area-col{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr 1fr;overflow-x: hidden;align-items:center;align-content: start;}
.ref-box{width:100%;display:grid;}

.sec-ref-img{display:grid;width:100%;height:auto;overflow:hidden;background-position: center center !important;background-size: cover !important;background-repeat:no-repeat !important;aspect-ratio: 3 / 2;}


.section-contact{width:100%;display:grid;padding:60px 8vw 2rem;background-color:#f0f0f0;}
.seccall-rw{width:100%;height:100%;display:grid;padding:2rem 3rem;grid-gap:1rem;align-content:end;}
.seccall-box-area{width:100%;display:grid;grid-template-columns:1fr 40%;border-radius:24px;margin:auto;padding:0;background:#fff;color:#222;}
.call-left{width:100%;padding:32px;display:grid;}
	.call-topic{width:100%;display:grid;font-size:18px;font-size:clamp(18px, 4vw, 36px);font-weight:600;color:var(--tem1);}
.call-info{width:100%;display:grid;grid-template-columns:auto 1fr;grid-gap:1rem;}
	.call-qr-code{width:150px;height:150px;border:1px solid #eaeaea;justify-content:center;align-items:center;}
	.call-info-tx{width:100%;display:grid;padding:1rem;align-content: center;grid-gap: 4px;}
	.call-tx1{font-size:16px;line-height:1.2;color:var(--tem3);}
	.call-tx2{font-size:18px;font-size:clamp(18px, 1.6vw, 24px);line-height:1;font-weight:600;color:#000;}
.call-cover{width:100%;display:flex;}
.call-cover-img{width:100%;display:grid;position:absolute;right:-24px;bottom:0;max-width:350px;}



.sec-ft-page{width:100%;display:grid;padding:3rem 8vw 6rem;background:var(--tem1);color:#fff;}
.sec-ft-in{margin:auto;display:grid;justify-content:center;}
.sec-ft-in img{max-width:320px;}





/* head */
.head-r1{width:100%;display:flex;justify-content:space-between;}
.hr1-logo{display:grid;}
.h-logo{display:flex;justify-content:flex-start;align-items:center;padding:8px 16px;color:#fff;background:red;}


/* bg lazy */
.lazy-bg{opacity:0.1;transition:opacity .5s;}
.lazy-bg.loaded {opacity: 1;}

.lazy-js{display:grid;width:100%;height:auto;opacity:0;transition:opacity 1.5s;}


/* btn to top */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 60px;
  background: #0008;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 14px;
  text-decoration: none;
  display: none;
  z-index: 1000;
}
.back-to-top:hover {
  background: #fff;
}


/* responsive */
@media only screen and (max-width:1200px){

}

@media (max-width:1080px){

}

@media (max-width:800px){
body{overflow: auto !important;overflow-x:hidden;}
.topic-1{font-size: clamp(24px, 3.6vw, 40px);}
.nav-dots{display:none;}
.section.last{height:auto;}
.sec1-rw{grid-template-columns:1fr;}
.sec3-rw{grid-template-columns:75% auto;}
.sec4-r2{grid-template-columns:1fr;}
.secpc-rw{height:auto;grid-template-columns:1fr 1fr;}
.product-card{min-height:450px;}
.sec5-rw{grid-template-columns:1fr;}
.seccall-box-area{grid-template-columns:1fr;}
.call-cover{display:none;}
.call-info{grid-template-columns:1fr;justify-items: center;}
.call-topic{text-align:center;}
.overtop-call{width:100%;text-align:center;}
}

@media (max-width:600px){
.secpc-rw{height:auto;grid-template-columns:1fr;}
.sec2-rw-r2{grid-gap:16px;grid-template-columns:1fr;}
.sec2-rw-r2:after{display:none;}
.ref-area-col{grid-template-columns:1fr 1fr;}
.sec3-tx-r1{flex-wrap:wrap;}
.call-left{padding:20px;}
.call-info-tx{padding:0;}
}

@media (max-width:360px){

}