/* ============================================
   カミワザ — 共通スタイル

   考えかた
   ・色は3つだけ。紙（グレージュ）／墨（文字）／差し色（テラコッタ）
   ・角は落としすぎない。2px。サロンの什器みたいに直線で
   ・囲みは影ではなく1pxの罫線。並べても静か
   ・見出しは明朝、本文はゴシック、英字はJost
   ============================================ */

:root{
  color-scheme:light dark;

  --paper:#F4F1EC;        /* 背景・グレージュ */
  --paper-deep:#EBE6DF;   /* 一段沈めたいとき */
  --card:#FFFFFF;

  --ink:#231F1C;          /* 文字・墨 */
  --ink-mid:#7B726A;      /* 補足 */
  --ink-soft:#ADA398;     /* いちばん薄い字・罫線に近い */

  --hair:#E2DCD3;         /* 罫線 */
  --accent:#A26A57;       /* 差し色・テラコッタ */
  --accent-deep:#8A5645;
  --accent-soft:#EFE6E1;  /* 差し色の面 */

  --radius:2px;
  --radius-lg:3px;

  /* 塗った面の上に乗る字。--ink や --accent で塗った上に置く。
     暗いほうでは --ink が白に近づくので、この字は逆に暗くする */
  --on-ink:#FFFFFF;
  --on-accent:#FFFFFF;

  --hover:#FBF9F6;                    /* 触れたときの、ごく淡い面 */
  --shadow:rgba(35,31,28,.14);
  --scrim:rgba(35,31,28,.92);         /* 写真を大きく見るときの暗幕 */
  --veil-fade:rgba(244,241,236,.55);  /* ログイン写真の裾。地の色へ溶かす */

  /* 描いた絵と写真を載せる紙。暗いほうでも白のまま。
     絵は白い紙に黒い線で描いてあるので、紙ごと暗くすると線が消える */
  --plate:#FFFFFF;

  /* 旧名。既存の記述が参照している */
  --pink:var(--accent);
  --pink-pale:var(--accent-soft);
  --grad:linear-gradient(120deg,#B98066 0%,#A26A57 100%);
}

/* ---------- 暗いほうの色 ----------
   下の2つのかたまりは中身がまったく同じ。CSSでは共有できないので
   2回書いてある。片方だけ直すとちぐはぐになるので、必ず両方直すこと。

   ・1つめ … 端末が暗い設定のとき（「明るい」を選んでいなければ従う）
   ・2つめ … 設定ページで「暗い」を選んだとき
*/
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1A1817;
    --paper-deep:#141211;
    --card:#232020;

    --ink:#EDE8E2;
    --ink-mid:#A79E95;
    --ink-soft:#8A8078;

    --hair:#39332F;
    --accent:#C58A73;
    --accent-deep:#DDA48D;   /* 明るいほうは「濃く」だが、暗いほうは「明るく」が強調 */
    --accent-soft:#3A2B25;

    --on-ink:#1A1817;
    --on-accent:#1A1817;

    --hover:#2B2725;
    --shadow:rgba(0,0,0,.5);
    --scrim:rgba(10,9,8,.94);
    --veil-fade:rgba(26,24,23,.55);

    --grad:linear-gradient(120deg,#D69C84 0%,#C58A73 100%);
  }
}

:root[data-theme="dark"]{
  --paper:#1A1817;
  --paper-deep:#141211;
  --card:#232020;

  --ink:#EDE8E2;
  --ink-mid:#A79E95;
  --ink-soft:#8A8078;

  --hair:#39332F;
  --accent:#C58A73;
  --accent-deep:#DDA48D;
  --accent-soft:#3A2B25;

  --on-ink:#1A1817;
  --on-accent:#1A1817;

  --hover:#2B2725;
  --shadow:rgba(0,0,0,.5);
  --scrim:rgba(10,9,8,.94);
  --veil-fade:rgba(26,24,23,.55);

  --grad:linear-gradient(120deg,#D69C84 0%,#C58A73 100%);
}

/* 手で選んだときは、ブラウザ側の部品（入力欄の枠など）もそちらに寄せる */
:root[data-theme="light"]{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}

*{box-sizing:border-box;}

/* 文字の大きさはここで決まる。
   各所は rem で書いてあるので、この1か所を変えると全部そろって変わる。
   120% ＝ もとの1.2倍 */
html{
  font-size:110%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-weight:400;
  font-size:.9375rem;   /* 19.2px × .9375 ＝ 18px（もとの15px × 1.2） */
  line-height:1.95;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--accent-soft);color:var(--ink);}

.sheet{
  max-width:620px;
  margin:0 auto;
  min-height:100vh;
  /* 下は、画面下に貼りついたタブの高さぶん空けておく。
     iPhoneのホームバーのぶんも足す。 */
  padding:0 24px calc(104px + env(safe-area-inset-bottom));
}

/* ============================================
   下に貼りつくタブ

   技術・座学・小テスト・検索・設定。
   どの画面からでも1回で行き来できるようにする。
   ============================================ */
.tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;

  /* いくつ並んでも横に等分する。
     数を決め打ちにすると、増やしたり減らしたりしたときに片寄る */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;

  background:var(--card);
  border-top:1px solid var(--hair);
  padding-bottom:env(safe-area-inset-bottom);
}

.tabbar__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;

  padding:10px 1px 11px;
  text-decoration:none;
  color:var(--ink-mid);

  /* 指で押しやすい高さを確保する */
  min-height:56px;
  -webkit-tap-highlight-color:transparent;
}

.tabbar__ja{
  font-family:"Shippori Mincho",serif;
  font-size:.75rem;
  letter-spacing:.02em;   /* いくつも並ぶので詰める */
  white-space:nowrap;
}
/* 「探す・聞く」だけ字数が多いので、そのぶん小さくする */
.tabbar__ja--wide{
  font-size:.6875rem;
  letter-spacing:-.01em;
}

.tabbar__en{
  font-family:"Jost",sans-serif;
  font-size:.5rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

.tabbar__item--active{
  color:var(--accent);
  background:var(--accent-soft);
}
.tabbar__item--active .tabbar__en{color:var(--accent);}

.tabbar__item:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

/* 画面が狭いときは英字を落として、日本語だけにする */
@media (max-width:360px){
  .tabbar__en{display:none;}
  .tabbar__ja{font-size:.6875rem;}
}

/* 書いているあいだは、下のタブを引っこめる

   スマホでキーボードが出ると、画面に貼りついたタブが
   キーボードの上に乗って、いま打っている行にかぶる。
   どこかの欄に字を入れているあいだだけ消す。
   指がはなれれば（キーボードが閉じれば）すぐ戻る。

   押しボタンや写真えらびでは消さないので、
   入る欄だけを名指しで並べている。 */
@media (max-width:520px){
  body:has(
    textarea:focus,
    select:focus,
    input[type="text"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus
  ) .tabbar{
    display:none;
  }

  /* 打っているところが画面の下に隠れたら、grow.js が画面を送って追いかける。
     ただし、いちばん下の欄はそれ以上スクロールできず、送りようがない。
     字を入れているあいだだけ、下に空きを足しておく。
     タブが消えたぶんも、ここで埋め合わせている。 */
  body:has(
    textarea:focus,
    input[type="text"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus
  ) .sheet{
    padding-bottom:60vh;
  }
}

/* 英字の小見出し（各所で使う共通の質感） */
.brand__sub,
.tech__en,
.top__en,
.title__step,
.sect__en,
.pager__dir,
.own__date{
  font-family:"Jost",sans-serif;
  text-transform:uppercase;
}

/* ============================================
   右上のメニュー（⋮）
   ============================================ */
.menu{
  position:fixed;
  top:10px;
  right:10px;
  z-index:20;
}

.menu__open{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.menu__open:hover{color:var(--accent);}
.menu__open:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.menu.is-open .menu__open{
  color:var(--accent);
  background:var(--card);
  border-color:var(--hair);
}

/* 三本線。開くとバツになる */
.menu__bars,
.menu__bars::before,
.menu__bars::after{
  display:block;
  width:26px;
  height:2px;
  background:currentColor;
  border-radius:1px;
  transition:transform .25s,opacity .2s;
}
.menu__bars{position:relative;}
.menu__bars::before,
.menu__bars::after{
  content:"";
  position:absolute;
  left:0;
}
.menu__bars::before{top:-8px;}
.menu__bars::after{top:8px;}

.menu.is-open .menu__bars{background:transparent;}
.menu.is-open .menu__bars::before{transform:translateY(8px) rotate(45deg);}
.menu.is-open .menu__bars::after{transform:translateY(-8px) rotate(-45deg);}

.menu__panel{
  position:absolute;
  top:48px;
  right:0;
  width:min(88vw, 340px);
  max-height:min(70vh, 520px);
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 32px var(--shadow);
  padding:14px;
}
.menu__panel[hidden]{display:none;}

.menu__input{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:10px 13px;
  -webkit-appearance:none;
  appearance:none;
}
.menu__input:focus{outline:none;border-color:var(--accent);background:var(--card);}
.menu__input::placeholder{color:var(--ink-soft);}
.menu__input::-webkit-search-cancel-button{-webkit-appearance:none;}

.menu__count,
.menu__none{
  margin:14px 2px 6px;
  font-size:.625rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}

.menu__hit{
  display:block;
  padding:10px 2px;
  border-top:1px solid var(--hair);
  text-decoration:none;
  color:var(--ink);
}
.menu__hit:hover{background:var(--hover);}
.menu__hit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

.menu__hit-path{
  display:block;
  font-size:.5625rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  margin-bottom:2px;
}
/* 長い文は2行までにする */
.menu__hit-body{
  display:-webkit-box;
  font-size:.8125rem;
  line-height:1.7;
  overflow:hidden;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
}

/* 検索結果のページへ */
.menu__all{
  display:block;
  margin-top:8px;
  padding:10px 2px;
  border-top:1px solid var(--hair);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--accent);
  text-decoration:none;
}
.menu__all:hover{color:var(--accent-deep);}

.menu__nav{
  display:flex;
  flex-direction:column;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--hair);
}
.menu__link{
  font-size:.8125rem;
  letter-spacing:.12em;
  color:var(--ink-mid);
  text-decoration:none;
  padding:10px 2px;
}
.menu__link:hover{color:var(--accent);}
.menu__link[hidden]{display:none;}

/* ---------- 戻る ---------- */
.top{padding:30px 0 0;}

/* いまいるところまでの道すじ。「もどる」の代わり */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  padding:4px 0;
  font-size:.6875rem;
  letter-spacing:.1em;
  line-height:1.9;
}
.crumbs__link{
  color:var(--ink-mid);
  text-decoration:none;
  transition:color .2s;
}
.crumbs__link:hover{color:var(--accent);}
.crumbs__link:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
/* 区切りの矢印。字より大きめにして、道すじが目で追えるように */
.crumbs__sep{
  font-size:1.125rem;
  line-height:1;
  color:var(--ink-soft);
}
/* いまいるところ。押せないので、色を変えて字だけにする */
.crumbs__now{color:var(--ink);}

.top__rule{
  border:none;
  border-top:1px solid var(--hair);
  margin:26px 0 0;
}

/* ---------- 戻る／進む ----------

   来た道を前後に動くためのもの。
   パンくず（上へ上がる）とは役目が違うので、その上に置く。
   どのページでも同じ位置に出したいので、back.js が
   .sheet のいちばん上に入れる。 */
.hops{
  display:flex;
  align-items:center;
  gap:16px;

  /* 紙の上端から少し下げる。下は次の見出しに近づけておく */
  margin:16px 0 -10px;
}

.hop{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 2px;

  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--ink-mid);
  background:none;
  border:0;
  cursor:pointer;
  transition:color .2s;
}
.hop:hover{color:var(--accent);}
.hop:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}

/* 先が無いときの「進む」。消すと戻るの位置が動いて押し間違えるので、
   場所は残したまま薄くする */
.hop[disabled]{color:var(--ink-soft);cursor:default;}
.hop[disabled]:hover{color:var(--ink-soft);}

.hop__arrow{font-size:.875rem;line-height:1;}

/* ============================================
   1. 技術一覧
   ============================================ */
.brand{padding:52px 0 0;text-align:center;}

.brand__name{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:2.125rem;
  letter-spacing:.34em;
  text-indent:.34em;      /* 字間の分だけ右にずれるのを戻す */
  line-height:1.4;
  margin:0;
  color:var(--ink);
}
.brand__sub{
  display:block;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--accent);
  margin-top:10px;
}
.brand__rule{
  border:none;
  border-top:1px solid var(--hair);
  margin:30px 0 0;
}

/* 誰として使っているか（ゲスト／ログイン中） */
.who{
  margin:14px 0 0;
  text-align:center;
  font-size:.6875rem;
  letter-spacing:.1em;
  line-height:1.9;
  color:var(--ink-soft);
}
.who a{
  color:var(--ink-mid);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:1px;
  margin-left:10px;
  transition:color .2s,border-color .2s;
}
.who a:hover{color:var(--accent);border-color:var(--accent);}
.who a:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}

.lead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:34px 0 16px;
}
.lead__ja{
  font-weight:500;
  font-size:.875rem;
  letter-spacing:.2em;
  margin:0;
}
.lead__count{
  font-family:"Jost",sans-serif;
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--ink-mid);
}

.list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair);}

/* 種類のまとまり（カット、パーマなど） */
.list__head{
  position:relative;
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--paper);
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  /* 見出しは全部閉じた形から始まるので、ここが一覧の入口になる。
     小さいままだと、押すところに見えない */
  font-size:.9375rem;
  letter-spacing:.24em;
  color:var(--ink-mid);
  padding:16px 22px 8px;
}
.list__head:first-child{padding-top:10px;}

/* 閉じているときは、下の余白も上とそろえる。
   8pxのままだと、見出しだけが並んだときに窮屈に見える。
   開いているときの8pxは、下に続くカードと近づけるためのもの */
.list__head:has(.head__fold[aria-expanded="false"]){padding-bottom:16px;}

/* ---------- 見出しを押して開け閉めする ---------- */
.head__fold{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;

  /* 見出しの字づかいは .list__head で決めてある。そのまま受けつぐ */
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition:color .2s;
}
.head__fold:hover{color:var(--accent);}
.head__fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 指で押すところを、見出しの行いっぱいに広げる。
   字の高さだけだと、スマホでは押しそこねる */
.head__fold::after{content:"";position:absolute;inset:0;}

.head__title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 開いていれば下向き、閉じていれば右向きの山かた */
.head__mark{
  flex:none;
  width:7px;
  height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .2s;
}
.head__fold[aria-expanded="true"] .head__mark{transform:rotate(45deg);}

/* 中に何件あるか。閉じていても数だけは分かるようにしておく。
   見出しより一段小さくして、数が名前を食わないようにする */
.head__num{
  flex:none;
  font-family:"Jost",sans-serif;
  font-weight:400;
  font-size:.8125rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
}

/* 罫線でつながった一覧ではなく、カードが離れて並ぶところ（練習の記録）
   に置く見出し。面で塗らず、上下の空きだけで区切る */
.list__head--plain{
  background:none;
  padding:16px 2px 8px;
}
.list__head--plain:has(.head__fold[aria-expanded="false"]){padding-bottom:10px;}

/* 閉じている見出しにぶら下がっているもの。
   .list > li より強く書かないと、display:grid に負ける */
.list > li.is-folded,
.lessons > li.is-folded{display:none;}

/* ---------- 離して並べる一覧（店のルール） ----------

   ふつうの .list は、1pxのすき間から一覧の地色をのぞかせて罫線にしている。
   ただしその地色は、いちばん下の行のあまった枠まで塗ってしまう。
   店ごとの件数はそろわないので、あまりが大きな色の塊になって目立つ。

   ここでは地色をやめ、カードそのものに罫線を持たせて、すき間も広く取る。
   1枚ずつ離れて並ぶので、あまった枠は紙のまま何も出ない。 */
.list--tiles{
  background:none;
  border-block:none;
  gap:8px;
}
.list--tiles .tech{
  border:1px solid var(--hair);
  border-radius:var(--radius);
}
.list--tiles .tech:hover{border-color:var(--accent);}

/* 見出しは面で塗らず、上下の空きだけで区切る */
.list--tiles .list__head{
  background:none;
  padding:18px 2px 6px;
}
.list--tiles .list__head:has(.head__fold[aria-expanded="false"]){padding-bottom:12px;}

/* 1列で、行として並べる一覧（練習タブ）。
   横に2つ並べるより、上から順に目で追うほうが数えやすい。
   .list の2列は画面幅の指定で後から効くので、
   クラスを2つ重ねて必ず勝つようにしてある */
.list.list--rows{grid-template-columns:1fr;}

/* 見出しを、そのかたまりごと動かす ↑ ↓。
   「なおす」を押している間だけ出す。
   開け閉めの当たり判定（.head__fold::after）が行いっぱいに
   広がっているので、こちらはその上に重ねる */
.head__move{display:none;gap:4px;flex:none;position:relative;z-index:1;}
.list.is-fixing .head__move{display:inline-flex;}
.head__btn{
  font-family:inherit;
  font-size:.8125rem;
  line-height:1;
  color:var(--ink-mid);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:6px 10px;
  cursor:pointer;
}
.head__btn:hover{border-color:var(--ink-soft);color:var(--accent);}
.head__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 横に並んだとき、カードの高さをそろえる */
.list > li{display:grid;}

.tech{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--card);
  border-radius:0;
  padding:20px 22px 19px;
  text-decoration:none;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  transition:background .2s;
}
.tech:hover{background:var(--hover);}
.tech:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

/* 左の細い差し色。ホバーで少しだけ伸びる */
.tech::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:var(--accent);
  transform:scaleY(.34);
  transform-origin:top;
  transition:transform .3s;
}
.tech:hover::before{transform:scaleY(1);}

.tech__en{
  display:block;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.28em;
  color:var(--ink-soft);
  margin-bottom:3px;
}
.tech__name{
  display:block;
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:1.125rem;
  letter-spacing:.12em;
  line-height:1.7;
}
/* どの店で教わったやり方か。名前の下に小さく */
.tech__shop{
  display:block;
  font-size:.6875rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
  line-height:1.7;
  margin-top:2px;
}
.tech__meta{
  display:block;
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  line-height:1.9;
  margin-top:2px;
}

.tech--empty{background:var(--paper);}
.tech--empty:hover{background:var(--paper-deep);}
.tech--empty::before{background:var(--ink-soft);opacity:.5;}
.tech--empty .tech__name{color:var(--ink-mid);}
.tech--empty .tech__meta{color:var(--ink-soft);}

/* ============================================
   2. 工程一覧
   ============================================ */
.top__en{
  display:block;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.3em;
  color:var(--accent);
  margin:44px 0 6px;
}
.top__name{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:1.75rem;
  letter-spacing:.16em;
  line-height:1.55;
  margin:0;
}
.top__meta{
  margin:10px 0 0;
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
}

.steps{list-style:none;margin:0;padding:24px 0 0;}
.steps__item{margin:0;}

.step{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:16px 18px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s,background .2s;
}
.step:hover{border-color:var(--ink-soft);}
.step:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.step__num{
  font-family:"Jost",sans-serif;
  font-weight:300;
  font-size:1.25rem;
  line-height:1;
  color:var(--accent);
  min-width:1.6em;
  text-align:center;
  padding-right:16px;
  border-right:1px solid var(--hair);
}
.step__box{min-width:0;}
/* 番号のない行（練習タブの技術）。左の番号欄をなくして2列にする */
.step--plain{grid-template-columns:1fr auto;}

.step__name{
  display:block;
  font-weight:500;
  font-size:1rem;
  letter-spacing:.1em;
  line-height:1.7;
}
.step__meta{
  display:block;
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  line-height:1.85;
}
.step__meta--empty{color:var(--ink-soft);}
.step__arrow{
  font-family:"Jost",sans-serif;
  font-weight:300;
  font-size:.875rem;
  color:var(--ink-soft);
  transition:transform .2s,color .2s;
}
.step:hover .step__arrow{color:var(--accent);transform:translateX(3px);}

/* 工程どうしをつなぐ線 */
.steps__join{
  display:block;
  width:1px;
  height:14px;
  margin:0 auto;
  background:var(--hair);
}

/* ============================================
   3. 工程詳細
   ============================================ */
.title{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:24px;
  margin-top:44px;
}
.title__num{
  font-family:"Jost",sans-serif;
  font-weight:300;
  font-size:4.25rem;
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--accent);
  padding-right:24px;
  border-right:1px solid var(--hair);
}
.title__box{min-width:0;}
.title__step{
  display:block;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.3em;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.title__name{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:1.625rem;
  letter-spacing:.16em;
  line-height:1.6;
  margin:0;
}

.figure{padding:40px 0 0;}
/* 図がないときは、ボタンだけなので詰める */
.figure--empty{padding-top:20px;}
/* 見出しの下に置くとき（工程一覧の図）は、上の余白はいらない */
.figure--flat{padding-top:0;}
.figure__stage{
  background:var(--plate);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:30px;
  display:grid;
  place-items:center;
}
.figure__stage svg{width:100%;max-width:230px;height:auto;display:block;}

/* 図（描いたもの・写真）が入っているときは、内側の余白を詰める。
   30pxのままだと、横いっぱいにしても左右60pxぶん食われてしまう。
   見本のSVGは小さく中央に置くので、そちらの余白はそのまま */
.figure__stage:has(.figure__image){padding:12px;}
/* 図を描かない工程では、置き場所ごと消す */
.figure__stage[hidden]{display:none;}
.figure__foot{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  padding:12px 2px 0;
}
.figure__angle{
  margin-right:auto;         /* 向きは左、ボタンは右 */
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.figure__edit{
  font-family:inherit;
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--ink-mid);
  background:none;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:7px 16px;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
.figure__edit:hover{color:var(--accent);border-color:var(--accent);}
.figure__edit:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
.figure__edit--remove{color:var(--ink-soft);}
.figure__edit--remove:hover{color:var(--accent-deep);border-color:var(--accent-deep);}

/* 図も横はいっぱいに使う。細かい線や書き入れた文字を読むため */
.figure__image{
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;   /* 紙の白を背景になじませる */
}

/* まだ1件も書いていないとき */
.sect__none{
  display:none;
  margin:0;
  padding:22px 0 4px;
  text-align:center;
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.sect__none.is-shown{display:block;}

/* そえた絵と画像。
   小さいと文字も線も読めないので、横はいっぱいに使う。
   縦は中身なりに伸ばす（切り取らない） */
.taught__pic,
.own__pic{
  display:block;
  width:100%;
  height:auto;
  margin-top:10px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--plate);
}

/* そえた動画（YouTube） */
.taught__video{
  position:relative;
  width:100%;
  margin-top:10px;
  aspect-ratio:16 / 9;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
}
.taught__video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ---------- 施術前後の写真 ---------- */
/* 技術ページから、写真のページへ入るところ */
.top__links{display:flex;justify-content:flex-end;padding:4px 2px 0;}
.top__links a{text-decoration:none;display:inline-block;}

.record__when{padding:26px 0 4px;}
.record__note{
  margin:22px 2px 0;
  font-size:.6875rem;
  line-height:1.9;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
/* 5枚たまったら、えらぶところは閉じる */
.draw__file[hidden]{display:none;}

.shots{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px;
}
.shots__item{margin:0;}
.shots__open{
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
  line-height:0;
  cursor:zoom-in;
  transition:border-color .2s;
}
.shots__open:hover{border-color:var(--accent);}
.shots__open:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.shots__image{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  display:block;
}
.shots__date{
  display:block;
  margin-top:5px;
  text-align:center;
  font-family:"Jost",sans-serif;
  font-size:.625rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.shots__remove{
  display:block;
  margin:5px auto 0;
  font-family:inherit;
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:2px 0;
  cursor:pointer;
}
.shots__remove:hover{color:var(--accent-deep);}
.shots__remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 写真を大きく見る */
.viewer{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px;
  background:var(--scrim);
  cursor:zoom-out;
}
.viewer[hidden]{display:none;}
.viewer__image{
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius:var(--radius);
  background:var(--plate);
}
.viewer__close{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.14em;
  color:#fff;
  background:none;
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius);
  padding:9px 22px;
  cursor:pointer;
}
.viewer__close:hover{border-color:#fff;}

/* 一連の流れ（技術ページの入口カード） */
.flow-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:30px;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--hair);
  border-left:2px solid var(--accent);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s;
}
.flow-card:hover{border-color:var(--accent);}
.flow-card__box{display:flex;flex-direction:column;gap:4px;min-width:0;}
.flow-card__ja{
  font-family:"Shippori Mincho",serif;
  font-size:1rem;
  letter-spacing:.14em;
}
.flow-card__meta{
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.flow-card__arrow{color:var(--accent);font-size:.875rem;}

/* まなぶのページのように、続けて並べるときは間を詰める。
   30pxずつ空けると、3つで画面の高さを使いきってしまう */
.flow-card + .flow-card{margin-top:10px;}

/* 一連の流れのページ */
.flow__who{
  margin:24px 0 -10px;
  font-size:.6875rem;
  letter-spacing:.18em;
  color:var(--accent);
}
.flow__who[hidden]{display:none;}
.flow__text{
  margin:26px 0 0;
  font-size:.9375rem;
  line-height:2.05;
  white-space:pre-wrap;      /* 書いたとおりに改行する */
}
.flow__text[hidden]{display:none;}
#flowVideo{margin-top:18px;}
#flowVideo .taught__video{max-width:none;}

/* 流れの写真は横長のことが多いので、少し大きめに並べる */
.shots--flow{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.shots--flow .shots__image{aspect-ratio:4 / 3;}
.shots__caption{
  display:block;
  width:100%;
  margin-top:5px;
  font-family:inherit;
  font-size:.6875rem;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--ink-mid);
  background:none;
  border:0;
  padding:2px 0;
  text-align:center;
  cursor:pointer;
}
.shots__caption--empty{color:var(--ink-soft);}
.shots__caption:hover{color:var(--accent);}

/* 資料（PDF） */
.files{list-style:none;margin:0;padding:0;}
.files__item{
  display:block;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:8px;
}
.files__open{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  text-decoration:none;
  color:var(--ink);
}
.files__mark{
  flex:0 0 auto;
  font-family:"Jost",sans-serif;
  font-size:.5625rem;
  letter-spacing:.12em;
  color:var(--on-accent);
  background:var(--accent);
  border-radius:var(--radius);
  padding:3px 7px;
}
.files__name{
  font-size:.8125rem;
  letter-spacing:.04em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.files__open:hover .files__name{color:var(--accent);}
/* 誰に教わった資料か（何人でも） */
.files__row{display:flex;align-items:center;gap:12px;}
.files__who{
  flex:0 0 auto;
  max-width:130px;
  font-family:inherit;
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--accent);
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:5px 9px;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.files__who--empty{color:var(--ink-soft);}
.files__who:hover{border-color:var(--accent);}
.files__who:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.files__whos{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-top:10px;
  margin-top:10px;
  border-top:1px solid var(--hair);
}
.files__whos[hidden]{display:none;}
.files__who-text{
  flex:0 0 auto;
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--accent);
}

.files__remove{
  flex:0 0 auto;
  font-family:inherit;
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:3px 0;
  cursor:pointer;
}
.files__remove:hover{color:var(--accent-deep);}

/* テストの結果（技術ページ。合格と不合格を1行ずつ） */
.test-line{
  margin:14px 2px 0;
  text-align:center;
  /* 合否はこの技術の要になる一行なので、まわりの小さい字より一段大きく */
  font-size:.875rem;
  letter-spacing:.1em;
}
.test-line__row{margin:0 0 4px;color:var(--accent);}
.test-line__row:last-child{margin-bottom:0;}
.test-line__row--fail{color:var(--ink-soft);}

/* 関連する座学（技術ページ） */
.link-study{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:8px;
}
.link-study__head{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.link-study__head:hover .link-study__name{color:var(--accent);}
.link-study__name{
  font-family:"Shippori Mincho",serif;
  font-size:.9375rem;
  letter-spacing:.06em;
}
.link-study__meta{
  font-size:.625rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.link-study__points{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}
.link-study__point{
  display:block;
  padding:11px 0 0;
  margin-top:11px;
  text-decoration:none;
  color:var(--ink);
}
.link-study__points li + li .link-study__point{border-top:1px solid var(--hair);}
.link-study__topic{
  display:block;
  font-size:.625rem;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:3px;
}
.link-study__text{
  display:block;
  font-size:.8125rem;
  line-height:1.95;
  white-space:pre-wrap;
}
.link-study__point:hover .link-study__text{color:var(--accent-deep);}

/* 座学ページに出す、関連する技術 */
.link-tech{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.link-tech__item{
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--ink);
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:9px 16px;
}
.link-tech__item:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- 日々の練習 ---------- */
.lessons{list-style:none;margin:0;padding:0;}
.lesson{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:18px 20px 16px;
  margin-bottom:10px;
}
.lesson__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.lesson__date{
  font-family:"Jost",sans-serif;
  font-size:.8125rem;
  letter-spacing:.12em;
  color:var(--ink);
}
.lesson__rating{
  font-size:.625rem;
  letter-spacing:.12em;
  border-radius:var(--radius);
  padding:3px 9px;
  background:var(--paper-deep);
  color:var(--ink-mid);
}
.lesson__rating--3{background:var(--accent-soft);color:var(--accent-deep);}
.lesson__rating--1{background:var(--paper-deep);color:var(--ink);}
/* どんなスタイルを練習したか。日付のすぐ下に見出しとして置く */
.lesson__title{
  margin:0 0 6px;
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--ink);
}

.lesson__meta{
  display:block;
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.lesson__memo{
  margin:10px 0 0;
  font-size:.875rem;
  line-height:2;
  white-space:pre-wrap;
}
.lesson__shots{margin-top:14px;}
.lesson__shots-label{
  display:block;
  font-size:.625rem;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:6px;
}
.lesson__shots .shots{margin-bottom:0;}

/* 1行に短い入力を置くとき（かかった時間） */
.writer__row{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.writer__row .writer__input{margin-bottom:0;}
.writer__row .writer__input--short{width:110px;}
.writer__unit{font-size:.8125rem;color:var(--ink-mid);}

/* ---------- 描きなおす ---------- */
.draw{
  display:none;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:18px;
  margin-top:12px;
}
.draw.is-open{display:block;}

.draw__angles{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:16px;
}
.draw__group{min-width:0;}
.draw__label{
  display:block;
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.18em;
  color:var(--ink-mid);
  margin-bottom:7px;
}
.draw__chips{display:flex;flex-wrap:wrap;gap:6px;}
.draw__chip{
  font-family:inherit;
  font-size:.8125rem;
  letter-spacing:.08em;
  color:var(--ink-mid);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:6px 14px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.draw__chip:hover{border-color:var(--ink-soft);}
.draw__chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.draw__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}

/* 描くか写真か */
.draw__modes{margin-bottom:16px;}
.draw__paint[hidden],
.draw__photo[hidden]{display:none;}

.draw__file{
  display:inline-block;
  font-size:.8125rem;
  letter-spacing:.14em;
  color:var(--ink);
  background:none;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:12px 20px;
  cursor:pointer;
  transition:border-color .2s;
}
.draw__file:hover{border-color:var(--ink);}
.draw__file input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.draw__file:focus-within{outline:2px solid var(--accent);outline-offset:3px;}

.draw__photo-note{
  margin:10px 2px 0;
  font-size:.6875rem;
  line-height:1.9;
  letter-spacing:.06em;
  color:var(--ink-soft);
}

.draw__photo-view{
  margin-top:12px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--plate);
  line-height:0;
}
.draw__photo-view[hidden]{display:none;}
.draw__photo-view img{width:100%;height:auto;display:block;}

/* 頭の図（下地） */
.draw__templates{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.draw__tpl{
  width:52px;   /* 5つが1行に収まる幅 */
  padding:5px 4px 6px;
  font-family:inherit;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition:border-color .2s,background .2s;
}
.draw__tpl:hover{border-color:var(--ink-soft);}
.draw__tpl:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.draw__tpl img,
.draw__tpl-blank{
  width:100%;
  height:44px;
  object-fit:contain;
  display:block;
}
/* 展開図の見本は白地の線画。暗いほうでも紙は白のままにする */
.draw__tpl img{background:var(--plate);}
.draw__tpl-blank{
  background:
    linear-gradient(45deg,transparent 47%,var(--hair) 47%,var(--hair) 53%,transparent 53%),
    var(--paper);
  border-radius:1px;
}

.draw__tpl-name{
  font-size:.5625rem;
  letter-spacing:.08em;
  line-height:1.4;
  color:var(--ink-mid);
}

.draw__tpl[aria-pressed="true"]{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.draw__tpl[aria-pressed="true"] .draw__tpl-name{color:var(--accent);}

/* 下じきの大きさ */
.draw__size{margin-bottom:14px;}
.draw__size[hidden]{display:none;}

.draw__size-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.draw__range{
  flex:1;
  min-width:0;
  height:2px;
  accent-color:var(--accent);
  cursor:pointer;
}
.draw__range:focus-visible{outline:2px solid var(--accent);outline-offset:6px;}

.draw__size-value{
  font-family:"Jost",sans-serif;
  font-size:.6875rem;
  letter-spacing:.08em;
  color:var(--ink-mid);
  min-width:3.2em;
  text-align:right;
}

.draw__stage{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--plate);
  line-height:0;
}
.draw__canvas{
  width:100%;
  aspect-ratio:3 / 4;   /* 頭の展開図に合わせた縦長 */
  display:block;
  touch-action:none;       /* なぞっても画面が動かないように */
  cursor:crosshair;
}

.draw__tools{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.draw__tool{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:8px 14px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.draw__tool:hover{border-color:var(--ink-soft);}

/* 線と文字の色 */
/* ペンは白い紙に描く。見本の丸も白の上に並べる。
   暗い地に直接置くと、黒のペンが地に沈んで見分けられない */
.draw__colors{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:2px;
  background:var(--plate);
  border:1px solid var(--hair);
  border-radius:999px;
  padding:4px 7px;
}
.draw__color{
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--hair);
  border-radius:50%;
  /* 丸の色は、pad.js がボタンごとに入れる --pen（data-color の値）。
     まだ入っていないときだけ黒。ここを決め打ちにすると4色とも黒くなる */
  background:var(--pen, #231F1C);
  cursor:pointer;
  transition:box-shadow .2s,border-color .2s;
}
.draw__color[aria-pressed="true"]{
  border-color:var(--ink-soft);
  /* 内側のすきまは、丸が乗っている白い台と同じ色にする */
  box-shadow:0 0 0 2px var(--plate), 0 0 0 3px var(--ink-soft);
}
.draw__color:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.draw__tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.draw__tool[aria-pressed="true"]{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--accent);
}
.draw__tool--plain{margin-left:auto;color:var(--ink-soft);border-color:transparent;}
.draw__tool--plain:hover{color:var(--accent);border-color:var(--hair);}
.draw__tool--plain + .draw__tool--plain{margin-left:0;}

.draw__foot{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.draw__save{
  flex:1;
  font-family:inherit;
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.16em;
  color:var(--on-ink);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  padding:13px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.draw__save:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.draw__save:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.draw__cancel{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:13px 6px;
  cursor:pointer;
}
.draw__cancel:hover{color:var(--accent);}

.sect{padding:52px 0 0;}
/* 見出しのすぐ下に置くとき（工程の上の施術後の写真）は詰める */
.sect--top{padding-top:30px;}
.sect--top + .steps{margin-top:18px;}
.sect__head{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:22px;
  border-bottom:1px solid var(--hair);
}
.sect__ja{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:1rem;
  letter-spacing:.2em;
  margin:0;
}
.sect__en{
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.28em;
  color:var(--ink-soft);
  margin-left:auto;
}

/* ---------- 実技／座学の入口 ---------- */
.learning-nav{display:grid;grid-template-columns:1fr 1fr;margin:26px 0 34px;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;}
.learning-nav__item{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px;color:var(--ink-mid);text-decoration:none;background:var(--card);border-right:1px solid var(--hair);}
.learning-nav__item:last-child{border-right:0;}
.learning-nav__item span{font-family:"Shippori Mincho",serif;font-size:1rem;letter-spacing:.14em;}
.learning-nav__item small{font-family:"Jost",sans-serif;font-size:.55rem;letter-spacing:.16em;color:var(--ink-soft);}
.learning-nav__item--active{color:var(--accent);background:var(--accent-soft);}

/* ---------- 座学 ---------- */
.study-intro{margin:-8px 0 24px;font-size:.8125rem;color:var(--ink-mid);}
.study-list{list-style:none;margin:0;padding:0;}

/* 座学のまとまり（カラー、薬事法など）。
   技術一覧の .list__head と同じ見え方にそろえる */
.study-head{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.24em;
  color:var(--ink-mid);
  padding:18px 2px 10px;
  border-bottom:1px solid var(--hair);
  margin-bottom:12px;
}
.study-head:first-child{padding-top:2px;}
.study-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:18px;margin-bottom:12px;}
.study-card--learned{border-left:3px solid var(--accent);}
.study-card--miss{background:linear-gradient(90deg,var(--paper-deep),var(--card) 38%);}
.study-card__head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:8px;}
.study-card h3{font-family:"Shippori Mincho",serif;font-size:1.05rem;letter-spacing:.12em;margin:0;}
.study-card p{white-space:pre-wrap;margin:8px 0;font-size:.8125rem;line-height:1.9;}
.study-card p b{display:block;font-size:.625rem;letter-spacing:.15em;color:var(--accent);}
.study-card__who{color:var(--ink-soft);font-size:.6875rem!important;}
.study-tag{font-size:.5625rem;letter-spacing:.12em;color:var(--on-accent);background:var(--accent);padding:1px 7px;border-radius:var(--radius);}
.study-tag--miss{color:var(--ink);background:none;border:1px solid var(--ink-soft);}
.quiz{margin-top:14px;padding:12px;background:var(--paper);border-radius:var(--radius);}
.quiz__question{display:block;font-size:.75rem;color:var(--ink-mid);white-space:pre-wrap;}
.quiz__show{font-family:inherit;font-size:.6875rem;letter-spacing:.1em;color:var(--accent);background:none;border:0;padding:5px 0 0;cursor:pointer;}
.quiz__answer{border-top:1px solid var(--hair);padding-top:9px;margin-top:9px!important;color:var(--ink);white-space:pre-wrap;}

/* ---------- 教わったこと ---------- */
.taught{list-style:none;margin:0;padding:0;}
.taught__item{
  padding:0 0 20px 18px;
  margin:0 0 20px;
  border-bottom:1px solid var(--hair);
  border-left:1px solid var(--accent-soft);
}
.taught__item:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.taught__who{
  display:block;
  font-size:.625rem;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:4px;
  line-height:1.8;
}
/* 何を教わったかの一言。本文の上に、小さな見出しとして置く */
.taught__title{
  margin:0 0 4px;
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--ink);
}

.taught__body{
  margin:0;
  font-size:.9375rem;
  line-height:2.05;
  white-space:pre-wrap;      /* 書いたとおりに改行する */
}

/* なぜそうするのか。書いてあるときだけ出す */
.taught__why{
  margin:8px 0 0;
  font-size:.8125rem;
  line-height:1.9;
  color:var(--ink-mid);
  white-space:pre-wrap;
}
.taught__why-mark{
  display:inline-block;
  margin-right:8px;
  padding:1px 7px;
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--accent);
  vertical-align:2px;
}

/* ---------- 今度聞くこと ---------- */
/* 理由が空のまま残っているものを、次に会うときの持ち物として並べる */
.ask{
  padding:34px 0 0;
}
.ask[hidden]{display:none;}
.ask__head{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--hair);
}
.ask__ja{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.2em;
  margin:0;
}
.ask__count{
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.ask__list{list-style:none;margin:0;padding:0;}
.ask__item{margin:0 0 6px;}
.ask__item:last-child{margin-bottom:0;}
.ask__open{
  display:block;
  width:100%;
  text-align:left;
  font-family:inherit;
  font-size:.8125rem;
  line-height:1.9;
  color:var(--ink-mid);
  background:none;
  border:none;
  border-left:1px solid var(--accent-soft);
  padding:2px 0 2px 14px;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.ask__open:hover{color:var(--accent);border-color:var(--accent);}
.ask__open:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
.ask__mark{
  display:inline-block;
  margin-right:8px;
  padding:1px 7px;
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  font-size:.5625rem;
  letter-spacing:.14em;
  color:var(--accent);
  vertical-align:2px;
}
/* 技術ぜんたいの一覧では、どの工程のことか添える */
.ask--all{padding-top:52px;}
.ask--all .ask__open{text-decoration:none;}
.ask__where{
  display:block;
  margin-top:2px;
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
}

/* ---------- 聞くことのページ ----------

   1件ずつが「次に先輩に会うときに持っていく紙」なので、
   行で流さず、まなぶのカードと同じ箱にして1件ずつ立たせる。

   この形にするのは聞くことのページだけ。
   .ask__open は名前のページや工程のページでも使い回していて、
   そちらは箱の中に入っているので、二重の箱になってしまう。 */
.ask__list--cards .ask__item{margin-bottom:10px;}

.ask__list--cards .ask__open{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;

  padding:16px 20px 14px;
  background:var(--card);
  border:1px solid var(--hair);
  border-left:2px solid var(--accent);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .2s;
}
.ask__list--cards .ask__open:hover{border-color:var(--accent);}

/* 箱の中では行が分かれるので、字の右の空きはいらない */
.ask__list--cards .ask__mark{margin-right:0;vertical-align:0;}

.ask__list--cards .ask__text{
  font-size:.875rem;
  line-height:1.85;
  color:var(--ink);
  transition:color .2s;
}
.ask__list--cards .ask__open:hover .ask__text{color:var(--accent);}

.ask__list--cards .ask__where{margin-top:0;}

/* 後で先輩に聞く（自分の気づき） */
.own__item--ask{
  border-left:2px solid var(--accent-soft);
}
.own__mark--ask{
  color:var(--accent);
  background:none;
  border:1px solid var(--accent-soft);
}
.own__ask{
  margin:8px 0 0;
  font-size:.8125rem;
  line-height:1.9;
  color:var(--ink-mid);
  white-space:pre-wrap;
}
.own__ask-mark{
  display:inline-block;
  margin-right:8px;
  padding:1px 7px;
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--accent);
  vertical-align:2px;
}
.writer__ask{margin-top:12px;}
.writer__ask[hidden]{display:none;}

/* ---------- 画面の中のタブ（探す・聞くこと） ---------- */
.tabs{
  display:flex;
  gap:18px;
  margin-bottom:24px;
  border-bottom:1px solid var(--hair);
}
.tabs__item{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.875rem;
  letter-spacing:.18em;
  color:var(--ink-soft);
  background:none;
  border:none;
  border-bottom:1px solid transparent;
  margin-bottom:-1px;
  padding:6px 2px 12px;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.tabs__item:hover{color:var(--ink-mid);}
.tabs__item:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
.tabs__item[aria-selected="true"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}
/* 聞くことの件数。0件のときは中身が空なので出ない */
.tabs__count{
  font-family:"Jost",sans-serif;
  font-size:.625rem;
  letter-spacing:.06em;
  color:var(--accent);
  margin-left:7px;
}
.tabs__count:empty{display:none;}

/* 技術・練習・座学（ホーム）。
   幅を等分して、指で押しやすい大きさにする */
.tabs--even{gap:10px;}
.tabs--even .tabs__item{
  flex:1 1 0;
  min-width:0;
  padding:14px 4px 15px;
  font-size:1rem;
  letter-spacing:.14em;
  text-align:center;
}

/* 4つ並ぶとき。「店のルール」だけ字数が多いので、そのぶん詰める。
   画面が狭いほど1つあたりの幅が減るので、二段階で小さくする */
.tabs--four{gap:6px;}
.tabs--four .tabs__item{
  font-size:.9375rem;
  letter-spacing:.06em;
  padding:14px 2px 15px;
  white-space:nowrap;
}
@media (max-width:520px){
  .tabs--four{gap:2px;}
  .tabs--four .tabs__item{
    font-size:.8125rem;
    letter-spacing:0;
    padding:13px 1px 14px;
  }
}
@media (max-width:380px){
  .tabs--four .tabs__item{font-size:.75rem;}
}

#paneTech[hidden],
#paneLesson[hidden],
#paneStudy[hidden],
#paneShop[hidden],
#paneModel[hidden],
#paneMentor[hidden],
#paneQuiz[hidden],
#paneTest[hidden]{display:none;}

.note-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
.note-actions__button{
  font-family:inherit;
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:3px 0;
  cursor:pointer;
}
.note-actions__button:hover{color:var(--accent);}
.note-actions__button--delete:hover{color:var(--accent-deep);}
.note-actions__button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- 自分の気づき ---------- */
.own{list-style:none;margin:0;padding:0;}
.own__item{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:8px;
}
.own__date{
  display:inline-block;
  font-weight:400;
  font-size:.625rem;
  letter-spacing:.2em;
  color:var(--ink-soft);
  margin-bottom:3px;
}

/* 大事なことにした気づき */
.own__item--mark{
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg,var(--accent-soft) 0%,var(--card) 34%);
}
.own__item--mark .own__date{color:var(--accent);}
.own__item--mark .own__body{color:var(--ink);}

/* よく間違えること */
.own__item--miss{
  border-left:2px solid var(--ink);
  background:linear-gradient(90deg,var(--paper-deep) 0%,var(--card) 34%);
}
.own__item--miss.own__item--mark{
  border-left:2px solid var(--accent);
}
.own__item--miss .own__body{color:var(--ink);}

.own__mark{
  display:inline-block;
  margin-left:10px;
  font-size:.5625rem;
  letter-spacing:.16em;
  line-height:1.6;
  color:var(--on-accent);
  background:var(--accent);
  border-radius:var(--radius);
  padding:1px 7px;
  vertical-align:1px;
}
.own__mark--miss{
  color:var(--ink);
  background:none;
  border:1px solid var(--ink-soft);
}
.own__body{
  margin:0;
  font-size:.875rem;
  line-height:2;
  color:var(--ink-mid);
  white-space:pre-wrap;
}

/* ---------- テスト ---------- */

/* つぎのテスト（先に日にちだけ決めたもの） */
.plan{
  background:var(--card);
  border:1px dashed var(--accent);
  border-radius:var(--radius);
  padding:16px 18px 14px;
  margin-bottom:14px;
}
.plan[hidden]{display:none;}

.plan__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.plan__label{
  font-size:.6875rem;
  letter-spacing:.18em;
  color:var(--accent);
}
.plan__left{
  font-family:"Jost",sans-serif;
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-mid);
}
.plan__date{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:1.375rem;
  letter-spacing:.1em;
  line-height:1.5;
  margin:4px 0 12px;
}

.plan__actions{display:flex;flex-wrap:wrap;gap:6px;}
.plan__btn{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:8px 14px;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
.plan__btn:hover{border-color:var(--accent);color:var(--accent);}
.plan__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.plan__btn--plain{margin-left:auto;color:var(--ink-soft);border-color:transparent;}
.plan__btn--plain:hover{color:var(--accent-deep);border-color:var(--hair);}

.tests{list-style:none;margin:0;padding:0;}

.test__item{
  background:var(--card);
  border:1px solid var(--hair);
  border-left:2px solid var(--ink-soft);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:8px;
}
.test__item--pass{border-left-color:var(--accent);}
.test__item--fail{border-left-color:var(--ink);}
/* これから受けるぶん。まだ結果がないので、点線にする */
.test__item--plan{border-left-style:dashed;border-left-color:var(--accent);}
.test__item--plan .test__badge{
  color:var(--accent);
  background:none;
  border:1px dashed var(--accent);
}

/* テストの一覧（小テストの画面）。押すとその技術へ */
.test{list-style:none;margin:0 0 4px;padding:0;}
.test__open{display:block;text-decoration:none;color:inherit;}
/* どの技術のテストか */
.test__tech{
  display:block;
  margin-top:8px;
  font-family:"Shippori Mincho",serif;
  font-size:.9375rem;
  letter-spacing:.1em;
}

.test__head{
  display:flex;
  align-items:center;
  gap:12px;
}
.test__date{
  font-family:"Jost",sans-serif;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--ink-mid);
}
.test__badge{
  font-size:.625rem;
  letter-spacing:.16em;
  line-height:1.7;
  border-radius:var(--radius);
  padding:2px 10px;
}
.test__item--pass .test__badge{color:var(--on-accent);background:var(--accent);}
.test__item--fail .test__badge{color:var(--ink);background:none;border:1px solid var(--ink-soft);}

/* ---------- 先輩からのコメント（日々の練習） ---------- */
.comments{list-style:none;margin:0 0 12px;padding:0;}
.comments__item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--hair);
}
.comments__item:last-child{border-bottom:none;}
.comments__add{
  padding:14px 16px 16px;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--radius);
}
.comments__add .writer__chips{margin-bottom:10px;}
.comments__add .add{margin-top:10px;}

/* 書いたものに出るコメント */
.comment{
  margin-top:10px;
  padding-left:12px;
  border-left:2px solid var(--accent-soft);
}
.comments__item .comment{margin-top:0;flex:1;}
.comment__who{
  display:block;
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--accent);
  margin-bottom:3px;
}
.comment__text{
  margin:0;
  font-size:.875rem;
  line-height:1.95;
  color:var(--ink-mid);
  white-space:pre-wrap;
}
/* コメントに添えた図・写真 */
.comment .shots{margin-top:8px;}

/* 図を描くところの下のボタン */
.pad__foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}

/* 誰に言われたか */
.test__who{
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--accent);
  margin-left:auto;
}

/* 押すと直せる */
.test__item{cursor:pointer;transition:border-color .2s;}
.test__item:hover{border-color:var(--ink-soft);}

.test__body{
  margin:8px 0 0;
  font-size:.875rem;
  line-height:2;
  color:var(--ink-mid);
  white-space:pre-wrap;
}

/* 技術カードに出す、テストの予定と結果 */
/* テストの印は、カードのいちばん下にそろえる */
.tech__marks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:8px;
}

.tech__plan{
  font-size:.625rem;
  letter-spacing:.12em;
  line-height:1.7;
  color:var(--accent);
  background:none;
  border:1px dashed var(--accent);
  border-radius:var(--radius);
  padding:2px 10px;
}
/* 日にちが過ぎたもの */
.tech__plan--past{
  color:var(--ink-mid);
  border-color:var(--ink-soft);
  border-style:dotted;
}

.tech__test{
  display:inline-block;
  font-size:.625rem;
  letter-spacing:.14em;
  line-height:1.7;
  border-radius:var(--radius);
  padding:2px 10px;
}
.tech__test--pass{color:var(--on-accent);background:var(--accent);}
.tech__test--fail{color:var(--ink-mid);background:none;border:1px solid var(--ink-soft);}

/* ---------- 前後の工程 ---------- */
.pager{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:64px;
  padding-top:20px;
  border-top:1px solid var(--hair);
}
.pager__link{text-decoration:none;color:var(--ink-mid);min-width:0;}
.pager__link:hover{color:var(--accent);}
.pager__link:focus-visible{outline:1px solid var(--accent);outline-offset:4px;}
.pager__dir{
  display:block;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.26em;
  color:var(--ink-soft);
  margin-bottom:2px;
}
.pager__name{
  font-weight:400;
  font-size:.8125rem;
  letter-spacing:.1em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}
.pager__link--next{text-align:right;}

/* ============================================
   4. 入力画面
   ============================================ */
.form{padding:32px 0 0;}

.form__where{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:32px;
}
.form__where-num{
  font-family:"Jost",sans-serif;
  font-weight:300;
  font-size:1.25rem;
  line-height:1;
  color:var(--accent);
  padding-right:14px;
  border-right:1px solid var(--hair);
}
.form__where-text{font-size:.8125rem;letter-spacing:.1em;color:var(--ink-mid);}
.form__where-text b{font-weight:500;color:var(--ink);}

.field{margin-bottom:24px;}
.field__label{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:8px;
}
.field__ja{font-weight:500;font-size:.75rem;letter-spacing:.18em;}
.field__note{font-size:.6875rem;letter-spacing:.06em;color:var(--ink-soft);}

.input,
.textarea,
.select{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  line-height:1.9;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:13px 15px;
  transition:border-color .2s;
  -webkit-appearance:none;
  appearance:none;
}
.input:focus,
.textarea:focus,
.select:focus{outline:none;border-color:var(--accent);}
.textarea{min-height:150px;resize:vertical;}
.select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.input::placeholder,
.textarea::placeholder{color:var(--ink-soft);}

/* 伏せ字のパスワードを、入れている間だけ見えるようにする。
   このサイトには図版が1枚もないので、目の絵ではなく文字で置く */
.field__pw{position:relative;}
.input--pw{padding-right:74px;}   /* ボタンと打った文字が重ならない幅 */
.pw-eye{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  font-family:inherit;
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--ink-mid);
  background:none;
  border:0;
  padding:8px;                    /* 指で押せる大きさにする */
  cursor:pointer;
  transition:color .2s;
}
.pw-eye:hover{color:var(--accent);}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-family:inherit;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:7px 16px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.chip:hover{border-color:var(--ink-soft);}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}

.actions{margin-top:40px;}

/* ---------- ボタン ---------- */
.save,
.add--fill,
.writer__save,
.auth__submit{
  font-family:inherit;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--on-ink);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.save:hover,
.add--fill:hover,
.writer__save:hover,
.auth__submit:hover{background:var(--accent-deep);border-color:var(--accent-deep);}

.save{display:block;width:100%;font-size:.875rem;padding:16px;}
.save:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.cancel{
  display:block;
  width:100%;
  margin-top:14px;
  text-align:center;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--ink-mid);
  text-decoration:none;
  padding:12px;
}
.cancel:hover{color:var(--accent);}
.cancel:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}

.add{
  display:block;
  width:100%;
  margin-top:22px;
  font-family:inherit;
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.2em;
  color:var(--ink);
  background:none;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:15px;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:border-color .2s,color .2s;
}
.add:hover{border-color:var(--ink);}
.add:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.add--fill{font-size:.8125rem;padding:16px;}

/* 追加する／なおす を横に並べる */
.add-row{display:flex;gap:8px;align-items:stretch;}
.add-row .add{margin-top:22px;}
.add-row.is-hidden{display:none;}

.add--narrow{
  flex:0 0 auto;
  width:auto;
  padding-left:22px;
  padding-right:22px;
  color:var(--ink-mid);
}
.add--narrow[aria-pressed="true"]{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--accent);
}

/* なおす中の案内 */
.fix-hint{
  display:none;
  margin:12px 2px 0;
  font-size:.6875rem;
  line-height:1.9;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.fix-hint.is-shown{display:block;}

/* 自動で並べかえるところ */
.sort{
  margin-top:14px;
  padding:14px 16px 16px;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--radius);
}
.sort__label{
  display:block;
  margin-bottom:8px;
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.sort .writer__chips{margin-bottom:14px;}
.sort .fix-hint{margin-top:0;}

/* ドラッグで並べ替え */
.is-fixing .steps__item,
.list.is-fixing li,
.is-fixing .step,
.list.is-fixing .tech,
.study-list.is-fixing .study-card{
  cursor:grab;
  touch-action:none;          /* なぞっても画面が動かないように */
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;     /* リンクを運ばせない */
  -webkit-touch-callout:none; /* 長押しのメニューも出さない */
}

/* なおす中の座学カード。つまめる場所だとわかるようにする */
.study-list.is-fixing .study-card{position:relative;border-color:var(--accent);}
.study-list.is-fixing .study-card h3{color:var(--accent);}
.study-list.is-fixing .study-card::after{
  content:"⋮⋮";
  position:absolute;
  right:14px;
  top:16px;
  font-size:.9375rem;
  letter-spacing:-.12em;
  color:var(--accent);
}
/* 並べ替え中は、押す場所を隠しておく */
.study-list.is-fixing .note-actions,
.study-list.is-fixing .quiz__show{display:none;}
.is-sorting,
.is-sorting .step,
.is-sorting .tech{cursor:grabbing;}

/* つまめる場所だとわかる印 */
.steps.is-fixing .step__arrow{font-size:0;}
.steps.is-fixing .step__arrow::after{
  content:"⋮⋮";
  font-size:.9375rem;
  letter-spacing:-.12em;
  color:var(--accent);
}
.list.is-fixing .tech::after{
  content:"⋮⋮";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:.9375rem;
  letter-spacing:-.12em;
  color:var(--accent);
}

.is-dragging{
  opacity:.75;
  transform:scale(.99);
}
.is-dragging .tech,
.is-dragging .step{
  border-color:var(--accent);
  box-shadow:0 6px 18px var(--shadow);
}

/* なおす中の工程 */
.steps.is-fixing .step{
  border-style:dashed;
  border-color:var(--accent);
}
.steps.is-fixing .step__name{color:var(--accent);}
.steps.is-fixing .step__arrow{visibility:hidden;}
.steps.is-fixing .step__name::after{
  content:"…";
  margin-left:6px;
  color:var(--ink-soft);
}

/* なおす中の技術カード */
.list.is-fixing .tech{
  border:1px dashed var(--accent);
  background:var(--card);
}
.list.is-fixing .tech::before{display:none;}
.list.is-fixing .tech__name{color:var(--accent);}
.list.is-fixing .tech__name::after{
  content:"…";
  margin-left:6px;
  color:var(--ink-soft);
}

/* ============================================
   レスポンシブ
   ============================================ */
@media (min-width:520px){
  .list{grid-template-columns:1fr 1fr;}
}

/* パソコンで見るときは、紙の幅を広げる。

   もとの620pxはスマホに合わせた幅で、大きい画面だと
   まん中に細い帯が立っているように見えてしまう。
   広げるのは980pxまで。ここで止めるのは、これ以上のばすと
   1枚のカードが横に間のびして、字だけが散らばって見えるため。 */
@media (min-width:760px){
  .sheet{
    max-width:980px;
    padding-left:40px;
    padding-right:40px;
  }
}

@media (max-width:380px){
  .sheet{padding:0 18px 72px;}
  .brand__name{font-size:1.75rem;}
  .top__name{font-size:1.5rem;}
  .title{gap:16px;}
  .title__num{font-size:3.25rem;padding-right:16px;}
  .title__name{font-size:1.375rem;}
  .tech{padding:18px;}
  .step{padding:14px;gap:14px;}
  .step__num{padding-right:12px;}
  .step__name{font-size:.9375rem;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}

/* ============================================
   5. その場で書く（インライン入力）
   ============================================ */
.writer{
  display:none;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:18px 18px 20px;
  margin-top:10px;
}
.writer.is-open{display:block;}

.writer__label{
  display:block;
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.18em;
  color:var(--ink-mid);
  margin-bottom:8px;
}

.writer__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.writer__chip{
  font-family:inherit;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:6px 15px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.writer__chip:hover{border-color:var(--ink-soft);}
.writer__chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.writer__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}

/* 先輩を足す・なおす */
.writer__chip--add,
.writer__chip--fix{
  color:var(--ink-soft);
  border-style:dashed;
  letter-spacing:.06em;
}
.writer__chip--add:hover,
.writer__chip--fix:hover{color:var(--accent);border-color:var(--accent);}
.writer__chip--fix[aria-pressed="true"]{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--accent);
  border-style:solid;
}

/* なおす中は、押せる名前だとわかるように破線にする */
.writer__chips.is-fixing .writer__chip:not(.writer__chip--ctl){
  border-style:dashed;
  border-color:var(--accent);
  color:var(--accent);
  background:var(--card);
}
.writer__chips.is-fixing .writer__chip:not(.writer__chip--ctl)::after{
  content:"…";
  margin-left:6px;
  color:var(--ink-soft);
}

.writer__new-del{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:9px 14px;
  cursor:pointer;
  transition:border-color .2s;
}
.writer__new-del[hidden]{display:none;}
.writer__new-del:hover{border-color:var(--accent);}
.writer__new-del:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.writer__new{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-8px 0 18px;
}
.writer__new[hidden]{display:none;}

.writer__new-input{
  flex:1;
  min-width:0;
  font-family:inherit;
  font-size:1rem;
  line-height:1.7;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:9px 13px;
  -webkit-appearance:none;
  appearance:none;
}
.writer__new-input:focus{outline:none;background:var(--card);border-color:var(--accent);}
.writer__new-input::placeholder{color:var(--ink-soft);}

.writer__new-ok{
  font-family:inherit;
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--on-ink);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  padding:9px 16px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.writer__new-ok:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.writer__new-ok:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.writer__new-cancel{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:9px 2px;
  cursor:pointer;
}
.writer__new-cancel:hover{color:var(--accent);}

/* 大事なことにする */
.writer__flags{margin-top:14px;}

.writer__flag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:8px 16px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.writer__flag:hover{border-color:var(--ink-soft);}
.writer__flag:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.writer__flag-mark{font-size:.75rem;color:var(--ink-soft);transition:color .2s;}
.writer__flag[aria-pressed="true"]{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--accent);
}
.writer__flag[aria-pressed="true"] .writer__flag-mark{color:var(--accent);}

.writer__flags{display:flex;flex-wrap:wrap;gap:8px;}

/* メモにそえる絵 */
.writer__pad-open{
  display:inline-block;
  margin-top:14px;
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--ink-mid);
  background:none;
  border:1px dashed var(--hair);
  border-radius:var(--radius);
  padding:9px 16px;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
.writer__pad-open:hover{color:var(--accent);border-color:var(--accent);}
.writer__pad-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 絵をそえる・画像をそえる を横に並べる */
.writer__attach{display:flex;flex-wrap:wrap;gap:8px;}
.writer__file{cursor:pointer;}
.writer__file input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.writer__file:focus-within{outline:2px solid var(--accent);outline-offset:2px;}

/* そえた画像の下見 */
/* 書いている途中に見せる、そえたもの。
   保存したあとと同じ大きさ・同じ切り取りかたで見せないと、
   「思っていたのと違う」が起きる。だからこちらも横いっぱい */
.writer__photo{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}
.writer__photo[hidden]{display:none;}
.writer__photo-one{width:100%;}
.writer__photo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--card);
}
.writer__photo-del{
  font-family:inherit;
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:6px 0 0;
  cursor:pointer;
}
.writer__photo-del:hover{color:var(--accent-deep);}

.pad{margin-top:12px;}
.pad[hidden]{display:none;}

.pad__stage{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--plate);
  line-height:0;
}
.pad__canvas{
  width:100%;
  aspect-ratio:3 / 4;   /* 頭の下地に合わせた縦長 */
  display:block;
  touch-action:none;
  cursor:crosshair;
}
.pad .draw__tools{margin-top:10px;}

/* えらんだ文字をいじる帯。文字を1つ選んでいる間だけ出る。
   道具の並びの下に、pad.js が差し込む */
.draw__picked{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:8px 10px;
  background:var(--accent-soft);
  border-radius:var(--radius);
}
.draw__picked[hidden]{display:none;}

.draw__picked-label{
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--accent-deep);
  margin-right:2px;
}

/* いまの大きさ。数字が動いても幅が暴れないようにそろえる */
.draw__picked-size{
  min-width:44px;
  text-align:center;
  font-family:"Jost",sans-serif;
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--accent-deep);
}

.draw__picked .draw__tool{background:var(--card);}

.writer__text{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  line-height:1.95;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:13px 15px;
  min-height:110px;
  resize:vertical;
  -webkit-appearance:none;
  appearance:none;

  /* 書いた量に合わせて伸びる。分かるブラウザはこの1行だけで足りる。
     分からないブラウザには grow.js が同じことをする */
  field-sizing:content;
}

/* grow.js が高さを見ているあいだは、欄の中でスクロールさせない。
   全部が一度に見えるので、下のつまみで伸ばす必要もなくなる */
.writer__text.is-growing{overflow-y:hidden;resize:none;}
.writer__text:focus{outline:none;border-color:var(--accent);background:var(--card);}
.writer__text::placeholder{color:var(--ink-soft);}

/* 長めに書くところ（練習の「やってみて気づいたこと」など） */
.writer__text--tall{min-height:260px;}

/* 書くところの中の小さな案内 */
.writer__note{
  margin:0 0 18px;
  font-size:.75rem;
  line-height:1.9;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.writer__note[hidden]{display:none;}

/* 1行の入力（技術名など） */
.writer__input{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:11px 15px;
  margin-bottom:16px;
  -webkit-appearance:none;
  appearance:none;
}
.writer__input:focus{outline:none;border-color:var(--accent);background:var(--card);}
.writer__input::placeholder{color:var(--ink-soft);}

/* 名前をえらぶ（先輩など）。名前が増えても場所を取らない

   自由に書く欄（.writer__input）は面を沈めた「紙」、
   ここは押してひらく「ボタン」なので、白＋1pxの罫線で分ける。
   矢印はSVGで置く。高さが変わっても、いつも縦まん中にくる。 */
.writer__select{
  display:block;
  width:100%;
  min-height:52px;
  font-family:inherit;
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--ink);
  background-color:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:12px 44px 12px 15px;
  margin-bottom:14px;
  cursor:pointer;
  transition:border-color .2s;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23ADA398' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position:right 16px center;
  background-size:11px 7px;
  background-repeat:no-repeat;
}
.writer__select:hover{border-color:var(--ink-soft);}
.writer__select:focus{
  outline:none;
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23A26A57' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* まだ誰もえらんでいないあいだは、見出しの字を薄く見せる */
.writer__select:has(option[value=""]:checked){color:var(--ink-mid);}

/* 「なおす」中は、えらぶと名前を直す画面になる */
.writer__select.is-fixing{
  color:var(--accent);
  border-color:var(--accent);
  border-style:dashed;
}

/* えらんだ名前。何人でも並ぶ。押すと外れる */
.writer__picked{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px;}
.writer__picked:empty{display:none;}

.writer__picked-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--on-ink);
  background:var(--ink);
  border-radius:var(--radius);
  padding:6px 8px 6px 15px;
}

.writer__picked-off{
  font-family:inherit;
  font-size:.8125rem;
  line-height:1;
  color:var(--on-ink);
  background:none;
  border:none;
  padding:3px 5px;
  cursor:pointer;
  opacity:.65;
}
.writer__picked-off:hover{opacity:1;}
.writer__picked-off:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.writer__error{
  display:none;
  margin:0 0 14px;
  font-size:.6875rem;
  letter-spacing:.06em;
  line-height:1.9;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:7px 12px;
}
.writer__error.is-shown{display:block;}

/* うまくいったときの知らせ */
.writer__done{
  display:none;
  margin:0 0 14px;
  font-size:.6875rem;
  letter-spacing:.06em;
  line-height:1.9;
  color:var(--ink);
  background:var(--paper-deep);
  border-radius:var(--radius);
  padding:7px 12px;
}
.writer__done.is-shown{display:block;}

/* 設定 */
.settings__note{
  margin:0 0 20px;
  font-size:.75rem;
  line-height:1.95;
  letter-spacing:.06em;
  color:var(--ink-mid);
}
.settings__danger{color:var(--accent-deep);}
.settings__danger:hover{border-color:var(--accent);}

.writer__date{
  width:100%;
  font-family:inherit;
  font-size:1rem;          /* 16px未満にするとiOSで拡大されるので下げない */
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:11px 15px;
  margin-bottom:16px;
  -webkit-appearance:none;
  appearance:none;
}
.writer__date:focus{outline:none;border-color:var(--accent);background:var(--card);}

.writer__foot{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.writer__save{flex:1;font-size:.8125rem;padding:13px;}
.writer__save:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.writer__cancel{
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:13px 6px;
  cursor:pointer;
}
.writer__cancel:hover{color:var(--accent);}
.writer__cancel:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}

/* 開くボタン。開いている間は隠す */
.opener.is-hidden{display:none;}

/* 追加された直後の項目 */
@keyframes writer-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}
.is-new{animation:writer-in .3s ease-out;}

/* ============================================
   6. 検索
   ============================================ */
.search{margin:26px 0 0;position:relative;}
/* ホームでは、タブのすぐ下に置く。下は一覧の余白にまかせる */
.search--top{margin:0;}

.search__input{
  width:100%;
  font-family:inherit;
  font-size:1rem;          /* 16px未満にするとiOSで拡大されるので下げない */
  line-height:1.9;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:12px 44px 12px 16px;
  transition:border-color .2s;
  -webkit-appearance:none;
  appearance:none;
}
.search__input:focus{outline:none;border-color:var(--accent);}
.search__input::placeholder{color:var(--ink-soft);}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none;}

.search__clear{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  display:none;
  font-family:inherit;
  font-size:1rem;
  line-height:1;
  color:var(--ink-soft);
  background:none;
  border:none;
  border-radius:var(--radius);
  width:32px;
  height:32px;
  cursor:pointer;
}
.search__clear.is-shown{display:block;}
.search__clear:hover{color:var(--accent);}
.search__clear:focus-visible{outline:2px solid var(--accent);outline-offset:0;}

/* 見つかった件数 */
.hits{
  display:none;
  font-family:"Jost",sans-serif;
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--ink-mid);
  padding:20px 2px 0;
}
.hits.is-shown{display:block;}

/* 検索結果 */
.result{
  display:block;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:15px 18px;
  margin-bottom:8px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s;
}
.result:hover{border-color:var(--ink-soft);}
.result:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.result__path{
  display:block;
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
  margin-bottom:3px;
}
.result__body{
  margin:0;
  font-size:.875rem;
  line-height:1.95;
}
.result__who{
  display:inline-block;
  font-size:.625rem;
  letter-spacing:.14em;
  color:var(--accent);
  margin-top:4px;
  line-height:1.8;
}

/* 一致した文字 */
.result mark,
.tech mark{
  background:var(--accent-soft);
  color:var(--accent-deep);
  border-radius:0;
  padding:0 2px;
}

/* 見つからなかったとき */
.empty{
  display:none;
  text-align:center;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:34px 20px;
  margin-top:20px;
}
.empty.is-shown{display:block;}

/* 検索中は隠す要素 */
.is-searching{display:none!important;}

/* ============================================
   7. ログイン
   ============================================ */
.auth{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
}

/* ---------- 写真 ---------- */
.auth__hero{
  position:relative;
  flex:0 0 auto;
  height:clamp(300px, 40vh, 380px);   /* 下はカードの裏に隠れて、メール欄のあたりまで続く */
  overflow:hidden;
  background:var(--paper-deep);
}
.auth__mv{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 46%;
  display:block;
}
/* 上は少し締めて、下は紙の色へ溶かす */
.auth__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(35,31,28,.52) 0%,
      rgba(35,31,28,.18) 38%,
      var(--veil-fade) 76%,
      var(--paper) 100%);
}

.auth__brand{
  position:absolute;
  left:0;
  right:0;
  top:calc(50% - 70px);
  transform:translateY(-50%);   /* カードに隠れない部分の真ん中に置く */
  text-align:center;
  padding:0 24px;
}
.auth__name{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:2rem;
  letter-spacing:.36em;
  text-indent:.36em;
  line-height:1.4;
  margin:0;
  color:#fff;
  text-shadow:0 1px 18px rgba(35,31,28,.5);
}
.auth__sub{
  display:block;
  font-family:"Jost",sans-serif;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.44em;
  text-indent:.44em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  margin-top:10px;
  text-shadow:0 1px 12px rgba(35,31,28,.6);
}

/* ---------- 入力 ---------- */
.auth__sheet{
  width:100%;
  max-width:420px;
  margin:-140px auto 0;   /* 写真に重ねる。写真はカードの裏でメール欄あたりまで */
  padding:0 24px 56px;
  position:relative;
  flex:1 0 auto;
}

.auth__card{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius-lg);
  padding:30px 26px 26px;
}

.auth__lead{
  margin:0 0 26px;
  text-align:center;
  font-size:.75rem;
  letter-spacing:.14em;
  line-height:2;
  color:var(--ink-mid);
}
.auth__lead b{
  display:block;
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.2em;
  color:var(--ink);
  margin-bottom:4px;
}

.auth__field{margin-bottom:18px;}
.auth__label{
  display:block;
  font-family:"Jost",sans-serif;
  font-weight:400;
  font-size:.5625rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.auth__input{
  width:100%;
  font-family:inherit;
  font-size:1rem;          /* 16px未満にするとiOSで拡大されるので下げない */
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--paper);
  border:1px solid transparent;
  border-bottom:1px solid var(--hair);
  border-radius:0;
  padding:11px 13px;
  transition:border-color .2s,background .2s;
  -webkit-appearance:none;
  appearance:none;
}
.auth__input:focus{outline:none;background:var(--card);border-bottom-color:var(--accent);}
.auth__input::placeholder{color:var(--ink-soft);}

.auth__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-4px 0 22px;
}
.auth__keep{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-mid);
  cursor:pointer;
}
.auth__keep input{
  width:14px;
  height:14px;
  accent-color:var(--accent);
  margin:0;
}
.auth__forgot{
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
  text-decoration:none;
}
.auth__forgot:hover{color:var(--accent);}
.auth__forgot:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}

.auth__submit{
  display:block;
  width:100%;
  font-size:.8125rem;
  padding:15px;
}
.auth__submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* エラー */
.auth__error{
  display:none;
  font-size:.6875rem;
  letter-spacing:.08em;
  line-height:1.9;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:8px 12px;
  margin:0 0 16px;
}
.auth__error.is-shown{display:block;}

/* お試しの案内 */
.auth__trial{
  margin:0 0 18px;
  text-align:center;
  font-size:.6875rem;
  letter-spacing:.14em;
  line-height:1.9;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:8px 12px;
}

/* 管理者のログイン */
.auth__toggle{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:10px;
  cursor:pointer;
  transition:color .2s;
}
.auth__toggle:hover{color:var(--accent);}
.auth__toggle:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}

.auth__login{margin-top:8px;}
.auth__login[hidden]{display:none;}

/* ---------- ログインなしで使う ---------- */
.auth__or{
  display:flex;
  align-items:center;
  gap:14px;
  margin:26px 0 14px;
  font-family:"Jost",sans-serif;
  font-size:.5625rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.auth__or::before,
.auth__or::after{content:"";flex:1;height:1px;background:var(--hair);}

.auth__guest{
  display:block;
  width:100%;
  font-family:inherit;
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.18em;
  color:var(--ink);
  background:none;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;
  transition:border-color .2s;
}
.auth__guest:hover{border-color:var(--ink);}
.auth__guest:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.auth__note{
  margin:14px 2px 0;
  font-size:.625rem;
  line-height:2;
  letter-spacing:.06em;
  color:var(--ink-soft);
  text-align:center;
}

.auth__foot{
  margin:24px 0 0;
  text-align:center;
  font-size:.6875rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.auth__foot a{color:var(--ink-mid);text-decoration:none;border-bottom:1px solid var(--hair);}
.auth__foot a:hover{color:var(--accent);border-color:var(--accent);}

@media (max-width:380px){
  .auth__sheet{padding:0 18px 44px;}
  .auth__card{padding:26px 20px 22px;}
  .auth__name{font-size:1.75rem;}
}


/* ============================================
   ここから下は、下部タブを入れたときに足したもの
   ============================================ */

/* ---------- 探すページ ---------- */
.search__lead{
  margin:14px 0 0;
  font-size:.75rem;
  color:var(--ink-soft);
}
.search__lead.is-hidden{display:none;}

/* ---------- 教えてくれた人（設定） ---------- */
/* ---------- モデルごとの施術（探す・聞く） ---------- */
/* 名前だけ並べて、選ぶとその人の施術が開く */
.models__group{border-bottom:1px solid var(--hair);}
.models__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:15px 2px;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
  color:inherit;
}
.models__name{
  font-family:"Shippori Mincho",serif;
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.16em;
}
/* 施術の回数。名前のとなりに小さく */
.models__times{
  margin-left:auto;
  font-size:.6875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
/* 開き閉じのしるし。開くと下を向く */
.models__mark{
  flex:none;
  width:7px;
  height:7px;
  border-right:1px solid var(--ink-soft);
  border-bottom:1px solid var(--ink-soft);
  transform:rotate(-45deg);
  transition:transform .2s ease;
}
.models__group.is-open .models__mark{transform:rotate(45deg);}
.models__body{padding:0 0 14px;}
/* ウィッグがどんな毛か */
.models__wig{
  margin:0 0 4px;
  font-size:.8125rem;
  line-height:1.95;
  color:var(--ink-mid);
  white-space:pre-wrap;
}
.models__none{
  margin:0;
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.models__edit{margin-top:10px;}

.mentors{list-style:none;margin:0 0 4px;padding:0;}
.mentors__item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:2px 10px;
  padding:13px 2px;
  border-bottom:1px solid var(--hair);
}
.mentors__item:last-child{border-bottom:none;}
.mentors__name{
  font-family:"Shippori Mincho",serif;
  font-size:.9375rem;
  letter-spacing:.1em;
}
/* どの店の人か。名前のとなりに小さく */
.mentors__shop{
  margin-left:10px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--ink-mid);
  white-space:nowrap;
}
.mentors__meta{
  grid-column:1;
  font-size:.6875rem;
  color:var(--ink-soft);
}
.mentors__item .note-actions__button{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
}

/* ---------- 座学の項目に付く印 ---------- */
.step__marks{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}

/* 覚えた／間違えやすい を見出しの下に置くとき */
.writer__flags--top{
  margin:14px 0 0;
}

/* ---------- 小テストのページ ---------- */
.quiz-filter{margin-bottom:4px;}

/* ============================================
   スマホで書くとき

   字は16px（これより小さいとiOSが勝手に拡大する）。
   指で押すところと書くところは、少し大きめにとる。
   ============================================ */
@media (max-width:520px){
  .writer{padding:20px 16px 22px;}

  .writer__input,
  .writer__select,
  .writer__date,
  .writer__new-input,
  .writer__text,
  .menu__input,
  .search__input,
  .auth__input,
  .input,
  .textarea,
  .select{
    font-size:1rem;
    line-height:1.9;
  }

  .writer__input,
  .writer__date{padding:14px 15px;}
  .writer__new-input{padding:12px 13px;}

  /* 指で押すので、少し高くとる。矢印は縦まん中のままでいい */
  .writer__select{min-height:56px;padding:15px 46px 15px 15px;background-position:right 18px center;}

  .writer__text{padding:15px 15px;min-height:150px;}
  .writer__text--tall{min-height:300px;}
  .textarea{min-height:180px;}

  .search__input{padding:14px 44px 14px 16px;}

  /* 指で押すところ */
  .writer__chip{padding:9px 16px;font-size:.875rem;}
  .writer__picked-item{padding:8px 8px 8px 15px;font-size:.875rem;}
}