/* =================================================================
 * c-online-store — フッター中段オンラインストアセクション
 * Figma: 3321:74407 (オンラインストア)
 *
 * 構成:
 *   .c-online-store              外側セクション（左右ガター・上余白）
 *   .c-online-store__inner       カード本体（bg-02 / rounded-32）
 *     ├─ .c-online-store__grid   3×2 グリッド（右下空白）
 *     │   └─ .c-online-store__cell ロゴカード + 下ラベル
 *     │       ├─ .c-online-store__card        bg白 角丸12 h130 のロゴカード
 *     │       └─ .c-online-store__cell-label  カード下の説明文 14px
 *     └─ .c-online-store__header 右側 見出し + 下線アクセント + リード文
 *
 * 仕様:
 *   - PCファースト（Figma 1440 / カード 1300×560 / py80 pl40 pr60）
 *   - SP（≤1023.98px）は @media (max-width: 1023.98px) で縦積み・2列グリッド
 *   - 色・タイポは tokens.css 経由
 * =================================================================*/

.c-online-store {
  width: 100%;
  padding: 0 70rem;
  margin-top: 80rem;
  box-sizing: border-box;
}

.c-online-store__inner {
  max-width: var(--footer-content-max);
  margin: 0 auto;
  padding: 80rem 60rem 80rem 40rem;
  background-color: var(--color-bg-02);
  border-radius: 32rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 60rem;
  box-sizing: border-box;
}

/* ---------- 左：3×2 グリッド ---------- */
.c-online-store__grid {
  flex: 1 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24rem;
  min-width: 0;
}

.c-online-store__cell {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  text-decoration: none;
  color: inherit;
  /* a タグでセル全体をクリック可能にする */
}

.c-online-store__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130rem;
  padding: 16rem;
  background-color: var(--color-white);
  border-radius: 12rem;
  box-sizing: border-box;
  overflow: hidden;                  /* hover時のロゴ scale(1.1) をカード内にクリップ */
  transition:
    transform var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default);
}

.c-online-store__cell:hover .c-online-store__card {
  transform: translateY(-2rem);
  box-shadow: var(--shadow-card);
}

/* hover時にロゴ 1.1x 拡大（他カード pickup/advantage/works/products と同じ挙動） */
.c-online-store__cell:hover .c-online-store__card-logo {
  transform: scale(1.1);
}

.c-online-store__card-logo {
  display: block;
  max-width: 100%;
  max-height: 60rem;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ロゴごとのサイズ調整（Figma 寸法に準拠） */
.c-online-store__card-logo--b2b          { width: 182rem; height: 41rem; }
.c-online-store__card-logo--my-desseart  { width: 168rem; height: 42rem; }
.c-online-store__card-logo--yahoo        { width: 168rem; height: auto; }
.c-online-store__card-logo--amazon       { width: 110rem; height: 53rem; }
.c-online-store__card-logo--rakuten      { width: 121rem; height: 36rem; }

/* 右下の外部リンクアイコン（13×13） — Figma 5058:312904: 2枚重ねの外部リンク（link-external.svg）
   色はライトオレンジ（--color-light-orange-01 #FFD5B2）→ hover でキーオレンジ。PC/SP 共通 */
.c-online-store__card-external {
  position: absolute;
  bottom: 16rem;
  right: 16rem;
  width: 13rem;
  height: 13rem;
  flex-shrink: 0;
  background-color: var(--color-light-orange-01);
  -webkit-mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-online-store__cell:hover .c-online-store__card-external {
  background-color: var(--color-key);
}

.c-online-store__cell-label {
  padding: 0 8rem;
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);          /* 14px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);          /* 1.8 */
  color: var(--color-text-sub);          /* #787878 */
}

/* ---------- 右：見出し + リード文 ---------- */
.c-online-store__header {
  flex-shrink: 0;
  width: 362rem;
  display: flex;
  flex-direction: column;
  gap: 24rem;
}

.c-online-store__title-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-online-store__title-ja {
  font-family: var(--font-jp);
  font-size: var(--fs-body);             /* 16px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-key);
  white-space: nowrap;
}

.c-online-store__title-en {
  font-family: var(--font-en-condensed);
  font-size: var(--fs-h1-pc);            /* 56px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
  white-space: nowrap;
}

.c-online-store__title-accent {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

.c-online-store__lead {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body);             /* 16px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);          /* 1.8 */
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
}

/* =================================================================
 * SP（≤1023.98px）— Figma: footer_SP 3321:93537 / オンラインストア 1932:16657
 *   見出し中央寄せ・コンテナ角丸32・カード角丸16・2列グリッド
 * =================================================================*/
@media (max-width: 1023.98px) {

  .c-online-store {
    padding: 0 16rem;
    margin-top: 48rem;
  }

  .c-online-store__inner {
    flex-direction: column;
    align-items: center;       /* Figma: items-center */
    padding: 48rem 16rem;
    gap: 16rem;
    border-radius: 32rem;
  }

  /* ヘッダーを先頭に上げる（見出し中央／リードは全幅左寄せ） */
  .c-online-store__header {
    order: -1;
    width: 100%;
    gap: 20rem;
    align-items: center;
    padding: 0 8rem;
    box-sizing: border-box;
  }

  /* 見出しグループは中央寄せ */
  .c-online-store__title-group {
    align-items: center;
    text-align: center;
  }

  .c-online-store__title-en {
    font-size: 34rem;            /* Figma SP 見出し */
  }

  /* リード文は全幅・左寄せ・14px */
  .c-online-store__lead {
    width: 100%;
    text-align: left;
    font-size: var(--fs-body-sm);        /* 14px */
  }

  /* グリッド: 2列、最後行 1セル余り */
  .c-online-store__grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12rem;
  }

  .c-online-store__card {
    height: 110rem;
    padding: 16rem;
    border-radius: 16rem;
  }

  .c-online-store__card-external {
    bottom: 12rem;
    right: 12rem;
    /* 形・色は base を継承（link-external.svg ＋ライトオレンジ）。SP は位置のみ調整 */
  }

  .c-online-store__cell-label {
    font-size: var(--fs-body-sm);        /* 14px */
    padding: 0 8rem;
  }

  /* SP では各ロゴサイズを少し絞る */
  .c-online-store__card-logo {
    max-height: 48rem;
  }

  .c-online-store__card-logo--b2b         { width: 140rem; height: auto; }
  .c-online-store__card-logo--my-desseart { width: 130rem; height: auto; }
  .c-online-store__card-logo--yahoo       { width: 130rem; height: auto; }
  .c-online-store__card-logo--amazon      { width: 88rem;  height: auto; }
  .c-online-store__card-logo--rakuten     { width: 96rem;  height: auto; }
}