@charset "UTF-8";

/* ============================
   Layout
============================ */

.inner {
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--pd-xl) 0;
}

footer.inner {
  padding: var(--pd-m) 0;
}

/* ============================
   MV
============================ */

.mv-area {
  position: relative;
  width: 100%;
  /* 背景画像の高さに合わせて変動させる */
  overflow: hidden;
  background-color: #b3d1e4;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 70%,
    #fff 100%
  );
}

.mv-area__bg {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.mv-area__bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* MV内の要素 */
.mv-area h1,
.mv-area .mv-read,
.mv-area .flex-btw {
  position: absolute;
  z-index: 2;
}

.mv-area h1 {
  top: 50%;
  left: 45%;
  margin: 0;
  height: calc(100% - 4rem);
  transform: translate(-50%, -50%);
}

.mv-area h1 img {
  display: block;
  width: auto;
  height: 80%;
}

.mv-area .mv-read img {
  display: block;
  width: auto;
  height: auto;
}

/* ロゴ */

.mv-area .flex-btw {
  top: 2rem;
  left: 2rem;
  right: 2rem;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.mv-area .logo {
  margin: 0;
}

.mv-area .logo img {
  display: block;
  height: 4rem;
}

/* 購入するボタン*/
.page-sec05 {
  position: absolute;
  right: 1rem;
  bottom: 8rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 56px;
  padding: 0 1rem;
  color: var(--main);
  background-color: #fff;
  border: 1px solid var(--main);
  border-radius: 999px;
  text-decoration: none;
}

.page-sec05__cart {
  position: absolute;
  left: 1rem;
  width: 20px;
  height: 20px;
  background-image: url("../img/icon_cart-r.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.page-sec05__text {
  display: block;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* 下矢印 */
.page-sec05__arrow {
  position: absolute;
  right: 1.2rem;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--main);
  border-bottom: 1px solid var(--main);
  transform: rotate(45deg);
}

/* フォーカス */
.page-sec05:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

/* 固定状態 */

.page-sec05.is-fixed {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  bottom: auto;
  z-index: 1000;
}

/* ============================
sec01_Q&A 
============================*/

.sec01 {
  background-image:
    linear-gradient(
      to bottom,
      #fff 0%,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 95%,
      #fff 100%
    ),
    url("../img/bg_sec01.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.sec01 .inner {
  padding: 0 0 var(--pd-l);
}

.sec01 .read {
  margin-bottom: var(--mg-l);
}

.sec01 .read span {
  display: block;
  width: fit-content;
  background-color: color-mix(in srgb, var(--main) 60%, transparent);
  padding: var(--pd-xs) var(--pd-m);
  border-radius: 4rem;
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

.sec01 .read span:nth-child(1) {
  margin-left: 6rem;
}

.sec01 .read span:nth-child(2) {
  margin-left: 0;
  margin-top: -0.5rem;
}

.sec01 .read span:nth-child(3) {
  margin-left: 10rem;
  margin-top: -1rem;
  font-size: var(--fs-h2);
}

.sec01 .list-question {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  gap: var(--gap-m);
  margin-bottom: var(--mg-xl);
}

.sec01 .list-question li {
  width: 100%;
  position: relative;
  flex: 1;
  display: flex;
  z-index: 1;
}

.sec01 .list-question li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2rem;
  width: 400px;
  height: auto;
  aspect-ratio: 940 / 100; /* SVGの実際の比率に合わせて変更 */
  transform: translateX(-50%);
  background-image: url("../img/img_sec01-q.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

.sec01 .list-question li:nth-child(even)::after {
  transform: translateX(-50%) scaleX(-1);
}

.sec01 .list-question li:nth-child(even) {
  transform: translateY(2rem);
}

.sec01 .list-question li a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--darkgray);
  width: 100%;
  height: 100%;
  padding: var(--pd-m) var(--pd-s);
  border-radius: 2rem;
  border: 1px dashed var(--main, #3298d7);
  background-color: #fff;
  box-shadow: 4px 4px 1px 0 var(--sub, #d6e5ee);
  gap: var(--gap-s);
}

.sec01 .list-question li a span.number {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: #bfeed5;
}

.sec01 .list-answer {
  background-color: rgb(255 255 255 / 60%);
  border: var(--main) solid 1px;
  border-radius: var(--mg-l);
  margin-bottom: var(--mg-l);
}

.sec01 .box-1 {
  padding: var(--pd-l);
}

.sec01 .list-answer h2 {
  font-size: var(--fs-h1);
  margin-bottom: var(--mg-s);
}

.sec01 .list-answer h2 span.number {
  display: block;
  font-size: 7rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #bfeed5;
}

.sec01 .data {
  background-color: #fff;
  padding: var(--pd-l);
  border-radius: 0 0 4rem 4rem;
}

.sec01 .data .dl-dt {
  color: #fff;
  font-weight: var(--fw-bold);
  padding: var(--pd-xs) var(--pd-s);
  margin-right: var(--mg-s);
  border-radius: 0.5rem 0.5rem 0 0.5rem;
  background-color: var(--main);
}

.sec01 .data figure img {
  display: block;
  width: 100%;
  height: auto;
}

.sec01 .data figure > figcaption {
  margin-top: var(--mg-s);
  font-size: var(--fs-cap);
  line-height: 1.6;
  text-align: right;
}

/* ============================
   sec02 商品カタログ
============================ */

.sec02 h2 {
  font-size: 5rem;
  color: var(--sub-2);
  margin-bottom: var(--mg-m);
  line-height: 1.2;
}

.fs-l {
  font-size: 7rem;
}

/* =========================
   Layout
========================= */

.sec02 .flex-overlap {
  display: flex;
  gap: 0;
}

/* =========================
   左：テキスト
========================= */

.catalog-text {
  position: relative;
  z-index: 2;

  margin-top: var(--mg-l);
}

.catalog-text p {
  margin: 0 0 var(--mg-m);

  line-height: 2.2;
  letter-spacing: 0.1em;
}

.catalog-text p:last-child {
  margin-bottom: 0;
}

/* =========================
   右：画像エリア
========================= */

.catalog-photo {
  flex: 1;
  min-width: 0;

  margin-left: -8rem;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);

  position: relative;
  z-index: 1;
}

/*
  中のgridはPCでは
  catalog-photoのgridに参加させる
*/
.catalog-photo__grid {
  display: contents;
}

/* =========================
   画像
========================= */

.catalog-photo__item {
  min-width: 0;
  overflow: hidden;
}

.catalog-photo__item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* 写真01 */
.catalog-photo__item--01 {
  grid-column: 1 / -1;
  aspect-ratio: 940 / 690;
}

/* 写真02 */
.catalog-photo__item--02 {
  grid-column: 1;
  aspect-ratio: 460 / 335;
}

/* 写真03 */
.catalog-photo__item--03 {
  grid-column: 2;
  grid-row: 2 / span 2;
  aspect-ratio: 460 / 690;
}

/* 写真04 */
.catalog-photo__item--04 {
  grid-column: 1;
  grid-row: 3 / span 2;
  aspect-ratio: 460 / 690;
}

/* 写真05 */
.catalog-photo__item--05 {
  grid-column: 2;

  aspect-ratio: 460 / 335;
}

/* ============================
   sec03_商品_カラーバリエーション
============================ */

/* ----- Product MV ----- */

.product-mv {
  background-color: var(--gray);
  padding: var(--pd-xl) 0;
}

.product-mv__inner {
  position: relative;
  max-width: 1040px;
  min-height: 600px;
  margin: 0 auto;
}

/* ----- 商品情報 ----- */

.product-mv__info {
  position: absolute;
  top: 7rem;
  z-index: 2;
}

.product-mv__logo {
  margin: 0 0 var(--mg-s);
}

.product-mv__logo img {
  display: block;
  width: 110px;
  height: auto;
}

.product-mv__info dl {
  margin: 0;
}

.product-mv__info dl > div {
  display: flex;
  font-size: var(--fs-cap);
  line-height: 1.8;
}

.product-mv__info dt::after {
  content: "：";
}

.product-mv__info dt,
.product-mv__info dd {
  margin: 0;
}

/* ----- メイン画像 ----- */

.product-mv__visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mg-l);
}

.product-mv__main-image {
  position: relative;
  z-index: 2;
  width: 520px;
}

.product-mv__main-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- 軽 × 涼 Style ----- */

.product-mv__visual h1 {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 1;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #cbc6c3;
  transition: color 0.3s ease;
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: 1;
  letter-spacing: 0;
}

.product-mv__visual h1 span:nth-child(2) {
  font-weight: 300;
}

/* ----- カラーバリエーション ----- */

.product-color {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  position: relative;
  z-index: 5;
}

.product-color__list {
  display: flex;
  gap: var(--gap-ss);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-color__list li {
  margin: 0;
  padding: 0;
}

/* カラー画像ボタン */
.product-color__list button {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  background-color: #ddd;
  cursor: pointer;
  overflow: hidden;
}

/* 画像 */

.product-color__list button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------
   非アクティブ_黒い網がけ
------------------------- */

.product-color__list button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* -------------------------
   アクティブ_網がけなし
------------------------- */

.product-color__list button.is-active::after {
  opacity: 0;
}

/* アクティブの枠 */
.product-color__list button.is-active {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* 矢印 */

.product-color__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* 矢印_左 */
.product-color__arrow--prev::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
}

/* 矢印_右 */
.product-color__arrow--next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  transform: rotate(45deg);
}

/* ----- メイン画像切り替え ----- */

.product-mv__main-image img {
  transition: opacity 0.25s ease;
}

/* ----- 商品詳細 ----- */

.product-detail {
  max-width: 1040px;
  margin: -4rem auto 8rem;
  padding: var(--pd-m);
  border: 1px solid #ccc;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

.product-detail__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--gap-m);
}

/* 見出し */

.product-detail h2 {
  margin: 0 0 1rem;

  font-size: var(--fs-body);
  font-weight: 700;
}

/* ----- 商品情報 ----- */

.product-detail__info dl {
  margin: 0;
}

.product-detail__info dl > div {
  display: flex;
  font-size: var(--fs-cap);
  line-height: 1.8;
}

.product-detail__info dt,
.product-detail__info dd {
  margin: 0;
}

.product-detail__info dt::after {
  content: "：";
}

.product-detail__marks {
  display: flex;
  gap: var(--gap-ss);
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.product-detail__marks img {
  display: block;
  max-width: 80px;
  height: auto;
}

/* ----- 標準装備品 ----- */

.equipment-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-ss);
  margin: 0;
  padding: 0;
  list-style: none;
}

.equipment-list img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.75;
  object-fit: cover;
}

.equipment-list p {
  margin: 0.4rem 0 0;
  font-size: var(--fs-cap);
  text-align: center;
}

.product-detail__note {
  margin: 1rem 0 0;
  font-size: var(--fs-cap);
  line-height: 1.7;
}

/* ----- SP ----- */

/* ============================
   sec04_カブト選ばれる理由
============================ */

.sec04 {
  background-color: #d6e5ee;
}

.sec04 h2 {
  text-align: center;
  color: var(--main);
}

.sec04 h3 {
  display: flex;
  align-items: center;
}

.sec04 h3::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-right: var(--pd-xs);
  border: 4px solid var(--main);
  border-radius: 50%;
  background-color: #fff;
}

.reason-lead {
  margin-top: var(--mg-s);
  text-align: center;
}

.reason-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-s);
  max-width: 1040px;
  margin: var(--mg-m) auto 0;
  padding: 0;
  list-style: none;
}

.reason-list li.reason-item {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: var(--gap-s);
  padding: var(--pd-m);
  background-color: #fff;
  border-left: 4px solid #2b9fe3;
}

.reason-list li.reason-item .reason-image {
  height: 100%;
  overflow: hidden;
}

.reason-list li.reason-item .reason-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 最後のカードだけ画像エリアを広げる */
.reason-list li.reason-item:last-child {
  grid-template-columns: 60% 1fr;
}

.reason-list li.reason-item:last-child .reason-image {
  height: auto;
  overflow: visible;
}

.reason-list li.reason-item:last-child .reason-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.reason-content h3 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-body);
}

.reason-content p {
  margin: 0;
  line-height: 1.7;
}

/* SP */

/* ============================
   sec05_購入はこちら
============================ */

.sec05 {
  background-image: url(../img/bg_buy.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
}

.sec05 h2 {
  color: #fff;
}

.box {
  padding: var(--pd-l);
  max-width: 30rem;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--main);
  border-radius: 1rem;
  margin-bottom: var(--mgb-s);
  background-color: #fff;
}

.sec05 ul li {
  margin-bottom: var(--mg-s);
}

.sec05 ul li:last-child {
  margin-bottom: 0;
}

/* ============================
   Footer
============================ */

.flex-ft {
  display: flex;
  justify-content: space-between;
}

.flex-ft ul {
  display: flex;
  gap: var(--gap-m);
}

.flex-ft .footer-logo img {
  height: 4rem;
}

/* ============================
  page-top
============================ */

/* トップへ戻るボタン */
.page-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--main);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 100;
}

/* 表示状態 */
.page-top.is-show {
  opacity: 1;
  visibility: visible;
}

/* 矢印 */
.page-top::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--main);
  border-top: 1px solid var(--main);
  transform: rotate(45deg);
  margin-top: 0.2rem;
}

/* ============================
   Common UI _ふわっと表示
============================ */

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   Common UI
============================ */

/* font */

.fc-red {
  color: rgb(164, 0, 0);
  font-weight: 700;
}

/* 矢印ボタン */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 30rem;
  width: 100%;
  margin-inline: auto;
  height: 2.5rem;
  color: #fff;
  background-color: #3298d7;
  /* border: 1px solid var(--gray); */
  border-radius: 2.5rem;
  position: relative;
}

.button.btn-inverted {
  color: #3298d7;
  background-color: #fff;
  border: 1px solid var(--gray);
}

.button::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* flex_横 */
.flex-row,
.flex-row-keep {
  display: flex;
  gap: var(--gap-m);
}

.flex-row li,
.flex-row-keep li,
.flex-row div,
.flex-row-keep div {
  flex: 1;
}