@charset "UTF-8";
/*ーーーーーーーーーー
ラインナップページ
ーーーーーーーーーーー*/
/*category*/
.category {
  background: #443d33;
}
.category p {
  color: #ffffff;
  text-align: center;
  padding: 14px;
}

/*取説ボタン*/
.manual {
  display: inline-block;
}
.manual a {
  display: inline-block;
  position: relative;
  background-color: #ffffff;
  color: #000000;
  font-weight: 400;
  border: 2px solid #ff0000;
  padding: 10px 40px 10px 15px;
}
.manual a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: #ff0000;
  mask: url("../images/common/icon_pdf.svg") no-repeat center / contain;
  -webkit-mask: url("../images/common/icon_pdf.svg") no-repeat center / contain;
}

/*product*/
.product {
  margin: 120px auto 0;
}
.product p.small {
  font-size: clamp(8px, 2.6vw, 12px);
}
#hero {
  margin: 50px auto 100px;
}
#hero h1 {
  color: #443d33;
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  margin: 0 0 10px;
}
#hero h2 {
  color: #443d33;
  font-size: 22px;
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid #443d33;
  padding: 10px;
}
#hero .model_number {
  color: #666666;
  font-size: 12px;
}
#hero .hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 30px auto 0;
}
#hero .hero .hero_img {
  width: 38%;
}
#hero .hero .hero_content {
  width: 56%;
}
#hero .hero .hero_content .hero_description {
  padding: 10px;
  margin: 0 0 20px;
}
#hero .hero .hero_content .variation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 10px;
}
#hero .hero .hero_content .variation .variation_label {
  color: #443d33;
  border: 1px solid #443d33;
  border-radius: 5px;
  padding: 4px 20px;
}
#hero .hero .hero_content .variation .variation_option {
  display: inline-block;
  background: #eeece6;
  color: #443d33;
  border-radius: 50px;
  padding: 4px 20px;
}
#hero .cta {
  margin: 30px 0 0;
}
#feature {
  background: #eeece6;
  padding: 100px 0;
}
#feature h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 10px;
}
#feature .contents_center {
  max-width: 970px;
  margin: 0 auto;
}
#feature .contents_center + .contents_center {
  margin: 80px auto;
}
#feature .contents_center_description {
  margin: 15px;
}
#feature .small_contents {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 50px 20px;
  margin: 80px auto 0;
}
#feature .small_contents .small_contents_box {
  width: calc((100% - 40px) / 3);
}
#feature .small_contents_description {
  margin: 15px;
}
#video {
  width: 90%;
  margin: 100px auto;
}
#video .youtube {
  width: 100%;
  max-width: 690px;
  margin: 50px auto;
  aspect-ratio: 16 / 9;
}
#video .youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
#lineup .lineup {
  margin: 0 auto 100px;
}
#lineup .model {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eeece6;
  padding: 20px;
}
#lineup .model h3 {
  font-size: 20px;
  font-weight: 500;
  color: #443d33;
}
#lineup .feature_list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px auto;
}
#lineup .feature_list li {
  display: inline-block;
  color: #443d33;
  font-size: 16px;
  border: 1px solid #443d33;
  border-radius: 5px;
  padding: 4px 10px;
}
#lineup .feature_list li.none {
  opacity: 0.2;
}
#lineup .spec {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  container-name: spec-area;
  container-type: inline-size;
}
#lineup .spec .spec_grid {
  --label-width: 200px;
  --product-min-width: 220px;
  --product-max-width: 350px;
  display: grid;
  grid-template-columns: var(--label-width);
  grid-auto-columns: clamp(var(--product-min-width),calc((100cqw - var(--label-width)) / 2),var(--product-max-width));
  grid-auto-flow: column;
  grid-template-rows: auto repeat(5, 72px) 200px;
  width: max-content;
  min-width: 100%;
  background: #fff;
}
#lineup .spec .spec_grid:has(> .product_group:nth-child(2):last-child) {
  grid-template-columns: var(--label-width) minmax(0, 1fr);
  width: 100%;
}
#lineup .spec .spec_labels,#lineup .spec .product_group {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}
#lineup .spec .spec_labels {
  grid-column: 1;
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--label-width);
  background: #fff;
  box-shadow: 3px 0 3px rgb(0 0 0 / 6%);
}
#lineup .spec .spec_label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
  color: #333;
  font-weight: 500;
  text-align: center;
}
#lineup .spec .spec_label_head {
  align-items: flex-end;
  padding-bottom: 20px;
}
#lineup .spec .product_group {
  width: 100%;
  min-width: 0;
}
#lineup .spec .product_head {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 10px 20px;
  border-bottom: 1px solid #e7e7e7;
  text-align: center;
}
#lineup .spec .product_head img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #ddd;
}
#lineup .spec .model_number {
  overflow-wrap: anywhere;
  margin: 18px 0 0;
  color: #333;
  font-weight: 400;
}
#lineup .spec .spec_cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 15px 20px;
  border-bottom: 1px solid #e7e7e7;
  color: #333;
  text-align: center;
}
#lineup .spec .cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 5px;
  margin: 0;
  padding: 15px 20px;
  border-bottom: 1px solid #e7e7e7;
  color: #333;
  text-align: center;
}
#lineup .spec .cta p {
  width: min(160px, 100%);
  margin: 0;
}
#lineup .spec::-webkit-scrollbar {
  height: 8px;
}
#lineup .spec::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}
#lineup .spec::-webkit-scrollbar-thumb {
  background: #777;
  border-radius: 10px;
}
@container spec-area (max-width: 700px) {
  #lineup .spec .spec_grid {
    --label-width: 100px;
    --product-min-width: 190px;
    --product-max-width: 260px;
    grid-template-rows: auto repeat(5, 64px) 190px;
  }
  #lineup .spec .spec_label, #lineup .spec .spec_cell {
    padding: 12px 10px;
  }
  #lineup .spec .spec_label_head {
    padding-bottom: 18px;
  }
  #lineup .spec .product_head {
    padding-right: 8px;
    padding-left: 8px;
  }
  #lineup .spec .cta {
    padding: 12px 10px;
  }
  #lineup .spec .cta p {
    width: min(145px, 100%);
  }
}
#cta {
  position: fixed;
  background: #ffffff;
  box-shadow: 0px 0px 3px 2px #00000012;
  padding: 20px 5px;
  width: 98%;
  max-width: 1024px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px;
  opacity: 0;
  z-index: 666;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
#cta.active {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
#cta .cta {
  justify-content: center;
}
#cta .cta .guidance {
  text-align: center;
  margin: 0 20px 0 0;
}
@media screen and (max-width: 1024px) {
  .category p {
    padding: 1.4%;
  }
  #hero h1 {
    font-size: clamp(16.5px, 5.5vw, 24px);
  }
  #hero h2 {
    font-size: clamp(15px, 5vw, 22px);
    margin: 20px 0 0;
  }
  #hero .hero {
    flex-wrap: wrap;
  }
  #hero .hero .hero_img {
    width: 100%;
  }
  #hero .hero .hero_content {
    width: 100%;
  }
  #hero .model_number {
    font-size: clamp(8px, 2.6vw, 12px);
  }
  #hero .hero .hero_content .variation .variation_label {
    font-size: clamp(8px, 2.6vw, 12px);
  }
  #hero .hero .hero_content .variation .variation_option {
    font-size: clamp(8px, 2.6vw, 12px);
  }
  #feature h3 {
    font-size: clamp(13px, 4.3vw, 20px);
  }
  #feature .small_contents .small_contents_box {
    width: calc((100% - 40px) / 2);
  }
  #lineup .model h3 {
    font-size: clamp(13px, 4.3vw, 20px);
  }
  #lineup .feature_list li {
    font-size: clamp(8px, 2.6vw, 16px);
  }
  #lineup .spec .spec_label {
    font-size: clamp(8px, 2.6vw, 12px);
  }
  #lineup .spec .model_number {
    font-size: clamp(8px, 2.6vw, 12px);
  }
  #lineup .spec .spec_cell {
    font-size: clamp(8px, 2.6vw, 12px);
  }
}
@media screen and (max-width: 769px) {
  #hero {
    margin: 5% auto 10%;
  }
  #hero h1 {
    margin: 0 0 1%;
  }
  #hero h2 {
    margin: 2% 0 0;
  }
  #hero .hero {
    margin: 3% auto 0;
  }
  #hero .hero .hero_content .hero_description {
    margin: 0 0 2%;
  }
  #hero .hero .hero_content .variation {
    margin: 1%;
  }
  #hero .cta {
    margin: 6% 0 0;
  }
  #feature {
    padding: 10% 0;
  }
  #feature h3 {
    margin: 0 0 1%;
  }
  #feature .contents_center_description {
    margin: 3%;
  }
  #feature .contents_center + .contents_center {
    margin: 8% auto;
  }
  #feature .small_contents {
    gap: 50px 1.5%;
    margin: 8% auto 0;
  }
  #feature .small_contents_description {
    margin: 3%;
  }
  #feature .small_contents .small_contents_box {
    width: calc((100% - 3%) / 2);
  }
  #video {
    margin: 10% auto;
  }
  #video .youtube {
    margin: 5% auto;
  }
  #lineup .lineup {
    margin: 0 auto 10%;
  }
  #lineup .model {
    padding: 2%;
  }
  #lineup .feature_list {
    margin: 2% auto;
    gap: 5px;
  }
  #lineup .spec .cta {
    gap: 5px;
    padding: 1.2% 10%;
  }
  #lineup .spec .model_number {
    margin: 5% 0;
  }
  #lineup .spec .product_head {
    padding: 0 10px 2%;
  }
  #lineup .spec .spec_label {
    padding: 1.2% 10%;
  }
  #lineup .spec .spec_label_head {
    padding: 10%;
  }
  #lineup .spec .spec_cell {
    padding: 1.2% 10%;
  }
  #cta {
    bottom: 10px;
  }
  #cta .cta {
    flex-wrap: wrap;
    gap: 3px;
  }
  #cta .cta .guidance {
    width: 100%;
    margin: 0 0 5px 0;
  }
  #cta .cta .marche a {
    padding: 10px 15px;
  }
  #cta .cta .marche a::after {
    display: none;
  }
  #cta .cta .rakuten a {
    padding: 10px 15px;
  }
  #cta .cta .rakuten a::after {
    display: none;
  }
  #cta .cta .amazon a {
    padding: 10px 15px;
  }
  #cta .cta .amazon a::after {
    display: none;
  }  
}