/* Bondi 公式トップ専用スタイル（ブログ共通のlp.cssとは独立） */
/* コンセプト：白基調×ブランドピンク。「ふたりを結ぶ赤い糸」がページを縦に貫く。
   カップルの世界＝ピンク／ファミリーの世界＝グリーンで塗り分ける。 */
:root{
  --ink:#33272E;          /* 見出し・本文（あたたかい墨色） */
  --muted:#8B7A82;        /* 補足テキスト */
  --accent:#FF6B8A;       /* ブランドピンク */
  --accent-dark:#E14E71;  /* 濃いピンク（hover・強調） */
  --blush:#FFF5F7;        /* 薄ピンクの面 */
  --cream:#FFFBF8;        /* ごく薄いクリーム */
  --family:#2BA088;       /* ファミリーモードのグリーン */
  --family-bg:#F1FAF6;    /* ファミリー面 */
  --line:#F3E2E8;         /* 罫線 */
  --card:#FFFFFF;
  --radius:20px;
  --shadow:0 12px 34px rgba(200,71,106,.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.9;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
}
h1,h2,h3,p{word-break:auto-phrase;}
a{color:var(--accent-dark);text-decoration:none;}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ===== ヘッダー ===== */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;height:64px;gap:26px;}
.logo{font-family:"Zen Maru Gothic",sans-serif;font-size:24px;font-weight:900;color:var(--ink);letter-spacing:.03em;}
.logo .dot{color:var(--accent);}
nav.global{display:flex;gap:22px;margin-left:auto;}
nav.global a{font-size:14px;font-weight:600;color:var(--muted);}
nav.global a:hover{color:var(--accent-dark);}
.head-cta{
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;
  padding:9px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(255,107,138,.35);transition:background .15s,transform .12s;
}
.head-cta:hover{background:var(--accent-dark);transform:translateY(-1px);}
@media(max-width:760px){nav.global{display:none;}}

/* ===== ヒーロー ===== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#FFFDFD 0%,var(--blush) 45%,#FFECF1 100%);
  padding:72px 0 96px;
}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-dark);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 16px;margin:0 0 18px;
}
.hero h1{
  font-size:44px;font-weight:900;line-height:1.45;margin:0 0 16px;letter-spacing:.02em;
}
.hero h1 .tie{color:var(--accent-dark);}
.hero .sub{color:var(--muted);font-size:16px;margin:0 0 30px;max-width:30em;}
.hero .sub b{color:var(--ink);font-weight:700;}

/* 入手ボタン群 */
.get-lead{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.1em;margin:0 0 10px;}
.get-btns{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;}
.btn-web{
  display:flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;border-radius:14px;padding:10px 22px;
  font-weight:800;font-size:16px;box-shadow:0 10px 26px rgba(255,107,138,.4);
  transition:background .15s,transform .12s,box-shadow .15s;
}
.btn-web small{display:block;font-size:11.5px;font-weight:600;opacity:.9;line-height:1.3;}
.btn-web:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(200,71,106,.35);}
.badge-store img{height:52px;width:auto;}
.badge-store{display:flex;align-items:center;transition:transform .12s,opacity .15s;}
.badge-store:hover{transform:translateY(-2px);opacity:.85;}
.soon{font-size:12px;color:var(--muted);align-self:center;}
.hero-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;}
/* スマホ：ボタンを縦積みにして横はみ出しを防ぐ */
@media(max-width:560px){
  .get-btns{flex-direction:column;align-items:stretch;gap:14px;}
  .btn-web{flex-direction:column;gap:2px;text-align:center;justify-content:center;padding:12px 20px;}
  .badge-store{justify-content:center;}
  .soon{text-align:center;}
}
.hero .wrap > *{min-width:0;}

/* 実機モックアップ（2台） */
.phones{position:relative;height:520px;}
.phone{
  position:absolute;width:236px;aspect-ratio:480/865;border-radius:34px;
  border:7px solid #33272E;background:#33272E;overflow:hidden;
  box-shadow:0 30px 60px rgba(51,39,46,.28);
}
.phone img{width:100%;height:100%;object-fit:cover;}
.phone.back{left:8%;top:36px;transform:rotate(-7deg);opacity:.96;}
.phone.front{right:6%;top:0;transform:rotate(4deg);z-index:2;}
/* 浮かぶ機能チップ */
.chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink);
  box-shadow:var(--shadow);animation:float 5s ease-in-out infinite;
}
.chip svg{width:15px;height:15px;stroke:var(--accent-dark);flex:none;}
.chip.c1{left:-4%;top:4%;}
.chip.c2{right:-2%;top:40%;animation-delay:1.4s;}
.chip.c3{left:2%;bottom:4%;animation-delay:2.6s;}
.chip.c4{right:-4%;top:-3%;animation-delay:3.4s;}
.chip.c5{right:0;bottom:-2%;animation-delay:4.2s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media(max-width:920px){
  .hero{padding:52px 0 64px;}
  .hero .wrap{grid-template-columns:1fr;gap:44px;}
  .hero h1{font-size:33px;}
  .phones{height:440px;max-width:430px;margin:0 auto;width:100%;}
  .phone{width:200px;}
  .chip.c1{left:0;} .chip.c2{right:0;} .chip.c3{left:4%;}
  .chip.c4{right:2%;top:0;} .chip.c5{display:none;}
}

/* ===== 赤い糸（セクション区切り） ===== */
.thread{display:block;width:100%;height:70px;}
.thread path{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.55;}
.thread .knot{fill:var(--accent);opacity:.9;}

/* ===== 共通セクション ===== */
section.block{padding:72px 0;}
section.block.tint{background:var(--cream);}
.section-head{text-align:center;margin:0 0 44px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:31px;font-weight:900;margin:0 0 10px;letter-spacing:.02em;}
.section-head p{color:var(--muted);font-size:14.5px;margin:0;}
@media(max-width:600px){section.block{padding:52px 0;}.section-head h2{font-size:25px;}}

/* ===== 挿絵イラスト ===== */
.illust{max-width:600px;margin:0 auto 44px;}
.illust img{width:100%;height:auto;border-radius:24px;}
.illust.green img{box-shadow:0 18px 44px rgba(43,160,136,.14);background:#fff;}
.illust.green{margin-bottom:40px;}

/* ===== 悩み→こう変わる ===== */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pain{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:0 6px 20px rgba(200,71,106,.06);
}
.pain .before{color:var(--muted);font-size:14px;margin:0 0 12px;}
.pain .before::before{content:"モヤモヤ";display:inline-block;font-size:11px;font-weight:800;color:#fff;background:#C9B2BB;border-radius:6px;padding:2px 8px;margin-right:8px;vertical-align:1px;}
.pain h3{font-size:17.5px;margin:0;color:var(--accent-dark);line-height:1.7;}
.pain h3::before{content:"Bondiなら";display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--accent);border-radius:6px;padding:2px 8px;margin-right:8px;vertical-align:2px;}
@media(max-width:760px){.pains{grid-template-columns:1fr;}}

/* ===== 機能グリッド ===== */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;color:var(--ink);transition:transform .15s,box-shadow .18s,border-color .15s;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#F7C9D5;}
.feature .fic{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--blush);margin-bottom:14px;
}
.feature .fic svg{width:24px;height:24px;stroke:var(--accent-dark);}
.feature h3{font-size:17px;margin:0 0 6px;font-weight:800;}
.feature p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.85;}
.feature .more{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent-dark);margin-top:10px;}
.feature:hover .more{text-decoration:underline;}
@media(max-width:860px){.features{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.features{grid-template-columns:1fr;}}

/* ===== スクショギャラリー ===== */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px;}
.gallery figure{margin:0;text-align:center;}
.gallery img{
  width:100%;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(51,39,46,.10);transition:transform .18s;
}
.gallery figure:hover img{transform:translateY(-5px);}
.gallery figcaption{font-size:12px;font-weight:700;color:var(--muted);margin-top:9px;}
.gallery-3{grid-template-columns:repeat(3,1fr);max-width:680px;margin:40px auto 0;}
@media(max-width:860px){.gallery,.gallery-3{grid-template-columns:repeat(3,1fr);}}

/* ===== スポットライト（ペット） ===== */
.spot .wrap{display:grid;grid-template-columns:1fr .8fr;gap:56px;align-items:center;}
.spot h2{font-size:29px;font-weight:900;margin:0 0 14px;line-height:1.55;}
.spot h2 em{font-style:normal;color:var(--accent-dark);}
.spot p{color:var(--muted);font-size:15px;margin:0 0 12px;}
.spot ul{list-style:none;margin:18px 0 0;padding:0;}
.spot li{
  position:relative;padding-left:30px;margin:12px 0;font-size:14.5px;font-weight:600;
}
.spot li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);opacity:.16;
}
.spot li::after{
  content:"";position:absolute;left:5px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent-dark);
}
.spot .phone-solo{
  width:250px;aspect-ratio:480/865;border-radius:34px;border:7px solid #33272E;background:#33272E;
  overflow:hidden;box-shadow:0 26px 54px rgba(51,39,46,.25);margin:0 auto;transform:rotate(2.5deg);
}
.spot .phone-solo img{width:100%;height:100%;object-fit:cover;}
@media(max-width:820px){.spot .wrap{grid-template-columns:1fr;gap:36px;}}

/* ===== ファミリーモード（グリーンの世界） ===== */
.family-block{background:var(--family-bg);padding:76px 0;}
.family-block .features{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto;}
.family-block .eyebrow{color:var(--family);border-color:#D6EDE4;}
.family-block .section-head h2{color:#1E7A68;}
.family-block .feature .fic{background:#E3F5EE;}
.family-block .feature .fic svg{stroke:var(--family);}
.family-block .feature:hover{border-color:#BFE5D7;box-shadow:0 12px 34px rgba(43,160,136,.12);}
.family-block .feature .more{color:var(--family);}
.family-switch{
  text-align:center;font-size:13.5px;color:#4E8A7C;background:#fff;border:1px dashed #9ED3C2;
  border-radius:12px;padding:12px 18px;max-width:560px;margin:0 auto 40px;
}

/* ===== 安心・安全 ===== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.trust-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;text-align:center;
}
.trust-item .fic{
  width:44px;height:44px;border-radius:50%;background:var(--blush);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.trust-item .fic svg{width:22px;height:22px;stroke:var(--accent-dark);}
.trust-item h3{font-size:15px;margin:0 0 6px;font-weight:800;}
.trust-item p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.8;}
@media(max-width:860px){.trust{grid-template-columns:repeat(2,1fr);}}

/* ===== 料金 ===== */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:22px;justify-content:center;}
.plan{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;text-align:center;
}
.plan.hot{border-color:var(--accent);box-shadow:var(--shadow);position:relative;}
.plan.hot::before{
  content:"写真をたくさん残すなら";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 14px;white-space:nowrap;
}
.plan h3{font-size:16px;margin:0 0 4px;font-weight:800;}
.plan .price{font-family:"Zen Maru Gothic",sans-serif;font-size:38px;font-weight:900;margin:2px 0 2px;}
.plan .price small{font-size:14px;font-weight:700;color:var(--muted);}
.plan ul{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);text-align:left;}
.plan li{font-size:13.5px;margin:9px 0;padding-left:24px;position:relative;}
.plan li::before{content:"✓";position:absolute;left:2px;color:var(--accent-dark);font-weight:800;}
.plan .note{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:left;}
@media(max-width:720px){.plans{grid-template-columns:1fr;}}

/* ===== FAQ ===== */
.faq{max-width:720px;margin:0 auto;}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:4px 22px;margin-bottom:12px;
}
.faq summary{
  cursor:pointer;font-weight:800;font-size:15px;padding:14px 0;list-style:none;position:relative;padding-right:30px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"＋";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--accent-dark);font-weight:800;font-size:17px;transition:transform .15s;
}
.faq details[open] summary::after{content:"−";}
.faq .a{color:var(--muted);font-size:14px;padding:0 0 16px;margin:0;}

/* ===== 最後のCTA ===== */
.final{
  background:linear-gradient(160deg,var(--blush),#FFE3EA);text-align:center;padding:84px 0;
}
.final h2{font-size:30px;font-weight:900;margin:0 0 10px;}
.final p{color:var(--muted);font-size:14.5px;margin:0 0 30px;}
.final .get-btns{justify-content:center;}
@media(max-width:600px){.final h2{font-size:24px;}}

/* ===== フッター ===== */
footer.site{background:#332830;color:#CBB9C1;padding:52px 0 34px;font-size:13.5px;}
footer.site a{color:#CBB9C1;}
footer.site a:hover{color:#fff;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px;}
.foot-brand .logo{color:#fff;font-size:22px;}
.foot-brand p{font-size:12.5px;line-height:1.9;margin:10px 0 0;color:#A8929C;}
.foot-col h4{color:#fff;font-size:13px;letter-spacing:.1em;margin:0 0 14px;}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin:9px 0;}
.copyright{border-top:1px solid #4A3B44;padding-top:22px;text-align:center;font-size:12px;color:#A8929C;}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:26px;}}