@charset "UTF-8";

/* ================================================================
   FRENCH Bleu — Column CSS v2.1

   設計基準：FRENCH Bleu本体サイト実測値（2026-04-14）
     body: 14px / line-height 1.6 / color #080303 / letter-spacing normal
     border-radius: 4px（画像）/ 3-4px（UI要素）
     font-family: Helvetica Neue, Arial, 游ゴシック, YuGothic, Noto Sans JP...

   コラム固有の調整：
     長文の読みやすさのため font-size +1px, line-height +0.15 だけ加算
     それ以外は本体サイトのデザイン言語に準拠
   ================================================================ */

/* ── Base ── */
body { font-size: 100%; }

.column.article {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px) {
  .column.article { padding: 0 40px; }
}

/* ── Typography ── */
.column-article__body {
  font-weight: 400;
  font-size: 15px;            /* 本体14px + 1px（長文可読性のため）2026-04-14実測 */
  line-height: 1.75;          /* 本体1.6 + 0.15（長文可読性のため）2026-04-14実測 */
  letter-spacing: normal;     /* 本体準拠。v2.0の0.03emは北欧暮らし参照だったので廃止 */
  color: #222;                /* 本体#080303を背景#fff上で調整。コントラスト比 16.7:1 AAA準拠 */
  margin-bottom: 60px;
  text-align: left;           /* justify→left。日本語の両端揃えはモバイル狭幅で語間が不均一になる */
}

/* FutureShop構造：.column-article__body が二重ネストされる問題への対応 */
.column-article__body .column-article__body {
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
}

.column-article__body p {
  margin: 0 0 22px;
}

/* ── Title ── */
.column-article__title {
  font-size: 12px;            /* 本体h1/h2と同じ */
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.18em;     /* 本体のdrawerTitle letter-spacing: 2.16px ≒ 0.18em */
  line-height: 1;
  color: #aaa;                /* 本体h2 color */
  margin-bottom: 0;
}

.column-article__title_t {
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  line-height: 1.6;           /* 本体準拠 */
  letter-spacing: 0.04em;
  color: #080303;             /* 本体body color */
  margin-top: 48px;
  margin-bottom: 32px;
}

.column-article__sub-title {
  font-size: 12px;
  text-align: left;
  margin-top: 17px;
  margin-bottom: 70px;
  line-height: 2;
  font-weight: 600;
}

.column.article .column-detail__info-wrapper {
  font-size: 18px;
  margin-bottom: 55px;
  font-style: italic;
}

/* ── Section Heading (title-box) ── */
.title-box {
  border-top: 1px solid #222;
  border-bottom: none;
  padding: 14px 0 0;
  text-align: left;
  margin: 48px 0 24px;
}

.title-box h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #222;
}

.column-article__body h3 {
  font-size: 15px;
  line-height: 1.6;
  margin: 28px 0 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #222;
}

/* ── Image ── */
.column-article__image {
  text-align: center;
  overflow: hidden;
  border-radius: 0;            /* 記事写真はシャープに。商品画像(4px)とは性質が異なる */
  margin: 32px 0;
}

.column-article__image img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ── Links ── */
.column.article .column-article__body a {
  color: #222;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #ccc;
  transition: text-decoration-color 0.2s;
}
.column.article .column-article__body a:hover {
  text-decoration-color: #222;
}
.column.article .column-article__body .product-card__link,
.column.article .column-article__body .column-back__link {
  color: inherit;
  text-decoration: none;
}

/* ── Back to Top ── */
.column-back {
  text-align: center;
  margin-top: 56px;
  margin-bottom: 20px;
}

.column-back__link {
  display: inline-block;
  text-decoration: none;
}

.column-back__link-label {
  display: inline-block;
  background-color: transparent;
  color: #333;
  border: 1px solid #333;
  padding: 12px 48px;
  border-radius: 3px;         /* 本体サイトのUI要素 3px */
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.column-back__link-label:hover {
  background-color: #333;
  color: #fff;
}

/* ================================================================
   Product Card
   ================================================================ */

/* ── Full card（記事末尾・メインCTA） ── */
.product-card {
  display: block;              /* 縦積みレイアウト */
  border: 1px solid #e0e0e0;  /* 北欧実測値ではなく本体に近い値 */
  border-radius: 4px;         /* 本体準拠 */
  overflow: hidden;
  margin: 48px 0;             /* SMとの差を明確にする */
  background: #fff;
}

.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__image {
  width: 100%;
  overflow: hidden;
}

.product-card__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-card__content {
  padding: 16px 16px 14px;
}

.column-article__body .product-card__title,
.column-article__body h3.product-card__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
  color: #222;
}

.product-card__price {
  font-size: 13px;
  color: #222;
  margin-top: 2px;
}

.product-card__price::after {
  content: "（税込）";
  font-size: 11px;
  font-weight: normal;
  margin-left: 0.2em;
  color: #999;
}

/* CTA button inside full card */
.product-card__cta {
  display: block;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  padding: 11px 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #333;
  transition: background-color 0.2s, color 0.2s;
}

.product-card:hover .product-card__cta {
  background-color: #f5f5f3;
}

/* ── Small variant（記事上部・認知用） ── */
.product-card.product-card--sm {
  display: flex;
  flex-direction: row;
  margin: 16px 0 24px;
  border-radius: 4px;
  border: 1px solid #ebe9e6;  /* フルカードより薄く */
}

.product-card--sm .product-card__link {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.product-card--sm .product-card__image {
  width: 22%;
  flex-shrink: 0;
}

.product-card--sm .product-card__content {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 78%;
}

.column-article__body .product-card--sm .product-card__title {
  font-size: 11px;
  color: #444;
}
.product-card--sm .product-card__price {
  font-size: 11px;
  color: #444;
}
.product-card--sm .product-card__price::after {
  font-size: 10px;
  color: #bbb;                /* フル#999→SM#bbbで視覚階層を整える */
}

/* SM card does not show CTA button */
.product-card--sm .product-card__cta {
  display: none;
}

@media (min-width: 640px) {
  /* Desktop: full card is horizontal with larger image */
  .product-card:not(.product-card--sm) {
    display: flex;
    flex-direction: row;
  }
  .product-card:not(.product-card--sm) .product-card__link {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .product-card:not(.product-card--sm) .product-card__image {
    width: 30%;
    flex-shrink: 0;
  }
  .product-card:not(.product-card--sm) .product-card__content {
    width: 70%;
    padding: 20px 24px 16px;
  }
  /* CTA sits at bottom of content area on desktop */
  .product-card:not(.product-card--sm) .product-card__cta {
    border-top: none;
    text-align: left;
    padding: 8px 24px 16px;
    margin-top: auto;
  }

  .product-card--sm .product-card__image { width: 14%; }
  .product-card--sm .product-card__content { width: 86%; }
}

/* ── Note (under SM card) ── */
p.product-card__note {
  font-size: 11px;
  color: #999;
  margin: -14px 0 24px;
  text-align: right;
  letter-spacing: 0.02em;
}

/* ================================================================
   Comment Block（スタッフコメントカード）
   ================================================================ */
.comment-block {
  background: #fafaf8;
  border: 1px solid #e8e6e3;
  border-radius: 4px;         /* 本体準拠。8pxは北欧暮らし参照だった */
  padding: 20px 22px 16px;
  margin: 28px 0 32px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e6e3;
}

.comment-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-name,
.column-article__body .comment-name,
p.comment-name {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #888;
  line-height: 1.4;
}

.comment-name strong {
  font-weight: 600;
}

.comment-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

.comment-text p { margin: 0; }

@media (max-width: 640px) {
  .comment-block { padding: 16px 14px 12px; }
  .comment-icon { width: 36px; height: 36px; }
}

/* ── Misc legacy ── */
.latest-issue__title {
  font-size: 21px;
  font-style: italic;
  text-align: center;
  margin-bottom: 60px;
}

.column-article {
  margin-top: 110px;
}