@charset "UTF-8";

/* 添付 lp-template.css と同じフォント。単独でもこのCSSだけで読み込めます。 */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700&family=Noto+Sans+JP:wght@100;200;300;400;500;700&family=Noto+Serif+JP:wght@100;300;400;500;700&display=swap');

/* ============================================================
   汎用：LPトップ／商品紹介／購入エリア

   ・固有の商品名を含まない lp-top 接頭辞で統一。
   ・PC／スマホ共通の縦1列。最大750px、左右余白はPC60px／スマホ20px。
   ・添付 lp-template.css の --lp-* があれば、その設定を参照。
     なければ var() の第2引数の初期値を使用するため、単独でも動作。
   ・共通の :root、.lp-shell、.lp-title 等は上書きしません。
   ・商品画像、段落、購入行に固定の高さは設定しません。
   ============================================================ */

/* 確認用HTMLのbodyだけに適用。既存LPではこのクラスは不要です。 */
body.lp-top-demo {
  margin: 0;
  background: #fff;
}

/* ===== 設定：共通／スマホ（768px未満） ===== */
.lp-top-cta-container{
  background: rgba(251, 250, 249, 0.90);
  max-width: 100%;
}
.lp-top-cta-container_wbe{
  background:#F6F4F0;
  max-width: 100%;
}
.lp-top {
  --lp-top-max-width: var(--lp-max-width, 750px);
  --lp-top-padding-x: var(--lp-padding-x, 20px);
  --lp-top-padding-top: var(--lp-padding-y, 28px);
  --lp-top-padding-bottom: 64px;

  --lp-top-font-sans: var(--lp-font-sans, "Jost", "Noto Sans JP", sans-serif);
  --lp-top-font-serif: var(--lp-font-serif, "Jost", "Noto Serif JP", serif);
  --lp-top-font-name: clamp(21px, 5.65vw, 24.2px);
  --lp-top-font-eyebrow: var(--lp-font-eyebrow, clamp(14.08430195px, 3.75581395vw, 17.85px));
  --lp-top-font-catch: var(--lp-font-title, clamp(21px, 5.65vw, 24.2px));
  --lp-top-font-body: var(--lp-font-body, clamp(13.01686005px, 4.15116279vw, 13.6px));
  --lp-top-font-button: var(--lp-font-extra, clamp(11px, 2.76744186vw, 143px));

  --lp-top-line-name: var(--lp-line-title, 1.6);
  --lp-top-line-eyebrow: var(--lp-line-eyebrow, 1.5);
  --lp-top-line-catch: 1.4;
  --lp-top-line-body: var(--lp-line-body, 1.8);

  --lp-top-color: var(--lp-color-text, #262521);
  --lp-top-rule-color: var(--lp-divider-color-gray, #969696);
  --lp-top-button-background: #000;
  --lp-top-button-color: #fff;

  --lp-top-name-gap: 4px;
  --lp-top-image-gap: 14px;
  --lp-top-catch-gap: 16px;
  --lp-top-description-gap: 18px;
  --lp-top-paragraph-gap: var(--lp-space-body-bottom, 32px);
  --lp-top-purchase-gap: 50px;

  /* 購入欄：PCでは本文より狭く左寄せ、スマホでは本文幅以内に収まります。 */
  --lp-top-purchase-max-width: 500px;
  --lp-top-offer-column-gap: 12px;
  --lp-top-offer-row-gap: 18px;
  --lp-top-button-width: clamp(144px, 37vw, 160px);
  --lp-top-button-min-height: 44px;
  --lp-top-cart-size: 14px;

  display: flow-root;
  width: 100%;
  max-width: var(--lp-top-max-width);
  min-width: 0;
  margin: 0 auto;
  padding: var(--lp-top-padding-top) var(60px) var(--lp-top-padding-bottom);
  background: var(--lp-top-background);
  color: var(--lp-top-color);
  font-family: var(--lp-top-font-sans);
  font-size: var(--lp-top-font-body);
  font-weight: 300;
  line-height: var(--lp-top-line-body);
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ボックス計算はこの部品の中だけに適用します。 */
.lp-top,
.lp-top *,
.lp-top::before,
.lp-top::after,
.lp-top *::before,
.lp-top *::after {
  box-sizing: border-box;
}

/* ===== スマホ（768px未満）：左右の余白はここで調整 ===== */
@media (width < 768px) {
  .lp-top {
    padding: 50px 20px;
  }
}

/* ===== PC（768px以上）：添付CSSと同じ切替幅・文字サイズ ===== */
@media (min-width: 768px) {
  .lp-top {
    /* PCのみ左右の余白を60pxに指定 */
    padding: 60px;
    --lp-top-font-name:  27px;
    --lp-top-font-eyebrow: var(--lp-font-eyebrow, 17.85px);
    --lp-top-font-catch: var(--lp-font-title, 26px);
    --lp-top-font-body: var(--lp-font-body, 17.85px);
    --lp-top-font-button: var(--lp-font-extra, 14px);
    --lp-top-offer-column-gap: 20px;
    --lp-top-button-width: 180px;
    --lp-top-button-min-height: 32px;
    --lp-top-cart-size: 16px;
  }
}

/* ===== 01：商品名 ===== */
.lp-top__header {
  margin: 0 0 20px 0;
  padding: 0;
}

.lp-top__eyebrow {
  margin: 0 0 var(--lp-top-name-gap);
  font-family: var(--lp-top-font-serif);
  font-size: var(--lp-top-font-eyebrow);
  font-weight: 400;
  line-height: var(--lp-top-line-eyebrow);
}

.lp-top__name {
  margin: 0;
  font-family: var(--lp-top-font-serif);
  font-size: var(--lp-top-font-name);
  font-weight: 400;
  line-height: var(--lp-top-line-name);
}

/* ===== 02：商品画像（自然な縦横比を維持） ===== */
.lp-top__media {
  margin: var(--lp-top-image-gap) 0 0;
  padding: 0;
}

.lp-top__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

/* ===== 03：キャッチコピー・説明文 ===== */
.lp-top__content {
  margin-top: var(--lp-top-catch-gap);
}

/* 見出しタグがh2でも、画像のような大きいゴシックのコピーにします。 */
.lp-top__catch {
  margin: 40px 0 20px 0;
  font-family: var(--lp-top-font-sans);
  font-size: var(--lp-top-font-catch);
  font-weight: 400;
  line-height: var(--lp-top-line-catch);
}

.lp-top__description {
  display: grid;
  gap: var(--lp-top-paragraph-gap);
}

.lp-top__text {
  margin: 0;
  font-family: var(--lp-top-font-sans);
  font-size: var(--lp-top-font-body);
  font-weight: 400;
  line-height: var(--lp-top-line-body);
}

/* ===== 04：購入欄（価格・条件｜購入ボタン） ===== */
.lp-top__purchase {
  width: 100%;
  margin: var(--lp-top-purchase-gap) 0 0;
}

.lp-top__offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--lp-top-button-width));
  gap: var(--lp-top-offer-column-gap);
  align-items: center;
  margin: 0;
  padding: 0;
}

.lp-top__offer + .lp-top__offer {
  margin-top: var(--lp-top-offer-row-gap);
  padding-top: var(--lp-top-offer-row-gap);
  border-top: 1px solid var(--lp-top-rule-color);
}

.lp-top__offer-info {
  min-width: 0;
}

/* お届け条件など、短い語句の途中で改行したくない部分に使用します。 */
.lp-top__keep {
  display: inline-block;
  max-width: 100%;
}

.lp-top__offer-name,
.lp-top__offer-detail,
.lp-top__price {
  margin: 0;
  font-family: var(--lp-top-font-sans);
  font-size: var(--lp-top-font-body);
  font-weight: 400;
  line-height: var(--lp-top-line-body);
}

/* 狭い画面では容量を次の行へ送れます。価格の数字は途中で切りません。 */
.lp-top__price-amount,
.lp-top__volume {
  display: inline-block;
  white-space: nowrap;
}

.lp-top__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: var(--lp-top-button-min-height);
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: var(--lp-top-button-background);
  color: var(--lp-top-button-color);
  font-family: var(--lp-top-font-sans);
  font-size: var(--lp-top-font-button);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.lp-top__button:visited {
  color: var(--lp-top-button-color);
}

.lp-top__button:focus-visible {
  outline: 2px solid var(--lp-top-color);
  outline-offset: 4px;
}

@media (hover: hover) {
  .lp-top__button:hover {
    background: #333;
    color: var(--lp-top-button-color);
  }
}

.lp-top__button-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lp-top__cart {
  display: block;
  flex: 0 0 var(--lp-top-cart-size);
  width: var(--lp-top-cart-size);
  height: var(--lp-top-cart-size);
}