/* Kakko の公開サイト。構成はレップログのサイト（replog-site）にそろえている。
   配色は承認済みストア画像（store-assets/approved-a1-v6 の family テーマ）と同じ。
   ダークモードは持たない（ストア画像と同じトーンに揃えるため。レップログと同じ判断）。 */
:root{
  color-scheme:light;
  /* 地（ストア画像の背景 #F4EDDF を中心に3段） */
  --paper-1:#F8F3E8;
  --paper-2:#F4EDDF;
  --paper-3:#EDE3CF;
  --ground:#FFFDF8;
  /* 写真用紙の白（アプリの白フチと同じく、真っ白にしない） */
  --print:#FCFAF4;
  /* アクセント（ストア画像の accent。完了ボタンの色） */
  --brand:#7B6939;
  --brand-strong:#5F5129;
  --soft:#E5D9C0;
  /* 文字 */
  --ink:#3F4031;
  --ink-2:#5E5D4C;
  --ink-3:#8C8873;
  --rule:#E2D8C3;
  /* 反転セクション（編集画面の暗い地に合わせる） */
  --night:#2E2F25;
  --night-2:#3A3B2F;
  --shadow:32,22,12;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper-1);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  font-size:16px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-strong);text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
h1,h2,.brand,.plan-price,.cta h2{font-family:"Zen Maru Gothic","Zen Kaku Gothic New","Hiragino Maru Gothic ProN",sans-serif}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* ---- ヘッダ ---- */
.nav{border-bottom:1px solid var(--rule);background:var(--ground)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:64px}
.nav a{text-decoration:none;color:var(--ink-2);font-size:.88rem}
.nav a:hover{color:var(--brand-strong)}
.nav a.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);
  font-weight:700;font-size:1.05rem;letter-spacing:.04em}
.nav .brand img{width:30px;height:30px;border-radius:7px}

main{display:block}

/* ---- 端末のスクリーンショット ----
   角丸は実機比（半径 55.4pt / 幅 430pt・高さ 932pt）に合わせる。レップログと同じ。 */
.phone{width:100%;max-width:300px;margin:0 auto}
.phone img{
  width:100%;
  border-radius:12.9% / 5.95%;
  box-shadow:0 0 0 1px rgba(var(--shadow),.06),0 14px 36px -10px rgba(var(--shadow),.28);
}

/* ---- 書き出した1枚（写真用紙）。少し傾けて、机に置いたように見せる ---- */
.print{margin:0;background:var(--print);
  box-shadow:0 18px 40px -14px rgba(var(--shadow),.38),0 2px 6px rgba(var(--shadow),.08)}
.print img{width:100%}

/* ---- ヒーロー ----
   ストア画像の1枚目と同じ構図。端末の手前に、書き出した1枚を傾けて重ねる。
   背景の大きな「」は Kakko のしるし。書体の字形だと字面の位置が書体ごとに違って
   切れやすいので、線（border）で描く。 */
.hero{position:relative;background:linear-gradient(160deg,var(--paper-1) 0%,var(--paper-3) 100%);
  padding:56px 0 64px;overflow:hidden}
.hero::before,.hero::after{
  content:"";position:absolute;pointer-events:none;display:none;
  width:clamp(64px,11vw,128px);height:clamp(120px,22vw,250px);border:0 solid var(--soft);
}
.hero::before{top:28px;left:max(12px,calc(50% - 580px));border-width:clamp(10px,1.4vw,16px) 0 0 clamp(10px,1.4vw,16px)}
.hero::after{bottom:28px;right:max(12px,calc(50% - 580px));border-width:0 clamp(10px,1.4vw,16px) clamp(10px,1.4vw,16px) 0}
.hero .wrap{position:relative;z-index:1;display:grid;gap:44px}
.hero .wrap>*,.feature .wrap>*,.specs dd{min-width:0}
.hero .icon{width:76px;height:76px;border-radius:18px;
  box-shadow:0 10px 28px -12px rgba(var(--shadow),.5);margin-bottom:22px}
.hero h1{font-size:clamp(2rem,8vw,2.4rem);font-weight:700;line-height:1.45;margin:0 0 18px;
  letter-spacing:.04em;text-wrap:balance}
.hero .lead{font-size:1rem;color:var(--ink-2);margin:0 0 28px;max-width:30em}
.hero-tagline{font-size:.8rem;font-weight:700;color:var(--ink-2);margin:0 0 14px;letter-spacing:.04em}
.hero-visual{width:100%;max-width:440px;margin:0 auto;padding:12px}
.hero-visual .print{transform:rotate(-3deg)}

/* ---- ストアバッジ（Apple / Google の公式画像をそのまま使う。加工しないこと） ---- */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0}
.badge-app{display:inline-flex;border-radius:8px}
.badge-app img{height:50px;width:auto;display:block}
/* Google Play のバッジは画像の上下に余白が焼き込まれている（646x250 のうち実体は 646x190）。
   Apple のバッジと見た目の高さを揃えるため 50 * 250/190 = 66px。レップログと同じ。 */
.badge-play{display:inline-flex;border-radius:8px}
.badge-play img{height:66px;width:auto;display:block}
.badge-app:focus-visible,.badge-play:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- 機能セクション ---- */
.feature{padding:72px 0;background:var(--paper-1)}
.feature:nth-of-type(odd):not(.invert){background:linear-gradient(170deg,var(--paper-2),var(--paper-1))}
.feature .wrap{display:grid;gap:40px;align-items:center}
.kicker{font-size:.7rem;letter-spacing:.18em;color:var(--brand);font-weight:700;margin:0 0 10px}
.feature h2{font-size:clamp(1.35rem,3.4vw,1.75rem);font-weight:700;line-height:1.55;margin:0 0 16px;
  letter-spacing:.04em;text-wrap:balance}
.feature p{margin:0 0 14px;color:var(--ink-2)}
.feature p:last-child{margin-bottom:0}
.feature .note{
  margin-top:20px;padding:14px 18px;background:var(--ground);
  border:1px solid var(--rule);border-radius:12px;font-size:.9rem;color:var(--ink-2);
}
.feature .note b{color:var(--ink)}
.feature figure{margin:0}
.feature figcaption{margin-top:18px;font-size:.8rem;color:var(--ink-3);text-align:center;line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.chips li{padding:4px 12px;border-radius:999px;background:var(--ground);border:1px solid var(--rule);
  font-size:.86rem;color:var(--ink-2);line-height:1.7}

/* 暗い地で反転させる1枚。編集画面（暗い地）のスクリーンショットと地続きに見せる。 */
.feature.invert{background:linear-gradient(160deg,var(--night) 0%,var(--night-2) 100%)}
.feature.invert .kicker{color:#D8C79A}
.feature.invert h2{color:#FBF6EA}
.feature.invert p{color:rgba(251,246,234,.86)}
.feature.invert figcaption{color:rgba(251,246,234,.7)}
.feature.invert .chips li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:rgba(251,246,234,.9)}
.feature.invert .note{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:rgba(251,246,234,.86)}
.feature.invert .note b{color:#FBF6EA}

/* ---- 収録内容 ---- */
.specs{padding:64px 0;background:var(--paper-2)}
.specs h2{font-size:1.15rem;font-weight:700;margin:0 0 24px;letter-spacing:.04em}
.specs dl{margin:0;display:grid;grid-template-columns:auto 1fr;font-size:.94rem;border-top:1px solid var(--rule)}
.specs dt{color:var(--ink-3);white-space:nowrap;padding:12px 28px 12px 0;border-bottom:1px solid var(--rule)}
.specs dd{margin:0;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--rule)}

/* ---- 料金 ---- */
.plans{padding:72px 0;background:var(--paper-1)}
.plans h2{font-size:clamp(1.35rem,3.4vw,1.75rem);line-height:1.55;margin:0 0 16px;letter-spacing:.04em}
.plans-lead{color:var(--ink-2);margin:0 0 28px}
.plan-grid{display:grid;gap:18px}
.plan{min-width:0;padding:28px 24px;background:var(--ground);border:1px solid var(--rule);border-radius:16px}
.plan.pro{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.plan h3{font-size:1rem;margin:0 0 14px}
.plan-price{font-size:1.9rem;font-weight:700;line-height:1.4;margin:0 0 20px}
.plan-price span{font-family:"Zen Kaku Gothic New",sans-serif;font-size:.8rem;font-weight:400;color:var(--ink-2)}
.plan ul{padding-left:1.2em;margin:0;color:var(--ink-2);font-size:.9rem}
.plan li+li{margin-top:8px}
.plan-note,.plans-footnote{color:var(--ink-2);font-size:.8rem;line-height:1.9;margin:20px 0 0}

/* ---- 最後の一押し ---- */
.cta{position:relative;padding:72px 0 80px;overflow:hidden;
  background:linear-gradient(160deg,var(--paper-1) 0%,var(--paper-3) 100%)}
.cta .wrap{position:relative;z-index:1;display:grid;gap:24px;justify-items:center;text-align:center}
.cta .icon{width:96px;height:96px;border-radius:22px;box-shadow:0 14px 30px -12px rgba(var(--shadow),.45)}
.cta h2{font-size:clamp(1.3rem,3.6vw,1.75rem);font-weight:700;line-height:1.55;margin:0;letter-spacing:.04em}
.cta .badges{justify-content:center}

/* ---- 文章のページ（プライバシー・規約・特商法・サポート） ---- */
.doc{max-width:760px;margin:0 auto;padding:48px 0 80px}
.doc .eyebrow{font-size:.7rem;letter-spacing:.18em;color:var(--brand);font-weight:700;margin:0 0 10px}
.doc h1{font-size:1.65rem;font-weight:700;line-height:1.5;margin:0 0 28px;letter-spacing:.03em}
.doc h2{font-size:1.15rem;font-weight:700;line-height:1.6;margin:44px 0 12px}
.doc h3{font-size:1rem;font-weight:700;margin:28px 0 8px}
.doc p{margin:0 0 16px;color:var(--ink-2)}
.doc ul,.doc ol{margin:0 0 16px;padding-left:1.4em;color:var(--ink-2)}
.doc li{margin:4px 0}
.doc .meta{font-size:.86rem;color:var(--ink-3)}
.doc table{border-collapse:collapse;width:100%;font-size:.92rem;margin:0 0 20px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--rule);padding:8px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--paper-2);font-weight:700;white-space:nowrap}
.doc .card{margin-top:28px;padding:24px;background:var(--ground);border:1px solid var(--rule);border-radius:16px}
.doc .card h2{margin-top:0}
.doc .contact{display:inline-block;margin:4px 0 16px;padding:9px 20px;border:1px solid var(--brand);
  border-radius:999px;text-decoration:none;font-weight:700}
.doc .english{margin-top:56px;border-top:1px solid var(--rule);padding-top:32px}

/* ---- 404 ---- */
.notfound{padding:96px 0 104px;text-align:center;background:linear-gradient(160deg,var(--paper-1),var(--paper-3))}
.notfound .code{font-size:.72rem;letter-spacing:.16em;color:var(--brand);font-weight:700;margin:0 0 14px}
.notfound h1{font-size:clamp(1.4rem,4vw,1.9rem);font-weight:700;line-height:1.5;margin:0 0 16px;letter-spacing:.03em}
.notfound p{margin:0 auto 32px;color:var(--ink-2);max-width:30em}
.notfound ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.notfound a{display:inline-flex;background:var(--ground);border:1px solid var(--rule);
  color:var(--ink-2);text-decoration:none;padding:9px 18px;border-radius:999px;font-size:.86rem;font-weight:700}
.notfound a:hover{border-color:var(--brand);color:var(--brand-strong)}

/* ---- 2カラムに開く ---- */
@media (min-width:820px){
  .hero{padding:80px 0 92px}
  /* 背景の「」は、1カラムだとアイコンや見出しに重なるので2カラムのときだけ出す。 */
  .hero::before,.hero::after{display:block}
  .hero .wrap{grid-template-columns:1fr 420px;gap:56px;align-items:center}
  .hero h1{font-size:clamp(2.4rem,4.5vw,3.3rem)}
  .feature .wrap{grid-template-columns:1fr 300px;gap:72px}
  .feature.rev .wrap{grid-template-columns:300px 1fr}
  .feature.rev .col{order:2}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc td:first-child{white-space:nowrap}
}
@media (max-width:520px){
  .nav .wrap{gap:16px}
  .nav a.brand span{display:none}
}

/* ---- フッタ ---- */
footer.site{background:var(--ground);border-top:1px solid var(--rule);padding:44px 0 56px;font-size:.86rem;color:var(--ink-3)}
footer.site .cols{display:flex;flex-wrap:wrap;gap:28px 64px;margin-bottom:32px}
footer.site h2{font-size:.7rem;letter-spacing:.14em;color:var(--ink-3);margin:0 0 12px;font-weight:700;font-family:inherit}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer.site a{text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .biz{margin:0;line-height:1.9}
footer.site .copy{border-top:1px solid var(--rule);padding-top:20px}
footer.site .tm{display:inline-block;margin-top:8px;font-size:.76rem;opacity:.75}