@layer reset, base, layout, components, utilities;




/* ========================================================================== */
@layer reset {
}



/* ========================================================================== */
@layer base {
  :root {
    /* ===== color pallet ===== */
    --color-white: #ffffff;	/* 白 */
    --color-gray: #e0e0e0;	/* 灰 */
    --color-black: #333333;	/* 黒 */
    --color-red: #bf0000;	/* 赤 */
    --color-yellow: #ff9900;	/* 黄 */
    --color-rakuten: #bf0000;	/* 赤 */
    --color-amazon: #ff9900;	/* 黄 */

    /* ===== Theme（ light mode ） ===== */
    /* ─── 【デフォルト：モバイル・ライトモード用の配色】 ─── */
    --color-btn-rakuten: var(--color-red);
    --color-btn-amazon: var(--color-yellow);


    --bg-body: var(--color-soft-gray);       /* 画面全体の背景：薄いグレー */
    --bg-wrapper: var(--color-pure-white);   /* コンテンツの背景：白 */
    --txt-main: var(--color-dark-gray);      /* 文字色：濃いグレー */    
    --action-color: var(--color-cyan);		/* リンクなど */
    --action-hover: var(--color-dark-gray);	/* ホバー */
    --point-color: var(--color-navy);	/* 目立たせる場所 */

    /* ===== Spacing ===== */
    --base-space: 8px;                   /* 基本 */
    --sp-1: var(--base-space);           /* 8px */
    --sp-2: calc(var(--base-space) * 2); /* 16px */
    --sp-4: calc(var(--base-space) * 4); /* 32px */
    --sp-5: calc(var(--base-space) * 5); /* 40px */
  
}



/* ========================================================================== */
@layer layout {
}



/* ========================================================================== */
@layer components {
/* スマホでは縦並び */
.c-shop-card {
  display: flex;
  flex-direction: column; /* 縦並び */
  text-align: center;    /* 中央揃え */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  align-items: center;
}

/* 画像：スマホは下に余白 */
.c-shop-card-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 15px; /* 下に余白 */
}

/* コンテンツ */
.c-shop-card-content {
  flex: 1;
}

/* 商品タイトル */
.c-shop-card-title {
  font-weight: bold;
  font-size: 16px;
  margin: 0 0 15px 0;
  line-height: 1.4;
  color: #333;
}

/* ボタン */
.c-shop-card-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%; /* スマホは横幅いっぱい */
}

.c-shop-card-buttons a {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  color: #fff !important;
  transition: opacity 0.2s;
  flex: 1;
  min-width: 120px;
}

.c-shop-card-buttons a:hover {
  opacity: 0.8;
}

.c-btn-rakuten {
  background-color: var(--color-btn-rakuten);
}

.c-btn-amazon {
  background-color: var(--color-btn-amazon);
}


/* ==========================================================================
   【メディアクエリ】768px以上：PC・タブレット向けのスタイル
   ========================================================================== */
@media screen and (min-width: 768px) {
  /* PCでは横並びに戻す */
  .c-shop-card {
    flex-direction: row; /* 横並びに変更 */
    text-align: left;    /* 左揃えに戻す */
  }

  /* 画像：右に余白を作り、下の余白を消す */
  .c-shop-card-img {
    margin-right: 15px;
    margin-bottom: 0;
  }

  /* ボタン：横幅いっぱいの解除（必要に応じて自動幅に） */
  .c-shop-card-buttons {
    width: auto;
  }
}

}




/* ========================================================================== */
@layer utilities {
}