@charset "UTF-8";

/* =========================================================
   Responsive
   ブレークポイント・SP専用の上書きはこのファイルで管理
========================================================= */

/* ============================
   Base responsive variables
============================ */

@media (max-width: 768px) {
  :root {
    --fs-h1: 2rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.2rem;

    --mgb-l: 5rem;
    --mgb-m: 2rem;
    --mgb-s: 1rem;
    --mg-xl: 3rem;
    --mg-l: 2rem;
    --mg-m: 1rem;
    --mg-s: 0.5rem;
    --pd-xl: 4rem;
    --pd-l: 2rem;
    --pd-m: 1rem;
    --pd-s: 0.5rem;
    --gap-l: 2rem;
    --gap-m: 1.5rem;
    --gap-s: 0.5rem;
  }
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}


/* ============================
   Style responsive
============================ */

@media (max-width: 1070px) {
  .inner {
    margin-inline: 1rem;
  }
  .product-mv {
    padding: var(--pd-m) var(--pd-s);
  }
  
@media (max-width: 680px) {
  /* =========================
     MV
  ========================= */

  .mv-area {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* =========================
     背景画像
  ========================= */

  .mv-area__bg {
    display: block;
    width: 100%;

    position: relative;
    z-index: 1;
  }

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

  /* =========================
     mv_read_sp.png_ MV画像と同じ大きさで重ねる
  ========================= */

  .mv-area .mv-read {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .mv-area .mv-read picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .mv-area .mv-read img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* =========================
     h1
  ========================= */

  .mv-area h1 {
    top: 50%;
    left: 0.2rem;
    bottom: auto;
    height: auto;
    margin: 0;
    transform: translateY(-50%);
    z-index: 3;
  }

  .mv-area h1 img {
    width: 240px;
    height: auto;
  }

  /* =========================
     ロゴ
  ========================= */

  .mv-area .flex-btw {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 3;
  }

  .mv-area .logo img {
    height: 2rem;
    width: auto;
  }
}

@media (max-width: 768px) {
  .sec01 .read span {
    /* font-size: var(--fs-body); */
  }
  .sec01 .read span:nth-child(1) {
    margin-left: 4rem;
  }
  .sec01 .read span:nth-child(3) {
    margin-left: 2rem;
    margin-top: -0.5rem;
    /* font-size: var(--fs-h4); */
  }
}

@media (max-width: 768px) {
  .sec01 .list-question {
    flex-direction: column;
    gap: var(--gap-m);
    margin-bottom: var(--mg-l);
  }

  .sec01 .list-question li {
    width: 100%;
    flex: none;
    margin-bottom: var(--gap-m);
  }

  /* PC版の上下交互配置を解除 */
  .sec01 .list-question li:nth-child(even) {
    transform: none;
  }

  /* SVGのあしらい */
  .sec01 .list-question li::after {
    bottom: -2rem;
    width: 400px;
    aspect-ratio: 940 / 100;
  }

  /* 偶数番の左右反転は維持 */
  .sec01 .list-question li:nth-child(even)::after {
    transform: translateX(-50%) scaleX(-1);
  }

  .sec01 .list-question li a {
    width: 100%;
    height: auto;
    min-height: 100px;
    padding: var(--pd-s);
    font-size: var(--fs-body);
  }

  .sec01 .list-question li a span.number {
    font-size: var(--fs-h3);
  }
}

@media (max-width: 768px) {
  .sec02 h2 {
    font-size: 3rem;
  }

  .sec02 h2 span.fs-l {
    font-size: 6rem;
  }

  .sec02 h2,
  .catalog-text__top p,
  .catalog-text__bottom p {
    text-align: center;
  }

  .sec02 .flex-overlap {
    display: flex;
    flex-direction: column;
  }

  .catalog-text,
  .catalog-photo {
    display: contents;
  }

  /* テキスト前半 */
  .catalog-text__top {
    order: 1;
    margin-top: var(--mg-l);
    margin-bottom: 2rem;
  }

  /* 写真01 */
  .catalog-photo__item--01 {
    order: 2;
    width: 100%;
    aspect-ratio: auto;
    margin-bottom: 2rem;
  }

  .catalog-photo__item--01 img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* テキスト後半 */
  .catalog-text__bottom {
    order: 3;
    margin-bottom: 2rem;
  }

  /* 写真02〜05 */
  .catalog-photo__grid {
    order: 4;

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

    width: 100%;
  }

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

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

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

  .catalog-photo__item--05 {
    grid-column: 2;
    grid-row: 3;
    aspect-ratio: 460 / 335;
  }

  .catalog-photo__grid .catalog-photo__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* テキスト */
  .catalog-text p {
    line-height: 1.8;
  }
}

@media (max-width: 768px) {

  .product-mv__inner {
    min-height: auto;
  }

  .product-mv__info {
    position: static;
    margin: 1rem 1rem 0;
  }

  .product-mv__visual {
    height: auto;
    min-height: 400px;
  }

  .product-mv__main-image {
    width: 90%;
  }

  .product-mv__visual h1 {
    bottom: 1rem;
    font-size: 3.5rem;
  }

  .product-color {
    gap: var(--gap-ss);
  }

  .product-color__list {
    gap: var(--gap-ss);
  }

  .product-color__list button {
    width: 42px;
    height: 42px;
  }

  .product-detail {
    margin: 1rem;
    padding: var(--pd-s);
  }

  .product-detail__inner {
    display: block;
  }

  .product-detail__info {
    margin-bottom: 2rem;
  }

  .equipment-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .reason-list {
    grid-template-columns: 1fr;
  }

  .reason-item {
    grid-template-columns: 35% 1fr;
  }

  .reason-list li.reason-item:nth-child(4) {
    grid-template-columns: 1fr;
  }

  .reason-list li.reason-item:nth-child(4) .reason-content {
    order: 1;
  }

  .reason-list li.reason-item:nth-child(4) .reason-image {
    order: 2;
  }
}

@media (max-width: 768px) {
  .flex-ft ul {
    flex-direction: column;
    gap: var(--gap-s);
  }
}

@media (max-width: 768px) {
  .flex-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
  }

  .flex-row li,
  .flex-row div {
    flex: none;
    width: 100%;
  }
}

@media (hover: hover) {
  /* 全リンク共通 */
  a:hover {
    opacity: 0.75;
    transform: translateY(0.2rem);
  }

  /* 個別のホバー */
  .sec01 .list-question li a:hover {
    background-color: color-mix(in srgb, var(--main) 40%, transparent);
  }
}