/* skyflew — 白基調・ラムス方式
   色は6つだけ。差し色 #F74828 は「数・区切り・押す場所・動画の印」の4役にだけ使う。
   詳しい規則はファイル末尾の「差し色」の項を読むこと。 */
:root{
  color-scheme: light;

  --ground:#F5F5F5;      /* 地 */
  --surface:#FFFFFF;     /* カードの面 */
  --line:#E5E7EB;        /* 罫線 */
  --ink:#000000;         /* 文字 */
  --ink-soft:#585A5A;    /* 補助文字 */
  --accent:#F74828;      /* 差し色。使う場所は末尾の規則を参照 */

  --font-latin:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ja:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-ja);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

/* ---- 器 ---- */
.wrap{
  max-width:520px;
  margin:0 auto;
  padding:26px 20px 64px;
  display:flex;
  flex-direction:column;
  gap:44px;
}
.sect{ display:flex; flex-direction:column; gap:16px; }
.sect:empty{ display:none; }   /* 中身を書くまで余白を作らない */

/* ---- 共通の部品 ---- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  margin:0;
  padding:18px;
}
.eyebrow{
  font-family:var(--font-latin);
  margin:0;              /* h2 に付けても既定の余白が出ないように */
  font-weight:400;       /* h2 の既定の太字を打ち消す */
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---- 名乗り ---- */
.bar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mark{
  font-family:var(--font-latin);
  font-size:15px;
  font-weight:500;
  /* 大文字は字面が詰まって見えるので、この設計の大文字ラベルに合わせて少し開ける */
  letter-spacing:.06em;
}
.lead{
  font-family:var(--font-ja);
  font-weight:600;
  font-size:21px;
  line-height:1.7;
  letter-spacing:-.012em;
  margin:0;
}

/* ---- 本文（将来の記事セクションでもこの型を使う） ---- */
.prose{ display:flex; flex-direction:column; gap:14px; }
.prose p{ margin:0; font-size:14px; line-height:2; letter-spacing:.01em; }

/* ---- 資格 ---- */
.certs{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
}
.cert{ padding:12px 16px; display:flex; flex-direction:column; gap:3px; }
.cert + .cert{ border-top:1px solid var(--line); }
.cert-ja{ font-size:13.5px; font-weight:600; letter-spacing:-.005em; line-height:1.6; }
.cert-en{
  font-family:var(--font-latin);
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
}

/* ---- 盤面（ET66のキーパッドから） ---- */
.count{
  font-family:var(--font-latin);
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.pad{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pk{
  background:var(--surface);
  border:1px solid var(--line);
  min-height:142px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.pk-n{
  font-family:var(--font-latin);
  font-size:26px;
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.pk-b{ display:block; }
.pk-t{ display:block; font-size:12.5px; font-weight:600; letter-spacing:-.008em; }
.pk-s{ display:block; font-size:10px; line-height:1.65; color:var(--ink-soft); margin-top:4px; }

/* ---- 発信 ---- */
.links{ list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); }
.links li + li{ border-top:1px solid var(--line); }
.link{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  color:var(--ink);
  text-decoration:none;
}
.link:hover .link-t, .link:focus-visible .link-t{ text-decoration:underline; }
.link:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.link-t{ font-size:13.5px; font-weight:600; letter-spacing:-.005em; }
.link-s{ font-family:var(--font-latin); font-size:9.5px; letter-spacing:.14em; color:var(--ink-soft); }

/* ---- 連絡 ---- */
.contact{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0;
  color:var(--ink);
  text-decoration:none;
}
.contact:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.key{
  width:52px;
  height:52px;
  flex:none;
  background:var(--accent);   /* 差し色の3役のうち「押す場所」 */
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-b{ display:block; }
.contact-t{ display:block; font-size:14px; font-weight:600; letter-spacing:-.005em; }
.contact:hover .contact-t{ text-decoration:underline; }
.contact-s{
  display:block;
  font-family:var(--font-latin);
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ---- 差し色 #F74828 ----
   出してよいのは次の4役だけ。それ以外に使うと意味を失って飾りになる。
   役を増やすときは、この一覧と tools/check.py の ACCENT_ALLOWED の両方に
   役と理由を先に書いてから増やすこと。
     1. 数  … 盤面の大きな数字（26px。白地でも3.55:1あり、大きい文字の基準3:1を満たす）
     2. 区切り … セクション見出しの下の短い罫
     3. 押す場所 … 連絡するのキー（別途 .key で定義）
     4. 動画の印 … ギャラリーの ▶ アイコン（黒地に5.9:1あり読みやすい。別途 .vmark で定義）
   小さいラベルの数字を色にしないこと。10〜12pxでは3.55:1では読みにくい。 */
.pk-n{ color:var(--accent); }

.sect > .eyebrow,
.sect > .bar{ position:relative; padding-bottom:9px; }
.sect > .eyebrow::after,
.sect > .bar::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:34px;
  height:2px;
  background:var(--accent);
}

/* ---- トップの切り替え ----
   3枚を重ねて、CSSだけでクロスフェードさせる（JavaScriptは使わない）。
   1枚3秒・全体9秒で1周。速さを変えるときは @keyframes の割合も
   一緒に計算し直すこと（下に式を書いてある）。 */
.hero.card{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  padding:0;   /* .card の18pxを打ち消す。順番ではなく詳細度で勝たせている
                  （.hero 単独だと .card と同点で、CSSを並べ替えると余白が復活する） */
}
/* 3枚は <img> ではなく背景画像で置く。
   display:none の中の <img> はそれでも取りに行かれるが、背景画像は行かれない。
   おかげで「動きを減らす」設定の人は、一度も見ない2枚目・3枚目（実測399KB）を
   そもそも受け取らずに済む。拡大表示(.lb)と同じ書き方に揃えてもいる。 */
.hslide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  animation:heroFade 9s linear infinite;
}
.hslide:nth-child(1){ animation-delay:0s; }
.hslide:nth-child(2){ animation-delay:3s; }
.hslide:nth-child(3){ animation-delay:6s; }

/* 切り替えの作り方には落とし穴がある。前の1枚を先に薄くすると、次の1枚が
   出そろうまでの一瞬、どちらも不透明でない時間ができて、後ろの白が透ける
   （実測: 6秒ごとに白が最大55.6%見えていた）。
   なので「次が完全に重なるまで前を消さない」。
   さらに z-index を切り替えて、出てくる側を必ず手前にする。こうしないと
   3枚目→1枚目の折り返しだけ、上に居る3枚目が消える形になって切り替えが飛ぶ。 */
/* 速さを変えるときの式（1周をD秒・重なりをF秒・3枚とする）
     現れ終わる     = F / D * 100
     次が現れ始める = 100 / 3           ← 3枚なので常に 33.33%
     次が重なりきる = 33.33 + F / D * 100
   いまは D=9秒・F=0.5秒 なので 5.56% / 33.33% / 38.89%。
   animation-delay は D/3 ずつ（0s / 3s / 6s）。
   この計算を外すと、切り替わりの一瞬だけ後ろの白が透ける。 */
@keyframes heroFade{
  0%      { opacity:0; z-index:2; }   /* 手前で薄く現れる */
  5.56%   { opacity:1; z-index:2; }   /* 0.5秒で現れ終わる */
  33.33%  { opacity:1; z-index:2; }   /* ここで次の1枚が現れはじめる（3秒） */
  33.34%  { opacity:1; z-index:1; }   /* 次に手前を譲る。まだ消さない */
  38.89%  { opacity:1; z-index:1; }   /* 次が完全に重なった（3.5秒） */
  38.90%  { opacity:0; z-index:1; }   /* 隠れている間に消す */
  100%    { opacity:0; z-index:1; }
}

/* 動き続ける画面は人によって不快・不調を招く。設定で動きを減らしている人には
   切り替えず、1枚目だけを出す。これは任意ではない。 */
@media (prefers-reduced-motion: reduce){
  /* 2枚目・3枚目は display:none にする。opacity:0 だと見えないだけで
     ダウンロードは起きてしまう。display:none なら通信そのものが起きない。 */
  .hslide{ animation:none; display:none; }
  .hslide:nth-child(1){ display:block; opacity:1; }
}

/* ---- ギャラリー ----
   撮ったままの比率で2列に流す。写真を切らない。 */
.gal{ columns:2; column-gap:8px; }
.gitem{
  display:block;
  position:relative;
  margin-bottom:8px;
  break-inside:avoid;
  border:1px solid var(--line);
  background:var(--surface);
}
.gitem img{ display:block; width:100%; height:auto; }
/* 拡大を閉じるとこのマス目に戻る。上端ぴったりだと戻ったのが分かりにくい */
.gitem{ scroll-margin-top:24px; }
.gitem:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.vmark{
  position:absolute;
  left:8px;
  bottom:8px;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);   /* 差し色の4役のうち「動画の印」 */
  color:var(--ink);
  font-size:9px;
  line-height:1;
}

/* ---- 拡大表示 ----
   CSSの :target だけで作る（JavaScriptは使わない）。
   閉じるリンクは #g001 のような写真ごとのマス目に戻すので、閉じたとき
   見ていた写真の位置に戻る（一覧の先頭には飛ばない）。 */
.lb{ display:none; }
.lb:target{
  display:flex;
  position:fixed;
  inset:0;
  z-index:10;
  align-items:center;
  justify-content:center;
  padding:20px;
  background-color:var(--ink);
  /* 背景は2枚重ね（上=拡大用1600px、下=一覧のサムネイル）。
     サムネイルは押した一覧の画像そのもので既に手元にあるため、
     通信を増やさずに、押した瞬間ぼんやりした絵が出る。
     1枚だけだと、拡大用が届くまで数百ミリ秒ただの黒い画面になる。
     指定はどちらの層にも同じように効かせる。 */
  background-size:contain, contain;
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  overscroll-behavior:contain;
}
.lb-bg{ position:absolute; inset:0; }
.lb video{
  position:relative;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}
.lb-x{
  position:absolute;
  top:12px;
  right:16px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--surface);
  font-family:var(--font-latin);
  font-size:22px;
  text-decoration:none;
}
.lb-x:focus-visible{ outline:2px solid var(--surface); outline-offset:2px; }

/* ---- デスクトップ（幅900px以上） ----
   広げるのは「見るもの」だけ。読むものは広げない。
   日本語の本文は1行30〜40文字が読みやすい上限で、14pxだと620pxがその幅にあたる。
   器と一緒に1400pxまで広げると1行100文字を超えて読めなくなる。
   900px未満（スマホ・タブレット縦）の見え方はここでは一切変えない。 */
@media (min-width: 900px){
  .wrap{ max-width:1400px; }

  /* 4:5のまま広げると高さが1750pxになり写真だけで画面2枚分を占めるため横長にする。
     同じ1枚をスマホでは4:5で使うので、トップに置く写真は横位置か正方形に近いものを選ぶ。
     セレクタは基本側と同じ .hero.card にする。メディアクエリは詳細度を上げないので、
     .hero 単独だと基本側の .hero.card に負けて4:5のままになる */
  .hero.card{ aspect-ratio:16/9; }

  .lead{ font-size:30px; max-width:20em; }   /* 文章を長くしても1行が伸びすぎないように */

  /* 読むものは読める幅に留める */
  .prose,
  .certs{ max-width:620px; }

  .pad{ grid-template-columns:repeat(4, 1fr); }
  .gal{ columns:4; }
}

/* ---- 前ページだけの2段組（幅1000px以上） ----
   900px以上では器が1400pxに広がるのに、読むもの（.prose / .certs）は620pxで
   止めてある。つまりABOUTの右に700px以上の空白が最初から生まれている。
   そこにCHANNELSを入れて、空白を埋める。

   左右は同じ幅にする。CHANNELSはいちばん長い行が
   「くらべるお金｜数字で見るお金の基礎」(228px) + 余白12 + 「INSTAGRAM」(66px)
   + 内側の余白32 + 枠線2 = 340px 必要なので、半分でも十分に収まる。

   なぜ1000pxからか: 半分ずつだと1000pxの画面で1段が452px。
   14pxの日本語で1行32字にあたり、読みやすい30〜40字の範囲に入る。
   900pxだと402px＝28字で範囲を割る。

   .home（＝index.html）にだけ掛ける。写真ページや愛用品ページの .wrap まで
   2段組にすると、id の無いセクションが左段に押し込まれて右が空く。
   行と列は全部その場で指定する。自動配置に任せると、セクションを1つ足しただけで
   並びが崩れて、しかも崩れたことに気づけない。 */
@media (min-width: 1000px){
  .home{
    display:grid;
    /* 段そのものを620pxで打ち止めにし、余った幅は段と段の「間」に送る。
       1fr のままだと段は652pxまで伸びるのに、中の札は620pxで止まるので、
       右端に32pxの半端な隙間ができて、下のTOOLSと右端が合わなくなる。
       この書き方なら、札の幅も左右の端も、下のTOOLSと完全に一致する。 */
    grid-template-columns:repeat(2, minmax(0, 620px));
    justify-content:space-between;
    column-gap:56px;
    row-gap:44px;
    align-items:start;      /* 背の低いほうを引き伸ばさない */
  }
  .home > #top     { grid-area:1 / 1 / 2 / 3; }
  .home > #about   { grid-area:2 / 1 / 3 / 2; }
  .home > #channels{ grid-area:2 / 2 / 3 / 3; }
  .home > #tools   { grid-area:3 / 1 / 4 / 3; }
  .home > #photos  { grid-area:4 / 1 / 5 / 3; }
  .home > #contact { grid-area:5 / 1 / 6 / 3; }
}

/* ---- 問い合わせフォーム ----
   メールアドレスをページに書かないための仕組み。書かなければ自動収集のしようがない。
   HTMLのフォームは JavaScript 無しで送信できるので、この設計を崩さずに済む。 */
.form{ display:flex; flex-direction:column; gap:14px; }
.form-lead{ font-size:13px; color:var(--ink-soft); margin:0; }
.fld{ display:flex; flex-direction:column; gap:5px; }
.fld-t{
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}
.req{
  font-family:var(--font-latin);
  font-size:9px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:1px 5px;
}
.fld-i{
  font-family:var(--font-ja);
  /* iPhoneのSafariは、文字が16px未満の入力欄を押すと画面を勝手に拡大する。
     拡大されると横スクロールが出て、そこから戻れなくなる人がいる。
     本文は14pxだが、入力欄だけは16pxにする。見た目より、押せることを優先する。 */
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  padding:11px 12px;
  width:100%;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.fld-i:focus{ outline:2px solid var(--ink); outline-offset:-2px; }
.fld-a{ resize:vertical; min-height:120px; }
select.fld-i{ padding-right:12px; }

/* 自動投稿よけ。人の目にも読み上げにも触れさせない。
   display:none だと埋めない仕掛けもあるので、画面の外へ追い出す形にする。 */
.pot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.send{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:0;
  margin:2px 0 0;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-ja);
  text-align:left;
  cursor:pointer;
}
.send:hover .contact-t{ text-decoration:underline; }
.send:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---- つくったもの一覧（tools.html） ----
   20個を分野ごとに並べる。写真ページと違い、ここは「読むもの」なので
   1枚あたりの幅を欲張らない。1行が長くなると誰も読まない。 */
.grp{
  font-family:var(--font-ja);
  font-size:14px;
  font-weight:600;
  margin:34px 0 2px;
}
.grp:first-of-type{ margin-top:6px; }
.grp-s{
  font-family:var(--font-latin);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.apps{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:700px){ .apps{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1100px){ .apps{ grid-template-columns:repeat(3, 1fr); } }
.app{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:16px;
}
.app-t{ font-size:14px; font-weight:600; margin:0; letter-spacing:-.005em; }
.app-s{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.8; }
.app-b{ font-size:13px; margin:0; line-height:1.95; }
.app-m{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:baseline;
  justify-content:space-between;
  margin:6px 0 0;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.app-tech{
  font-family:var(--font-latin);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.app-st{
  font-family:var(--font-ja);
  font-size:10.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ---- 愛用品（shop.html） ----
   写真は正方形に切り揃える。ここは作品ではなく「商品の一覧」なので、
   札の高さが揃っていないと店に見えない。
   写真ページの『撮ったままの比率で切らない』とは、わざと別の扱いにしている。 */
.disc{
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.9;
  margin:0 0 4px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
}
.pgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
@media (min-width:760px){ .pgrid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1100px){ .pgrid{ grid-template-columns:repeat(4, 1fr); } }
.pitem{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.pitem:hover .pnm{ text-decoration:underline; }
.pitem:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.pph{ display:block; background:var(--bg); }
.pph img{ display:block; width:100%; height:auto; }
.pmeta{ display:flex; flex-direction:column; gap:3px; padding:12px 12px 14px; flex:1; }
.pnm{ font-size:13.5px; font-weight:600; line-height:1.6; letter-spacing:-.005em; }
.pnt{ font-size:12px; color:var(--ink-soft); line-height:1.8; flex:1; }
.pct{
  font-family:var(--font-latin);
  font-size:9px;
  letter-spacing:.16em;
  color:var(--ink-soft);
  margin-top:8px;
}

/* ---- もっと見る ---- */
.more{ margin:0; }
.morelink{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  padding:14px 16px;
  color:var(--ink);
  text-decoration:none;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
}
.morelink:hover{ text-decoration:underline; }
.morelink:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }

/* ---- 戻る ---- */
.backlink{
  font-family:var(--font-latin);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  text-decoration:none;
}
.backlink:hover{ text-decoration:underline; }
.backlink:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }