/* ==========================================================================
   Base
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;600&display=swap');

#container {
    margin: 0 auto 0 auto;
    overflow: hidden;
}

:root {
  --app-width: 500px;       /* PC表示時の中央コンテンツ幅 */
  --side-bg: #FFDDB0;        /* 左右サイドの背景色 */
  --side-text: #ffffff;
  --app-bg: #fff;
  --text-main: #111;
  --text-sub: #6b6b6f;
  --accent: #2d5bff;
  --border: #FF3B00;
  --menu-accent: #FF3B00;   /* ハンバーガーメニューのアクセントカラー */
  --menu-bg: #FFF8EF;       /* ハンバーガーメニューの背景色 */
  --section-border: #ff3b00; /* カード型セクションの内側ボーダー色 */
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--side-bg); /* 上が薄く、下が本来の色になるグラデーション */
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-main);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* アンカーリンクをなめらかにスクロール */
}

p#brandLogo{
	display: none;
	}

#brandHeader{
	display: none;
	}

footer.global-footer{
	margin-top: 0;
	z-index: 100;
	position: relative;
	}

.global-footer .pagetop {
	display: none;
	}

/* ==========================================================================
   左右サイドパネル（PC表示時のみ）
   ここが「左右のロゴ」を表示するエリア。position: fixed なので
   中央の .app がスクロールしても左右は固定表示される。
   ========================================================================== */
.side-panel {
  position: fixed;
  top: 0;
  height: 100vh;
  width: calc((100% - var(--app-width)) / 2);
  background: var(--side-bg); /* 上が薄く、下が本来の色になるグラデーション */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.side-panel--left {
  left: 0;
}

.side-panel--right {
  right: 0;
}

.side-panel__inner {
  writing-mode: vertical-rl; /* 縦書きロゴにするとサイドらしい佇まいになる。不要なら削除可 */
  text-orientation: mixed;
}

.side-logo {
  margin: 0;
  color: var(--side-text);
  font-size: 14px;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.side-panel__logo {
  width: 250px;
}

.side-panel__copyright {
  position: absolute;
  bottom: 20px;
  font-size: 9px;
  color: var(--section-border);
  font-weight: 500;
}

.side-panel__catchcopy {
  width: 90px;
}

/* 767px（サイドパネル自体の表示切り替え）とは別に、
   1020px以下ではサイドパネル内のロゴ・キャッチコピー画像・コピーライトだけを先に非表示にする */
@media (max-width: 1020px) {
  .side-panel--left img,
  .side-panel--left p,
  .side-panel--right img {
    display: none;
  }
}

/* ==========================================================================
   中央の「スマホ幅」コンテナ
   position は static のまま（fixedにしない）で、ページ全体のスクロールに
   合わせて自然にスクロールする。左右は fixed なので置いていかれる＝
   結果的に「中央だけがスクロールしているように見える」。
   ========================================================================== */
.app {
  width: var(--app-width);
  max-width: 100%;
  margin: 0 auto;
  min-height: 100svh;
  position: relative;
  z-index: 11; /* 左右のside-panel（z-index:10）より前面にして、シャドウが隠れないようにする */
  box-shadow: -3px 0 3px rgba(248, 205, 148, 0.55), 3px 0 3px rgba(248, 205, 148, 0.55); /* 左右だけにシャドウを落とす（お試し用） */
  background: var(--app-bg);
}

.app__header {
  position: fixed; /* 通常の要素の高さに影響を与えず、ヒーローセクションの全面に重ねる */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--app-width);
  max-width: 100%;
  height: 56px;
  z-index: 20;
  background: none;
  border: none;
  pointer-events: none; /* ヘッダー自体はクリックを透過し、ボタンだけ反応させる */
}

/* ==========================================================================
   ハンバーガーボタン（ヘッダー右上）
   ========================================================================== */
.hamburger-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  border-radius: 0;
  background: var(--section-border);
  border: none;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); /* 左側と下側にシャドウ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  cursor: pointer;
  pointer-events: auto; /* ヘッダーはpointer-events:noneなのでボタンだけ明示的に有効化 */
}

.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
}

/* ==========================================================================
   ハンバーガーメニュー（オーバーレイ）
   .app と同じ幅・中央位置に固定表示することで、PC表示でも
   中央のスマホ幅エリア内にきちんと収まる。
   ========================================================================== */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--app-width);
  max-width: 100%;
  height: 100dvh;
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 10px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.menu-overlay__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  border-radius: 0;
  background: var(--section-border);
  border: none;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); /* 左側と下側にシャドウ */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.menu-overlay__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px; /* バツ印の大きさ（線の長さ）：以前の2倍相当 */
  height: 2px; /* 線の太さ：ハンバーガーボタンと同じ太さのまま */
  background: #fff;
}

.menu-overlay__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-overlay__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-overlay__list {
  display: flex;
  flex-direction: column;
  margin: 4px 0 0;
}

.menu-overlay__item {
    font-family: "Zen Old Mincho", serif;
  padding: 10px 0px;
  text-align: center;
  color: var(--menu-accent) !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px dotted var(--menu-accent);
}


.menu-overlay__item:last-child {
  border-bottom: none;
}

.menu-overlay__cta {
  margin: 14px 0 16px;
  background: var(--menu-accent);
  color: #ffffff !important;
  border-radius: 999px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.6);
}


.menu-overlay__cta-icon {
  display: flex;
  flex-shrink: 0;
    position: absolute;
    right: 12%;
}

.menu-overlay__note {
  font-size: 10px;
  line-height: 1.6;
  color: var(--border);
  margin: 0 0 0;
	text-align: justify;
	text-justify: inter-ideograph;
}

.menu-overlay__brand {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-main);
}

/* ==========================================================================
   固定CTAボタン
   トップから画面2画面分スクロールしたら下からスライドイン。
   .app と同じ幅・中央位置に固定表示することで、PC表示でも
   中央のスマホ幅エリア内にきちんと収まる。
   ========================================================================== */
.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: var(--app-width);
  max-width: 100%;
  height: 75px;
  z-index: 50;
  visibility: hidden; /* シャドウも含めて完全に非表示にする */
  transition: transform 0.35s ease, visibility 0s linear 0.35s; /* スライドアウトが終わってから非表示に切り替える */
  pointer-events: none;
  /* offsetY(-8px)で上方向にずらしつつ、spread(-14px)をblur(14px)と同じ値の負数にすることで
     左右・下方向へのにじみを打ち消し、上方向だけにシャドウが伸びるようにする */
  box-shadow: 0 -5px 6px -6px rgba(0, 0, 0, 0.85);
	box-sizing: border-box;
	border: 5px solid #fff;
}

.fixed-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  visibility: visible; /* スライドインと同時にすぐ表示する */
  transition: transform 0.35s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

/* ハンバーガーメニューが開いている間は、is-visibleの状態に関わらず強制的に隠す・タップ不可にする */
.fixed-cta.is-hidden-by-menu {
  transform: translateX(-50%) translateY(100%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.fixed-cta__link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #ff3b00;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 0 16px;
}


.fixed-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}

.fixed-cta__text small {
  font-size: 14px;
  font-weight: 500;
}

.fixed-cta__text strong {
  font-size: 19px;
  font-weight: 500;
}

.fixed-cta__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
	position: absolute;
	top: 20px;
	right: 0px;
  transform-origin: bottom center; /* 着地時の潰れ・ジャンプ時の伸びを地面基準にする */
  animation: fixedCtaIconPoyon 2s linear infinite; /* 2回はねる→1秒静止のループ。イージングはキーフレーム側で個別指定 */
}

@keyframes fixedCtaIconPoyon {
  /* 1回目：勢いよく飛び上がり、重力で加速しながら落ちて着地でつぶれる */
  0% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); /* ease-out：上りは減速しながら頂点へ */
  }
  12.5% {
    transform: translateY(-6px) scaleY(1.03);
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); /* ease-in：下りは重力で加速 */
  }
  22.5% {
    transform: translateY(0) scaleY(0.92);
    animation-timing-function: ease-out;
  }
  /* 2回目：1回目よりわずかに低く（勢いが少し落ちたイメージ） */
  27.5% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  37.5% {
    transform: translateY(-3.5px) scaleY(1.015);
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
  }
  47.5% {
    transform: translateY(0) scaleY(0.96);
    animation-timing-function: ease-out;
  }
  52.5% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

.app__main {
  padding: 0;
  background-image: url(images/bg.png);
  background-repeat: repeat;
  background-size: 750px;
  background-position: center top 750px;
}

@media (max-width: 1020px) {
  .app__main {
    background-position: center top 100svh;
  }
}

.app__footer {
  padding: 24px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   CTA表示判定用センチネル
   高さ0でレイアウトに影響を与えず、セクション2の上辺と同じ位置に置く目印。
   ========================================================================== */
.cta-sentinel {
  height: 0;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   セクション（メニューからアンカーリンクされる9つのブロック）
   カード型：上下40px間隔・左右10pxの隙間・角丸10px
   ========================================================================== */
.section {
  min-height: 70vh;
  margin: 0 10px 40px; /* 左右10pxの隙間／下に40pxの間隔 */
  padding: 48px 20px;
  border-radius: 10px; /* 四隅の角丸 */
  background: #ffffff;
  scroll-margin-top: 0; /* ヘッダーは透明な浮き型のため、オフセットせずセクション上部を画面上部にぴったり合わせる */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 「キャンペーンについて」は、ウィンドウの縦幅に応じて可変にせず、
   コンテンツ量に応じた最小サイズで固定する */
#section-campaign {
  min-height: 0;
}

/* 「キャンペーン対象店舗」も同様に、コンテンツ量に応じた最小サイズで固定する */
#section-stores {
  min-height: 0;
}

/* セクション01〜06（.section--double-border）だけ：スクロールで画面に入ったら下からスライドイン（フェードなし） */
.section--double-border {
  transform: translateY(40px);
  transition: transform 0.6s ease;
}

.section--double-border.is-visible {
  transform: translateY(0);
}

/* セクション07（キャンペーン対象店舗）だけ背景色を変更 */
#section-stores {
  background: #fe4d20;
}

/* 06・07・08・フッターセクション：左右の隙間と角丸をなくし、横幅いっぱいに表示 */
.section--flush {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border: none; /* 角丸セクション用の内側ボーダーは付けない */
}

/* 06→07、07→08、08→フッターの間の40pxの隙間をなくす（フッター自身の下の間隔は変更しない） */
.section--stack {
  margin-bottom: 0;
}

/* セクション01〜06：外側1px実線＋内側5pxオフセットに1pxドット線の二重ボーダー */
.section--double-border {
  position: relative;
  border: 1px solid var(--section-border);
}

/* 内側の破線は、角も含めて途切れず正確な長さで描くためSVGの角丸長方形で描画する */
.section__inner-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.section__inner-border-rect {
  x: 5.5px;
  y: 5.5px;
  width: calc(100% - 11px);
  height: calc(100% - 11px);
  rx: 7px;
  ry: 7px;
  fill: none;
  stroke: var(--section-border);
  stroke-width: 1px;
  stroke-dasharray: 2 2; /* 線2px・隙間2pxの破線。角も含めて同じパターンでつながる */
}

/* ==========================================================================
   トップ（イントロ）セクションだけの専用スタイル
   角Rなし・左右の隙間なしで横幅いっぱい。
   スマホ：ブラウザ画面の高さいっぱい（全画面表示）
   PC：高さ750px固定
   ========================================================================== */
.section--hero {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border: none; /* 角丸セクション用の内側ボーダーは付けない */
  padding: 0; /* スライダーを縦横いっぱいに表示するため内側の余白をなくす */
  overflow: hidden;
  height: 100vh; /* スマホ：画面いっぱいの高さ（フォールバック）。min-heightだと子要素の100%高さが決まらないためheightで確定させる */
}

@supports (height: 100dvh) {
  .section--hero {
    height: 100svh; /* アドレスバー等を含む実際の表示領域に対応 */
  }
}

@media (min-width: 768px) {
  .section--hero {
    height: 750px; /* PC：高さ750px固定 */
  }
}

/* ==========================================================================
   ヒーロースライダー
   セクションいっぱいに表示し、5秒間隔で右→左にスライド、ループする。
   ========================================================================== */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1; /* section--heroのflexレイアウト内で確実に高さいっぱいに広がるようにする保険 */
  overflow: hidden;
}

.hero-slider__track {
  display: flex;
  height: 100%;
  cursor: grab;
  touch-action: pan-y; /* 横方向のフリックはJSで検知しつつ、縦スクロールは妨げない */
  user-select: none; /* ドラッグ中にテキストや画像が選択されるのを防ぐ */
  -webkit-user-drag: none;
  /* transitionはJS側で付与/解除して、ループ時だけアニメーションなしで瞬間移動させる */
}

.hero-slider__track:active {
  cursor: grabbing;
}

.hero-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-user-drag: none;
}

.hero-slider__slide--1 {
  background-image: url(images/main1.jpg);
}

.hero-slider__slide--2 {
  background-image: url(images/main2.jpg);
}

.hero-slider__slide--3 {
  background-image: url(images/main3.jpg);
}

.hero-slider__slide--4 {
  background-image: url(images/main4.jpg);
}

.section__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent);
}

.section__title {
  font-size: 20px;
  line-height: 1.4;
  margin: 0 0 14px;
}

.section__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sub);
  margin: 0;
}

/* ==========================================================================
   セクション01（キャンペーンについて）専用コンテンツ
   ========================================================================== */
.campaign__top-line {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 58px;
  background: var(--section-border);
  z-index: 2; /* セクションの上側ボーダーに被さるように前面に表示 */
}

.campaign__heading {
  font-family: "Zen Old Mincho", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--section-border);
  margin: 32px 0 23px;
}

.campaign__illustration {
  display: flex;
  justify-content: center;
  margin: 0 0 22px;
}

.campaign__fit-svg {
  width: 180px;
  max-width: 100%;
  height: auto;
  /* 初期状態：小さく縮めて透明にしておく */
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1) 0.15s,
    opacity 0.3s ease 0.15s;
}

/* セクションが画面に入って.is-visibleが付いたら、ぽよんっと弾んで登場する
   （cubic-bezierの3つ目の値が1を超えているため、途中で少し大きくなってから戻る） */
.section--double-border.is-visible .campaign__fit-svg {
  opacity: 1;
  transform: scale(1);
}

.campaign__message {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: var(--section-border);
  margin: 0 0 20px;
}

.campaign__submessage {
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
  color: var(--section-border);
  margin: 0 0 29px;
}

.campaign__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #ff3b00;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 18px 28px;
  margin: 0 0 30px;
  box-shadow: 0 10px 12px -12px rgba(0, 0, 0, 0.85);
}


.campaign__cta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}

.campaign__cta-text small {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.campaign__cta-text strong {
  font-size: 18px;
  font-weight: 600;
}

.campaign__cta-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
position: absolute;
    right: 12%;
  transform-origin: bottom center;
  animation: fixedCtaIconPoyon 2s linear infinite; 
}

.campaign__disclaimer {
  font-size: 11px;
  line-height: 1.6;
color: var(--text-main);
	text-align: justify;
	text-justify: inter-ideograph;
  margin: 0;
}

/* ==========================================================================
   セクション02（いまだけ！500ポイントプレゼント）専用コンテンツ
   ========================================================================== */
.points__badge {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 95px;
  height: auto;
  z-index: 2; /* セクションの上側ボーダーに被さるように前面に表示 */
  /* 初期状態：中央に位置決めしつつ、小さく縮めて透明にしておく */
  opacity: 0;
  transform: translateX(-50%) scale(0.3);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s ease;
}

/* セクションが画面に入って.is-visibleが付いたら、ぽよんっと弾んで登場する */
.section--double-border.is-visible .points__badge {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.points__heading {
  margin: 42px 0 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: #a61c4b;
}

.points__diagram {
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
}

.points__diagram-img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.points__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #a61c4b;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 999px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
height: 4.5em;
    box-shadow: 0 10px 12px -12px rgba(0, 0, 0, 0.85);
}


.points__cta-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
    position: absolute;
    right: 13%;
}

.points__notes {
  margin: 4px 0 0;
  padding: 0 0 0 10px;
  list-style: none;
}

.points__notes li {
  position: relative;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0 0 0;
	text-align: justify;
	text-justify: inter-ideograph;
}

.points__notes li::before {
  content: '・';
  position: absolute;
  left: -1.1em;
}

.points__notes li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   セクション03（こんな方におすすめ）専用コンテンツ
   ========================================================================== */
.recommend__problem {
  display: block;
  /* section の padding-top(48px) を打ち消して、画像上端を枠の上側にぴったり合わせる */
  margin: -48px auto 24px;
  width: 140px;
  height: auto;
  transform-origin: top center; /* 上の線のてっぺんを支点にする */
}

/* セクションが画面に入って.is-visibleが付いたら、支点からぶらぶら揺れて登場する
   （振れ幅がだんだん小さくなり、最後は0度で静止する）
   対象：おすすめ・体験談・フィッティングの流れ・おすすめブラ・FAQの各見出し画像 */
.section--double-border.is-visible .recommend__problem,
.section--double-border.is-visible .voice__heading-img,
.section--double-border.is-visible .flow__heading-img,
.section--double-border.is-visible .bra__heading-img,
.section--double-border.is-visible .faq__heading-img {
  animation: recommendProblemSwing 1.8s ease-out 0.1s both;
}

@keyframes recommendProblemSwing {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(4deg);
  }
  32% {
    transform: rotate(-3deg);
  }
  49% {
    transform: rotate(2deg);
  }
  66% {
    transform: rotate(-1deg);
  }
  83% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.recommend__list {
  list-style: none;
  margin: 20px 0 32px;
  padding: 0;
}

.recommend__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--section-border);
  border-bottom: 1px dotted var(--section-border);
  /* 画面に入ったら右からゆっくりスライドインする */
  opacity: 0;
  transform: translateX(40px);
  transition: transform 1.1s ease, opacity 1.1s ease;
}

.recommend__list li.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.recommend__list li:last-child {
  border-bottom: none;
}

.recommend__check {
  flex-shrink: 0;
  width: 15px;
  height: 11px;
}

.recommend__girl {
  display: flex;
  justify-content: center;
}

.recommend__girl-img {
  width: 115px;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   セクション04（体験者の声）専用コンテンツ
   ========================================================================== */
.voice__heading-img {
  display: block;
  /* section の padding-top(48px) を打ち消して、画像上端を枠の上側にぴったり合わせる */
  margin: -48px auto 32px;
  width: 140px;
  height: auto;
  transform-origin: top center; /* 上の線のてっぺんを支点にする */
}

.voice-item {
  margin: 0 auto 32px;
width: 90%;
  /* 画面に入ったら左右からスライドインする（奇数番目=左から／偶数番目=右から） */
  opacity: 0;
  transform: translateX(-24px);
  transition: transform 1.1s ease, opacity 1.1s ease;
}

.voice-item:nth-of-type(even) {
  transform: translateX(24px);
}

.voice-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.voice-item--last {
  margin-bottom: 0;
}

.voice-bubble {
  position: relative;
  border: 1.5px solid var(--section-border);
  border-radius: 10px;
  padding: 24px 20px;
}

.voice-bubble__quote {
  position: absolute;
  top: -6px;
  left: 5px;
  width: 18px;
  height: auto;
}

.voice-bubble__text {
  margin: 0;
    font-size: 15px;
    line-height: 1.6;
  font-weight: 400;
  color: var(--section-border);
	text-align: justify;
	text-justify: inter-ideograph;
}

/* 吹き出しの尻尾（edge.svgを使用。偶数番目は左右反転） */
.voice-bubble__tail {
  position: absolute;
  top: 100%; /* 吹き出しの下端＝枠線の位置にぴったり合わせる（重なりをなくす） */
  width: 20px;
  height: auto;
}

.voice-bubble__tail--left {
  left: 70px; /* さらに20px右へ移動（50px→70px） */
}

.voice-bubble__tail--right {
  right: 70px; /* さらに20px左へ移動（50px→70px） */
}

.voice-bubble__tail--flip {
  transform: scaleX(-1);
}

.voice-item__author {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--section-border);
  margin: 8px 0 0;
}

.voice-item__author--left {
  text-align: left;
  margin-left: 10px;
}

.voice-item__author--right {
  text-align: right;
  margin-right: 10px;
}

/* ==========================================================================
   セクション05（フィッティングの流れ）専用コンテンツ
   ========================================================================== */
.flow__heading-img {
  display: block;
  /* section の padding-top(48px) を打ち消して、画像上端を枠の上側にぴったり合わせる */
  margin: -48px auto 32px;
  width: 140px;
  height: auto;
  transform-origin: top center; /* 上の線のてっぺんを支点にする */
}

.flow-step {
  position: relative;
  border: 1.5px solid var(--section-border);
  border-radius: 10px;
  padding: 32px 20px 24px;
  /* 画面に入ったら下からスッと現れる */
  opacity: 0;
  transform: translateY(30px);
  transition: transform 1.3s ease, opacity 1.3s ease;
}

.flow-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flow-step--last {
  margin-bottom: 0;
}

.flow-step__badge {
  position: absolute;
  top: -25px;
  left: 16px;
  width: 49px;
  height: 49px;
  /* 初期状態：小さく縮めて透明にしておく */
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s ease;
}

/* .flow-step自体が画面に入って.is-visibleが付いたら、ぽよんっと弾んで登場する */
.flow-step.is-visible .flow-step__badge {
  opacity: 1;
  transform: scale(1);
}

.flow-step__title {
  margin: 0 0 20px;
  font-family: "Zen Old Mincho", serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--section-border);
  /* 初期状態：少し拡大して透明にしておく（ズームアウトして現在の大きさに収まる） */
  opacity: 0;
  transform: scale(1.4);
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.flow-step.is-visible .flow-step__title {
  opacity: 1;
  transform: scale(1);
}

.flow-step__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 20px;
}

.flow-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
	text-align: justify;
	text-justify: inter-ideograph;
color: var(--section-border);
}

.flow__arrow {
  display: block;
  width: 10px;
  height: auto;
  margin: 12px auto;
}

/* ==========================================================================
   セクション07（おすすめブラ）専用コンテンツ
   ========================================================================== */
.bra__heading-img {
  display: block;
  /* section の padding-top(48px) を打ち消して、画像上端を枠の上側にぴったり合わせる */
  margin: -48px auto 24px;
  width: 140px;
  height: auto;
  transform-origin: top center; /* 上の線のてっぺんを支点にする */
}

/* 2列グリッド。個数が変わっても左上から順に左詰めで並ぶ */
.bra-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
    margin-top: 20px;
}

/* 縦のドット線：ギャップの中央に正確に配置する */
.bra-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1px dotted var(--section-border);
}

.bra-item {
  position: relative;
  padding: 24px 0;
}

/* 横のドット線は列またぎで1本の要素として描くことで、繋ぎ目でのドットの位相ズレ（重なり）をなくす */
.bra-item:nth-child(2n+1):not(:nth-last-child(-n+2))::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px; /* border-bottom(1px)の分だけ下にずらし、実際の線の位置に合わせる */
  width: calc(200% + 20px); /* 自分の幅 + 列間の隙間(20px) + 右列アイテムの幅 */
  border-bottom: 1px dotted var(--section-border);
}

.bra-item__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  /* 初期状態：小さく縮めて透明にしておく */
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s ease;
}

/* 画面に入ったら.is-visibleが付き、ぽよんっと弾んで登場する
   （cubic-bezierの3つ目の値が1を超えているため、途中で少し大きくなってから戻る） */
.bra-item__img.is-visible {
  opacity: 1;
  transform: scale(1);
}

.bra-item__brand {
  margin: 0 0 8px;
  font-size: 11px;
color: var(--section-border);
  text-align: center;
    font-weight: 500;
}

.bra-item__name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--section-border);
  text-align: center;
}

.bra-item__price {
  margin: 0 0 15px;
    font-size: 11px;
    font-weight: 400;
  color: var(--section-border);
  text-align: center;
}

.bra-item__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 8px 22px;
  background: var(--section-border);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  border-radius: 999px;
  text-align: center;
  /* ぼかしを弱めてパキッとしたシャドウに */
  box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.6);
}


.bra-item__desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
color: var(--section-border);
	text-align: justify;
	text-justify: inter-ideograph;
}

.bra-item__info {
	margin-top: 30px;
	font-size: 11px;
	line-height: 1;
	color: var(--section-border);
	text-align: center;
}

/* ==========================================================================
   セクション08（よくあるご質問）専用コンテンツ
   ========================================================================== */
.faq__heading-img {
  display: block;
  /* section の padding-top(48px) を打ち消して、画像上端を枠の上側にぴったり合わせる */
  margin: -48px auto 34px;
  width: 140px;
  height: auto;
  transform-origin: top center; /* 上の線のてっぺんを支点にする */
}

.faq-item {
  border-bottom: 1px solid var(--section-border);
  padding: 15px 0;
}

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

.faq-item__question {
  display: flex;
  align-items: center;
  gap: 19px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--section-border);
  -webkit-tap-highlight-color: transparent;
}

.faq-item__q-icon {
  flex-shrink: 0;
  width: 18px;
  height: auto;
}

.faq-item__q-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}

.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.faq-item__answer-inner {
  margin-top: 16px;
  padding: 16px;
  border: 1px dotted var(--section-border);
  font-size: 15px;
  line-height: 1.7;
  color: var(--section-border);
}

/* ==========================================================================
   セクション09（キャンペーン対象店舗）専用コンテンツ
   背景は#fe4d20（オレンジ）のため、文字・線は白系で構成する
   ========================================================================== */
.stores__top-line {
  width: 1px;
  height: 35px;
  /* section の padding-top(48px) を打ち消して、線の上端を枠の上辺にぴったり合わせる */
  margin: -48px auto 24px;
  background: #ffffff;
}

.stores__logo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0;
}

.stores__heading {
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.stores__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 30px;
  padding: 24px 24px;
  background: #ffffff;
  color: var(--section-border) !important;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none !important;
  border-radius: 999px;
  text-align: center;
  /* CHECKボタンと同じシャドウ */
  box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.6);
}


.stores__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.stores__divider-line {
  flex: 1;
  height: 0;
  border-top: 1px dotted #ffffff;
}

.stores__divider-text {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
}

.stores__note {
  margin: 0;
    font-size: 13px;
    line-height: 1.7;
  color: #ffffff;
	text-align: justify;
	text-justify: inter-ideograph;
}

/* ==========================================================================
   セクション10（関連サービス）専用コンテンツ
   ========================================================================== */
.related__heading {
  margin: 0 0 40px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--text-main);
}

.related-block {
  margin: 0 0 48px;
}

.related-block--last {
  margin-bottom: 0;
}

.related-block__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.related-block__divider-line {
  flex: 1;
  height: 0;
  border-top: 1px dotted var(--section-border);
}

.related-block__divider-text {
  flex-shrink: 0;
    font-size: 16px;
    font-weight: 500;
  color: var(--text-main);
}

.related-block__banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 0 20px;
}

.related-block__desc {
  margin: 0 0 8px;
    padding: 0 17px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-main);
	text-align: justify;
	text-justify: inter-ideograph;
}

.related-block__list {
  list-style: none;
  margin: 0 0 20px;
    padding: 0 17px;
}

.related-block__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-main);
  border-bottom: 1px dotted var(--text-main);
}

.related-block__list li:last-child {
  border-bottom: none;
}

.related-block__check {
  flex-shrink: 0;
  width: 13px;
  height: auto;
  margin-top: 4px;
}

.related-block__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-radius: 999px;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  text-align: center;
  /* CHECKボタンと同じシャドウ */
  box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.6);
    width: calc(100% - 34px);
    margin: auto;
}


.related-block__cta--1 {
  background: #E43D2F;
}

.related-block__cta--2 {
  background: #FCABA4;
}

.related-block__cta--3 {
  background: #D23155;
}

/* ==========================================================================
   レスポンシブ：実機のスマホ幅で見たときは、左右パネルを消して
   .app を画面幅いっぱいに広げる
   ========================================================================== */
@media (max-width: 767px) {
  .side-panel {
    display: none;
  }

  .app {
    width: 100%;
    box-shadow: none;
  }

  .app__header,
  .menu-overlay,
  .fixed-cta {
    width: 100%;
  }
}

/* ==========================================================================
   ホバー効果（PC表示時のみ）
   スマホ（タップ操作）ではホバー状態が残ってしまう（スティッキーホバー）ため、
   PC判定の768px以上でのみ有効にする。
   ========================================================================== */
@media (min-width: 768px) {
  a:hover {
    text-decoration: none !important;
    color: #fff;
  }

  a.menu-overlay__item:hover {
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    text-decoration: none !important;
    color: #000 !important;
  }

  .menu-overlay__cta:hover {
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    text-decoration: none !important;
    background: #000 !important;
  }

  .fixed-cta__link:hover {
    text-decoration: none !important;
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    background: #000;
  }

  .campaign__cta:hover {
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    text-decoration: none !important;
    background: #000;
  }

  .points__cta:hover {
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    text-decoration: none !important;
    background: #000;
  }

  .bra-item__check:hover {
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    text-decoration: none !important;
    background: #000;
  }

  a.stores__cta:hover {
    color: #fff !important;
    text-decoration: none !important;
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    background: #000;
  }

  a.related-block__cta:hover {
    text-decoration: none !important;
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    background: #000;
  }
}