/* ============================================
   Design Tokens (BRAND_DESIGN_SYSTEM.md準拠)
   ============================================ */
:root{
  --primary:#00a878;
  --primary-light:#4ECBA0;
  --primary-container:#E6F7F1;
  --primary-dark:#008a60;
  --text:#1a1a1a;
  --text-secondary:#555;
  --text-muted:#888;
  --bg:#fff;
  --bg-alt:#f8faf9;
  --border:#e8e8e8;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-phone:36px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 16px 48px rgba(0,0,0,.12);
  --shadow-phone:0 24px 64px rgba(0,0,0,.18);
  --gradient:linear-gradient(150deg,#00a878 0%,#00c98d 50%,#00d4aa 100%);
  --max-w:1100px;
  --transition:all .25s ease;
}

/* ============================================
   Base
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans JP',sans-serif;color:var(--text);line-height:1.7;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ============================================
   Section Common
   ============================================ */
.section-label{display:block;font-size:13px;font-weight:500;color:var(--primary);letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.section-title{font-size:30px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:16px}
.section-subtitle{font-size:17px;color:var(--text-muted);line-height:1.8}
.section-header{text-align:center;margin-bottom:56px}

/* ============================================
   Header
   ============================================ */
.header{background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);padding:12px 0;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header .inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.header-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.header-brand img{width:34px;height:34px;border-radius:8px}
.header-brand span{font-size:18px;font-weight:700;color:var(--primary)}
.header-cta{display:inline-flex;align-items:center;background:var(--primary);color:#fff;font-size:13px;font-weight:600;padding:8px 20px;border-radius:50px;text-decoration:none;transition:var(--transition)}
.header-cta:hover{background:var(--primary-dark);text-decoration:none}

/* ============================================
   Phone Mockup
   ============================================ */
.phone-mockup{background:#1a1a1a;border-radius:var(--radius-phone);padding:10px;box-shadow:var(--shadow-phone);display:inline-block;position:relative}
.phone-mockup img{display:block;border-radius:calc(var(--radius-phone) - 10px);width:100%;background:#fff}

/* ============================================
   Hero
   ============================================ */
.hero{background:var(--gradient);color:#fff;padding:80px 24px 60px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-200px;right:-100px;width:500px;height:500px;background:rgba(255,255,255,.05);border-radius:50%;pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-150px;left:-80px;width:400px;height:400px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none}
.hero-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.hero-text .hero-label{display:inline-block;font-size:15px;font-weight:600;letter-spacing:.1em;background:rgba(255,255,255,.2);padding:8px 20px;border-radius:50px;margin-bottom:24px}
.hero-text h2{font-size:44px;font-weight:800;line-height:1.35;margin-bottom:20px;letter-spacing:-.01em}
.hero-text h2 em{font-style:normal;color:#ffe066}
.hero-text p{font-size:18px;font-weight:600;color:#fff;line-height:1.9;margin-bottom:8px}
.hero-text .note{font-size:15px;font-weight:600;margin-bottom:32px;letter-spacing:.03em;color:#fff}
.hero-phones{display:flex;justify-content:center;align-items:flex-end;gap:20px;position:relative}
.hero-phones .phone-mockup{width:220px}
.hero-phones .phone-secondary{transform:rotate(5deg) translateY(-20px)}

/* ============================================
   Store Badges
   ============================================ */
.store-badges{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.store-badges a{display:inline-flex;transition:var(--transition)}
.store-badges a:hover{opacity:.8;transform:translateY(-1px)}
.store-badges a img{height:52px}
.hero .store-badges,.cta-bottom .store-badges{justify-content:center}

/* ============================================
   Social Proof Bar
   ============================================ */
.proof{padding:40px 24px;border-bottom:1px solid var(--border)}
.proof-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.proof-item{text-align:center}
.proof-item .proof-icon{font-size:28px;margin-bottom:8px}
.proof-item .proof-label{font-size:18px;font-weight:700;color:var(--text)}
.proof-item .proof-desc{font-size:15px;font-weight:500;color:var(--text-muted);margin-top:4px}

/* ============================================
   Features
   ============================================ */
.features{padding:96px 24px}
.features-inner{max-width:var(--max-w);margin:0 auto}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{text-align:center;padding:36px 20px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg);transition:var(--transition)}
.feature:hover{border-color:var(--primary-light);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.feature .icon{font-size:48px;margin-bottom:20px}
.feature h4{font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px}
.feature p{font-size:16px;color:var(--text-secondary);line-height:1.8}

/* ============================================
   App Preview (Step-by-step)
   ============================================ */
.preview{background:var(--primary-container);padding:96px 24px}
.preview-inner{max-width:var(--max-w);margin:0 auto}
.preview-step{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:80px}
.preview-step:last-child{margin-bottom:0}
.preview-step:nth-child(even){direction:rtl}
.preview-step:nth-child(even)>*{direction:ltr}
.preview-phone{display:flex;justify-content:center}
.preview-phone .phone-mockup{width:240px}
.preview-content{position:relative}
.preview-content .step-number{font-size:120px;font-weight:800;color:var(--primary);opacity:.08;position:absolute;top:-40px;left:-10px;line-height:1;pointer-events:none}
.preview-content .step-label{font-size:13px;font-weight:600;color:var(--primary);letter-spacing:.1em;margin-bottom:12px;position:relative}
.preview-content h3{font-size:26px;font-weight:700;line-height:1.4;margin-bottom:16px;position:relative}
.preview-content p{font-size:15px;color:var(--text-secondary);line-height:1.9;position:relative}

/* ============================================
   Concept (Not a dating app)
   ============================================ */
.concept{padding:96px 24px}
.concept-inner{max-width:800px;margin:0 auto}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.concept-card{padding:32px 28px;border-radius:var(--radius-md);text-align:left}
.concept-card.not{background:var(--bg);border:1px solid var(--border)}
.concept-card.is{background:var(--primary-container);border:1px solid #c8f0df}
.concept-card h4{font-size:16px;font-weight:700;margin-bottom:20px;letter-spacing:.05em}
.concept-card.not h4{color:var(--text-muted)}
.concept-card.is h4{color:var(--primary)}
.concept-card ul{list-style:none;font-size:16px;color:var(--text-secondary);line-height:2.2}
.concept-card.not ul li::before{content:"✕ ";color:#ccc;font-weight:700}
.concept-card.is ul li::before{content:"✓ ";color:var(--primary);font-weight:700}

/* ============================================
   Safety
   ============================================ */
.safety{background:var(--bg-alt);padding:96px 24px}
.safety-inner{max-width:var(--max-w);margin:0 auto}
.safety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:48px}
.safety-item{display:flex;align-items:flex-start;gap:16px;padding:24px;border-radius:var(--radius-md);background:var(--bg);border:1px solid var(--border)}
.safety-item .safety-icon{font-size:28px;flex-shrink:0}
.safety-item strong{display:block;font-size:16px;font-weight:700;margin-bottom:4px}
.safety-item p{font-size:15px;color:var(--text-secondary);line-height:1.7}

/* ============================================
   FAQ
   ============================================ */
.faq{padding:96px 24px}
.faq-inner{max-width:700px;margin:0 auto}
.faq details{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;transition:var(--transition)}
.faq details[open]{border-color:var(--primary-light);box-shadow:0 2px 12px rgba(0,168,120,.06)}
.faq summary{font-size:15px;font-weight:600;color:var(--text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;transition:var(--transition)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--primary);font-size:16px;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary-container);transition:var(--transition)}
.faq details[open] summary::after{content:"－";background:var(--primary);color:#fff}
.faq details p{font-size:14px;color:var(--text-secondary);line-height:1.9;padding:0 24px 20px}

/* ============================================
   CTA Bottom
   ============================================ */
.cta-bottom{background:var(--gradient);color:#fff;padding:96px 24px;position:relative;overflow:hidden}
.cta-bottom::before{content:"";position:absolute;top:-100px;right:-50px;width:350px;height:350px;background:rgba(255,255,255,.05);border-radius:50%}
.cta-bottom-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.cta-bottom-text{text-align:center}
.cta-bottom-text h3{font-size:30px;font-weight:700;margin-bottom:16px}
.cta-bottom-text p{font-size:15px;opacity:.9;margin-bottom:32px;line-height:1.8}
.cta-bottom-text .store-badges{justify-content:center}
.cta-bottom-phone{display:flex;justify-content:center}
.cta-bottom-phone .phone-mockup{width:220px}

/* ============================================
   Blog
   ============================================ */
.blog-list{max-width:800px;margin:0 auto;padding:64px 24px}
.blog-list h2{font-size:24px;font-weight:700;margin-bottom:32px;color:var(--text)}
.blog-card{border-bottom:1px solid var(--border);padding:24px 0}
.blog-card h3{font-size:18px;font-weight:600;margin-bottom:8px}
.blog-card h3 a{color:var(--text)}
.blog-card h3 a:hover{color:var(--primary)}
.blog-card time{font-size:13px;color:var(--text-muted)}
.blog-card p{font-size:14px;color:var(--text-secondary);margin-top:8px;line-height:1.7}

/* ============================================
   Article
   ============================================ */
.article{max-width:800px;margin:0 auto;padding:64px 24px}
.article h1{font-size:28px;font-weight:700;margin-bottom:8px;color:var(--text);line-height:1.4}
.article time{font-size:13px;color:var(--text-muted);display:block;margin-bottom:32px}
.article-content{font-size:15px;line-height:2}
.article-content h2{font-size:22px;font-weight:700;margin:48px 0 16px;color:var(--text)}
.article-content h3{font-size:18px;font-weight:600;margin:32px 0 12px;color:var(--text)}
.article-content p{margin-bottom:16px}
.article-content ul,.article-content ol{margin:0 0 16px 24px}
.article-content li{margin-bottom:8px}
.article-content blockquote{border-left:4px solid var(--primary);padding:12px 20px;margin:16px 0;background:var(--bg-alt);color:var(--text-secondary)}

/* Breadcrumb */
.breadcrumb{max-width:800px;margin:0 auto;padding:16px 24px;font-size:13px;color:var(--text-muted)}
.breadcrumb a{color:var(--primary)}

/* ============================================
   Footer
   ============================================ */
.footer{background:#1a1a1a;color:#999;padding:48px 24px;text-align:center;font-size:13px}
.footer-links{margin-bottom:20px;display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.footer-links a{color:#888;transition:var(--transition)}
.footer-links a:hover{color:#fff;text-decoration:none}
.footer p{line-height:2}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:1024px){
  .hero-text h2{font-size:36px}
  .hero-phones .phone-mockup{width:190px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .preview-phone .phone-mockup{width:200px}
  .preview-content h3{font-size:22px}
  .preview-content .step-number{font-size:80px}
}

@media(max-width:768px){
  .hero{padding:60px 24px 40px}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-text h2{font-size:30px}
  .hero .store-badges{justify-content:center}
  .hero-phones{margin-top:32px}
  .hero-phones .phone-mockup{width:180px}
  .hero-phones .phone-secondary{display:none}
  .proof-inner{gap:32px}
  .section-title{font-size:24px}
  .feature-grid{grid-template-columns:1fr 1fr}
  .preview-step{grid-template-columns:1fr;gap:32px;text-align:center}
  .preview-step:nth-child(even){direction:ltr}
  .preview-phone .phone-mockup{width:200px}
  .preview-content .step-number{position:static;font-size:64px;margin-bottom:-16px;opacity:.06}
  .concept-grid{grid-template-columns:1fr}
  .cta-bottom-inner{grid-template-columns:1fr}
  .cta-bottom-phone{display:none}
  .header-cta{padding:6px 16px;font-size:12px}
}

@media(max-width:480px){
  .hero-text h2{font-size:26px}
  .hero-phones .phone-mockup{width:160px}
  .hero-text .hero-label{font-size:11px}
  .feature-grid{grid-template-columns:1fr}
  .proof-inner{gap:20px}
  .proof-item .proof-label{font-size:13px}
  .preview-phone .phone-mockup{width:180px}
}