/* レシピ動画SaaS 会員ページ
   配色・文字サイズは _会員サイト画面イメージ_2026-08-01.html と同じものを使う（見た目を揃える）
   ★本文18px以上（資料・画面の共通ルール）／ロゴ画像は使わず "T-LAB" のテキスト表記のみ */
:root{
  --navy:#1f3a5f; --navy-d:#16293f;
  --blue:#2f80c4; --blue-soft:#e9f2fa; --blue-line:#c6ddf1;
  --cream:#fdf8f0; --warm:#dd7136; --warm-soft:#fdefe3; --warm-line:#f3d3b8;
  --ink:#23313f; --gray:#5c6b7a; --line:#dde5ed;
  --ok:#3f8f5f; --alert:#c0392b; --alert-soft:#fdecea;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:18px; line-height:1.8; color:var(--ink);
  background:linear-gradient(180deg,#f3f7fb 0%, var(--cream) 55%, #f7f0e5 100%);
  background-attachment:fixed; overflow-wrap:break-word;
}
a{color:var(--blue)}
.head{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff;border-bottom:5px solid var(--warm)}
.head-in{max-width:760px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:inline-block;font-size:18px;font-weight:800;letter-spacing:.2em;padding:4px 10px 4px 12px;
  border:2px solid rgba(255,255,255,.75);border-radius:8px;line-height:1.2}
.head .who{margin-left:auto;font-size:16px;color:#d6e4f2}
.head .who a{color:#fff;text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:22px 16px 80px}
h1{font-size:26px;color:var(--navy);margin:0 0 14px;line-height:1.45}
h2{font-size:21px;color:var(--navy);margin:26px 0 12px;line-height:1.45}
h3{font-size:19px;color:var(--navy);margin:0 0 8px}
p{margin:0 0 14px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:18px;
  box-shadow:0 8px 20px rgba(31,58,95,.07)}
.muted{color:var(--gray);font-size:16px}
label{display:block;font-weight:700;color:var(--navy);margin:14px 0 6px;font-size:18px}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;font:inherit;font-size:18px;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
textarea{min-height:110px;line-height:1.7}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue)}
.btn{display:inline-block;font:inherit;font-size:18px;font-weight:800;border:none;border-radius:999px;
  padding:14px 28px;cursor:pointer;background:var(--warm);color:#fff;box-shadow:0 6px 14px rgba(221,113,54,.28)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.sub{background:#fff;color:var(--navy);border:2px solid var(--blue-line);box-shadow:none}
.btn.wide{display:block;width:100%;text-align:center}
.err{background:var(--alert-soft);border:2px solid #f2b8b1;color:var(--alert);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:17px}
.ok{background:#eaf6ef;border:2px solid #b9dcc7;color:var(--ok);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:17px}
.hide{display:none !important}

/* 残り本数 */
.usage{background:var(--blue-soft);border:2px solid var(--blue-line);border-radius:14px;padding:14px 18px;margin-bottom:18px}
.usage .n{font-size:34px;font-weight:800;color:var(--navy);line-height:1.2}

/* 一覧 */
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.row .t{font-weight:700;color:var(--navy)}
.row .s{margin-left:auto;font-size:16px;color:var(--gray)}
.badge{display:inline-block;font-size:16px;font-weight:700;border-radius:999px;padding:2px 12px;background:var(--warm-soft);
  border:1px solid var(--warm-line);color:#a4522a}
.badge.b{background:var(--blue-soft);border-color:var(--blue-line);color:var(--navy)}

/* ステップ */
.steps{display:flex;gap:8px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.steps .s{background:#fff;border:1px solid var(--blue-line);border-radius:999px;padding:5px 14px;font-size:16px;font-weight:700;color:var(--gray)}
.steps .s.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ドロップ枠 */
.drop{border:3px dashed var(--blue-line);border-radius:16px;background:#fff;padding:28px 18px;text-align:center}
.drop.over{border-color:var(--warm);background:var(--warm-soft)}
.files{margin-top:12px}
.file{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:17px}
.bar{flex:1;height:8px;border-radius:8px;background:var(--line);overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--blue);width:0}

/* 数字の欄（食の安全） */
.numbers{background:var(--warm-soft);border:2px solid var(--warm-line);border-radius:14px;padding:14px 18px}
.numbers label{color:#a4522a}

/* 雰囲気タグ */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.tags label{display:inline-flex;align-items:center;gap:7px;margin:0;background:#fff;border:2px solid var(--line);
  border-radius:999px;padding:8px 16px;font-weight:700;color:var(--gray);cursor:pointer;font-size:17px}
.tags input{accent-color:var(--blue)}
.tags label:has(input:checked){border-color:var(--blue);color:var(--navy);background:var(--blue-soft)}

/* 選択カード */
.picks{display:grid;gap:12px}
.pick{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer}
.pick:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.pick input{margin-top:6px;accent-color:var(--blue)}
.pick b{color:var(--navy);font-size:18px}
.pick span{display:block;color:var(--gray);font-size:16px}

/* 作成中 */
.phases{margin:14px 0}
.phase{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:18px;color:var(--gray)}
.phase .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;flex:0 0 auto}
.phase.on{color:var(--navy);font-weight:800}
.phase.on .dot{background:var(--warm);border-color:var(--warm)}
.phase.past .dot{background:var(--blue);border-color:var(--blue)}
video{width:100%;max-width:340px;border-radius:14px;background:#000;display:block;margin:0 auto 14px}
footer{max-width:760px;margin:0 auto;padding:0 16px 40px;color:var(--gray);font-size:16px}
@media(max-width:560px){ h1{font-size:23px} .wrap{padding:16px 14px 70px} .card{padding:16px 16px} }