*{box-sizing:border-box;}
body{
  margin:0;
  background:#e8d1bf;
  font-family:"fot-udmincho-pr6n", serif;
  font-weight:700;
  color:#3b2a1a;
}

.lp-shell{
  display:flex;
  justify-content:center;
}

/* スマホ幅を基準（PCでもスマホ幅＋外側背景） */
.lp-phone{
  width:100%;
  max-width:430px;
}

/* セクション共通（画像の上下間隔） */
.lp-section{
  margin:24px 0;
}

/* 画像 */
img{
  display:block;
  height:auto;
}
.img-full{ width:100%; }
.img-90{
  width:90%;
  margin:0 auto;
}

/* padding */
.lp-pad{
  padding:18px 18px 24px;
}

/* =========================
   FAQ（参考寄せ）
   - Q：ピンク帯
   - A：ベージュ地に文章（白カード禁止）
========================= */
.faq-title{
  font-size:18px;
  margin:0 0 14px;
  color:#2c1b10;
}

.faq-list{
  display:block;
}

.faq-item{
  margin-bottom:10px;
}
.faq-item:last-child{
  margin-bottom:0;
}

.faq-q{
  width:80%;
  margin:0 auto;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:12px 12px;
  border-radius:6px;

  /* 参考のピンク帯 */
  background:#d6a1aa;
  color:#fff;

  font-size:13px;
  line-height:1.35;
  text-align:left;
}

.faq-q-text{
  padding-right:10px;
}

.faq-icon{
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid rgba(255,255,255,.95);
  transition:transform .2s ease;
}

/* open */
.faq-item.is-open .faq-icon{
  transform:rotate(180deg);
}

/* A（カードにしない：背景はページと同化） */
.faq-a{
  display:none;            /* デフォで閉じる */
  width:80%;               /* ←A全体の幅をここで決める */
  margin:0 auto;           /* ←中央寄せ */
  padding:10px 0 6px;      /* ←左右paddingを0に（ズレ防止） */
}
.faq-item.is-open .faq-a{
  display:block;
}

.faq-a p{
  width:100%;              /* ←pは親幅いっぱい */
  margin:0;                /* ←段落間を付けたいなら下で調整 */
  font-size:13px;
  line-height:1.85;
  color:#2c1b10;
}

/* 段落が複数ある場合の見やすさ（任意） */
.faq-a p + p{
  margin-top:8px;
}

/* =========================
   FAQ下テキスト（参考寄せ）
========================= */
.lp-bottom-text{
  width:80%;
  margin:0 auto;
}

.lp-h3{
  font-size:16px;
  margin:18px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(60,35,20,.35);
  color:#2c1b10;
}

.lp-p{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.5;
  color:#2c1b10;
}

.lp-ul{
  margin:0 0 10px;
  padding-left:18px;
  font-size:13px;
  line-height:1.9;
  color:#2c1b10;
}

.lp-final-box{
  background:rgba(255,255,255,.75);
  border-radius:0; /* 参考は角丸が強くない */
  padding:18px 16px;
  margin-top:14px;
}

.lp-final-title{
  margin:0 0 10px;
  font-size:18px;
  color:#2c1b10;
}

.lp-final-body{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#2c1b10;
}

/* =========================
   最下部CTA（参考のピンク帯）
========================= */
.lp-footer-cta{
  background:#cfa2a8;
  padding:14px 14px 18px;
  margin-bottom:0;
  padding-bottom: 40px;
}

.lp-footer-brand{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:16px;
  color:rgba(255,255,255,.9);
  font-size:11px;
  letter-spacing:.18em;
  margin-bottom:10px;
}

.lp-footer-brand-right{
  font-size:13px;
  letter-spacing:.28em;
}

.lp-footer-btns{
  display:flex;
  gap:10px;
  justify-content:center;
}

.lp-footer-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;

  width:48%;
  padding:10px 8px;

  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;

  color:#fff;
  font-size:13px;
}

/* PC表示（スマホ幅＋外側背景） */
/* PC表示：スマホ幅コンテンツに影を付ける */
@media (min-width: 768px){
  .lp-phone{
    background:#e8d1bf;                 /* 中身は従来通り */
    border-radius:18px;                 /* すでにあればそのまま */
    box-shadow:
      0 12px 40px rgba(0,0,0,.18),       /* メインの柔らかい影 */
      0 4px 12px rgba(0,0,0,.10);        /* 近接の補助影 */
  }
}


/* =========================
   画像上オーバーレイ
========================= */
.img-overlay{
  position: relative;
}

.img-overlay > img{
  width: 100%;
  height: auto;
  display: block;
}

/* 画像上ボタン：centerだけで位置決めを完結させる（確実に効く） */
a.overlay-btn.overlay-btn--center{
  position: absolute !important;
  left: 50% !important;
  top: var(--btn-top, 62%) !important;            /* ← ここが効く */
  transform: translate(-50%, -50%) !important;    /* ← 中心基準 */
  z-index: 10 !important;
  width: min(86%, 520px) !important;

  --btn-top: 62%;
}

/* SP微調整 */
@media (max-width: 430px){
  a.overlay-btn.overlay-btn--center{
    --btn-top: 60%;
  }
}

/* ボタン画像の見え方 */
.overlay-btn img{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   画像4と5の間：テキストセクション
========================================= */
.lp-mechanism{
  /* 画像と同じく上下に少し間隔 */
  margin: 40px auto;
}

/* 中身（スクショのように中央にまとまる） */
.lp-mechanism__inner{
  width: 85%;
  max-width: 720px;
  margin: 0 auto;
}

/* 見出し */
.lp-mechanism__title{
  margin: 0 0 14px;
  font-family: "fot-udmincho-pr6n", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: #3b2a1e;

  display: inline-block;     /* ←これが肝 */
  position: relative;
  padding-bottom: 10px;
}

.lp-mechanism__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;               /* ←見出し文字と同じ長さ */
  height: 2px;
  background-color: #3b2a1e;
}

/* 本文 */
.lp-mechanism__text{
  margin: 0 0 14px;
  font-family: "fot-udmincho-pr6n", serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #3b2a1e;
}

.lp-mechanism__text:last-child{
  margin-bottom: 0;
}

/* SP微調整 */
@media (max-width: 480px){
  .lp-mechanism__inner{
    padding: 5px 16px;
    border-radius: 16px;
    width: 95%;
  }
  .lp-mechanism__title{
    font-size: 16px;
  }
  .lp-mechanism__text{
    font-size: 14px;
  }
}

/* =========================
  Motion pack (CTA + reveal)
  - CTA: 目立つ（pulse + shine + micro-bounce）
  - Other: 自然（fade-up）
========================= */

/* アクセシビリティ：動きが苦手な人は停止 */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- CTA判定（LINEの画像ボタン＆オーバーレイCTA＆フッターCTA） --- */
.lp-section a[href*="page.line.me"] img,
.overlay-btn img,
.lp-footer-btn{
  will-change: transform, filter;
}

/* クリック率UP：視線を誘導する“呼吸”＋小さなバウンス */
@keyframes ctaPulse {
  0%, 100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 10px 18px rgba(0,0,0,.14)); }
  50%      { transform: translateZ(0) scale(1.03); filter: drop-shadow(0 14px 22px rgba(0,0,0,.20)); }
}
@keyframes ctaBob {
  0%, 100% { transform: translateZ(0) translateY(0); }
  50%      { transform: translateZ(0) translateY(-3px); }
}

/* キラッと流れる“shine” */
.lp-section a[href*="page.line.me"],
.overlay-btn{
  position: relative;
  display: block;
  border-radius: 14px;
}

.lp-section a[href*="page.line.me"]::after,
.overlay-btn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 18px;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.35) 18%,
      rgba(255,255,255,0) 36%);
  transform: translateX(-120%);
  opacity: 0;
}

@keyframes ctaShine {
  0%   { transform: translateX(-120%); opacity: 0; }
  15%  { opacity: .9; }
  45%  { opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* “注目中”だけ動かす（JSで .is-attention を付与） */
.is-attention > img{
  animation:
    ctaPulse 1.8s ease-in-out infinite,
    ctaBob  2.6s ease-in-out infinite;
}
.is-attention::after{
  animation: ctaShine 3.2s ease-in-out infinite;
}

/* PC hover：押したくなる反応（SPはhoverなしでもOK） */
@media (hover:hover){
  .lp-section a[href*="page.line.me"]:hover img,
  .overlay-btn:hover img,
  .lp-footer-btn:hover{
    transform: translateZ(0) scale(1.03);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.22));
  }
}

/* --- 自然な表示（reveal） --- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* 画像はごく自然に（少しだけ） */
.reveal-img{
  opacity: 0;
  transform: translateY(10px) scale(.995);
  transition: opacity .75s ease, transform .75s ease;
  will-change: opacity, transform;
}
.reveal-img.is-inview{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* フッターCTAは少しだけ強めに */
.lp-footer-cta.reveal{
  transform: translateY(18px);
}

/* フッターCTA：文字を縦横ど真ん中に固定（後勝ち状態を1箇所に統合） */
.lp-footer-btns{
  display: flex;
  align-items: stretch;
  gap: 14px;              /* 既存に合わせて調整 */
}

.lp-footer-btn{
  flex: 1 1 0;
  width: auto;
  min-height: 56px;

  padding: 0 16px !important;        /* 上下paddingを0にして高さで中央化 */
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;

  display: flex !important;          /* inline-flex を潰す */
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box;
}

/* さらに小さいSPだけ微調整 */
@media (max-width: 360px){
  .lp-footer-btn{
    font-size: 12px;
    min-height: 52px;
  }
}

/* ボタン内にspan等がある場合も保険で中央 */
.lp-footer-btn > *{
  display: inline-block;
  transform: translateY(0);
}

/* PC背景：背景画像を敷く（SPは従来通り単色） */
@media (min-width: 768px){
  body{
    background: url("assets/img/pc_back.png") center / cover no-repeat fixed;
  }
}