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

/* =================================
   Front Page
================================= */

/* Front -> Hero */
.hero {
  position: relative;
  width: 100%;
  height: 450px; /* SP固定 */
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* SPはトリミング */
  object-position: center;
}

.hero__content {
  margin: 0 auto;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.hero__title {
  font-family: var(--font-en);
  font-size:clamp(42px,6vw,90px);
  font-style: italic;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

/* Front -> DNA */
.dna__feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 64px;
}

.dna__feature-image img {
  width: 100%;
  display: block;
}

.dna__feature-title {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.dna__feature-title span {
  font-size: 15px;
  font-weight: 400;
  color: #777;
}

.dna__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dna__card img {
  width: 100%;
  display: block;
  margin-bottom: 8px;
}

.dna__card h4 {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
}

.dna__card p {
  font-size: 12px;
  color: #777;
  margin-top: -3px;
}

/* Front -> Performance */
.performance {
  background: #000;
  color: #fff;
}

.performance__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.performance__image img {
  width: 50%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.performance__button {
  background: #fff;
  color: #000;
  font-weight: 600;
}

/* PC Layout
----------------------------------- */
@media (min-width: 768px) {
  /* Front -> Hero */
  .hero {
    height: auto;
  }

  .hero__media {
    position: relative; /* absolute解除 */
  }

  .hero__video {
    height: auto;
    object-fit: contain;
  }

  .hero__content {
    max-width: 1400px;
    position: absolute;
    inset: 0;
    padding: 0 10%;
  }

  /* Front -> DNA */
  .dna__feature {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }

  .dna__feature-title {
    font-size: 28px;
  }

  .dna__feature--reverse {
    flex-direction: row-reverse;
  }

  .dna__feature-image,
  .dna__feature-content {
    flex: 1;
  }

  .dna__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-top: 110px;
  }

  .dna__card h4 {
    font-size: 19px;
  }

  .dna__card p {
    font-size: 13px;
  }

  /* Front -> Performance */
  .performance__inner {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }

  .performance__image {
    flex: 4;
  }

  .performance__content {
    flex: 6;
  }

  .performance__image img {
    width: 60%;
  }

  .performance__title {
    font-size: 36px;
  }

}



/* =================================
   Archive Product
================================= */

/* Archive -> Hero */
/* price -> Hero */
.archive-hero,
.price-hero{
  position:relative;
  overflow:hidden;
}

.archive-hero__media,
.price-hero__media{
  position:relative;
  height:450px;
}

.archive-hero__media img,
.price-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.archive-hero__inner,
.price-hero__inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:start;
  padding-top: 140px;
}

.archive-hero__body,
.price-hero__body{
  max-width:420px;
  color:var(--color-white);
}

.archive-hero__title,
.price-hero__title{
  font-family:var(--font-en);
  font-size:clamp(42px,6vw,85px);
  font-style:italic;
  font-weight:300;
  line-height:1.2;
  margin-bottom: 20px;
}

.archive-hero__lead{
  margin-bottom:20px;
}

/* Archive -> Product */
.product-archive .section__lead{
  margin-bottom:32px;
}

.product-archive__button{
  margin-bottom: 32px;
}

/* Archive -> Philosophy */
/* product -> Technology */
.archive-philosophy,
.product-technology{
  background:var(--color-black);
  color:var(--color-white);
}

.archive-philosophy__grid,
.product-technology__grid{
  display:flex;
  flex-direction:column;
  gap:48px;
}

.archive-philosophy__item,
.product-technology__item{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.archive-philosophy__media,
.product-technology__media{
  width:100%;
}

.archive-philosophy__image,
.product-technology__image{
  width:100%;
  height:auto;
  display:block;
}

.archive-philosophy__content,
.product-technology__content{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.archive-philosophy__heading,
.product-technology__heading{
  font-size:20px;
  font-weight:600;
  line-height:1.4;
}

/* Archive -> Technology */
/* product -> Highlight */
.archive-technology__grid,
.product-highlights__grid{
  display:flex;
  flex-direction:column;
  gap:48px;
}

.archive-technology__item,
.product-highlights__item{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.archive-technology__media,
.product-highlights__media{
  width:70%;
  margin: 0 auto;
}

.archive-technology__image,
.product-highlights__image{
  width:100%;
  height:auto;
  display:block;
}

/* Archive -> Compare */
.archive-compare{
  background: var(--color-gray);
}

.compare-table__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom: 32px;
}

.compare-table__table{
  border-collapse:collapse;
  width:max-content;
  min-width:100%;
  background:var(--color-black);
  color:var(--color-white);
}

.compare-table__table th,
.compare-table__table td{
  padding:12px 8px;
  font-size:13px;
  font-weight: 400;
  line-height:1.4;
  vertical-align:middle;
  text-align:center;
  border:1px solid rgba(255,255,255,0.15);
}

.compare-table__feature{
  position:sticky;
  left:0;
  width: 170px;
  background:var(--color-black); /* 1列目 */
  z-index:2;
}

.compare-table__table thead th{
  font-family:var(--font-en);
  font-weight:600; /* headerのみ */
}

.compare-table__table tbody th{
  text-align:left;
}

.compare-icon{
  width:16px;
  height:16px;
  margin:0 auto;
}

.compare-icon circle{
  fill:currentColor;
}

.compare-icon path{
  fill:none;
  stroke:var(--color-black);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.compare-icon--check{
  color:#389c2d;
}

.compare-icon--cross{
  color:#f00f0f;
}



@media (min-width:768px){

  /* Archive -> Hero */
  /* price -> Hero */
  .archive-hero__media,
  .price-hero__media{
    height:676px;
  }

  .archive-hero__body,
  .price-hero__body{
    max-width:560px;
  }

  .product-archive .section__lead{
    max-width:720px;
  }

  .product-archive__button{
    margin-bottom:40px;
  }

  /* Archive -> Philosophy */
  /* product -> Technology */
  .archive-philosophy__grid,
  .product-technology__grid{
    gap:80px;
  }

  .archive-philosophy__item,
  .product-technology__item{
    flex-direction:row;
    align-items:center;
    gap:48px;
  }

  .archive-philosophy__media,
  .product-technology__media{
    flex:0 0 45%;
  }

  .archive-philosophy__content,
  .product-technology__content{
    flex:1;
  }

  .archive-philosophy__item:nth-child(even),
  .product-technology__item:nth-child(even){
    flex-direction:row-reverse;
  }

  .archive-philosophy__heading,
  .product-technology__heading{
    font-size:24px;
  }

  /* Archive -> Technology */
  /* product -> Highlight */
  .archive-technology__grid,
  .product-highlights__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:48px;
    align-items:start;
  }

  .archive-technology__item,
  .product-highlights__item{
    gap:20px;
  }

  .archive-technology__media,
  .product-highlights__media{
    width:85%;
  }

  /* Archive -> Compare */
  .compare-table__scroll{
    margin-bottom:48px;
  }
  
  .compare-table__table th,
  .compare-table__table td{
    padding:20px 40px;
    font-size:15px;
    line-height:1.6;
  }
  
  .compare-table__feature{
    width:380px;
  }
  
  .compare-table__table td{
    min-width:160px;
  }
  
  .compare-icon{
    width:18px;
    height:18px;
  }

}


/* =================================
   Single Product
================================= */

/* Product -> Hero */
.product-hero{
  padding-top:64px;
  padding-bottom:48px;
  background:
    /* radial-gradient(circle at 50% 20%, rgba(60,0,60,.6), transparent 60%), */
    linear-gradient(225deg,#111 0%,#474148 100%);
  color:#fff;
}

.product-hero__inner{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.product-hero__media{
  width:100%;
  max-width:360px;
}

.product-hero__image{
  width:100%;
  height:auto;
  display:block;
}

.product-hero__content{
  margin-bottom: 24px;
}

.product-hero__title{
  font-family:var(--font-en);
  font-size:clamp(42px,6vw,85px);
  font-style:italic;
  font-weight:300;
  line-height:1.2;
  margin-bottom: 20px;
}

.product-hero__lead{
  margin-bottom: 20px;
}

.product-hero__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.product-hero__item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:1.6;
}

.product-hero__icon{
  width:15px;
  height:15px;
  flex-shrink:0;
  fill:#ccc;
  margin-top:4px;
}

/* product -> Specs */
.product-specs__grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.product-specs__summary{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.product-specs__summary-block{
  background:var(--color-gray);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.product-specs__summary-title{
  font-size:16px;
  line-height:1.3;
  font-weight:600;
}

.product-specs__summary-text{
  font-size:15px;
  line-height:1.7;
  color:#333;
}

.product-specs__summary-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight: 500;
}

.product-specs__summary-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.product-specs__summary-icon{
  width:15px;
  height:15px;
  flex-shrink:0;
  fill:var(--color-black);
  margin-top:5px;
}

.product-specs__summary-label{
  color:var(--color-black);
}

/* product -> Related */
.related-products__grid{
  display:grid;
  gap:32px;
}

/* product -> Value */
.product-value{
  background: var(--color-gray);
}

.product-value__grid{
  display:flex;
  flex-direction:column;
  gap:48px;
}

.product-value__media{
  width:40%;
  margin: 0 auto;
}

.product-value__image{
  width:100%;
  height:auto;
  display:block;
}

/* Accordion */
.product-value__accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.product-value__item{
  box-shadow:0 2px 14px rgba(0,0,0,0.15);
  overflow:hidden;
  background: var(--color-white);
}

.product-value__trigger{
  width:100%;
  padding:18px 20px;
  font-size:16px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.product-value__trigger::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1px solid #111;
  border-bottom:1px solid #111;
  transform:rotate(45deg); /* ↓ */
  transition:transform .25s ease;
}

.product-value__item.is-open .product-value__trigger::after{
  transform:rotate(-135deg); /* ↑ */
}

.product-value__content{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}

.product-value__text{
  padding:0 20px 18px;
}

/* PC Layout
----------------------------------- */
@media (min-width:768px){
  
  /* Product -> Hero */
  .product-hero{
    padding-top:96px;
    padding-bottom:80px;
  }

  .product-hero__inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .product-hero__media{
    flex:0 0 500px;
    max-width:500px;
  }

  .product-hero__content{
    flex:1;
    margin-bottom:0;
  }
  
  .product-hero__item{
    font-size:15px;
    line-height:1.7;
  }
  
  .product-hero__icon{
    width:16px;
    height:16px;
  }
  
  /* product -> Specs */
  .product-specs__grid{
    display:grid;
    grid-template-columns: 55% 45%;
    align-items:start;
    gap:7%;
    margin-top: 64px;
  }
  
  .single-product .product-specs .c-product-card__specs{
    gap:64px;
    margin:0;
  }
  
  .single-product .product-specs .c-product-card__spec{
    flex-direction:row;
    align-items:center;
    gap:16px;
  }
  
  .single-product .product-specs .c-product-card__label{
    flex:0 0 130px;
    font-size: 16px;
    font-weight: 600;
  }
  
  .single-product .product-specs .c-product-card__value{
    font-size: 16px;
    font-weight: 600;
  }

  .single-product .product-specs .c-product-card__bars{
    flex:1;
    gap:10px;
  }
  
  .single-product .product-specs .c-product-card__bar{
    height:12px;
  }
  
  .single-product .product-specs .c-product-card__bar.is-active{
    background:var(--color-accent);
  }

  .product-specs__summary-block{
    padding:32px;
  }

  .product-specs__summary-title{
    font-size:18px;
  }

  /* product -> Related */
  .related-products__grid{
    grid-template-columns:repeat(3,1fr);
  }

  /* product -> Value */
  .product-value__grid{
    display:grid;
    grid-template-columns:1fr 250px 1fr;
    gap:40px;
    align-items:center;
  }

  .product-value__media{
    grid-column:2;
    grid-row:1 / span 2;
    width:100%;
    margin:0;
  }
  
  .product-value__accordion{
    display:contents; /* アコーディオン解除 */
  }

  .product-value__item{
    box-shadow:0 2px 28px rgba(0,0,0,0.15);
  }

 .product-value__item:nth-of-type(1){
    grid-column:1;
    grid-row:1;
  }

  .product-value__item:nth-of-type(2){
    grid-column:3;
    grid-row:1;
  }

  .product-value__item:nth-of-type(3){
    grid-column:1;
    grid-row:2;
  }

  .product-value__item:nth-of-type(4){
    grid-column:3;
    grid-row:2;
  }

  .product-value__trigger{
    cursor:default; /* トリガーを見出し化 */
    padding:20px;
    font-size:18px;
  }

  .product-value__trigger::after{
    display:none;
  }

  .product-value__content{
    max-height:none; /* 常時展開 */
    overflow:visible;
  }

  .product-value__text{
    padding:0 20px 20px;
  }

}



/* =================================
   Price Page
================================= */
/* Price -> Table */
.price-table {
background: var(--color-gray);
}

.price-table__scroll {
  overflow: auto;
  max-height: 80vh;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32px;
}

.price-table__table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  background: var(--color-black);
  color: var(--color-white);
}

.price-table__table th,
.price-table__table td {
  padding: 12px 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--color-black);
}

/* 1段目のヘッダー */
.price-table__table thead tr:nth-child(1) th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-black);
  font-family: var(--font-en);
  font-weight: 600;
}

/* 2段目のヘッダー（Art-Nr / 価格） */
.price-table__table thead tr:nth-child(2) th {
  position: sticky;
  top: 43px; 
  z-index: 20;
  background: var(--color-black);
  font-family: var(--font-en);
  font-weight: 600;
}

/* 左列（車種）固定 */
.price-table__vehicle {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--color-black);
  width: 140px;
}

/* 左列かつヘッダー（左上角）は一番上に重ねる */
.price-table__table thead tr:nth-child(1) th.price-table__vehicle {
  z-index: 30;
}

/* モデル */
.price-table__spec {
  width: 180px;
}

/* 商品大項目（SP-RC / MT-RC） */
.price-table__product {
  text-align: center;
}

/* 2段目の小項目（Art-Nr / 価格の幅） */
.price-table__subhead {
  text-align: center;
  width: 100px;
}

/* Art-Nr列 */
.price-table__artnr {
  text-align: center;
  white-space: nowrap;
}

/* 価格列 */
.price-table__price {
  text-align: center;
  white-space: nowrap;
}

.price-table__tax {
  font-size: 12px;
}

/* メーカー行 */
.price-table__maker th,
.price-table__maker td {
  background: #555;
  border: none;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: .05em;
}

/* Price -> Contact */
.contact-cards__grid{
  display:grid;
  gap:24px;
}

.contact-cards__card{
  padding:24px;
  background:var(--color-gray);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-cards__title{
  font-family: var(--font-en);
  font-size:24px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:14px;
}

.contact-cards__icon{
  width:34px;
  height: 34px;
  display:inline-flex;
  flex-shrink:0;
}

.contact-cards__icon svg{
  width:100%;
  height:100%;
}

.contact-cards__text{
  font-size:14px;
  line-height:1.7;
}



@media (min-width:768px){
  
  .price-table__scroll{
    margin-bottom: 48px;
  }
  
  .price-table__scroll::-webkit-scrollbar{
    width: 4px;
    height: 4px;
  }
  
  .price-table__scroll::-webkit-scrollbar-track{
    background: var(--color-black);
  }
  
  .price-table__scroll::-webkit-scrollbar-thumb{
    background: #777;
  }
  
  .price-table__scroll::-webkit-scrollbar-button{
    display:none; /* 矢印削除 */
  }

  .price-table__table th,
  .price-table__table td{
    padding:15px 25px;
    font-size:15px;
    line-height:1.6;
  }
  
  /* PCサイズ時の2段目ヘッダーの固定位置 */
  .price-table__table thead tr:nth-child(2) th {
    top: 56px;
  }

  .price-table__vehicle{
    width:170px;
  }

  .price-table__spec{
    width:220px;
  }
  
  .contact-cards__grid{
    grid-template-columns:repeat(3,1fr);
    gap:32px;
  }

  .contact-cards__card{
    padding:32px 24px;
  }

  .contact-cards__title{
    font-size:28px;
  }

  .contact-cards__text{
    font-size:15px;
  }

}


/* =================================
   404
================================= */

.error-404{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  text-align:center;
}

.error-404__code{
  font-family:var(--font-en);
  font-size:90px;
  font-weight:700;
  font-style: italic;
  color:#cfcfcf;
  line-height:1;
  margin-bottom:16px;
}

.error-404__title{
  font-family:var(--font-en);
  font-size:32px;
  font-weight:700;
  margin-bottom:12px;
}

.error-404__text{
  margin-bottom:32px;
}


/* PC Layout
----------------------------------- */
@media (min-width:768px){
  
  .error-404__code{
    font-size:140px;
    margin-bottom:24px;
  }

  .error-404__title{
    font-size:48px;
    margin-bottom:16px;
  }

  .error-404__text{
    margin-bottom:40px;
  }

}