/* -----------------------------------------------------------------------------
   isasaka-lab.com の共通スタイル。

   配色: グレースケールのみ。色は使わない。
   明るい灰色の地に濃い墨の文字。区切りは細い線だけ。影と角丸は使わない。
   余白と字の大きさで階層を作る。

   ★ このファイルはサイトのリポジトリが持っている（アプリ側では生成しない）。
     こども家計簿のページも同じものを読むので、直すと両方の見た目が変わる。
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light dark;
  --bg:#f6f6f6;
  --card:#ffffff;
  --fg:#141414;
  --muted:#5c5c5c;
  --faint:#8e8e8e;
  --line:#e2e2e2;
  --line-strong:#c8c8c8;
  --accent:#141414;
  --accent-fg:#ffffff;
  --ok:#3d3d3d;
  --ng:#000000;
  --measure:34rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121212;
    --card:#1a1a1a;
    --fg:#ededed;
    --muted:#a6a6a6;
    --faint:#7a7a7a;
    --line:#2c2c2c;
    --line-strong:#3f3f3f;
    --accent:#ededed;
    --accent-fg:#121212;
    --ok:#c9c9c9;
    --ng:#ffffff;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 写真を差し替えたときに、枠から出ないようにする */
img,svg,video{max-width:100%;height:auto;display:block}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",
    "Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.9;letter-spacing:.01em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  /* 途中で折り返せない長い英字（URL）が、横スクロールを作らないようにする */
  overflow-wrap:break-word;
}
a{overflow-wrap:anywhere}

/* 見出しも本文と同じ書体のまま、字間を詰めて太らせる。
   書体を混ぜない方が静かに見える */
h1,h2,h3,.brand,.lead{letter-spacing:-.005em;text-wrap:pretty}

/* 背景に浮かぶ図形は使わない。
   生成されたページの HTML にはまだ残っているので、ここで消す */
.deco{display:none !important}

/* --------------------------------------------------------------- 全体の骨組み */
.layout{
  display:grid;grid-template-columns:15rem minmax(0,1fr);
  max-width:72rem;margin:0 auto;min-height:100vh;
}
.content{min-width:0;border-left:1px solid var(--line);background:var(--card)}

.side{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:3.25rem 1.75rem 2rem;display:flex;flex-direction:column;
}
.brand{
  display:block;font-size:1.0625rem;font-weight:700;
  color:var(--fg);text-decoration:none;border:0;margin-bottom:2.25rem;
}
.navhead{
  margin:1.75rem 0 .5rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;color:var(--faint);
}
.navgroup{display:flex;flex-direction:column}
.navgroup a{
  display:block;padding:.1875rem 0;font-size:.875rem;line-height:1.7;
  color:var(--muted);text-decoration:none;border:0;
}
.navgroup a:hover{color:var(--fg)}
.navgroup a.on{color:var(--fg);font-weight:700}
.sidefoot{margin-top:auto;padding-top:2rem}

/* 画面が狭いときは、上に畳んだメニューを出す */
.mobilebar{display:none}
@media (max-width:56rem){
  .layout{display:block;max-width:none}
  .content{border-left:0}
  .side{display:none}
  .mobilebar{
    display:block;position:sticky;top:0;z-index:10;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:.875rem 1.25rem;
  }
  .mobilebar .brand{margin:0;display:inline-block}
  .mobilebar summary{
    list-style:none;cursor:pointer;font-size:.8125rem;color:var(--muted);
    padding:.5rem 0;
  }
  .mobilebar summary::-webkit-details-marker{display:none}
  .mobilebar nav{padding-bottom:.5rem}
  .mobilebar .navhead{margin-top:1rem}
  /* 指で押せる高さにする（44px 目安） */
  .mobilebar .navgroup a{padding:.5rem 0;font-size:.9375rem}
}

/* ------------------------------------------------------------------ 本文の器 */
main{padding:4.5rem 3.5rem 5rem}
@media (max-width:56rem){main{padding:2.5rem 1.25rem 3.5rem}}
.sheet{max-width:var(--measure);margin:0 auto}

h1{margin:0 0 .75rem;font-size:1.875rem;line-height:1.5;font-weight:700}
h2{
  margin:3.25rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:1.125rem;line-height:1.6;font-weight:700;
}
h3{margin:1.75rem 0 .5rem;font-size:1rem;font-weight:700}
p{margin:0 0 1.25rem}
a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-strong)}
a:hover{border-bottom-color:var(--fg)}
ul{margin:0 0 1.25rem;padding-left:1.15rem}
li{margin:.35rem 0}

.lead{font-size:1.0625rem;color:var(--muted);margin:0 0 2.5rem;line-height:1.85}
.fine{font-size:.8125rem;color:var(--faint);line-height:1.8}

/* 囲み。影は付けず、細い線だけで区切る */
.card{
  background:transparent;border:1px solid var(--line);
  padding:1.5rem 1.5rem .25rem;margin:0 0 .75rem;
}
.card > :last-child{margin-bottom:1.25rem}
.card h3{margin-top:0}
.notice{
  border-left:2px solid var(--fg);padding:.125rem 0 .125rem 1rem;
  margin:0 0 1.75rem;color:var(--muted);
}
.rows p{margin:0 0 .875rem}
.rows strong{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  color:var(--faint);margin-bottom:.125rem;
}

/* ----------------------------------------------------------------- 入力の欄 */
form{margin:0}
.field{margin:0 0 1.5rem}
label{display:block;font-size:.8125rem;font-weight:700;margin-bottom:.375rem}
.req{font-size:.6875rem;margin-left:.375rem}
.opt{color:var(--faint);font-size:.6875rem;margin-left:.375rem;font-weight:400}
input,select,textarea{
  width:100%;padding:.75rem .875rem;font:inherit;font-size:1rem;
  color:var(--fg);background:var(--card);
  border:1px solid var(--line-strong);border-radius:0;
}
textarea{min-height:11rem;resize:vertical;line-height:1.8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fg)}
.hint{font-size:.75rem;color:var(--faint);margin:.375rem 0 0;line-height:1.8}

button{
  font:inherit;font-size:.9375rem;font-weight:700;cursor:pointer;width:100%;
  padding:.875rem 2rem;border:1px solid var(--fg);border-radius:0;
  background:var(--accent);color:var(--accent-fg);
}
button:hover:not(:disabled){background:transparent;color:var(--fg)}
button:disabled{opacity:.35;cursor:default}

/* 迷惑投稿よけの隠し欄。人には見せない */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.status{display:none;margin:1rem 0 0;font-size:.875rem}
.status.show{display:block}
.status.ok{color:var(--ok)}
.status.ng{color:var(--ng);font-weight:700}

/* -------------------------------------------------------------------- 足もと */
footer.site{
  padding:2.5rem 3.5rem 3.5rem;border-top:1px solid var(--line);
  background:var(--card);
}
@media (max-width:56rem){footer.site{padding:2rem 1.25rem 3rem}}
footer.site .fine{margin:0 0 .25rem}

/* =============================================================================
   ここから下は、手で書いているページ（トップ・404・こどもこえログの紹介）で使う。
   こども家計簿の生成ページは上の .sheet を使うので、ここは効かない。
   写真は本人が用意する。差し替えるまでは枠だけが出る
   ============================================================================= */
.lp{max-width:44rem;margin:0 auto}
.lp h1{font-size:2.25rem;line-height:1.45;margin:0 0 1rem}
@media (max-width:56rem){.lp h1{font-size:1.75rem}}
.lp .lead{font-size:1.125rem;margin-bottom:2rem}

/* 節。線ではなく余白で切る */
.lp section{padding:3.5rem 0;border-top:1px solid var(--line)}
.lp section:first-of-type{border-top:0;padding-top:0}
.lp section > h2{
  margin:0 0 1.5rem;padding:0;border:0;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;color:var(--faint);
}
.lp section > h2 + .big{margin-top:-.5rem}
.lp .big{font-size:1.5rem;line-height:1.7;font-weight:700;margin:0 0 1.25rem}
@media (max-width:56rem){.lp .big{font-size:1.25rem}}

/* 写真の枠。用意できるまでは「写真」とだけ出る */
.shot{
  display:block;width:100%;background:var(--bg);
  border:1px solid var(--line);margin:0 0 .75rem;
}
figure{margin:0 0 2rem}
figcaption{font-size:.8125rem;color:var(--faint);line-height:1.8}
.shot-empty{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;color:var(--faint);font-size:.8125rem;letter-spacing:.1em;
}
.shot-phone{aspect-ratio:9/16;max-width:15rem;margin-inline:auto}

/* 横に2つ・3つ並べる */
.grid{display:grid;gap:1.5rem;margin:0 0 1.5rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:48rem){.grid-3{grid-template-columns:1fr}}
@media (max-width:40rem){.grid-2{grid-template-columns:1fr}}

/* 番号つきの手順 */
.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{
  counter-increment:step;position:relative;
  padding-left:2.75rem;margin:0 0 2rem;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:.15rem;
  width:1.75rem;height:1.75rem;border:1px solid var(--fg);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;
}
.steps strong{display:block;font-size:1rem;margin-bottom:.25rem}

/* よくある質問 */
.qa{border-top:1px solid var(--line);padding:1.25rem 0}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa h3{margin:0 0 .5rem;font-size:.9375rem}
.qa p{margin:0;color:var(--muted);font-size:.9375rem}

/* 料金の2枚 */
.plan{border:1px solid var(--line);padding:1.75rem 1.5rem}
.plan.pro{border-color:var(--fg)}
.plan h3{margin:0 0 .25rem}
.plan .price{font-size:1.5rem;font-weight:700;margin:0 0 1rem;line-height:1.4}
.plan ul{margin:0;padding-left:1.15rem;font-size:.9375rem;color:var(--muted)}

/* 入手ボタン。出すまでは押せない見た目にしておく */
.getrow{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin:0 0 1rem}
.get{
  display:inline-block;padding:.8125rem 1.75rem;font-size:.9375rem;font-weight:700;
  border:1px solid var(--fg);background:var(--accent);color:var(--accent-fg);
  text-decoration:none;
}
.get:hover{background:transparent;color:var(--fg);border-color:var(--fg)}
.get.soon{
  background:transparent;color:var(--faint);border-color:var(--line-strong);
  cursor:default;
}