@charset "UTF-8";
/* ===== header ===== */
/* ==========================================================================
   SP: ロゴ ＋「ダウンロードはこちら」ピルボタン（固定なし）
   PC: ロゴのみ・フルブリードの白バー・上部固定（sticky / z-7）
   ========================================================================== */

.site-header {
  height: var(--size-3xl);
  padding: var(--gutter-header); 
  background-color: var(--color-surface-base);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--size-s);
}

.header-logo {
  display: flex;
  align-items: center;
  padding-inline-start: 10px;
}

.header-logo img {
  width: 129.45px;
  height: 18.16px;
}

.header-cta {
  min-height: 38px;
  padding: 10px 13px;
  margin-inline-end: 2px;
  margin-block-end: 2px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 7;
  }

  .header-inner {
    justify-content: flex-start;
  }

  /* PC 版ヘッダーには「ダウンロードはこちら」ボタンが無い */
  .header-cta { display: none; }
}

/* ===== hero ===== */
.hero {
  background-color: var(--surface-section);
}

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 412 / 435; 
}

/* ===== intro ===== */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  padding-block: var(--spacing-l) var(--spacing-xl);
}

/* Wrap-02（リード文＋ラベル3つ） */
.intro-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-s); 
  width: 100%;
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: inherit;
}

.intro-lead {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--content-base);
}

/* Wrap（ラベルの折り返し行） */
.intro-label-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-s);
  width: 100%;
}

/* list（ノッチ＋金色ブロック） */
.intro-label {
  display: flex;
  align-items: center;
  height: var(--size-s);
}

/* Subtract（旗のノッチ形。円形の抜きがあるので SVG 書き出し） */
.intro-label-notch {
  flex: none;
  width: 15.3px;
  height: var(--size-s);
}

.intro-label-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-xs);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background-color: var(--surface-accent);
  color: var(--color-text-on-label);
}

.intro-label-rule {
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-text-on-label) 0 3px,
    transparent 3px 6px
  );
}

.intro-label-text {
  display: block;
  padding-bottom: 1px;
  text-align: center;
  white-space: nowrap;
}

/* Wrap-03（本文） */
.intro-body {
  width: 100%;
  color: var(--content-base);
}

/* ===== about-buffmee ===== */

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l); 
}

/* ---------- 見出し（Heading 4 / 9926:581） ---------- */
.about-heading {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  margin: 0;
  padding-block: var(--spacing-s);
  color: var(--content-base);
}

.about-heading-text {
  text-align: center;
  white-space: nowrap;
}

.about-heading-decor {
  flex: none;
  width: 27px;
  height: 36px;
}

.about-heading-decor-right {
  position: relative;
  display: block;
}
.about-heading-decor-right::before,
.about-heading-decor-right::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.about-heading-decor-right::before {
  left: 11.43px;
  top: 8.99px;
  width: 14.4px;
  height: 14.4px;
  border: 1.8px solid #6a6d8b;
  transform: rotate(6deg);
}
.about-heading-decor-right::after {
  left: 3.15px;
  top: 27px;
  width: 7.2px;
  height: 7.2px;
  background-color: #6a6d8b;
}

/* ---------- キャラクター＋白カード（Wrap-01 / 9954:3425） ---------- */
.about-intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
  width: 100%;
  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-xl);
}

.about-character {
  position: absolute;
  left: 0;
  top: var(--spacing-xs);
  z-index: 2;
  width: 60px;
  height: 62.5px;
}

.about-card {
  z-index: 1;
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-s);
  padding: var(--spacing-l);
  border-radius: var(--radius-m);
  background-color: var(--color-surface-base);
  color: var(--content-base);
}

.about-card-title {
  padding-inline: var(--spacing-s);
  text-align: center;
}

/* ---------- アプリ画面モック＋タグ＋リード ---------- */
.about-feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  width: 100%;
}

/* image_buffmee */
.about-mocks {
  width: 100%;
}

.about-mock-image {
  width: 100%;
  aspect-ratio: 728 / 430;
  height: auto;
}

.about-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
}

.about-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-3xs);
  padding-inline: var(--spacing-s);
  border: var(--border-base) solid var(--color-surface-alt-strong);
  border-radius: var(--radius-xs);
  color: var(--content-base);
  white-space: nowrap;
}

.about-lead {
  width: 100%;
  color: var(--content-base);
}

/* ---------- CTA ---------- */
.about-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-m);
  width: 100%;
  padding-top: var(--spacing-s);
}

.about-price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  color: var(--content-base);
}

.about-price-decor {
  flex: none;
  width: 12px;
  height: 20px;
}

.about-price-decor-left { transform: scaleX(-1); }

.about-price-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.about-price-plan,
.about-price-value { display: block; }

.about-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-inline: var(--spacing-2xl);
}

/* inner */
.about-cta-inner {
  width: 100%;
  max-width: 400px;
  padding-right: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.about-cta-link {
  width: 100%;
}

/* ===== how-to-use ===== */
.howtouse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  padding-block: var(--spacing-4xl);
}

/* ---------- 見出しブロック（Heading 4 / 105×40） ---------- */
.howtouse-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  max-width: 100%;
}

.howtouse-title {
  padding-inline: var(--spacing-m);
  text-align: center;
}

.howtouse-decor {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.howtouse-decor-top {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-start;
}

.howtouse-decor-top::before,
.howtouse-decor-top::after {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

.howtouse-decor-bar {
  flex: 1 0 0;
  min-width: 0;
  height: 4px;
  background-color: var(--content-accent);
}

.howtouse-decor-bottom {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--spacing-xs);
}

.howtouse-decor-bottom::before,
.howtouse-decor-bottom::after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

/* ---------- リード文 ---------- */
.howtouse-lead {
  width: 100%;
  text-align: center;
}

/* ---------- 3ステップの並び（row / gap 8 / 各カラム flex:1） ---------- */
.howtouse-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-s);
  width: 100%;
}

.howtouse-step {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  isolation: isolate;
}

/* ---------- STEPバッジ（71×24・カードに 12px 食い込む） ---------- */
.howtouse-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-m);
  height: var(--size-2xs);
  margin-bottom: -12px;
  padding-inline: var(--spacing-xs);
  background-color: var(--color-surface-alt-strong);
  color: var(--color-text-on-label);
  white-space: nowrap;
}

/* バッジ左右の白い縦罫 1px */
.howtouse-badge::before,
.howtouse-badge::after {
  content: "";
  align-self: stretch;
  width: 1px;
  background-color: var(--color-icon-on-dark);
}

/* ---------- カード ---------- */
.howtouse-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-s);
  width: 100%;
  padding: var(--spacing-2xl) var(--spacing-s) var(--spacing-s);
  box-shadow: inset 0 0 0 var(--border-base) var(--color-surface-alt-strong);
  border-radius: var(--radius-s);
  background-color: var(--color-surface-base);
  overflow: clip;
}

.howtouse-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
}

.howtouse-icon-photo {
  border-radius: 6px;
  object-fit: cover;
}

/* カード見出しは残りの高さを埋めて上下中央（3枚のカード高さを揃えるため） */
.howtouse-card-title {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-weight: var(--fw-regular);
  text-align: center;
  line-break: strict;
  overflow-wrap: break-word;
}

/* カード内の補足枠（ベージュ・角丸4・padding 4） */
.howtouse-note {
  width: 100%;
  padding: var(--spacing-xs);
  border-radius: var(--radius-xs);
  background-color: var(--surface-section-alt);
  text-align: center;
  line-break: strict;
  overflow-wrap: break-word;
}

/* ===== campaign-phase-two ===== */
.campaign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
}

.campaign-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-m);
  height: var(--size-xs); /* Figma実測32px */
  padding-inline: var(--spacing-xs);
  background-color: var(--lp-gold);
  color: var(--color-text-on-label);
  position: relative;
}
.campaign-badge::before,
.campaign-badge::after {
  content: "";
  width: 1px;
  align-self: stretch;
  background-color: var(--color-icon-on-dark);
}

.campaign-body {
  width: 100%;
  text-align: center;
}

.campaign-title { margin-bottom: var(--spacing-l); }

.campaign-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-l);
  width: 100%;
  max-width: 364px;
  margin-inline: auto;
  min-height: 200px;
  padding: var(--spacing-s);
  background-color: var(--color-surface-base);
  background-image: repeating-linear-gradient(45deg, rgba(242, 235, 218, 0.5) 0 4px, transparent 4px 12px);
  overflow: hidden;
  border-radius: var(--radius-m);
}

.campaign-coming { color: var(--content-muted); }
.campaign-note { color: var(--content-muted); }

/* ===== campaign-phase-three ===== */

.campaign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
}

.campaign-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-m);
  height: var(--size-xs);
  padding-inline: var(--spacing-xs);
  background-color: var(--lp-gold);
  color: var(--color-text-on-label);
  position: relative;
}
.campaign-badge::before,
.campaign-badge::after {
  content: "";
  width: 1px;
  align-self: stretch;
  background-color: var(--color-icon-on-dark);
}

.campaign-body {
  width: 100%;
  text-align: center;
}

.campaign-title { margin-bottom: var(--spacing-l); }

.campaign-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-l);
  width: 100%;
  max-width: 364px;
  margin-inline: auto;
  min-height: 200px;
  padding: var(--spacing-s);
  background-color: var(--color-surface-base);
  background-image: repeating-linear-gradient(45deg, rgba(242, 235, 218, 0.5) 0 4px, transparent 4px 12px);
  overflow: hidden;
  border-radius: var(--radius-m);
}

.campaign-coming { color: var(--content-muted); }
.campaign-note { color: var(--content-muted); }

/* ===== notice ===== */

.notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl);
  padding-block: var(--spacing-4xl);
}
.notice-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  width: 100%;
}

/* ---------- 見出し ---------- */
.notice-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  max-width: 100%;
}

.notice-title {
  padding-inline: var(--spacing-m);
  text-align: center;
}

.notice-decor {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.notice-decor-top {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-start;
}

.notice-decor-top::before,
.notice-decor-top::after {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

.notice-decor-bar {
  flex: 1 0 0;
  min-width: 0;
  height: 4px;
  background-color: var(--content-accent);
}

.notice-decor-bottom {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--spacing-xs);
}

.notice-decor-bottom::before,
.notice-decor-bottom::after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

/* ---------- 注意事項の本文 ---------- */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding-left: var(--spacing-m);
  color: var(--content-base);
}

.notice-list li {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: var(--spacing-xl);                          /* 「・」の逃げ */
  text-align: center;
}

.notice-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ========================================================================
   CTAカード一式
   ======================================================================== */

.notice-cta {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  width: 100%;
}
.notice-cta { display: flex; }
@media (min-width: 1024px) {
  .notice-cta { display: none; }
}

.notice-cta-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  width: 100%;
}

.notice-cta-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 var(--spacing-xs) var(--spacing-xs) 0;
}

.notice-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-m);
  border: var(--border-base) solid var(--lp-shadow-ink);
  border-radius: var(--radius-m);
  background-color: var(--color-surface-base);
  box-shadow: var(--shadow-offset-m);
}

.notice-cta-heading {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding-block: var(--spacing-s);
  color: var(--content-base);
}

.notice-cta-heading-text {
  text-align: center;
}

.notice-cta-decor {
  flex: none;
  width: 27px;
  height: 36px;
}

.notice-cta-decor-right {
  position: relative;
  display: block;
}
.notice-cta-decor-right::before,
.notice-cta-decor-right::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.notice-cta-decor-right::before {
  left: 11.43px;
  top: 8.99px;
  width: 14.4px;
  height: 14.4px;
  border: 1.8px solid #6a6d8b;
  transform: rotate(6deg);
}
.notice-cta-decor-right::after {
  left: 3.15px;
  top: 27px;
  width: 7.2px;
  height: 7.2px;
  background-color: #6a6d8b;
}

/* ストアバッジ */
.notice-cta-badge {
  display: block;
  max-width: 100%;
}
.notice-cta-badge img {
  height: 56px;
  width: auto;
  max-width: 100%;
}
.notice-cta-badge-android { display: none; }
html.is-android .notice-cta-badge-ios { display: none; }
html.is-android .notice-cta-badge-android { display: block; }

.notice-cta-trademark {
  width: 100%;
  max-width: 400px;
  padding-inline: var(--spacing-s);
  color: var(--content-base);
}

.notice-cta-mascot {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-bottom: -2px;
}

/* ---------- Xポストボタン（btn_x / 黒ピル） ---------- */
.notice-cta-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: 32px;
  padding-inline: 15px;
  border-radius: var(--radius-full);
  background-color: #000000;
  color: var(--color-text-on-label);
  text-decoration: none;
}
.notice-cta-x:hover { text-decoration: none; }

.notice-cta-x-logo {
  flex: none;
  width: 16px;
  height: 16.36px;
}

/* ===== faq ===== */

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  padding-block: var(--spacing-4xl);
}

/* ---------- 見出しブロック ---------- */
.faq-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  max-width: 100%;
}

.faq-title {
  padding-inline: var(--spacing-m);
  text-align: center;
}

.faq-decor {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faq-decor-top {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-start;
}

.faq-decor-top::before,
.faq-decor-top::after {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

.faq-decor-bar {
  flex: 1 0 0;
  min-width: 0;
  height: 4px;
  background-color: var(--content-accent);
}

.faq-decor-bottom {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--spacing-xs);
}

.faq-decor-bottom::before,
.faq-decor-bottom::after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

/* ---------- アコーディオン一覧 ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faq-item {
  padding-block: var(--spacing-l);
  padding-inline: 2px;
  width: 100%;
  border-bottom: var(--border-base) solid var(--color-button-border-base);
}

.faq-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding-block: var(--spacing-xs);
  list-style: none;
  cursor: pointer;
}
.accordion-header::-webkit-details-marker {
  display: none;
}

/* ---------- 質問行 ---------- */
.faq-question-row {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.faq-icon-q {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.faq-question-text {
  flex: 1 0 0;
  min-width: 0;
}

/* ---------- 開閉トグル ---------- */
.faq-toggle {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.faq-toggle-icon {
  width: 24px;
  height: 24px;
}

.faq-toggle-icon-minus {
  display: none;
}

.faq-item[open] .faq-toggle-icon-plus {
  display: none;
}
.faq-item[open] .faq-toggle-icon-minus {
  display: block;
}

/* ---------- 回答 ---------- */
.accordion-content {
  overflow: hidden;
}

.accordion-content-inner {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-xs) var(--spacing-xs);
  padding-left: var(--spacing-xl);
}

.faq-answer {
  flex: 1 0 0;
  min-width: 0;
}

/* ===== contact ===== */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3xl);
  width: 100%;
  padding-block: var(--spacing-4xl);
}

.contact-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  width: 100%;
  max-width: 920px;
}

.contact-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-s);
  width: 100%;
  text-align: center;
  color: var(--content-base);
}
.contact-title {
  max-width: 332px;
}

.contact-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-m);
  width: 100%;
  padding-inline: var(--spacing-2xl);
}

.contact-btn-inner {
  width: 100%;
  max-width: 400px;
  padding-right: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.contact-btn {
  width: 100%;
}

/* ===== footer ===== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl);
}

.footer-x-pc.pc-only { display: none; }
@media (min-width: 1024px) {
  .footer-x-pc.pc-only { display: inline-flex; }
}

/* ---------- ロゴ＋リンク＋コピーライト ---------- */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  width: 100%;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 32px;
  padding: var(--spacing-s);
}

.footer-logo img {
  width: 129.45px;
  height: 18.16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-l);
  justify-content: center;
  width: 100%;
}

.footer-nav-link {
  color: var(--content-link);
  text-decoration: underline;
}

.footer-copyright {
  width: 100%;
  text-align: center;
  color: var(--content-base);
}

/* ===== pc-decor ===== */

.qr-download,
.brand-badge,
.pagetop {
  display: none;
}

@media (min-width: 1024px) {

  /* ---------- DownloadQr ---------- */
  .qr-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-m);
    position: fixed;
    left: calc(50% + (var(--content-max) / 2) + 24px);
    top: 293px;
    width: 237px;
    z-index: 5;
  }

  .qr-download-label {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--spacing-xs);
    margin: 0;
    color: var(--lp-shadow-ink);
    text-align: center;
    white-space: nowrap;
  }

  .qr-download-bracket {
    flex: none;
    width: 14px;
    height: 20.46px;
  }

  .qr-download-bracket-left {
    transform: scaleX(-1);
  }

  .qr-download-frame-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
  }

  .qr-download-mascot {
    position: relative;
    z-index: 2;
    margin-bottom: -2px;
  }

  .qr-download-frame {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    background-color: var(--color-surface-base);
    text-decoration: none;
  }

  .qr-download-code {
    display: block;
  }

  .qr-download-frame-android { display: none; }
  html.is-android .qr-download-frame-ios { display: none; }
  html.is-android .qr-download-frame-android { display: flex; }

  /* ---------- BrandBadge ---------- */
  .brand-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-m);
    position: fixed;
    right: calc(50% + (var(--content-max) / 2) + 48px);
    top: 308px;
    width: 208px;
    z-index: 5;
  }

  .brand-badge-heading {
    margin: 0;
    color: var(--lp-shadow-ink);
    text-align: center;
  }
  .brand-badge-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    width: 100%;
    padding: var(--spacing-l);
    border-radius: var(--radius-m);
    background-color: rgba(255, 255, 255, 0.5);
  }

  .brand-badge-icon-frame {
    display: block;
    flex: none;
    width: 80px;
    height: 80px;
    border: var(--border-base) solid var(--color-button-border-base);
    border-radius: var(--radius-m);
    overflow: hidden;
  }

  .brand-badge-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .brand-badge-name {
    display: flex;
    flex-direction: column;
    color: var(--lp-shadow-ink);
  }

  /* ---------- FloatingOpenButton（上へ戻る） ---------- */
  .pagetop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 120px;
    top: 584px;
    width: var(--size-xl);
    height: var(--size-xl);
    padding: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-base);
    box-shadow: var(--shadow-low);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .pagetop.is-show {
    opacity: 1;
    pointer-events: auto;
  }

  @media (hover: hover) {
    .pagetop:hover { transform: translateY(-2px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagetop { transition: none; }
}