@charset "utf-8";
/* ==========================================================================
   lp-extra.css
   houjinlp-style.css / anime.css の上に重ねる追加・上書き用スタイル。
   既存クラスの意味は変えず、不足しているビジュアル（新規SVG装飾・
   コスト比較表・フローティングメニュー・フォームの補助UI・デモバナー・
   イラスト演出）だけをここに足す。
   ========================================================================== */

:root {
  --lp-accent: #e67e22;
  --lp-accent-dark: #c55f10;
  --lp-danger: #d40000;
  --lp-danger-bg: #ffdede;
  --lp-good-bg: #e9f0f7;
  --lp-border: #dbe7f2;
}

/* --------------------------------------------------------------------
   1. 不足画像7点を新規SVGに差し替え
   background-image のみを上書きする（background-size 等の初期化を防ぐため
   shorthand の background は使わない）
   -------------------------------------------------------------------- */
body {
  background-image: url("/aoriika/img/fv_bg.svg");
}
#houjinlp-lineup:before {
  background-image: url("/aoriika/img/bg_wave_t.svg");
}
#houjinlp-lineup:after {
  background-image: url("/aoriika/img/bg_wave_b.svg");
}
.houjinlp-intro__list > li:before {
  background-image: url("/aoriika/img/icon_check.svg");
}
.line-main i {
  background-image: url("/aoriika/img/icon_line.svg");
}
.houjinlp-reason3-nav__list .in .num:before,
.houjinlp-reason3-nav__list .in .num:after {
  background-image: url("/aoriika/img/reason_fig_s.svg");
}
.houjinlp-reason3-item .title .icon:before,
.houjinlp-reason3-item .title .icon:after {
  background-image: url("/aoriika/img/reason_fig_l.svg");
}

/* 波をゆっくり横に流す */
#houjinlp-lineup:before,
#houjinlp-lineup:after {
  animation: lpWaveDrift 26s linear infinite;
}
#houjinlp-lineup:after {
  animation-duration: 32s;
  animation-direction: reverse;
}
@keyframes lpWaveDrift {
  from { background-position-x: 0; }
  to   { background-position-x: 400px; }
}

/* --------------------------------------------------------------------
   1b. 商品説明文中のセールスポイント（<b>）をマーカー装飾
   houjinlp-intro__list や houjinlp-title の <b> と同じ黄色マーカー
   スタイルに揃える（太字だとフォント側でウェイト差が出にくいため）
   -------------------------------------------------------------------- */
.houjinlp-lineup-in p b {
  font-weight: 500;
  background: var(--houjinlp-yellow-color);
}

/* --------------------------------------------------------------------
   2. 画像の基本レスポンシブ対応（既存CSSが固定幅前提のため補強）
   -------------------------------------------------------------------- */
.houjinlp img {
  max-width: 100%;
  height: auto;
}
.houjinlp-lineup-gallery__track img,
.houjinlp-footer-logo img,
.to-sns img,
.houjinlp-contact-main .icon img {
  height: auto;
}

/* --------------------------------------------------------------------
   3. デモ版バナー
   -------------------------------------------------------------------- */
#demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 46px 10px 16px;
  background: linear-gradient(to bottom, #fff6d8, #ffe9a8);
  border-bottom: 2px solid #e2b93a;
  color: #6b5100;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
#demo-banner:not([hidden]) {
  display: flex;
}
#demo-banner strong {
  color: #b3390a;
}
#demo-banner p {
  margin: 0;
}
#demo-banner-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  color: #6b5100;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#demo-banner-close:hover {
  background: rgba(0, 0, 0, 0.16);
}

body.demo-banner-active {
  margin-top: var(--demo-banner-h, 40px);
}
@media (max-width: 800px) {
  body.demo-banner-active .houjinlp-header {
    top: var(--demo-banner-h, 40px);
  }
}

/* --------------------------------------------------------------------
   4. header 補助（サブロゴ・お問い合わせアイコンの縦積み）
   -------------------------------------------------------------------- */
.houjinlp-header-sublogo {
  display: block;
  margin: 4px 0 0 10px;
  max-width: 150px;
  height: auto;
}
.houjinlp-contact-main .icon a {
  flex-direction: column;
}
.houjinlp-contact-main .icon a img {
  display: block;
  margin: 0 auto 2px;
}
@media (max-width: 800px) {
  .houjinlp-header-sublogo {
    display: none;
  }
}

/* --------------------------------------------------------------------
   6. 商品ラインナップ：料理写真の横スクロールギャラリー
   -------------------------------------------------------------------- */
.houjinlp-lineup-gallery {
  margin: 0 0 70px;
}
.houjinlp-lineup-gallery__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.houjinlp-lineup-gallery__track::-webkit-scrollbar {
  height: 8px;
}
.houjinlp-lineup-gallery__track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}
.houjinlp-lineup-gallery__track img {
  flex: 0 0 auto;
  width: 230px;
  height: 230px;
  object-fit: cover;
  border-radius: 16px;
  scroll-snap-align: start;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
@media (max-width: 815px) {
  .houjinlp-lineup-gallery {
    margin-bottom: 40px;
  }
  .houjinlp-lineup-gallery__track img {
    width: 150px;
    height: 150px;
    border-radius: 12px;
  }
}

/* --------------------------------------------------------------------
   7. コスト比較表
   -------------------------------------------------------------------- */
.houjinlp-costcompare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.houjinlp-costcompare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(34, 109, 179, 0.1);
}
.houjinlp-costcompare-table th,
.houjinlp-costcompare-table td {
  padding: 18px 16px;
  text-align: center;
  font-size: 18px;
  font-family: var(--font-yugo);
  border-bottom: 1px solid var(--lp-border);
  line-height: 1.6;
}
.houjinlp-costcompare-table thead th {
  background: var(--houjinlp-main-color);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-bottom: none;
}
.houjinlp-costcompare-table tbody th {
  background: #eff7f7;
  width: 22%;
  text-align: left;
  font-weight: 700;
  color: #333;
}
.houjinlp-costcompare-table tbody tr:last-child th,
.houjinlp-costcompare-table tbody tr:last-child td {
  border-bottom: none;
}
.houjinlp-costcompare-table .cc-row-highlight th,
.houjinlp-costcompare-table .cc-row-highlight td {
  background: #fffaf0;
  padding-top: 22px;
  padding-bottom: 22px;
}
.cc-bad {
  color: #c0392b;
}
.cc-good {
  color: var(--houjinlp-main-color);
}
.cc-num {
  font-size: 26px;
  font-weight: 800;
  display: inline-block;
}
.cc-note {
  font-size: 14px;
  font-weight: 400;
  color: #777;
  margin-left: 2px;
}
.cc-badge {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.cc-badge--bad {
  background: var(--lp-danger-bg);
  color: #d9534f;
}
.cc-badge--good {
  background: var(--lp-good-bg);
  color: var(--houjinlp-main-color);
}
.cc-badge--good .cc-num {
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 815px) {
  .houjinlp-costcompare-table th,
  .houjinlp-costcompare-table td {
    padding: 12px 8px;
    font-size: 13px;
  }
  .houjinlp-costcompare-table thead th {
    font-size: 14px;
  }
  .cc-num {
    font-size: 18px;
  }
  .cc-badge {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* --------------------------------------------------------------------
   8. フォーム：注記・エラー表示・金額内訳
   -------------------------------------------------------------------- */
.houjinlp-form-note {
  color: var(--lp-danger);
  text-align: center;
  font-size: 16px;
  font-family: var(--font-yugo);
  margin: 0 0 30px;
  line-height: 1.8;
}
.lp-error {
  display: none;
  color: var(--lp-danger);
  font-size: 14px;
  margin-top: 8px;
}
.lp-error.show {
  display: block;
}
.houjinlp-form-item-in select.houjinlp_input {
  appearance: auto;
  cursor: pointer;
}
.lp-quote {
  background: var(--houjinlp-bg1);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 17px;
  font-family: var(--font-yugo);
}
.lp-quote-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.lp-quote-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: dashed 2px var(--lp-border);
  font-weight: 700;
  font-size: 22px;
  color: var(--houjinlp-main-color);
}
.houjinlp-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wpcf7-response-output {
  border-radius: 8px;
  padding: 12px;
  margin-top: 20px;
}
.wpcf7-response-output.is-error {
  background: var(--lp-danger-bg);
  color: #b3390a;
}
.wpcf7-response-output.is-success {
  background: var(--lp-good-bg);
  color: var(--houjinlp-main-color);
}

@media (max-width: 815px) {
  .lp-quote {
    font-size: 14px;
    padding: 14px 16px;
  }
  .lp-quote-total {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------
   9. フローティングメニュー
   -------------------------------------------------------------------- */
#houjin-floating-menu {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
#houjin-floating-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#floating-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}
#houjin-floating-menu.open #floating-menu-list {
  max-height: 320px;
  opacity: 1;
}
.fm-btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-yugo);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.fm-btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.fm-btn--product {
  background: linear-gradient(to bottom, #2f81cc, #226db3);
}
.fm-btn--contact {
  background: linear-gradient(to bottom, #f39b3d, #e67e22);
}
.fm-btn--top {
  background: linear-gradient(to bottom, #999, #666);
}
#floating-menu-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--houjinlp-main-color);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
#houjin-floating-menu.open #floating-menu-toggle {
  background: #c0392b;
  transform: rotate(90deg);
}

@media (max-width: 800px) {
  #houjin-floating-menu {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }
  .fm-btn {
    font-size: 12px;
    padding: 11px 16px;
  }
  #floating-menu-toggle {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------
   10. スタッフ案内
   -------------------------------------------------------------------- */
#houjinlp-staff .houjinlp-inner {
  text-align: center;
}
.houjinlp-staff-img {
  display: inline-block;
  max-width: 650px;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.houjinlp-staff-text {
  margin-top: 26px;
  font-size: 18px;
  font-family: var(--font-yugo);
}
@media (max-width: 815px) {
  .houjinlp-staff-text {
    font-size: 14px;
    margin-top: 16px;
  }
}

/* --------------------------------------------------------------------
   11. thanks.html 用の簡易スタイル
   -------------------------------------------------------------------- */
.houjinlp-thanks {
  padding: 260px 0 120px;
  text-align: center;
  min-height: 60vh;
}
.houjinlp-thanks h2 {
  font-size: 32px;
  margin-bottom: 20px;
}
.houjinlp-thanks-id {
  display: inline-block;
  background: var(--houjinlp-bg1);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 20px;
  font-weight: 700;
  color: var(--houjinlp-main-color);
  margin: 20px 0 30px;
}
.houjinlp-thanks-note {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: left;
  background: #fff;
  border-radius: 14px;
  padding: 26px 30px;
  font-size: 15px;
  line-height: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.houjinlp-thanks-back {
  display: inline-block;
  font-size: 16px;
  font-family: var(--font-yugo);
  padding: 15px 40px;
  color: #fff;
  background: var(--houjinlp-main-color);
  border-radius: 1000px;
}
@media (max-width: 800px) {
  .houjinlp-thanks {
    padding: 130px 20px 80px;
  }
  .houjinlp-thanks h2 {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------
   12. prefers-reduced-motion：すべての演出を止める（必須）
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fuwafuwa,
  #houjinlp-lineup:before,
  #houjinlp-lineup:after {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------
   iPhone向けの調整

   実機幅（375/390px）で確認して、実害があったのは次の3点。

   1. チェックボックスが 13px、ラベルのタップ高さが 15px しかなかった。
      Appleのガイドラインは44pt。指では押しにくく、
      「希望サンプル」を選び損ねる＝受注機会をそのまま落とす。
   2. デモ版バナーが3行になり、画面高の約1割を常に潰していた。
   3. コスト比較表が横スクロール必須だった。元LPはSPでも3列のまま
      収める設計だったので、それに合わせる。

   なお入力欄の font-size は既に16pxあり、iOSの自動ズーム
   （16px未満だとフォーカス時にページが拡大される）は起きない。
   ここを16px未満に下げないこと。
   -------------------------------------------------------------------- */
@media (max-width: 600px) {

  /* --- 1. タップ領域の確保 ------------------------------------------ */

  /* 選択肢のレイアウトと選択中の見た目は lp-form.css の
     「3. 希望サンプルの選択カードと、選択肢のピル」に移した。
     ここに残っていた .wpcf7-list-item のルールは、選択時に font-weight を
     変えて行を動かしていたので削除している。
     チェックボックス／ラジオの大きさだけはここで確保する。 */
  #houjinlp-form input[type="checkbox"],
  #houjinlp-form input[type="radio"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #226db3;
  }

  /* --- 2. デモ版バナーを1〜2行に収める ------------------------------ */

  #demo-banner {
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 42px 8px 12px;
  }
  /* 詳しい説明はSPでは省く。要点（実際には発送されない）だけ残す */
  .demo-banner-detail {
    display: none;
  }

  /* --- 3. コスト比較表を3列のまま収める ----------------------------- */

  .houjinlp-costcompare-table {
    min-width: 0;
    table-layout: fixed;
  }
  .houjinlp-costcompare-table th,
  .houjinlp-costcompare-table td {
    padding: 10px 5px;
    font-size: 11px;
    word-break: break-all;
  }
  .houjinlp-costcompare-table thead th {
    font-size: 12px;
  }
  .houjinlp-costcompare-table th:first-child {
    width: 22%;
  }
  .cc-num {
    font-size: 15px;
  }
  .cc-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* ====================================================================
   iPhone実機のフィードバック対応
   （余白／要素の重なり／アニメーション）

   クライアント指摘:
     「余白がおかしいところが多い」
     「重なっているところもある」
     「アニメーションのやつもなんか変」
   ==================================================================== */

/* --------------------------------------------------------------------
   A. 固定ヘッダーが要素を隠す問題

   houjinlp-style.css は SP でヘッダーを position:fixed にしている。
   その結果、画面上部の 53〜127px が常に覆われ、
   「理由N」の吹き出しバッジがそこを通過するときに本体だけ隠れ、
   画像からはみ出した尻尾の三角だけが宙に浮いて見えていた。

   下スクロールでヘッダーを隠し、上スクロールで戻す。
   画面を広く使えるうえ、バッジが隠れる状況もなくなる。
   クラスの付け external は lp.js が行う。
   -------------------------------------------------------------------- */
.houjinlp-header {
  transition: transform 0.28s ease;
  will-change: transform;
}
body.header-hidden .houjinlp-header {
  transform: translateY(calc(-100% - var(--demo-banner-h, 0px)));
}

/* アンカーで飛んだ先が固定ヘッダーの下に潜らないようにする */
html {
  scroll-padding-top: calc(var(--demo-banner-h, 0px) + 90px);
}

/* --------------------------------------------------------------------
   B. 「理由N」バッジを li の内側に収める

   元CSSは top:-40px で li の外に出しているため、
   前のカードに食い込み、固定ヘッダーにも隠れやすい。
   li に上余白を持たせ、バッジをその中に置く。
   尻尾が画像に少しかかる元の意匠は保つ。
   -------------------------------------------------------------------- */
@media (max-width: 815px) {
  .houjinlp-reason7__list > li {
    margin-bottom: 56px;
    padding-top: 42px;
  }
  .houjinlp-reason7__list > li h3 {
    top: 0;
  }
}

/* --------------------------------------------------------------------
   C. FV上部の空白を詰める

   元CSSは fv_bg.jpg に描かれていた絵柄のために大きな余白を取っている。
   階調だけの代替背景ではこれが単なる空白になり、実機では
   ヘッダーとFV画像の間に PC 253px / SP 85px の白帯ができていた。

   詰める先の基準:
     PC  — ヘッダーは position:absolute で body の上余白に重なる。
           body の padding-top:200px はヘッダー実高197pxとほぼ同じなので触らず、
           純粋な余りである .houjinlp-fv の padding-top だけを削る。
     SP  — ヘッダーは position:fixed（houjinlp-style.css の 815px以下）。
           body の padding-top が固定ヘッダー実高74pxを下回るとFV画像が潜る。
           デモバナーの分は body の margin-top（セクション3）が既に持っているので、
           padding-top 側で二重に足さないこと。以前の calc は二重計上で、
           バナー表示中だけ53px余分に空いていた。
   -------------------------------------------------------------------- */
.houjinlp-fv {
  padding-top: 24px;
}
@media (max-width: 1024px) {
  .houjinlp-fv {
    padding-top: 20px;
  }
}
@media (max-width: 800px) {
  body {
    padding-top: 86px;
  }
  .houjinlp-fv {
    padding-top: 10px;
  }
}

/* --------------------------------------------------------------------
   D. スクロール演出の遅延を外す

   anime.css の .anime-dlNNs は transition-delay を最大0.7s付ける。
   横並びのカードが順に出る用途なら効果的だが、
   「理由N」のように1枚ずつ縦に離れている要素に付けると、
   画面に入ってから0.7秒間なにも出ない＝固まったように見える。
   縦積みの要素では遅延を打ち消す。
   -------------------------------------------------------------------- */
.houjinlp-reason7__list > li[class*="anime-dl"],
.houjinlp-reason3-item[class*="anime-dl"],
.houjinlp-lineup__list > li[class*="anime-dl"],
.houjinlp-store-card[class*="anime-dl"] {
  transition-delay: 0s !important;
}

/* 少しだけ動きを大きくして、出たことが分かるようにする */
@media (max-width: 800px) {
  .fadeIn-up {
    transform: translateY(14px);
    transition-duration: 0.45s;
  }
}

/* --------------------------------------------------------------------
   E. 金額バッジの演出

   コスト比較表の金額は数字を動かさず、確定値を最初から出す。
   途中の誤った金額が見えるのを避けるため（この表はLPの訴求の核）。
   代わりに「約1,643円お得」のバッジだけを出現させる。
   -------------------------------------------------------------------- */
.cc-badge {
  opacity: 0;
  transform: translateY(6px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.cc-badge.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .houjinlp-header,
  .cc-badge {
    transition: none !important;
  }
  .cc-badge {
    opacity: 1;
    transform: none;
  }
  body.header-hidden .houjinlp-header {
    transform: none;
  }
}