/* /assets/css/front/front-reasons.css
 * トップ：myro コンセプト「できること」
 * ベース：PDP「特徴と機能」のカード／スライダー
 * Design Tokens: variables.css（Mobile-first）
 */

/* =========================================================
   セクション
   ========================================================= */

.frontReasons {
  position: relative;
  background: var(--c-bg);
}

.frontReasons__inner {
  width: min(var(--container-max, 1200px),
             100% - (var(--container-gutter, 1rem) * 2));
  margin-inline: auto;
  padding-inline: var(--container-gutter, 1rem);
}

/* セクション見出し（将来利用想定） */
.frontReasons__title {
  position: relative;
  margin: var(--space-6) 0 var(--space-8);
  font-size: clamp(13px, 1.2vw, var(--fs-sm));   /* 13px 基点 */
  font-weight: var(--fw-regular);
  color: var(--c-fg-muted);
  line-height: 1.4;
  padding-left: 0.25rem; /* 4px */
}
.frontReasons__title::before {
  content: attr(data-en);
  display: block;
  font-size: clamp(var(--fs-xl), 5vw, 56px);
  line-height: 1.1;
  font-weight: var(--fw-regular);
  letter-spacing: .01em;
  color: rgba(26, 26, 26, .88); /* var(--c-fg) を基調に透明度 */
  margin-bottom: 0.75rem;
}

/* =========================================================
   JS無効フォールバック：3列グリッド
   ========================================================= */

.frontReasons__list {
  display: grid;
  gap: var(--space-6); /* 24px */
}

@media (min-width: 768px) {
  .frontReasons__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   カード
   ========================================================= */

.frontReasons__card {
  position: relative;                /* （縦線や装飾の基準） */
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  padding: var(--space-6) var(--space-4) var(--space-6); /* 24 16 24 */
  border: none;
}

/* ヘッダー：番号丸 + キャッチ */
.frontReasons__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);                     /* 12px */
  margin-bottom: var(--space-3);
  min-height: auto;                        /* PCでの高さ揃えは下で制御 */
}

/* 番号丸（アイコン） */
.frontReasons__icon {
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--c-border) 90%, #9fb0c2 10%);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);                /* 12px */
  font-weight: var(--fw-medium);
  letter-spacing: .08em;
  color: var(--c-fg-muted);
  background: var(--c-bg);
}

/* キャッチ（h3） */
.frontReasons__catch {
  font-size: var(--fs-lg);                /* 22px（@ ≥768 も tokens 準拠） */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);           /* 1.3 */
  margin: 0;
  color: var(--c-fg);
}

/* コピー */
.frontReasons__copy {
  font-size: var(--fs-base);              /* 16px */
  line-height: var(--lh-base);            /* 1.7 */
  margin: 0;
  color: var(--c-fg-muted);
}

/* 見出しブロック高さの揃え（PC） */
@media (min-width: 768px) {
  .frontReasons__head {
    min-height: 4.2em;                    /* 行間拡張を吸収 */
    align-items: flex-start;
  }
}

/* サムネイル（任意：カード内アイコン画像用） */
.frontReasons__thumb {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);          /* 24px */
}
.frontReasons__thumb img {
  inline-size: 88px;                      /* 64–96pxで調整可 */
  block-size: auto;
}

/* =========================================================
   Swiper 化レイアウト
   構造：.frontReasons__mask > .swiper.frontReasons__swiper
   ========================================================= */

.frontReasons__mask {
  position: relative;
}

/* 右側フルブリード（PLP/PDPの原則に準拠） */
.frontReasons__swiper {
  position: relative;
  padding-bottom: var(--space-8);         /* ドットや余白の逃がし */
  margin-right: calc(50% - 50vw);         /* 右端まで広げる */
  padding-right: var(--container-gutter); /* 右ガター */
}

.frontReasons__swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);                    /* 32px：カード間隔 */
}

/* --- スライド幅（細め） --- */

/* PC：2枚＋3枚目チラ見せ */
.frontReasons__swiper .swiper-slide {
  height: auto;
  width: 32%;
  max-width: 32%;
  box-sizing: border-box;
}

/* タブレット：2枚表示を細めに */
@media (max-width: 1024px) {
  .frontReasons__swiper .swiper-slide {
    width: 36%;
    max-width: 36%;
  }
}

/* スマホ：1枚＋次カードチラ見せ */
@media (max-width: 768px) {
  .frontReasons__swiper .swiper-slide {
    width: 82%;
    max-width: 82%;
  }
}

/* =========================================================
   ナビゲーション（PDPの矢印準拠）
   ========================================================= */

.swiper-button-prev.frontReasons__navPrev,
.swiper-button-next.frontReasons__navNext {
  position: absolute;
  top: -56px;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  z-index: var(--z-fixed);
}

/* ← → は Swiper 標準 ::after を利用 */
.swiper-button-prev.frontReasons__navPrev::after,
.swiper-button-next.frontReasons__navNext::after {
  font-size: 16px;
  color: var(--c-fg);
  font-weight: var(--fw-bold);
}

/* hover */
.swiper-button-prev.frontReasons__navPrev:hover,
.swiper-button-next.frontReasons__navNext:hover {
  background: var(--c-bg-muted);
  border-color: color-mix(in srgb, var(--c-border) 70%, #9ca3af 30%);
}

/* disabled */
.swiper-button-prev.frontReasons__navPrev[aria-disabled="true"],
.swiper-button-next.frontReasons__navNext[aria-disabled="true"] {
  opacity: .4;
  cursor: default;
}

/* 位置（右上で横並び） */
.swiper-button-next.frontReasons__navNext { right: 12px; left: auto; }
.swiper-button-prev.frontReasons__navPrev { right: 68px; left: auto; } /* 12 + 44 + 12 */

/* ページネーション（ドット） */
.frontReasons__pager {
  bottom: 0 !important;
  text-align: center;
}

/* モバイル：矢印を少し詰める */
@media (max-width: 768px) {
  .swiper-button-prev.frontReasons__navPrev,
  .swiper-button-next.frontReasons__navNext {
    top: -44px;
  }
}

/* =========================================================
   追加の見栄え調整（カード間隔/パディング）
   ========================================================= */

/* カード内側：やや引き締め（PC） */
@media (min-width: 768px) {
  .frontReasons__card {
    padding: var(--space-6) var(--space-3) var(--space-6); /* 24 12 24 */
  }
}

/* カード同士の横間隔（Swiper 使用時は wrapper の gap で制御。念のため保険で微調整可能） */
.frontReasons__card { margin-right: 0 !important; }

/* スマホはコンパクトに */
@media (max-width: 767px) {
  .frontReasons__card {
    padding: var(--space-8) 0 var(--space-10); /* 32 24 40 */
  }
}