/* =====================================================================
   app.css  ―  iOS アプリ紹介ページ共通のダークテーマ
   guestnote / one_diary / site(まもメモ) / usomakoto / wasurenakasa
   サイト全体のダーク・エディトリアルに統一。各ページの固有クラスも収録。
   ページ側で --accent / --accent2 を上書きすればアプリ別のアクセントになる。
   ===================================================================== */
:root{
  --bg:#050505;
  --panel:#0d0e12;          /* header / contact など濃色パネル */
  --panel2:#13141a;
  --fg:#f2f2f2;
  --muted:rgba(242,242,242,.66);
  --muted2:rgba(242,242,242,.5);
  --line:rgba(242,242,242,.16);
  --line2:rgba(242,242,242,.10);
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.05);
  --accent:#ddb55e;          /* 既定アクセント（ゴールド） */
  --accent2:#b8913a;
  --accent-soft:rgba(221,181,94,.16);
  --blue:var(--accent);     /* 旧インラインstyle互換（リンク色） */
  --safe:#5bbf7b;
  --safe-bg:rgba(91,191,123,.12);
  --note:#b79bf0;
  --note-bg:rgba(140,99,255,.12);
  --danger:#e0705f;
  --danger-bg:rgba(224,96,80,.12);
  --shadow:0 22px 70px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Noto Sans JP', system-ui, sans-serif;
  background:
    radial-gradient(1100px 600px at 50% -8%, rgba(255,255,255,.05), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-size:15px;
  line-height:1.85;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-soft); color:#fff; }
a{ transition:color .18s var(--ease); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ── Decorative lines / rain ── */
.deco-lines, .deco-wrap, .rain-deco{
  position:fixed; top:0; right:0; height:100vh;
  pointer-events:none; z-index:0; overflow:hidden;
}
.deco-lines{ width:180px; opacity:.07; }
.deco-wrap{ width:160px; opacity:.08; }
.rain-deco{ width:200px; opacity:.18; }
.deco-line{ position:absolute; left:0; right:0; height:1px; background:var(--accent); }
.rain-drop{
  position:absolute; top:-40px; width:1px;
  background:linear-gradient(transparent, var(--accent));
  animation-name:appRain; animation-iteration-count:infinite; animation-timing-function:linear;
}
.deco-card{
  position:absolute; top:-30px; width:54px; height:34px;
  border:1px solid var(--accent); border-radius:8px;
  animation-name:appFloat; animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
@keyframes appRain{ from{ transform:translateY(-40px); } to{ transform:translateY(105vh); } }
@keyframes appFloat{ 0%{ transform:translateY(-30px) rotate(0deg); } 100%{ transform:translateY(105vh) rotate(40deg); } }

/* ── Header ── */
header{
  background:var(--panel);
  padding:30px 40px 26px;
  display:flex; align-items:center; gap:20px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line2);
}
header::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 78% 50%, var(--accent-soft) 0%, transparent 62%);
  pointer-events:none;
}
.header-icon{ font-size:44px; line-height:1; filter:drop-shadow(0 4px 16px rgba(221,181,94,.35)); position:relative; }
.header-text{ position:relative; }
.header-text h1{
  font-family:'Noto Serif JP', serif; font-weight:600; font-size:26px;
  color:#fff; letter-spacing:.06em;
}
.header-text a{ color:#fff; text-decoration:none; }
.header-text a:hover h1{ color:var(--accent); }
.header-text p{ font-size:11.5px; color:rgba(255,255,255,.42); letter-spacing:.12em; margin-top:4px; }

/* ── Tab Nav ── */
.tab-nav{
  background:var(--panel2); display:flex;
  border-bottom:1px solid var(--line2);
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(8px);
}
.tab-btn{
  flex:1; padding:16px 10px;
  font-family:'Noto Sans JP', sans-serif; font-size:12.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.46); background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.tab-btn:hover{ color:rgba(255,255,255,.85); background:rgba(255,255,255,.04); }
.tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ── Sections / container ── */
.page-section{ display:none; }
.page-section.active{ display:block; animation:fadeUp .5s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.container{ max-width:820px; margin:0 auto; padding:56px 32px 96px; position:relative; z-index:1; }

/* ── Hero ── */
.hero{ text-align:center; padding:52px 0 44px; }
.hero-icon, .hero-emoji{
  font-size:76px; display:block; margin-bottom:18px;
  filter:drop-shadow(0 10px 26px rgba(221,181,94,.22));
}
.hero h2{
  font-family:'Noto Serif JP', serif; font-size:clamp(26px,5vw,34px); font-weight:600;
  color:#fff; letter-spacing:.06em; line-height:1.45;
}
.hero p{
  margin:14px auto 0; font-size:14.5px; color:var(--muted);
  max-width:520px; line-height:1.95;
}
.hero-badges{ display:flex; justify-content:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.hero-badge{
  display:inline-block; padding:6px 16px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--accent); border-radius:999px;
  font-size:11px; letter-spacing:.12em;
}
.hero-note{
  margin-top:22px; padding:14px 22px;
  background:var(--note-bg); border:1px solid rgba(140,99,255,.3); border-radius:14px;
  font-size:13px; color:var(--note); font-weight:500;
  display:inline-block; line-height:1.8;
}
.hero-safe-note{
  margin-top:20px; padding:12px 20px;
  background:var(--safe-bg); border:1px solid rgba(91,191,123,.3); border-radius:12px;
  font-size:13px; color:var(--safe); font-weight:500; display:inline-block; line-height:1.8;
}

/* ── Section headings ── */
.sec-title{
  font-family:'Noto Serif JP', serif; font-size:20px; font-weight:600;
  color:#fff; letter-spacing:.05em;
  border-left:3px solid var(--accent); padding-left:14px; margin-bottom:26px;
}
.sec-subtitle{
  font-size:11px; letter-spacing:.18em; color:var(--accent);
  text-transform:uppercase; margin-bottom:8px;
}

/* ── Feature grid ── */
.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px,1fr));
  gap:18px; margin-bottom:52px;
}
.feature-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.feature-card:hover{
  transform:translateY(-4px); background:var(--surface-2);
  border-color:rgba(242,242,242,.3); box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.feature-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.feature-icon{ font-size:26px; margin-bottom:10px; display:block; }
.feature-card h3{
  font-family:'Noto Serif JP', serif; font-size:14.5px; font-weight:600;
  color:#fff; margin-bottom:6px;
}
.feature-card p{ font-size:13px; color:var(--muted); line-height:1.85; }
.badge-free, .badge-ios, .badge-pro{
  display:inline-block; margin-top:10px; padding:3px 11px;
  border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.06em;
}
.badge-free{ background:var(--safe-bg); border:1px solid rgba(91,191,123,.35); color:var(--safe); }
.badge-ios{ background:var(--note-bg); border:1px solid rgba(140,99,255,.35); color:var(--note); }
.badge-pro{ background:var(--accent-soft); border:1px solid rgba(221,181,94,.4); color:var(--accent); }

/* ── KPI strip ── */
.kpi-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:44px; }
.kpi-item{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 16px; text-align:center;
}
.kpi-val{
  font-family:'Noto Serif JP', serif; font-size:18px; font-weight:600;
  color:var(--accent); display:block; margin-bottom:6px;
}
.kpi-label{ font-size:11.5px; color:var(--muted); letter-spacing:.06em; }

/* ── Steps ── */
.steps{ display:flex; flex-direction:column; margin-bottom:52px; }
.step{
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 0; border-bottom:1px solid var(--line2);
}
.step:last-child{ border-bottom:none; }
.step-num{
  flex-shrink:0; width:38px; height:38px;
  background:var(--accent-soft); border:1px solid rgba(221,181,94,.4);
  color:var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif JP', serif; font-size:15px; font-weight:600;
}
.step-body h3{ font-family:'Noto Serif JP', serif; font-size:15px; font-weight:600; color:#fff; margin-bottom:4px; }
.step-body p{ font-size:13.5px; color:var(--muted); line-height:1.85; }

/* ── Divider ── */
.divider{ border:none; border-top:1px solid var(--line2); margin:48px 0; }

/* ── Plan table ── */
.plan-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:40px; }
.plan-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; position:relative; overflow:hidden;
}
.plan-card.pro-card{ border-color:rgba(221,181,94,.45); box-shadow:0 0 0 1px rgba(221,181,94,.12), var(--shadow); }
.plan-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--line); }
.plan-card.pro-card::before{ background:linear-gradient(90deg, var(--accent2), var(--accent)); }
.plan-label{ font-size:11px; letter-spacing:.16em; font-weight:600; color:var(--muted2); margin-bottom:6px; }
.plan-price{ font-family:'Noto Serif JP', serif; font-size:22px; font-weight:600; color:#fff; margin-bottom:16px; }
.plan-card ul{ list-style:none; padding:0; }
.plan-card li{
  font-size:12.5px; color:var(--muted); padding:7px 0;
  border-bottom:1px solid var(--line2); display:flex; align-items:flex-start; gap:8px;
}
.plan-card li:last-child{ border-bottom:none; }
.plan-card li::before{ content:'✓'; color:var(--safe); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ── App info table ── */
.app-info-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.app-info-table td{ padding:14px 16px; border-bottom:1px solid var(--line2); vertical-align:top; color:rgba(242,242,242,.86); }
.app-info-table td:first-child{ width:170px; color:var(--muted2); font-size:12.5px; letter-spacing:.04em; }
.app-info-table tr:last-child td{ border-bottom:none; }

/* ── AppStore badge ── */
.appstore-row{ display:flex; align-items:center; gap:18px; margin:28px 0 0; flex-wrap:wrap; }
.appstore-row a{ transition:transform .2s var(--ease), opacity .2s var(--ease); display:inline-block; }
.appstore-row a:hover{ transform:translateY(-2px); opacity:.85; }

/* ── Notice / emergency ── */
.notice-box{
  background:var(--note-bg); border:1px solid rgba(140,99,255,.3); border-radius:14px;
  padding:22px; margin:32px 0;
}
.notice-box h4{ font-size:14px; font-weight:700; color:var(--note); margin-bottom:10px; }
.notice-box p{ font-size:13px; color:rgba(183,155,240,.9); line-height:1.9; }
.emergency-box{
  background:var(--danger-bg); border:1px solid rgba(224,96,80,.35); border-radius:14px;
  padding:22px; margin:32px 0;
}
.emergency-box h4{ font-size:14px; font-weight:700; color:var(--danger); margin-bottom:10px; }
.emergency-box p{ font-size:13px; color:rgba(224,112,95,.92); line-height:1.9; }
.emergency-box .tel-link{
  display:inline-block; margin-top:12px; margin-right:10px; padding:9px 22px;
  background:var(--danger); color:#fff; border-radius:999px; font-size:13px; font-weight:700;
  text-decoration:none; transition:transform .18s var(--ease), opacity .18s var(--ease);
}
.emergency-box .tel-link:hover{ transform:translateY(-2px); opacity:.9; }
.emergency-box .tel-link.consult{ background:transparent; color:var(--danger); border:1px solid rgba(224,96,80,.5); }

/* ── FAQ ── */
.faq{ margin-bottom:52px; }
.faq-item{ border-bottom:1px solid var(--line2); }
.faq-q{
  font-family:'Noto Serif JP', serif; font-size:14.5px; font-weight:600;
  color:#fff; padding:20px 0; display:flex; align-items:flex-start; gap:12px;
}
.faq-q-badge{
  flex-shrink:0; width:22px; height:22px;
  background:var(--accent-soft); border:1px solid rgba(221,181,94,.4);
  color:var(--accent); border-radius:5px; font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.faq-a{ font-size:13.5px; color:var(--muted); padding:0 0 20px 34px; line-height:1.92; }
.faq-a a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ── Contact card ── */
.contact-card{
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:40px 36px;
  text-align:center; position:relative; overflow:hidden;
}
.contact-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 28% 72%, var(--accent-soft) 0%, transparent 58%);
  pointer-events:none;
}
.contact-card h3{ font-family:'Noto Serif JP', serif; font-size:18px; font-weight:600; color:#fff; margin-bottom:8px; position:relative; }
.contact-card p{ font-size:13px; color:rgba(255,255,255,.55); margin-bottom:24px; position:relative; }
.contact-btns{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; position:relative; }
.contact-btn{
  display:inline-block; padding:13px 34px; position:relative;
  background:linear-gradient(135deg, var(--accent2), var(--accent)); color:#1a140a;
  text-decoration:none; border-radius:999px; font-size:13.5px; font-weight:600; letter-spacing:.05em;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(221,181,94,.25); }
.contact-btn.sub{ background:transparent; color:var(--accent); border:1px solid rgba(221,181,94,.45); }

/* ── Bug report list ── */
.report-list{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin:20px 0 0; }
.report-list li{ font-size:13.5px; color:var(--muted); line-height:1.95; padding-left:.2em; }
.report-list li+li{ margin-top:2px; }

/* ── Policy ── */
.policy-meta{ font-size:12px; color:var(--muted2); letter-spacing:.06em; margin-bottom:36px; padding-bottom:16px; border-bottom:1px solid var(--line2); }
.policy-block{ margin-bottom:44px; }
.policy-block h3{
  font-family:'Noto Serif JP', serif; font-size:16px; font-weight:600;
  color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:10px;
}
.policy-block h3::before{ content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; flex-shrink:0; }
.policy-block p{ font-size:13.5px; color:var(--muted); line-height:1.95; margin-bottom:10px; }
.policy-block ul{ padding-left:1.4em; }
.policy-block li{ font-size:13.5px; color:var(--muted); line-height:1.95; margin-bottom:4px; }
.policy-block li::marker{ color:rgba(221,181,94,.7); }
.policy-block a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.policy-highlight{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; padding:18px 20px; font-size:13px; color:rgba(242,242,242,.88);
  margin:14px 0; line-height:1.9;
}

/* ── Screenshots (one_diary) ── */
.shot-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:44px; }
.shot{
  width:100%; aspect-ratio:9/19.5; border-radius:14px;
  border:1px solid var(--line); background:#000; object-fit:cover;
  box-shadow:var(--shadow);
}

/* ── Score cards (usomakoto) ── */
.score-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:40px; }
.score-card{ border-radius:16px; padding:24px 20px; text-align:center; position:relative; overflow:hidden; }
.score-card.uso{ background:var(--panel); border:1px solid rgba(224,96,80,.35); }
.score-card.uso::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(224,96,80,.22) 0%, transparent 65%); }
.score-card.makoto{ background:var(--panel2); border:1px solid rgba(221,181,94,.35); }
.score-card.makoto::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(221,181,94,.16) 0%, transparent 65%); }
.score-card-label{ font-family:'Noto Serif JP', serif; font-size:22px; font-weight:600; color:#fff; display:block; margin-bottom:6px; position:relative; }
.score-card-desc{ font-size:12px; color:rgba(255,255,255,.55); position:relative; line-height:1.7; }

/* ── Footer ── */
footer{
  background:var(--panel2); border-top:1px solid var(--line2);
  padding:28px 40px; text-align:center;
  font-size:11.5px; color:rgba(242,242,242,.32); letter-spacing:.06em;
}
footer a{ color:rgba(242,242,242,.5); text-decoration:none; margin:0 14px; }
footer a:hover{ color:var(--accent); }

/* ── Responsive ── */
@media (max-width:600px){
  .container{ padding:40px 20px 72px; }
  header{ padding:24px 18px 22px; }
  .hero h2{ font-size:26px; }
  .feature-grid{ grid-template-columns:1fr; }
  .kpi-strip{ grid-template-columns:1fr 1fr; }
  .tab-btn{ font-size:11px; padding:14px 6px; }
  .contact-card{ padding:30px 20px; }
  .plan-row, .score-grid{ grid-template-columns:1fr; }
  .shot-grid{ grid-template-columns:repeat(2,1fr); }
  .app-info-table td:first-child{ width:110px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .page-section.active{ animation:none; }
}