/* =============================================================================
   バラの本数ギフト LP（/rose-gift/）

   このページだけ暗い地にする。理由は写真のほうにある：バラの撮影がすべて
   黒背景・黒とシルバーの包装で、明るい紙面に置くと写真の四隅の黒が
   «切り抜き忘れた四角» に見える。暗い地なら写真の背景がページに溶けて、
   花だけが浮く。商品一覧カードを --card-ground（チャコール）にしているのと
   同じ理屈を、ページ全体に広げたもの。

   色・書体・間隔は style-tokens.css の値を使う（--accent / --gold / 書体）。
   LP 専用の値だけ .an-lp-body にスコープして足す。他ページには影響しない。
   ============================================================================= */

.an-lp-body {
  --lp-bg:       #14120F;  /* = --dark */
  --lp-bg-2:     #1B1815;  /* = --card-charcoal-1。面の切り替えに使う */
  --lp-ink:      #EFEAE0;  /* 本文（地 #14120F に対し 13:1 以上） */
  --lp-ink-soft: #BDB7AB;
  --lp-ink-mute: #8E8779;
  --lp-line:     #2E2A25;
  --lp-line-2:   #443E36;

  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 親テーマのラッパーが白地を敷くことがあるので打ち消す */
.an-lp-body #wrapper,
.an-lp-body #container,
.an-lp-body .l-main {
  background: transparent;
}

.an-lp {
  /* 画面外からせり上がる動きで横スクロールが出ないように切る。
     hidden はスクロール領域を作ってしまい、本数パネルの position: sticky が
     効かなくなるので clip を使う（対応していない環境は hidden に落ちる）。 */
  overflow-x: hidden;
  overflow-x: clip;
}

.an-lp a {
  color: inherit;
  text-decoration: none;
}
.an-lp img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------------------------------------
   最小ヘッダー / 最小フッター
   -------------------------------------------------------------------------- */
.an-lp-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 18px var(--pad-x);
  background: transparent;
}
.an-lp-header__logo img {
  width: 148px;
  height: auto;
}
.an-lp-header__logo img.is-invert {
  /* 用意されているのが黒いロゴだけなので、暗い地では反転して使う */
  filter: invert(1) brightness(1.08);
}
.an-lp-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: var(--ls-en);
  color: var(--lp-ink-soft);
  transition: color var(--duration) var(--ease);
}
.an-lp-header__cart:hover {
  color: var(--lp-ink);
}
.an-lp-header__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #FBFAF7;
  font-size: 11px;
  letter-spacing: 0;
}

.an-lp-footer {
  border-top: 1px solid var(--lp-line);
  padding: var(--sp-5) var(--pad-x) var(--sp-4);
  text-align: center;
}
.an-lp-footer__name {
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: var(--ls-wide);
  color: var(--lp-ink);
}
.an-lp-footer__tagline {
  margin-top: 10px;
  font-size: 12px;
  color: var(--lp-ink-mute);
}
.an-lp-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-3);
}
.an-lp-footer__nav a {
  font-size: 12px;
  color: var(--lp-ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.an-lp-footer__nav a:hover {
  color: var(--lp-ink);
  border-bottom-color: var(--gold);
}
.an-lp-footer__copyright {
  font-size: 11px;
  color: var(--lp-ink-mute);
  letter-spacing: 0.1em;
}

/* -----------------------------------------------------------------------------
   共通部品
   -------------------------------------------------------------------------- */
.an-lp-section {
  padding: var(--sp-6) var(--pad-x);
}
.an-lp-eyebrow {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 17px;
  letter-spacing: var(--ls-wide);
  color: var(--gold);
}
.an-lp-h2 {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.5;
  letter-spacing: var(--ls-ja);
  color: var(--lp-ink);
}
.an-lp-sec-head {
  max-width: 760px;
  margin: 0 auto var(--sp-5);
  text-align: center;
}
.an-lp-sec-lead {
  margin: var(--sp-3) 0 0;
  color: var(--lp-ink-soft);
}
.an-lp a.an-lp-link {
  color: var(--lp-ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color var(--duration) var(--ease);
}
.an-lp a.an-lp-link:hover {
  color: var(--gold);
}
.an-lp-arrow {
  display: inline-block;
  transition: transform var(--duration) var(--ease);
}

/* 下の見た目の指定は、上の .an-lp a / .an-lp img のリセットより詳細度を
   上げてある（クラス2つ）。1つだとリセットの color/height に負ける。 */
.an-lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 38px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: var(--ls-en);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.an-lp-btn.an-lp-btn--primary {
  background: #FBFAF7;
  color: #201D1A;
  border-color: #FBFAF7;
}
.an-lp-btn.an-lp-btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FBFAF7;
}
.an-lp-btn.an-lp-btn--ghost {
  background: transparent;
  color: var(--lp-ink);
  border-color: rgba(239, 234, 224, 0.45);
}
.an-lp-btn.an-lp-btn--ghost:hover {
  background: rgba(239, 234, 224, 0.1);
  border-color: var(--lp-ink);
}
.an-lp-btn.an-lp-btn--line {
  background: transparent;
  color: var(--lp-ink);
  border-color: var(--lp-line-2);
}
.an-lp-btn.an-lp-btn--line:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.an-lp-btn:hover .an-lp-arrow {
  transform: translateX(5px);
}

/* 写真に重ねる「施工例」 */
.an-lp-tag {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  background: rgba(20, 18, 15, 0.72);
  border: 1px solid rgba(239, 234, 224, 0.22);
  color: var(--lp-ink-soft);
  font-size: 10px;
  letter-spacing: 0.14em;
  pointer-events: none;
}

/* 価格表記（税込を主・税別を従） */
.an-price__main {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--lp-ink);
}
.an-price__unit {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lp-ink-mute);
}
.an-price__sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--lp-ink-mute);
}

.an-lp .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   ヒーロー
   写真は人がバラを抱えたカット。被写体が右寄りで左が暗く空いているので、
   文字は左に置き、右へ向かって薄くなる帯だけを重ねる（全面に黒を敷かない）。
   -------------------------------------------------------------------------- */
.an-lp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86svh;
  margin-top: -74px;      /* ヘッダーを写真の上に重ねる */
  padding: 120px var(--pad-x) var(--sp-6);
  overflow: hidden;
  isolation: isolate;
}
.an-lp-hero .an-lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: lpKenburns 18s var(--ease) forwards;
}
.an-lp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 18, 15, 0.92) 0%, rgba(20, 18, 15, 0.72) 38%, rgba(20, 18, 15, 0.1) 72%),
    linear-gradient(0deg, rgba(20, 18, 15, 0.85) 0%, rgba(20, 18, 15, 0) 42%);
}
.an-lp-hero__inner {
  max-width: 620px;
}
.an-lp-hero__title {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.32;
  letter-spacing: var(--ls-ja);
  color: #FBFAF7;
}
.an-lp-hero__line {
  display: block;
  overflow: hidden;
}
.an-lp-hero__line > span {
  display: block;
  transform: translateY(112%);
  animation: lpLineUp 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
.an-lp-hero__line:nth-child(2) > span {
  animation-delay: 0.3s;
}
.an-lp-hero__lead,
.an-lp-hero__price,
.an-lp-hero__cta {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.an-lp-hero__lead {
  margin: var(--sp-3) 0 0;
  color: #DED8CC;
  animation-delay: 0.62s;
}
.an-lp-hero__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(239, 234, 224, 0.2);
  animation-delay: 0.74s;
}
.an-lp-hero__price-num {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: #FBFAF7;
}
.an-lp-hero__price-sub {
  font-size: 12px;
  color: var(--lp-ink-soft);
}
.an-lp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  animation-delay: 0.86s;
}
.an-lp-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 1px;
  height: 56px;
  transform: translateX(-50%);
  overflow: hidden;
}
.an-lp-hero__scroll span {
  display: block;
  width: 1px;
  height: 56px;
  background: rgba(239, 234, 224, 0.5);
  animation: lpScroll 2.2s var(--ease) infinite;
}

@keyframes lpLineUp {
  to { transform: translateY(0); }
}
@keyframes lpKenburns {
  from { scale: 1; }
  to   { scale: 1.07; }
}
@keyframes lpScroll {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* -----------------------------------------------------------------------------
   定番の本数（カード）
   -------------------------------------------------------------------------- */
.an-lp-featured {
  background: linear-gradient(180deg, var(--lp-bg) 0%, var(--lp-bg-2) 100%);
}
.an-lp-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  max-width: 1480px;
  margin: 0 auto;
}
.an-lp-card {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--sp-3);
  border: 1px solid var(--lp-line);
  background: var(--lp-bg);
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.an-lp-card:hover {
  border-color: var(--lp-line-2);
  background: #191613;
}
.an-lp-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--card-ground);
}
.an-lp-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease);
}
.an-lp-card:hover .an-lp-card__photo img {
  scale: 1.05;
}
.an-lp-card__ph {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--lp-ink-mute);
}
.an-lp-card__num {
  margin: var(--sp-3) var(--sp-2) 0;
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--lp-ink);
}
.an-lp-card__num--free {
  font-size: 22px;
  line-height: 1.5;
}
.an-lp-card__hon {
  margin-left: 2px;
  font-size: 15px;
  color: var(--lp-ink-soft);
}
.an-lp-card__meaning {
  flex: 1;
  margin: 10px var(--sp-2) 0;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--lp-ink-soft);
}
.an-lp-card__price {
  margin: var(--sp-2) var(--sp-2) 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--lp-line);
}
.an-lp-card__per {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--lp-ink-mute);
}

/* -----------------------------------------------------------------------------
   本数から選ぶ（左：選択パネル・右：34本数の一覧）
   パネルは PC では貼り付いて動かない。一覧を目で追いながら、選んだ本数の
   花言葉と金額が同じ視界に留まるようにするため。
   -------------------------------------------------------------------------- */
.an-lp-select {
  background: var(--lp-bg-2);
}
.an-lp-select__layout {
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  gap: var(--sp-5);
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.an-lp-panel {
  position: sticky;
  top: 32px;
  border: 1px solid var(--lp-line-2);
  background: var(--lp-bg);
}
.an-lp-panel__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--card-ground);
}
.an-lp-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.an-lp-panel__figure figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  background: rgba(20, 18, 15, 0.72);
  border: 1px solid rgba(239, 234, 224, 0.22);
  color: var(--lp-ink-soft);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.an-lp-panel__body {
  padding: var(--sp-3);
}
.an-lp-panel__count {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--lp-ink);
}
.an-lp-panel__hon {
  margin-left: 4px;
  font-size: 20px;
  color: var(--lp-ink-soft);
}
.an-lp-panel__meaning {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.85;
  color: var(--gold);
}
.an-lp-panel__meaning.is-none {
  display: none;
}
.an-lp-panel__price {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lp-line);
}
/* 価格が出せない本数（101本・108本）のとき、空の枠線だけが残らないように */
.an-lp-panel__price:empty {
  display: none;
}
.an-lp-panel__cta {
  width: 100%;
  margin-top: var(--sp-3);
}
.an-lp-panel__note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--lp-ink-mute);
}
.an-lp-panel__note:empty {
  display: none;
}

/* 本数を直接いじる操作（JS が動くときだけ現れる） */
/* display を指定すると hidden 属性（UAの display:none）に勝ってしまうので、
   先に hidden を立て直しておく。これが無いと JS 無効の環境で
   «押しても何も起きない操作» が出たままになる。 */
.an-lp-stepper[hidden] {
  display: none;
}
.an-lp-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-3);
}
.an-lp-stepper__btn {
  height: 44px;
  background: transparent;
  border: 1px solid var(--lp-line-2);
  color: var(--lp-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.an-lp-stepper__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.an-lp-stepper__field {
  display: block;
}
.an-lp-stepper__field input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--lp-line-2);
  color: var(--lp-ink);
  font-family: var(--font-serif);
  font-size: 20px;
  text-align: center;
  -moz-appearance: textfield;
}
.an-lp-stepper__field input::-webkit-outer-spin-button,
.an-lp-stepper__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.an-lp-stepper input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* 34本数の一覧 */
.an-lp-numbers__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 入れ物には色を敷かない。34本数は3列に割り切れず、最後の行に余った
     セルが «空の箱» として見えてしまうため。罫線は各セルが自分で描く。 */
}
.an-lp-num {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: baseline;
  gap: 10px;
  height: 100%;
  padding: 16px 18px;
  /* 地色を敷かない。敷くとセルがセクション地より暗くなり、34本数を3列に
     並べたとき最後の行の余りが «色の違う四角» として残る。 */
  background: transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.an-lp-num:hover {
  background: #221E1A;
}
/* 罫線は box-shadow で描く（場所を取らないので、1px の隙間でちょうど重なる） */
.an-lp-num,
.an-lp-num:hover,
.an-lp-num.is-selected {
  box-shadow: 0 0 0 1px var(--lp-line);
}
.an-lp-num.is-selected {
  background: var(--accent);
}
.an-lp-num.is-selected .an-lp-num__m,
.an-lp-num.is-selected .an-lp-num__p {
  color: rgba(251, 250, 247, 0.85);
}
.an-lp-num__n {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--lp-ink);
}
.an-lp-num__n span {
  margin-left: 2px;
  font-size: 12px;
  color: var(--lp-ink-soft);
}
.an-lp-num.is-selected .an-lp-num__n,
.an-lp-num.is-selected .an-lp-num__n span {
  color: #FBFAF7;
}
.an-lp-num__m {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--lp-ink-soft);
}
.an-lp-num__p {
  font-size: 12px;
  white-space: nowrap;
  color: var(--lp-ink-mute);
}
/* 定番は左に金の目印を立てる（「定番」という札を増やさずに差をつける） */
.an-lp-num.is-featured,
.an-lp-num.is-featured:hover {
  box-shadow: 0 0 0 1px var(--lp-line), inset 3px 0 0 var(--gold);
}
.an-lp-numbers__free {
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  color: var(--lp-ink-soft);
}
.an-lp-numbers__free .an-lp-link {
  margin-left: 8px;
}

/* -----------------------------------------------------------------------------
   仕立て
   -------------------------------------------------------------------------- */
.an-lp-craft__inner {
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  gap: var(--sp-5);
  max-width: 1320px;
  margin: 0 auto;
  align-items: center;
}
.an-lp-craft__figure {
  position: relative;
  margin: 0;
}
.an-lp-craft__figure img {
  width: 100%;
}
.an-lp-craft__figure figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(20, 18, 15, 0.72);
  border: 1px solid rgba(239, 234, 224, 0.22);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--lp-ink-soft);
}
.an-lp-points {
  margin: var(--sp-4) 0 0;
}
.an-lp-point {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--lp-line);
}
.an-lp-point:last-child {
  border-bottom: 1px solid var(--lp-line);
}
.an-lp-point dt {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-ja);
  color: var(--lp-ink);
}
.an-lp-point dd {
  margin: 10px 0 0;
  color: var(--lp-ink-soft);
}
.an-lp-craft__note {
  margin: var(--sp-3) 0 0;
  font-size: 11.5px;
  line-height: 1.95;
  color: var(--lp-ink-mute);
}

/* -----------------------------------------------------------------------------
   お届け
   -------------------------------------------------------------------------- */
.an-lp-ship {
  background: var(--lp-bg-2);
}
.an-lp-ship__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  max-width: 1320px;
  margin: 0 auto;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
}
.an-lp-ship__item {
  padding: var(--sp-3);
  background: var(--lp-bg);
}
.an-lp-ship__item dt {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: var(--ls-en);
  color: var(--gold);
}
.an-lp-ship__item dt::after {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  margin: 12px 0;
  background: var(--lp-line-2);
}
.an-lp-ship__item dd {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: var(--lp-ink-soft);
}

/* -----------------------------------------------------------------------------
   施工例
   -------------------------------------------------------------------------- */
.an-lp-gallery__grid {
  display: grid;
  /* 上限を付ける。枚数が少ないと 1fr では1枚が画面半分まで伸びてしまう。 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 340px));
  justify-content: center;
  gap: var(--sp-2);
  max-width: 1320px;
  margin: 0 auto;
}
.an-lp-gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--card-ground);
}
.an-lp-gallery__item {
  aspect-ratio: 4 / 5;
}
.an-lp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease);
}
.an-lp-gallery__item:hover img {
  scale: 1.04;
}
.an-lp-gallery__note {
  max-width: 1320px;
  margin: var(--sp-3) auto 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--lp-ink-soft);
}

/* -----------------------------------------------------------------------------
   よくあるご質問（details/summary。開閉に JS を使わない）
   -------------------------------------------------------------------------- */
.an-lp-faq {
  background: var(--lp-bg-2);
}
.an-lp-faq__list {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--lp-line);
}
.an-lp-faq__item {
  border-bottom: 1px solid var(--lp-line);
}
.an-lp-faq__item summary {
  position: relative;
  display: block;
  padding: var(--sp-3) 44px var(--sp-3) 0;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: var(--ls-ja);
  color: var(--lp-ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration) var(--ease);
}
.an-lp-faq__item summary::-webkit-details-marker {
  display: none;
}
.an-lp-faq__item summary:hover {
  color: var(--gold);
}
.an-lp-faq__mark {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
}
.an-lp-faq__mark::before,
.an-lp-faq__mark::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--gold);
  transition: transform var(--duration) var(--ease);
}
.an-lp-faq__mark::after {
  transform: rotate(90deg);
}
.an-lp-faq__item[open] .an-lp-faq__mark::after {
  transform: rotate(0deg);
}
.an-lp-faq__body {
  padding: 0 0 var(--sp-3);
  color: var(--lp-ink-soft);
}

/* -----------------------------------------------------------------------------
   最後の一押し
   -------------------------------------------------------------------------- */
.an-lp-last {
  padding: var(--sp-6) var(--pad-x) calc(var(--sp-6) + 40px);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(114, 47, 55, 0.3) 0%, rgba(20, 18, 15, 0) 62%),
    var(--lp-bg);
}
.an-lp-last__inner {
  max-width: 720px;
  margin: 0 auto;
}
.an-lp-last__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* -----------------------------------------------------------------------------
   スマホの固定ボタン
   ヒーローを過ぎてから出す。PC では出さない（画面を塞ぐ理由がない）。
   -------------------------------------------------------------------------- */
.an-lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 18, 15, 0.94);
  border-top: 1px solid var(--lp-line-2);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.an-lp-sticky.is-on {
  transform: translateY(0);
}
.an-lp-sticky__price {
  line-height: 1.5;
}
.an-lp-sticky__price #an-lp-sticky-count {
  display: block;
  font-size: 11px;
  color: var(--lp-ink-mute);
}
.an-lp-sticky__price #an-lp-sticky-price {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--lp-ink);
}
.an-lp-sticky__price #an-lp-sticky-price span {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--lp-ink-mute);
}
.an-lp-sticky .an-lp-btn {
  flex: 0 0 auto;
  padding: 14px 26px;
}

/* -----------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .an-lp-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .an-lp-select__layout,
  .an-lp-craft__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .an-lp-panel {
    position: static;
    display: grid;
    grid-template-columns: minmax(200px, 40%) 1fr;
    align-items: stretch;
  }
  .an-lp-panel__figure {
    aspect-ratio: auto;
  }
  .an-lp-craft__figure {
    max-width: 520px;
  }
}

@media (max-width: 750px) {
  .an-lp-section,
  .an-lp-last {
    padding-left: var(--pad-x-sp);
    padding-right: var(--pad-x-sp);
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
  }
  .an-lp-header {
    padding: 14px var(--pad-x-sp);
  }
  .an-lp-header__logo img {
    width: 120px;
  }
  .an-lp-hero {
    min-height: 92svh;
    margin-top: -62px;
    padding: 96px var(--pad-x-sp) var(--sp-5);
    align-items: flex-end;
  }
  .an-lp-hero__bg {
    object-position: 64% 42%;
  }
  .an-lp-hero__scrim {
    background:
      linear-gradient(0deg, rgba(20, 18, 15, 0.95) 0%, rgba(20, 18, 15, 0.6) 42%, rgba(20, 18, 15, 0.15) 100%);
  }
  .an-lp-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .an-lp-hero__scroll {
    display: none;
  }
  .an-lp-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .an-lp-card__num {
    font-size: 26px;
    margin-top: var(--sp-2);
  }
  .an-lp-card__num--free {
    font-size: 17px;
  }
  .an-lp-panel {
    grid-template-columns: 1fr;
  }
  .an-lp-panel__figure {
    aspect-ratio: 4 / 5;
  }
  .an-lp-panel__count {
    font-size: 44px;
  }
  .an-lp-numbers__list {
    grid-template-columns: 1fr;
  }
  .an-lp-num {
    grid-template-columns: 64px 1fr;
    grid-template-areas: 'n m' 'p p';
    row-gap: 4px;
  }
  .an-lp-num__n { grid-area: n; }
  .an-lp-num__m { grid-area: m; }
  .an-lp-num__p { grid-area: p; text-align: right; }
  .an-lp-footer {
    padding: var(--sp-4) var(--pad-x-sp) var(--sp-3);
  }
  .an-lp-sticky {
    display: flex;
  }
  /* 固定ボタンのぶん、最後のセクションに余白を足す */
  .an-lp-last {
    padding-bottom: calc(var(--sp-5) + 84px);
  }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .an-lp-hero__bg,
  .an-lp-hero__scroll span {
    animation: none;
  }
  .an-lp-hero__line > span {
    transform: none;
    animation: none;
  }
  .an-lp-hero__lead,
  .an-lp-hero__price,
  .an-lp-hero__cta {
    opacity: 1;
    animation: none;
  }
  .an-lp-sticky {
    transition: none;
  }
}

/* =============================================================================
   サイト内のバラ一覧（/category/?style=rose）
   中身は LP と同じ部品だが、こちらは共通ヘッダー・パンくず・おまかせバンドを
   まとった «サイトの中のページ» として出る。
   暗い地にするのはこの画面とLPだけ。他のカテゴリーは明るいままなので、
   共通ヘッダー側の色はここでだけ上書きする。
   ============================================================================= */

/* 一覧の土台が紙色を敷いているので剥がす */
.an-lp-body .an-list,
.an-lp-body .an-list--after {
  background: transparent;
}

/* 一覧は親テーマの 1200px コンテナ（page-category.php の l-inner）に入る。
   ヒーローと各セクションは画面いっぱいに出したいので、この画面だけ枠を開ける。
   横の余白は中の .an-container / セクション側が持っている。 */
.an-lp-body .l-inner {
  width: 100%;
  max-width: none;
}
.an-lp-body .l-main__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* 共通ヘッダーを暗い面に合わせる（この画面だけ） */
.an-lp-body .an-header {
  background: rgba(20, 18, 15, 0.92);
  border-bottom-color: var(--lp-line);
}
.an-lp-body .an-header__nav,
.an-lp-body .an-header__actions {
  color: var(--lp-ink-soft);
}
.an-lp-body .an-header__nav a:hover,
.an-lp-body .an-header__actions a:hover {
  color: var(--gold);
}
.an-lp-body .an-header__logo img {
  /* 用意されているのが黒いロゴだけなので反転して使う（LPヘッダーと同じ） */
  filter: invert(1) brightness(1.08);
}
.an-lp-body .an-header__badge {
  background: var(--accent);
  color: #FBFAF7;
}
.an-lp-body .an-header__menu-btn span {
  background: var(--lp-ink);
}

/* ドロワー（SP）も暗い面に */
.an-lp-body .an-drawer__panel {
  background: var(--lp-bg);
}
.an-lp-body .an-drawer__panel a {
  color: var(--lp-ink);
  border-bottom-color: var(--lp-line);
}

/* パンくず */
.an-lp-body .an-breadcrumb {
  color: var(--lp-ink-mute);
}
.an-lp-body .an-breadcrumb a {
  color: var(--lp-ink-soft);
}
.an-lp-body .an-breadcrumb a:hover {
  color: var(--gold);
}
.an-lp-body .an-breadcrumb .is-current {
  color: var(--lp-ink);
}
.an-lp-body .an-list__head {
  padding-bottom: 0;
}

/* ヒーローは LP では最小ヘッダーの下に潜らせているが、
   こちらは共通ヘッダー＋パンくずの «後ろ» に来るので持ち上げない。 */
.an-lp--inpage .an-lp-hero {
  margin-top: var(--sp-3);
  min-height: 74svh;
  padding-top: var(--sp-5);
}

/* 本数パネルの貼り付き位置。共通ヘッダー（88px）が上に居座るぶん下げる。 */
.an-lp--inpage .an-lp-panel {
  top: 108px;
}

@media (max-width: 750px) {
  .an-lp--inpage .an-lp-hero {
    min-height: 78svh;
    margin-top: var(--sp-2);
  }
}