@charset "utf-8";
/* CSS Document */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
  scroll-behavior: smooth;
}


/* font-set
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-old-mincho-semibold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.zen-old-mincho-bold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-old-mincho-black {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}

.line-seed-jp-thin {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.line-seed-jp-regular {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.line-seed-jp-bold {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.line-seed-jp-extrabold {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 800;
  font-style: normal;
}


.manrope-<uniquifier> {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*/



body {
  padding: 10px;
  background-color: #ffffff;
}
@media only screen and (max-width: 414px) {
  body { padding: 0; }
}

/* MV */
.top-head-mv-box {
  height: calc(100vh - 20px);
  position: relative;
}
@media only screen and (max-width: 414px) {
  .top-head-mv-box {
    height: 100vh;
  }
}

.clip-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
  border-radius: 18px;
}
@media only screen and (max-width: 414px) {
  .clip-wrap {
    border-radius: 0;
  }
}

.slide {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes zoomIn {
  from { transform: scale(1.18); }
  to   { transform: scale(1); }
}
@keyframes zoomOut {
  from { transform: scale(0.85); }
  to   { transform: scale(1); }
}

/* grobal */
#spec {scroll-margin-top: 100px;}
/* mainbox */
.mainbox {
  padding: 10px 0 0 0;
  /*
  max-width: 1200px;
  */
  margin: 0 auto;
}

/* header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  height: 80px;
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  z-index: 999;
}
.logobox {
  width: 188px;
  height: 80px;
}
.logobox img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff);
}



.headder-menu {
  width: 50%;
  height: 50px;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .9);
  border-radius: 25px;
  padding: 0 10px; 
  position: relative;
}

.headder-menu ul {
  position: relative;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
}

.headder-menu li {
  height: 80%;
  display: flex;
  align-items: center;
}

.headder-menu a {
  font-family: "LINE Seed JP", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.headder-menu a.active {
  color: #fff !important;
}

.nav-indicator {
  position: absolute;
  height: 80%;
  background-color: #104827;
  border-radius: 20px;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.head-contactbox {
  width: 240px;
  height: 60px;
  border-radius: 9px;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .9);
  margin-right: 10px;
  overflow: hidden;
  padding: 0;
  transition: background-color 0.3s ease;
}

.head-contactbox a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  
  text-decoration: none;
  color: #104827;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  gap: 12px;

  transition: color 0.2s ease;
}

.contact-icon {
  width: auto;
  height: 24px;
  object-fit: contain;
}
.icon-white {
  display: none;
}
.icon-black {
  display: block;
}
.head-contactbox:hover {
  background-color: #104827;
}
.head-contactbox:hover a {
  color: #fff;
}
.head-contactbox:hover .icon-black {
  display: none;
}
.head-contactbox:hover .icon-white {
  display: block;
}



/*****************************
TOP-MV-box
*****************************/
.top-mv-centerbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
z-index: 2;
}

.tmc-box {
font-family: "LINE Seed JP", sans-serif;
max-width: 600px;
text-align: center;
filter:
drop-shadow(0 0 5px rgba(0, 0, 0, 0.7))
drop-shadow(0 0 5px rgba(0, 0, 0, 0.3))
;
}
.tmc-box h1 {
font-size: 5rem;
font-weight: 800;
color: #fff;
}
.tmc-box h1 .tmx-box-txt-siz {
font-size: 3.5rem;
}
.tmc-box h1 .tmc-box-txt-clr {
color: #d4ff4e;
}
.tmc-box p {
padding-top: 20px;
font-size: 1rem;
color: #fff;
font-weight: 600;
line-height: 1.78;
}

.tmx-box-link {}
.tmx-box-link ul {
display: flex;
list-style: none;
justify-content: space-around;
padding-top: 20px;
}
.tmx-box-link li {
margin-left: -30px;
}
.tmx-box-link a {
font-family: "LINE Seed JP", sans-serif;
display: block;
height: 36px;
width: 100%;
text-decoration: none;
background-color: #fff;
color: #000;
text-align: center;
border: 3px solid #fff;
font-size: 1.1rem;
line-height: 36px;
border-radius: 21px;
padding: 0 10px;
font-weight: 500;
transition: .2s;
}
.tmx-box-link a:hover {
background-color: #104827;
color: #fff;
}
.tmx-box-link .tbl-clr {
background-color: #d4ff4e;
border-color: #d4ff4e;
color: #000;
font-weight: normal;
}
.tmx-box-link .tbl-clr:hover {
background-color: #104827;
border-color: #fff;
color: #fff;
font-weight: normal;
}




/*****************************
TOP
*****************************/


.spec-box {
column-gap: 10px;
width: 100%;
}
.spec-box h2 {
color: #d4ff4e;
padding: 60px 0 0 0px;
margin-bottom: 10px;
font-family: "LINE Seed JP", sans-serif;
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 600;
vertical-align: top;
align-self: flex-start;
text-align: center;
}
.spec-box h2 span {
display: block;
padding-top: 10px;
color: #868686;
font-size: 1rem;
font-weight: normal;
}

.garage-specbox {
width: 100%;
display: flex;
margin-bottom: 10px;
gap: 10px;
border-radius: 18px;
background-image:url("../img/spec-garage-mv.png");
background-repeat: no-repeat;
background-size: cover;
background-position:  center top;
padding-bottom: 60px;

}
.gs-mp {
width: 50%;
flex-shrink: 0;
overflow: hidden;
color: #fff;
border-radius: 18px;
position: relative;
}




.gs-inb {
width: 50%;
gap: 10px;
margin: 0;
text-align: center;
}
.gs-inb p {
padding: 30px 0 0 0;
margin: 0 auto;
width: 80%;
font-family: "LINE Seed JP", sans-serif;
font-size: 1rem;
line-height: 1.75;
font-weight: normal;
color: #fff;
}








.sec-box-list {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sec-box-list figure {
box-sizing: border-box;
width: calc(100% / 2 - (10px / 2));
padding: 20px;
overflow: hidden;
color: #fff;
border-radius: 18px;
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

.sbl-bg-01 {
background-image: url("../img/spec-img-sp001.jpg");
}
.sbl-bg-02 {
background-image: url("../img/spec-img-sp002.jpg");
}
.sbl-bg-03 {
background-image: url("../img/spec-img-sp003a.jpg");
}
.sbl-bg-04 {
background-image: url("../img/spec-img-sp004.jpg");
}
.sbl-bg-05 {
background-image: url("../img/spec-img-sp005.jpg");
}
.sbl-bg-06 {
background-image: url("../img/spec-img-sp006.jpg");
}




.sec-box-list .coltxt {
margin-top: auto;
filter:
  drop-shadow(2px 0 0 #000)
  drop-shadow(-2px 0 0 #000)
  drop-shadow(0 2px 0 #000)
  drop-shadow(0 -2px 0 #000)
  drop-shadow(1px 1px 0 #000)
  drop-shadow(-1px -1px 0 #000)
  drop-shadow(1px -1px 0 #000)
  drop-shadow(-1px 1px 0 #000);
}
.sec-box-list .coltxt h3 {
font-family: "LINE Seed JP", sans-serif;
font-size: 1.7rem;
text-align: left;

}
.sec-box-list .coltxt span {
display: block;
padding-top: 10px;
font-size: 0.8rem;
}



.sec-box-list-mcol {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.sec-box-list-mcol figure {
box-sizing: border-box;
width: calc(100% / 3 - (20px / 3));
overflow: hidden;
color: #fff;
border-radius: 18px;
display: flex;
flex-direction: column;
background-color: #1f1d19;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.sec-box-list-mcol img {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto
}
.sec-box-list-mcol p {
background-color: #d4ff4e;
color: #000;
padding: 10px 16px 16px 16px;
font-family: "LINE Seed JP", sans-serif;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.75;
text-align: left;
border: 5px solid #1f1d19;
border-top: none;
border-radius: 0 0 16px 16px;
}
.sec-box-list-mcol span {
display: block;
font-family: "LINE Seed JP", sans-serif;
font-size: 0.8rem;
line-height: 1.4;
}
/*
.sbl-bg-gr01 {
background-image: url("../img/grn-01.png");
}
.sbl-bg-gr02 {
background-image: url("../img/grn-02.png");
}
.sbl-bg-gr03 {
background-image: url("../img/grn-03.png");
}
*/










.pdf-dl-bnr {}
.pdf-dl-bnr a {
display: block;
margin: 20px auto 0 auto;
padding: 0;
width: calc(80%);
overflow: hidden;
border-radius: 9px;
overflow: hidden;
}
.pdf-dl-bnr img {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}

.pdf-dl-bnr a {
display: inline-block;
line-height: 0;
outline: 2px solid rgba(0, 123, 255, 0);
outline-offset: 0px;
transition: all 0.2s ease;
}

.pdf-dl-bnr a:hover {
outline: 2px solid #d4ff4e;
outline-offset: 8px;
}




.spec-link {}
.spec-link a {
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto 0 auto;
padding: 0 10px;
text-align: center;
width: 50%;
background-color: #d4ff4e;
border:2px solid #d4ff4e;
font-family: "LINE Seed JP", sans-serif;
color: #000;
text-decoration: none;
height: 50px;
border-radius: 25px;
font-size: 1.2rem;
font-weight: 600;
transition: .2s;
}
.spec-link a:hover {
background-color: #104827;
border-color: #d4ff4e;
color: #fff;
font-weight: normal;
outline: 2px solid rgba(0, 123, 255, 0);
outline-offset: 0px;
transition: .2s;
}


.spec-link a:hover {
outline: 2px solid #d4ff4e;
outline-offset: 8px;
transition: .2s;
}


@media screen and (max-width: 768px) {
  
  .garage-specbox {
    flex-direction: column;
    aspect-ratio: auto;
    padding-bottom: 30px;
  }

  .gs-mp, .gs-inb {
    width: 100%;
  }

  .spec-box h2 {
    padding: 40px 10px 0;
  }

  .sec-box-list figure {
    width: calc(50% - 5px);
    aspect-ratio: 1 / 1;
    padding: 15px;
  }

  .sec-box-list .coltxt h3 {
    font-size: 1.2rem;
  }
  .spec-link a {
    width: 80%;
  }
}







/*****************************
USAGE
*****************************/


.usage-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}

.ub-title {
font-family: "LINE Seed JP", sans-serif;
width:100%;
background-color: #1f1d19;
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: #d4ff4e;
border-radius: 18px;
padding: 50px 30px;

}
.ub-title span {
display: block;
width: fit-content;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 15px;
color: #ccc;
}

.usage-box figure {
font-family: "LINE Seed JP", sans-serif;
width: calc(25% - 8px); 
margin: 0;
background-color: #000;
border-radius: 18px;
padding: 0;
color: #fff;
background-position: top center;
background-repeat: no-repeat;
background-size: 120%;
overflow: hidden;
vertical-align: bottom;
display: flex;
flex-direction: column;
justify-content: flex-start;
vertical-align: top;
}

.usage-box figure h3 {
display: inline-flex;
align-items: center;
justify-content: center; 
height: 30px;
border-radius: 15px;
padding: 0 20px;
font-weight: bold;
background-color: rgba(0,0,0,0.84);
color: #B4B4B4;
border:2px solid #b4b4b4;
margin: -15px 10px 10px 10px;
line-height: 1; 
letter-spacing: 0.1rem;

}
.usage-box figure p {
font-size: 2.3vw;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
background-color: #000;
display: block;
padding: 6px 8px;
color: #fff;
margin-bottom: 5px;
margin: 0px 10px 5px 10px;
}
.usage-box figure span {
display: inline-block;
color: #fff;
background-color: #000;
padding: 3px 8px;
line-height: 1.45;
font-size: 1vw;
margin: 0px 10px 10px 10px;
}


.usage-bgimg-01 {background-image: url("../img/usage-01.jpg");}
.usage-bgimg-02 {background-image: url("../img/usage-02.jpg");}
.usage-bgimg-03 {background-image: url("../img/usage-03.jpg");}
.usage-bgimg-04 {background-image: url("../img/usage-04.jpg");}




/*****************************
HOW STEP
*****************************/

.howstep-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}

.flow-card {
    grid-column: span 2;
	width: calc((100% - (10px * 5)) / 6);
	box-sizing: border-box;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background .2s;
    cursor: default;
	aspect-ratio: 2 / 2.2;
	text-align: center;
	border: 3px solid #1f1d19;
	border-radius: 18px;
	overflow: hidden;
}
.flow-step-n {
  font-family: "Manrope", sans-serif;
    font-size: 8vw;
    font-weight: 800;
    color: #1f1d19;
    line-height: 1;
    letter-spacing: -0.02em;
}


.flow-name {
font-family: "LINE Seed JP", sans-serif;
font-weight: 600;
font-size: 1.8vw;
border-bottom: 2px solid #1f1d19;
padding-bottom: 10px;
margin-bottom: 10px;
}
.flow-sub {
font-family: "LINE Seed JP", sans-serif;
font-weight: 400;
font-size: 1.2vw;
}

.bg-02 {
background-color: #1f1d19;
color: #fff;
}
.bg-02 .flow-step-n {color: #fff;}

.bg-02 .flow-name {
border-color:#fff;

}
.bg-03 {
background-color: #d4ff4e;
}







.cta-card {
    grid-column: span 12;
    background: #1f1d19;
    padding: 52px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 180px;
	border-radius: 18px;
	margin-top: 10px;
}
.cta-h {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.cta-h em {
    font-style: normal;
    color: #d4ff4e;
}

.btn-acc {
    background: #d4ff4e;
    color: #1a1814;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 12px 28px;
    border-radius: 100px;
    cursor: pointer;
    transition: background .15s;
}








/*****************************
COMPANY
*****************************/

.com-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}


.com-box figure {
font-family: "LINE Seed JP", sans-serif;
margin: 0;
border-radius: 18px;
padding: 30px;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}


.cb-title {width: calc(30% - 65px); }
.cb-txt {width: calc(70% - 65px); }

.cb-title {
background-image: url("../img/com-box-img-01.png");
background-repeat: repeat-x;
background-size: cover;
background-position: top center;
position: relative;
}
.cb-title h3 {
position: absolute;
top: 30px;
left: 0;
font-family: "LINE Seed JP", sans-serif;
color: #fff;
background-color: #1a1814;
padding: 10px 10px 10px 20px;
font-size: 3vw;
}
.cb-title span {
position: absolute;
top: 105px;
left: 0;
font-family: "LINE Seed JP", sans-serif;
color: #fff;
background-color: #1a1814;
padding: 10px 10px 10px 20px;
font-size: 1vw;
letter-spacing: 0.6rem
}

.cb-txt {
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
font-family: "LINE Seed JP", sans-serif;
color: #1a1814;
font-size: 1.6vw;
}

.cb-txt table {}
.cb-txt tr {}
.cb-txt th {
text-align: left;
letter-spacing: 0.5rem;
padding: 30px;
}
.cb-txt td {
padding: 30px;
}



.cb-map {
border-radius: 18px;
overflow: hidden;
  width: 100%;
  height: 600px;
}

.cb-map iframe {
  width: 100% !important;
  height: 100% !important;
  display: block; /* 下部の微かな隙間を消す */
}

.map-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 左右の箱の間の隙間 */
  padding: 20px 20px 30px 20px;
  background-color: #1a1814;
  border-radius: 18px;
}
.map-info h4 {
  width: 100%;
  font-size: 2rem;
  color: #fff;
}

.col-boxs {
  /* 幅を50%からgap分を引いた計算に */
  width: calc(50% - 10px); 
  
  /* spanを並べるためのFlex設定 */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 上詰めに配置 */
  gap: 8px; /* span同士の上下左右の隙間 */
}
.col-boxs p {
background-color: #d4ff4e;
padding: 10px 20px;
color: #1a1814;
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 5px;
width: 100%;

}
.col-boxs span {
  display: inline-block;
  flex-grow: 0.2;
  flex-shrink: 0;
  min-width: fit-content;
  max-width: 80%;
  
  border: 2px solid #d4ff4e;
  border-radius: 9999px;
  padding: 8px 15px;
  margin: 0; 
  text-align: center;
  color: #fff;
}





/*****************************
FOOTER
*****************************/
footer {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-top: 10px;
align-items: center;
}
footer .left {}
footer .right {
text-align: right;
}
footer div {
width:calc(50% - 20px);
}
footer img {
height: 100px;
width: auto;
display: block;
padding: 0;
margin: 0;
}