@charset "UTF-8";
/* ============================================================
   jpmono.com — Components
   Button / Card / EyebrowLabel / SectionHeader / ProductCard
   RegionCard / ArticleCard
   ------------------------------------------------------------
   tokens.css → base.css → components.css の順で enqueue。
   どのコンポーネントも tokens の CSS Variables だけを参照する。
   ============================================================ */


/* ============================================================
   1. Button
   ------------------------------------------------------------
   variant: primary / secondary / ghost / on-photo
   size:    md (default) / lg
   ============================================================ */
/* a / button どちらに付けても Cocoon 親の a 系 (!important 持ち) に勝てるよう、
   セレクタ具体度を上げつつ color/background は !important で固定する。 */
a.btn,
button.btn,
.btn {
  --btn-bg:    var(--accent-red);
  --btn-bg-h:  var(--accent-red-dk);
  --btn-fg:    var(--ink-inverse);
  --btn-border:transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: 14px 24px;
  min-height: 48px;          /* タップ領域 a11y */
  border-radius: var(--radius-button);
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: 1px solid var(--btn-border);

  font-family: var(--font-sans);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  /* 単語の途中で折り返さない（"EXPLOR E TOKYO" 防止）。
     語間での折返しは許可するので長い地域名でも溢れない。 */
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: center;

  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a.btn:hover,
button.btn:hover,
.btn:hover { background: var(--btn-bg-h) !important; color: var(--btn-fg) !important; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* secondary variant の hover で fg が反転する分も明示 */
a.btn--secondary:hover, button.btn--secondary:hover { color: var(--ink-inverse); }
a.btn--on-photo:hover, button.btn--on-photo:hover { color: var(--ink-primary); }

.btn .btn__icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(3px); }

/* --- Variant: secondary (透明+ダーク輪郭) --- */
.btn--secondary {
  --btn-bg: transparent;
  --btn-bg-h: var(--ink-primary);
  --btn-fg: var(--ink-primary);
  --btn-border: var(--ink-primary);
}
.btn--secondary:hover { color: var(--ink-inverse); }

/* --- Variant: on photo (透明+白輪郭) — Hero 用 --- */
.btn--on-photo {
  --btn-bg: transparent;
  --btn-bg-h: var(--ink-inverse);
  --btn-fg: var(--ink-inverse);
  --btn-border: rgba(250,247,242,.85);
}
.btn--on-photo:hover { color: var(--ink-primary); --btn-border: var(--ink-inverse); }

/* --- Variant: ghost (枠なし、リンク的ボタン) --- */
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-h: transparent;
  --btn-fg: var(--ink-primary);
  --btn-border: transparent;
  padding-inline: 0;
  min-height: auto;
}
.btn--ghost:hover { color: var(--accent-red); transform: none; }

.btn--lg { padding: 18px 32px; min-height: 56px; font-size: 15px; }
.btn--sm { padding: 10px 16px; min-height: 36px; font-size: 12px; }

.btn--block { display: flex; width: 100%; }


/* ============================================================
   2. Card (base)
   ------------------------------------------------------------
   .card                           : 共通カードコンテナ
   .card--bordered                 : 1px ボーダー
   .card--bg                       : 背景白
   .card a.card__link              : カード全体クリッカブル領域 (a11y aware)
   ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform  var(--dur-base) var(--ease-out);
}
.card--bordered {
  border: var(--border-thin);
}
.card--bg {
  background: var(--bg-elevated);
}
.card:hover {
  box-shadow: var(--shadow-2);
}
.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar-square);
  background: var(--bg-secondary);
}
.card__media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img {
  transform: scale(var(--hover-image-scale));
}

.card__body {
  padding: var(--space-4) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card--bordered .card__body { padding: var(--space-6); }

.card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: pretty;
}
.card__excerpt {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

/* カード全体をクリッカブルにする (a11y: visible link + ::after で領域拡張) */
.card__link {
  position: relative;
  z-index: 1;
  color: inherit;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.card__link:focus-visible { outline: none; }


/* ============================================================
   3. EyebrowLabel
   ------------------------------------------------------------
   `.eyebrow` 基本は base.css に定義済 (朱)。
   ここでバリアントを追加。
   ============================================================ */
.eyebrow--on-photo { color: var(--ink-inverse); }
.eyebrow--muted    { color: var(--ink-muted); }
.eyebrow--with-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow--with-line::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}


/* ============================================================
   4. SectionHeader
   ------------------------------------------------------------
   `.section-header` の主形は base.css。
   ここでセンタリング配置のバリアントなどを補強。
   ============================================================ */
.section-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-header--center .section-header__intro { text-align: center; }


/* ============================================================
   5. ProductCard
   ------------------------------------------------------------
   "Where to buy …" 系のアフィリエイト記事を商品カードとして扱う。
   media: aspect 3/4、下にタイトル＋地域＋価格 (任意) ＋CTA。
   ============================================================ */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.product-card:hover { box-shadow: var(--shadow-2); }

.product-card__media {
  position: relative;
  aspect-ratio: var(--ar-product);
  background: var(--bg-secondary);
  overflow: hidden;
}
.product-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(var(--hover-image-scale)); }

.product-card__body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}
.product-card__region {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--accent-red);
}
.product-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__maker {
  font-size: var(--fs-caption);
  color: var(--ink-secondary);
  font-style: italic;
}
.product-card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: var(--border-thin);
}
.product-card__price {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--ink-primary);
}
.product-card__cta {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.product-card__cta::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}
.product-card:hover .product-card__cta::after { transform: translateX(4px); }
.product-card__cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* a11y: カード全体クリック領域 */
.product-card__link {
  position: relative;
  z-index: 1;
  color: inherit;
}
.product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.product-card:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.product-card__link:focus-visible { outline: none; }


/* ============================================================
   6. RegionCard
   ------------------------------------------------------------
   背景白カード、aspect 4/5 の風景写真、地域名 (uppercase sans)、
   1 行説明、"Explore →"。
   ============================================================ */
.region-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.region-card:hover { box-shadow: var(--shadow-2); }
.region-card__media {
  position: relative;
  aspect-ratio: var(--ar-region);
  overflow: hidden;
  background: var(--bg-secondary);
}
.region-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.region-card:hover .region-card__media img { transform: scale(var(--hover-image-scale)); }

.region-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}
.region-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-primary);
  margin: 0;
}
.region-card__name-ja {
  margin-left: var(--space-2);
  font-family: var(--font-ja-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
}
.region-card__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.region-card__cta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--ink-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.region-card__cta::after { content: "→"; transition: transform var(--dur-base) var(--ease-out); }
.region-card:hover .region-card__cta { color: var(--accent-red); }
.region-card:hover .region-card__cta::after { transform: translateX(4px); }
.region-card__link {
  position: relative; z-index: 1; color: inherit;
}
.region-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.region-card:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }


/* ============================================================
   7. ArticleCard
   ------------------------------------------------------------
   editorial の長文導線。aspect 4/3 写真、朱の category label、
   serif の長めタイトル、抜粋 1〜2 行。
   ============================================================ */
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  gap: var(--space-4);
}
.article-card__media {
  position: relative;
  aspect-ratio: var(--ar-article);
  overflow: hidden;
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
}
.article-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.article-card:hover .article-card__media img { transform: scale(var(--hover-image-scale)); }

.article-card__label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-red);
}
.article-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__excerpt {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__meta {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}
.article-card__link {
  position: relative; z-index: 1; color: inherit;
}
.article-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.article-card:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }


/* ============================================================
   Grid (cards 共用)
   ------------------------------------------------------------
   .grid--3 / .grid--4 / .grid--5 をフロントの各セクションで使用。
   モバイルでは横スクロール (snap) にフォールバック (カテゴリーは仕様要件)。
   ============================================================ */
/* Default 1fr (mobile), variant classes upgrade at breakpoints below.
   定義順が大事: ベースを先に置き、media query で上書き。 */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .grid--4-lg { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .grid--5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1100px) { .grid--3-lg { grid-template-columns: repeat(3, 1fr); } }

/* SHOP BY CATEGORY 用: モバイルは横スクロール */
.scroll-row {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--container-px));
  padding-inline: var(--container-px);
  scrollbar-width: thin;
}
.scroll-row > * {
  flex: 0 0 75%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .scroll-row > * { flex-basis: 45%; } }
@media (min-width: 1100px) {
  .scroll-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .scroll-row > * { flex: none; }
}


/* ============================================================
   Carousel (TOP の各カードセクション用)
   横スクロール + scroll-snap + 前後矢印。モバイルはスワイプ。
   ============================================================ */
.jp-carousel { position: relative; }
.jp-carousel__track {
  display: flex;
  align-items: flex-start;   /* flex item の aspect-ratio 高さ潰れ対策 */
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
  /* 端をコンテナ幅に合わせつつ、はみ出しを隠さない */
  margin-inline: calc(-1 * var(--container-px));
  padding-inline: var(--container-px);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.jp-carousel__track::-webkit-scrollbar { height: 6px; }
.jp-carousel__track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.jp-carousel__track::-webkit-scrollbar-track { background: transparent; }

.jp-carousel__item {
  flex: 0 0 78%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 560px)  { .jp-carousel__item { flex-basis: 42%; } }
@media (min-width: 860px)  { .jp-carousel__item { flex-basis: 30%; } }
@media (min-width: 1100px) { .jp-carousel__item { flex-basis: 22%; } }   /* ~4.5枚見える */
@media (min-width: 1400px) { .jp-carousel__item { flex-basis: 18.5%; } } /* ~5枚 */

/* 前後矢印 */
.jp-carousel__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: none;                       /* モバイルはスワイプ、デスクトップで表示 */
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-2);
  color: var(--ink-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.jp-carousel__arrow svg { width: 20px; height: 20px; }
.jp-carousel__arrow:hover { background: var(--ink-primary); color: var(--ink-inverse); }
.jp-carousel__arrow--prev { left: -8px; }
.jp-carousel__arrow--next { right: -8px; }
.jp-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (min-width: 1100px) {
  .jp-carousel__arrow { display: inline-flex; }
  /* 矢印を出すぶん track の端余白を確保 */
  .jp-carousel__track { margin-inline: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .jp-carousel__track { scroll-behavior: auto; } }