/* Bondi ブログ 共通スタイル（公式トップ about.css とトーンを統一） */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap');
:root{
  --ink:#33272E; --muted:#8B7A82; --accent:#FF6B8A; --accentDark:#E14E71;
  --bg:#FFFBF8; --card:#FFFFFF; --line:#F3E2E8;
  --blush:#FFF5F7; --shadow:0 12px 34px rgba(200,71,106,.10);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.95; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.logo{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;}
a{color:var(--accentDark); text-decoration:none;}
a:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;}
.wrap{max-width:760px; margin:0 auto; padding:0 20px;}
header.site{
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
header.site .wrap{display:flex; align-items:center; height:62px; gap:22px;}
.logo{font-size:22px; font-weight:900; letter-spacing:.03em; color:var(--ink) !important; text-decoration:none;}
.logo .dot{color:var(--accent);}
.nav{display:flex; gap:20px; margin-left:auto;}
.nav a{font-size:14px; font-weight:600; color:var(--muted);}
.nav a:hover{color:var(--accentDark);}
.head-cta{
  background:var(--accent); color:#fff !important; font-size:13px; font-weight:700;
  padding:8px 17px; 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(--accentDark); transform:translateY(-1px);}
@media(max-width:640px){
  .logo{font-size:19px;}
  .nav{display:none;}
  .head-cta{margin-left:auto;}
}
.hero{
  background:linear-gradient(165deg,#FFFDFD 0%,var(--blush) 45%,#FFECF1 100%);
  padding:60px 0 56px; text-align:center;
}
.hero h1{font-size:31px; font-weight:900; margin:0 0 10px; letter-spacing:.02em; line-height:1.5;}
.nb{display:inline-block;}
.hero p{color:var(--muted); margin:0;}
/* スマホでの日本語の折り返しを、意味の切れ目で自然に（対応ブラウザのみ／非対応は従来表示） */
h1, h2, h3, .hero p, .lead, .eyebrow, .get-lead{ word-break:auto-phrase; }
.cta{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  padding:13px 28px; border-radius:999px; margin-top:22px; box-shadow:0 8px 22px rgba(255,107,138,.4);
  transition:background .15s, transform .12s;
}
.cta:hover{background:var(--accentDark); transform:translateY(-2px);}
/* 入手導線（Web／iOS／Android）ボタン */
.get{margin-top:22px;}
.get-lead{
  font-weight:400; font-size:15px; color:var(--ink); margin:0 0 26px;
}
.get-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.get-btn{
  display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:6px 16px; min-width:196px;
  box-shadow:0 4px 12px rgba(51,48,46,.07);
  transition:transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.get-btn:not(.is-disabled)::after{
  content:"→"; margin-left:auto; padding-left:8px;
  font-size:17px; font-weight:800; color:var(--accent); transition:transform .15s;
}
.get-btn:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(200,71,106,.18); border-color:var(--accent);}
.get-btn:hover:not(.is-disabled)::after{transform:translateX(3px);}
.get-btn:active{transform:translateY(-1px); box-shadow:0 5px 14px rgba(200,71,106,.2);}
.get-ic{font-size:23px; line-height:1;}
.get-tx{display:flex; flex-direction:column;}
.get-tx b{font-size:15px; color:var(--ink); font-weight:800; line-height:1.25;}
.get-tx small{font-size:12px; color:var(--muted); margin-top:0; line-height:1.2;}
.get-btn.is-primary{background:var(--accent); border-color:var(--accent); box-shadow:0 8px 20px rgba(255,107,138,.4);}
.get-btn.is-primary .get-tx b, .get-btn.is-primary .get-tx small, .get-btn.is-primary::after{color:#fff;}
.get-btn.is-primary:hover{background:var(--accentDark); border-color:var(--accentDark);}
.get-btn.is-disabled{opacity:.5; pointer-events:none; box-shadow:none;}
@media(max-width:600px){.get-btn{width:100%;}}
/* 公式トップと同じ入手ボタン（Web版＋App Store公式バッジ） */
.btn-web{
  display:flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff !important; border-radius:14px; padding:10px 22px;
  font-weight:800; font-size:16px; text-align:left;
  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(--accentDark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(200,71,106,.35);}
.badge-store{display:flex; align-items:center; transition:transform .12s, opacity .15s;}
.badge-store img{height:52px; width:auto;}
.badge-store:hover{transform:translateY(-2px); opacity:.85;}
.soon{font-size:12px; color:var(--muted); align-self:center; text-align:left;}
@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;}
}
main{padding:40px 0 80px;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px 24px; margin-bottom:16px; transition:transform .15s, box-shadow .18s, border-color .15s;
  display:block;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#F7C9D5;}
.card .tag{font-size:11.5px; color:var(--accentDark); font-weight:800; letter-spacing:.1em;
  background:var(--blush); border-radius:999px; padding:3px 12px; display:inline-block;}
.card h2{font-size:18px; margin:10px 0 6px; font-weight:800; color:var(--ink);}
.card:hover h2{color:var(--accentDark);}
.card p{color:var(--muted); font-size:13.5px; margin:0; line-height:1.85;}

/* 記事ページ */
article{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:32px 26px; margin-top:28px; box-shadow:0 6px 20px rgba(200,71,106,.05);}
article .eyebrow{color:var(--accentDark); font-weight:800; letter-spacing:.14em; font-size:12.5px;}
article h1{font-size:27px; line-height:1.55; margin:8px 0 6px; font-weight:900;}
article .lead{color:var(--muted); font-size:15px; margin:0 0 8px;}
article .byline{color:var(--muted); font-size:12.5px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line,#eee);}
article .byline a{color:var(--accentDark); text-decoration:none;}
article h2{
  font-size:20px; margin:38px 0 12px; padding-left:14px; border-left:5px solid var(--accent);
  border-radius:2px; font-weight:800;
}
article h3{font-size:16.5px; margin:26px 0 8px; font-weight:800; color:var(--accentDark);}
article p{font-size:15.5px;}
article .quote{
  background:var(--bg); border-radius:14px; padding:16px 18px; margin:14px 0; color:var(--ink);
  border:1px solid var(--line);
}
article .quote .who{display:block; color:var(--muted); font-size:13px; margin-top:8px;}
article ul{padding-left:1.2em;}
article li{margin:7px 0;}
.notice{background:var(--blush); border:1px dashed var(--accent); border-radius:14px; padding:14px 16px; font-size:14px; color:var(--ink);}
.appbox{
  background:linear-gradient(160deg,var(--blush),#FFE3EA); border-radius:18px; padding:26px 22px; text-align:center; margin:34px 0;
}
.appbox h3{margin:0 0 6px; font-size:19px;}
.appbox p{color:var(--muted); font-size:14px; margin:0 0 6px;}
/* アプリのスクリーンショット（記事内に1枚） */
.shot{margin:24px auto;max-width:300px;text-align:center;}
.shot img{width:100%;border-radius:20px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(200,71,106,.16);}
.shot figcaption{color:var(--muted);font-size:13px;margin-top:10px;}

/* トップのアプリ画面ギャラリー */
.shots-section{background:linear-gradient(160deg,#FFF3F0 0%,#FFE3EA 55%,#FCEEF6 100%);border-top:1px solid var(--line);padding:52px 0;}
.shots-section h2{text-align:center;font-size:24px;margin:0 0 6px;color:var(--accentDark);}
.shots-section .sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 28px;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gallery figure{margin:0;text-align:center;}
.gallery img{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:0 10px 26px rgba(200,71,106,.14);transition:transform .18s;}
.gallery figure:hover img{transform:translateY(-5px);}
.gallery figcaption{font-size:13px;font-weight:700;color:var(--accentDark);margin-top:10px;}
@media(max-width:600px){.gallery{grid-template-columns:repeat(2,1fr);gap:14px;}}

/* 関連記事（内部リンク） */
.related{margin:36px 0 8px; border-top:1px solid var(--line); padding-top:24px;}
.related h2{font-size:18px; margin:0 0 12px; padding-left:14px; border-left:5px solid var(--accent); border-radius:2px;}
.related ul{list-style:none; padding:0; margin:0;}
.related li{margin:0 0 10px;}
.related a{display:block; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:13px 16px; font-size:15px; font-weight:700; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s;}
.related a:hover{transform:translateY(-2px); box-shadow:var(--shadow); color:var(--accentDark); border-color:#F7C9D5;}
.back{display:inline-block; margin:24px 0; color:var(--muted); font-size:14px;}
footer.site{background:#332830; color:#CBB9C1; padding:30px 0; font-size:13px; text-align:center; margin-top:40px;}
footer.site a{color:#CBB9C1;}
footer.site a:hover{color:#fff;}
.disclaimer{color:var(--muted); font-size:12px; line-height:1.7; margin-top:24px;}

/* ブログ：カテゴリ見出し（カップル／ファミリー） */
.cat{font-size:16px; font-weight:900; color:var(--accentDark); letter-spacing:.04em; margin:34px 0 14px;
  display:flex; align-items:center; gap:10px;}
.cat::after{content:""; flex:1; height:1px; background:var(--line);}
.cat:first-of-type{margin-top:8px;}

/* 赤い糸（セクション区切り・トップと共通モチーフ） */
.thread{display:block;width:100%;height:60px;}
.thread path{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.55;}
.thread .knot{fill:var(--accent);opacity:.9;}