/** Shopify CDN: Minification failed

Line 128:0 "@charset" must be the first rule in the file
Line 132:0 All "@import" rules must come first

**/
@charset "UTF-8";

/* 定期便LP / why
   ※ 変数と土台は subscription-lp-common.css に定義。先に読み込むこと。 */

/* ==========================================================================
   4. Why Frozen Soup?
   ========================================================================== */
.subscription-lp-why .subscription-lp-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 中央の大きな画像に、白いテキストカードを3枚重ねる（Figma: 1206×533 基準） */
.subscription-lp-why__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1206 / 533;
}

.subscription-lp-why__media {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 78.44%; /* 946 / 1206 */
  height: 100%;
}

.subscription-lp-why__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subscription-lp-why__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 33.17%; /* 400 / 1206 */
  padding: 16px;
  background: var(--sublp-base);
}

.subscription-lp-why__card--1 {
  left: 0;
  top: 52%; /* 80 / 533 */
}

.subscription-lp-why__card--2 {
  left: 66.83%; /* 806 / 1206 */
  top: 0;
}

.subscription-lp-why__card--3 {
  left: 56.05%; /* 676 / 1206 */
  top: 74.5%; /* 397 / 533 */
}

.subscription-lp-why__title {
  margin: 0;
  font-family: var(--sublp-serif) !important;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.subscription-lp-why__desc {
  font-family: var(--sublp-serif) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

/* テーマCSSが中の<p>などに直接当たるため、字体だけ子孫にも効かせる */
.subscription-lp-why__desc * {
  font-family: var(--sublp-serif) !important;
}

@media screen and (max-width: 1023px) {
  .subscription-lp-why__title {
    font-size: 19px;
  }
  /* 重ね配置をやめて、画像→カードの縦積みにする */
  .subscription-lp-why__stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    aspect-ratio: auto;
  }

  .subscription-lp-why__media {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 946 / 533;
  }

  /* Figma: カード幅332／コンテナ372、カード間は64px */
  .subscription-lp-why__card {
    position: static;
    width: 89.25%;
    padding: 0;
    margin-top: -30px;
    background:transparent;
  }

  .subscription-lp-why__card + .subscription-lp-why__card {
    margin-top: 24px;
  }

  /* 2枚目だけ右に寄せる（Figma: items-end） */
  .subscription-lp-why__card--2 {
    align-self: flex-end;
  }
}
@charset "UTF-8";
/* 本文の Noto Sans JP、連番の Rock Salt に加え、
   游明朝が無い環境（一部のAndroid/Linux）向けに明朝の代替として Noto Serif JP も読み込む。
   ウェイトはFigmaが使う Medium(500) / Demibold(600) を含める。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Rock+Salt&display=swap");

/* ==========================================================================
   おうちでスープストック 定期便LP
   Figma: 0itmMOHEpkv9UPVSGJ2B4S (Desktop 1366 / Tablet 768 / SP 420)
   ========================================================================== */

.subscription-lp {
  --sublp-text: #333333;
  --sublp-text-sub: #999999;
  --sublp-accent: #ce7331;
  --sublp-accent-dark: #b5622a;
  --sublp-inverse: #ffffff;
  --sublp-base: #ffffff;
  --sublp-surface: #f8f8f8;
  --sublp-border: #cccccc;
  --sublp-frame: 1366px;
  --sublp-gutter: 80px;
  --sublp-gutter-wide: 40px;
  --sublp-section-y: 80px;

  /* 見出しは游明朝（Figma指定）。テーマ既定のリュウミンは使わない */
  --sublp-serif: "Yu Mincho", YuMincho, "游明朝", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sublp-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  color: var(--sublp-text);
  background: var(--sublp-base);
  font-family: var(--sublp-serif) !important;
  /* Figmaは letter-spacing 0%。日本語の字詰め（palt）は使わずベタ組みにする */
  font-feature-settings: normal;
  font-kerning: none;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

.subscription-lp *,
.subscription-lp *::before,
.subscription-lp *::after {
  box-sizing: border-box;
}

.subscription-lp p {
  margin: 0;
}

.subscription-lp a {
  color: inherit;
  text-decoration: none;
}

/* ---------- レイアウト土台 ---------- */
.subscription-lp-section {
  padding: var(--sublp-section-y) 0;
  background: var(--sublp-base);
}

.subscription-lp-section--surface {
  background: var(--sublp-surface);
}

.subscription-lp-inner {
  width: 100%;
  max-width: var(--sublp-frame);
  margin: 0 auto;
  padding: 0 var(--sublp-gutter);
}

/* Plan / FAQ / Features帯 は左右40px */
.subscription-lp-inner--wide {
  padding: 0 var(--sublp-gutter-wide);
}

/* ---------- 見出し ---------- */
.subscription-lp-label {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--sublp-accent);
  font-family: var(--sublp-serif) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.subscription-lp-label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.subscription-lp-heading {
  margin: 0;
  font-family: var(--sublp-serif) !important;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sublp-text);
}

.subscription-lp-headingGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscription-lp-headingGroup--center {
  align-items: center;
  text-align: center;
}

.subscription-lp-lead {
  font-family: var(--sublp-serif) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

/* テーマCSSが中の<p>などに直接当たるため、字体だけ子孫にも効かせる */
.subscription-lp-lead * {
  font-family: var(--sublp-serif) !important;
}

.subscription-lp-note {
  font-family: var(--sublp-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sublp-text-sub);
}

/* テーマCSSが中の<p>などに直接当たるため、字体だけ子孫にも効かせる */
.subscription-lp-note * {
  font-family: var(--sublp-sans) !important;
}

/* ---------- ボタン ---------- */
.subscription-lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding は用途ごとに指定する（共通で持つと狭い幅でラベルが折り返すため） */
  white-space: nowrap;
  background: var(--sublp-accent);
  color: var(--sublp-inverse);
  font-family: var(--sublp-sans) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: background-color 0.2s ease;
}

.subscription-lp-button:hover {
  background: var(--sublp-accent-dark);
  color: var(--sublp-inverse);
}

.subscription-lp-button--ghost {
  padding: 16px 64px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid var(--sublp-inverse);
  color: var(--sublp-inverse);
  font-family: var(--sublp-serif) !important;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.subscription-lp-button--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--sublp-inverse);
}

@media screen and (max-width: 1139px) {
  .subscription-lp {
    --sublp-gutter: 40px;
    --sublp-gutter-wide: 24px;
  }
}

@media screen and (max-width: 767px) {
  .subscription-lp {
    --sublp-gutter: 24px;
    --sublp-gutter-wide: 24px;
  }

  .subscription-lp-heading {
    font-size: 24px;
  }

  /* 固定帯にページ末尾が隠れないよう余白を確保 */
  .subscription-lp--pageEnd {
    padding-bottom: 84px;
  }
}

/* オレンジ背景のボタンの文言は常に白。
   テーマ側のリンク色や訪問済みリンクの色に負けないよう、状態も含めて指定する。 */
.subscription-lp a.subscription-lp-button,
.subscription-lp a.subscription-lp-button:link,
.subscription-lp a.subscription-lp-button:visited,
.subscription-lp a.subscription-lp-button:hover,
.subscription-lp a.subscription-lp-button:focus,
.subscription-lp a.subscription-lp-button:active,
.subscription-lp a.subscription-lp-mv__circle--main,
.subscription-lp a.subscription-lp-mv__circle--main:link,
.subscription-lp a.subscription-lp-mv__circle--main:visited,
.subscription-lp a.subscription-lp-mv__circle--main:hover,
.subscription-lp a.subscription-lp-mv__circle--main:focus,
.subscription-lp a.subscription-lp-mv__circle--main:active,
.subscription-lp a.subscription-lp-mv__barBtn--main,
.subscription-lp a.subscription-lp-mv__barBtn--main:link,
.subscription-lp a.subscription-lp-mv__barBtn--main:visited,
.subscription-lp a.subscription-lp-mv__barBtn--main:hover,
.subscription-lp a.subscription-lp-mv__barBtn--main:focus,
.subscription-lp a.subscription-lp-mv__barBtn--main:active {
  color: var(--sublp-inverse);
}