@charset "UTF-8";
/* =========================================================
   Pottto（ポット）style.css
   ---------------------------------------------------------
   コンセプト：あたたかい「和洋折衷」
     和 ... 桜色・抹茶色・柿色・藍色、ふちどり、波のような縁取り
     洋 ... ギンガムチェック、ドット、丸みのあるボタン
   一番のルール：かわいさより「見やすさ・押しやすさ」

   【もくじ】
    0. フォント（自分のPCに保存して使う）
    1. 色・大きさなどの変数
    2. 基本（リセット・文字・背景）
    3. 共通パーツ（ボタン・フォーム・見出し）
    4. ヘッダー・メニュー
    5. 画面の土台
    6. メイン画面
    7. 食材登録・食材一覧
    8. ボトル（残量表示）
    9. レシピ
   10. 買い物メモ・設定・使い方
   11. ダイアログ（モーダル）
   12. 装飾画像の差し替え場所
   13. PC表示
   14. その他（動きを減らす設定など）
   ========================================================= */


/* =========================================================
   0. フォント（Zen Maru Gothic = 読みやすい丸ゴシック）
   ---------------------------------------------------------
   【自分のPCにダウンロードして使う手順】
   1) https://fonts.google.com/specimen/Zen+Maru+Gothic を開く
   2) 「Get font」→「Download all」でzipをダウンロードして展開
   3) 展開したフォルダ内の次の3ファイルを、
      index.html と同じ場所に fonts という名前のフォルダを作って入れる
        ZenMaruGothic-Regular.ttf
        ZenMaruGothic-Medium.ttf
        ZenMaruGothic-Bold.ttf
      （woff2形式を使う場合は、同じ名前で拡張子だけ .woff2 にして入れる）
   ※ フォントが見つからない場合は、下の font-family の
     「次の候補」の丸ゴシックが自動で使われます。
   ========================================================= */
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ZenMaruGothic-Regular.woff2") format("woff2"),
       url("fonts/ZenMaruGothic-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ZenMaruGothic-Medium.woff2") format("woff2"),
       url("fonts/ZenMaruGothic-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ZenMaruGothic-Bold.woff2") format("woff2"),
       url("fonts/ZenMaruGothic-Bold.ttf") format("truetype");
}


/* =========================================================
   1. 色・大きさなどの変数（ここを変えると全体の雰囲気が変わる）
   ========================================================= */
:root {
  /* --- 文字 --- */
  --font-main: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic",
               "Yu Gothic", "Meiryo", sans-serif;

  /* --- 色：ライトモード --- */
  --c-bg:           #fff3df;  /* 背景（あたたかい生成り） */
  --c-paper:        #fffdf7;  /* 各画面の紙のような面 */
  --c-card:         #ffffff;  /* カード */
  --c-text:         #4a3426;  /* 文字（濃い茶色。背景とのコントラスト確保） */
  --c-text-sub:     #6f5646;  /* 補足の文字 */
  --c-line:         #ecd5b5;  /* 線 */
  --c-title:        #9c4a3a;  /* 見出し（えんじ色） */
  --c-indigo:       #4f6f86;  /* 藍色（アクセント） */

  --c-header:       #ffc1a9;  /* ヘッダーの色（柿色のうすい色） */

  /* ボタンは淡い色合い。文字は濃い茶色でしっかり読める */
  --c-btn-primary:        #ffcf94;  /* 柿・みかん色 */
  --c-btn-primary-edge:   #e39a4d;
  --c-btn-secondary:      #d7e8c9;  /* 抹茶色 */
  --c-btn-secondary-edge: #98b983;
  --c-btn-sakura:         #fbd3d0;  /* 桜色 */
  --c-btn-sakura-edge:    #e59e9a;
  --c-btn-danger:         #fbc9c1;  /* 注意（うすい赤） */
  --c-btn-danger-edge:    #d9776b;
  --c-btn-text:           #4a3426;

  /* 期限の状態（色＋文字の両方で伝える） */
  --c-warn-bg:      #fff0b8;
  --c-warn-edge:    #d9a21b;
  --c-expired-bg:   #fbc9c1;
  --c-expired-edge: #c4503f;

  --c-focus:        #2f6fa3;  /* キーボード操作時の枠 */
  --c-overlay:      rgba(74, 52, 38, 0.55);

  /* --- 形・大きさ --- */
  --radius-s:  14px;
  --radius-m:  22px;
  --radius-l:  30px;
  --radius-pill: 999px;
  --tap-size:  52px;          /* ボタンの最低の高さ（押しやすさ） */
  --shadow:    0 4px 0 rgba(156, 106, 60, 0.18);
  --shadow-soft: 0 6px 18px rgba(156, 106, 60, 0.16);

  /* --- 背景の柄 ---
     背景画像に差し替えたいときは --bg-image に url(...) を入れる
     例：--bg-image: url("images/bg.png"); */
  --bg-image:url("images/back.png");
  --bg-gingham-color: rgba(246, 176, 170, 0.22);
  --bg-dot-color:     rgba(255, 255, 255, 0.85);
}

/* ダークモード（設定で <html data-theme="dark"> を付ける想定） */
:root[data-theme="dark"] {
  --c-bg:       #2b211b;
  --c-paper:    #382b23;
  --c-card:     #46372d;
  --c-text:     #fbefdf;
  --c-text-sub: #dcc7b2;
  --c-line:     #6a5444;
  --c-title:    #ffb8a6;
  --c-indigo:   #a9c8dc;
  --c-header:   #5a3f2e;

  --c-btn-primary:        #f2b877;
  --c-btn-primary-edge:   #b87a36;
  --c-btn-secondary:      #b9d2a6;
  --c-btn-secondary-edge: #789a63;
  --c-btn-sakura:         #efbab6;
  --c-btn-sakura-edge:    #b97b77;
  --c-btn-danger:         #f0a79d;
  --c-btn-danger-edge:    #b4564a;
  --c-btn-text:           #2f2018;

  --c-warn-bg:      #6d5a1c;
  --c-warn-edge:    #e5c04b;
  --c-expired-bg:   #7a3028;
  --c-expired-edge: #ff9b8c;

  --c-focus:        #8cc4ee;
  --c-overlay:      rgba(0, 0, 0, 0.65);
  --shadow:         0 4px 0 rgba(0, 0, 0, 0.3);
  --shadow-soft:    0 6px 18px rgba(0, 0, 0, 0.35);
  --bg-gingham-color: rgba(255, 190, 170, 0.07);
  --bg-dot-color:     rgba(255, 255, 255, 0.05);
}


/* =========================================================
   2. 基本（リセット・文字・背景）
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* hidden属性が付いたものは、必ず非表示にする */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 1.0625rem;          /* 17px：スマホでも読みやすい大きさ */
  font-weight: 500;
  line-height: 1.75;
  color: var(--c-text);
  background-color: var(--c-bg);
  /* 背景：差し替え用画像 → ギンガムチェック → ドット の重ね */
  background-image:
    var(--bg-image),
    radial-gradient(circle, var(--bg-dot-color) 2.5px, transparent 3px),
    linear-gradient(90deg, var(--bg-gingham-color) 50%, transparent 50%),
    linear-gradient(0deg,  var(--bg-gingham-color) 50%, transparent 50%);
  background-size: cover, 36px 36px, 36px 36px, 36px 36px;
  background-position: center, 18px 18px, 0 0, 0 0;
  background-attachment: fixed, scroll, scroll, scroll;
  min-height: 100vh;
  overflow-wrap: anywhere;       /* 長い文字で横スクロールしないように */
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.4;
  font-weight: 700;
}

p {
  margin: 0 0 0.8em;
}

ul, ol {
  margin: 0;
  padding: 0;
}

/* リストの点を消すもの（クラス付きのリストだけ） */
.home-menu-list,
.home-summary-list,
.expiry-modal-list,
.badge-list,
.ingredient-list,
.recipe-list,
.shopping-list,
.menu-list {
  list-style: none;
}

/* キーボード操作のときの枠を、はっきり見せる */
:focus-visible {
  outline: 4px solid var(--c-focus);
  outline-offset: 3px;
}

/* 画面には出さないが、読み上げには使う文字 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* JavaScriptが無効のときのお知らせ */
.noscript-message {
  margin: 0;
  padding: 14px 16px;
  text-align: center;
  font-weight: 700;
  background: var(--c-expired-bg);
  color: var(--c-text);
}


/* =========================================================
   3. 共通パーツ
   ========================================================= */

/* ---------- ボタン（丸み・淡い色・大きめ） ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-size);
  min-width: var(--tap-size);
  padding: 0.6em 1.5em;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-btn-text);
  text-align: center;
  text-decoration: none;
  background: var(--c-btn-primary);
  border: 3px solid var(--c-btn-primary-edge);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--c-btn-primary-edge);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 押したときに少し沈む（押した感じが分かる） */
.button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--c-btn-primary-edge);
}

.button-primary {
  /* 基本色と同じ（柿色）。名前で役割を分けるために用意 */
  background: var(--c-btn-primary);
}

.button-secondary {
  background: var(--c-btn-secondary);
  border-color: var(--c-btn-secondary-edge);
  box-shadow: 0 4px 0 var(--c-btn-secondary-edge);
}
.button-secondary:active {
  box-shadow: 0 1px 0 var(--c-btn-secondary-edge);
}

.button-danger {
  background: var(--c-btn-danger);
  border-color: var(--c-btn-danger-edge);
  box-shadow: 0 4px 0 var(--c-btn-danger-edge);
}
.button-danger:active {
  box-shadow: 0 1px 0 var(--c-btn-danger-edge);
}

.button-large {
  width: 100%;
  min-height: 60px;
  font-size: 1.1875rem;
}

.button-small {
  min-height: 44px;
  padding: 0.35em 1em;
  font-size: 0.9375rem;
}

/* 「メイン画面へ戻る」ボタン */
.button-back {
  align-self: flex-start;
  background: var(--c-btn-sakura);
  border-color: var(--c-btn-sakura-edge);
  box-shadow: 0 4px 0 var(--c-btn-sakura-edge);
  min-height: 48px;
  padding: 0.4em 1.2em;
  font-size: 0.9375rem;
}
.button-back:active {
  box-shadow: 0 1px 0 var(--c-btn-sakura-edge);
}

/* アイコン＋文字のボタン（メニュー・虫眼鏡） */
.button-icon {
  background: var(--c-btn-sakura);
  border-color: var(--c-btn-sakura-edge);
  box-shadow: 0 4px 0 var(--c-btn-sakura-edge);
  padding: 0.4em 1em;
  font-size: 0.9375rem;
}
.button-icon:active {
  box-shadow: 0 1px 0 var(--c-btn-sakura-edge);
}

/* ---------- 見出し ---------- */
.screen-title {
  font-size: 1.5rem;
  color: var(--c-title);
}

/* 見出しの下に、ふちどりの短い飾り線（CSSだけで作成） */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.1875rem;
  color: var(--c-title);
}
.section-title::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--c-btn-sakura);
  border: 3px solid var(--c-btn-sakura-edge);
  border-radius: 50%;
}

/* ---------- フォーム ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-weight: 700;
  color: var(--c-text);
}

.required {
  display: inline-block;
  margin-left: 6px;
  padding: 0 0.6em;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-btn-sakura);
  border: 2px solid var(--c-btn-sakura-edge);
  border-radius: var(--radius-pill);
}

.form-input {
  width: 100%;
  min-height: var(--tap-size);
  padding: 0.5em 1em;
  font-family: inherit;
  font-size: 1.0625rem;    /* 16px以上にして、iPhoneで勝手に拡大されないように */
  color: var(--c-text);
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-m);
}
.form-input::placeholder {
  color: var(--c-text-sub);
  opacity: 0.75;
}
.form-input:focus {
  border-color: var(--c-focus);
}

.form-textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.6;
}

/* ★★★【変更】ここから ★★★ スマホ（特にiPhone）で日付欄がはみ出す問題の対策
   ----------------------------------------------------------
   原因：スマホの日付入力欄は、ブラウザ独自の「最低の幅」を持っていて、
         width:100% を指定しても枠より広がってしまうことがあります。
   対策：・標準の見た目を外して、幅を枠の中に収める
         ・縦並びの中身が縮めるように min-width:0 を指定する */
.form,
.form-group,
.form-fieldset {
  min-width: 0;                       /* 【変更】中身の幅に引っぱられて広がらないようにする */
}
input[type="date"].form-input {
  -webkit-appearance: none;           /* 【変更】スマホ独自の見た目を外す */
  appearance: none;
  display: block;                     /* 【変更】幅の指定がきくようにする */
  min-width: 0;                       /* 【変更】最低幅をなくす */
  max-width: 100%;                    /* 【変更】枠より広がらない */
  text-align: left;                   /* 【変更】iPhoneで中央寄せになるのを防ぐ */
  line-height: 1.4;
}
/* iPhoneの日付欄の中の文字（年月日）の高さをそろえる */
input[type="date"].form-input::-webkit-date-and-time-value {
  min-height: 1.4em;
  text-align: left;
}
/* ★★★【変更】ここまで ★★★ */
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6em;
  /* 右端の矢印をCSSで描く */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-text-sub) 50%),
    linear-gradient(135deg, var(--c-text-sub) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 17px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

.form-help {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-text-sub);
}

/* エラー文：空のときは場所をとらない */
.form-error {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
}
.form-error:not(:empty) {
  padding: 8px 14px;
  background: var(--c-expired-bg);
  border: 2px solid var(--c-expired-edge);
  border-radius: var(--radius-s);
}

.form-fieldset {
  margin: 0;
  padding: 14px 16px 16px;
  border: 3px dashed var(--c-line);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-fieldset > legend {
  padding: 0 8px;
}

.form-actions {
  margin-top: 4px;
}

/* チェックボックス・ラジオ：大きくして押しやすく */
.form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap-size);
}
.form-check label {
  flex: 1;
  cursor: pointer;
}

.form-checkbox,
.form-radio {
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
  accent-color: #d9823b;
  cursor: pointer;
}

/* 横並びのフォーム（買い物メモ） */
.form-inline {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
}
.form-inline .form-group {
  flex: 1 1 220px;
}
.form-inline .button {
  margin-top: 31px;      /* 入力欄の高さにそろえる */
}

/* ---------- 説明ボックス ---------- */
.note {
  margin: 0 0 16px;
  padding: 12px 16px;
  font-size: 0.9688rem;
  line-height: 1.7;
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-btn-secondary) 45%, var(--c-paper));
  border: 2px dashed var(--c-btn-secondary-edge);
  border-radius: var(--radius-m);
}

/* ---------- 件数・空メッセージ ---------- */
.result-count {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--c-text-sub);
}

.empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 24px 16px;
  text-align: center;
  background: var(--c-card);
  border: 3px dashed var(--c-line);
  border-radius: var(--radius-l);
}
.empty-message p {
  margin: 0;
}

/* ---------- お知らせ（成功・エラー） ---------- */
/* JavaScriptが中身を入れる。クラス名の想定：message-success / message-error */
.message-area {
  position: sticky;
  top: 72px;
  z-index: 40;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.message-area:empty {
  display: none;
}
.message-area > * {
  margin: 10px 0 0;
  padding: 12px 18px;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-btn-secondary);
  border: 3px solid var(--c-btn-secondary-edge);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
}
.message-area > .message-error {
  background: var(--c-expired-bg);
  border-color: var(--c-expired-edge);
}


/* =========================================================
   4. ヘッダー・メニュー
   ========================================================= */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-header);
  border-bottom: 4px solid var(--c-btn-primary-edge);
  box-shadow: var(--shadow-soft);
}

/* ヘッダーの下に、波のような縁取り（和風の波と洋風のスカラップの中間） */
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  margin-top: 4px;
  pointer-events: none;
  background: radial-gradient(circle at 14px 0, var(--c-header) 12px, transparent 13px) repeat-x;
  background-size: 28px 14px;
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 14px;
}

.app-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--c-title);
  text-decoration: none;
}
.app-logo {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.app-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.today {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  color: var(--c-text);
}

/* 三本線のメニューアイコン（CSSで描画） */
.menu-button-bars {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 3px;
  background: var(--c-text);
  border-radius: 3px;
}
.menu-button-bars::before,
.menu-button-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 3px;
  background: var(--c-text);
  border-radius: 3px;
}
.menu-button-bars::before { top: -7px; }
.menu-button-bars::after  { top: 7px; }

/* 幅がとても狭いスマホでは、メニューの文字を隠してアイコンだけにする */
@media (max-width: 400px) {
  .menu-button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .app-name { font-size: 1.25rem; }
}

/* メニューの中身 */
.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  z-index: 60;
  width: min(300px, calc(100vw - 24px));
  padding: 12px;
  background: var(--c-paper);
  border: 3px solid var(--c-btn-primary-edge);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-item {
  width: 100%;
  min-height: var(--tap-size);
  padding: 0.5em 1.2em;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
  color: var(--c-btn-text);
  background: var(--c-btn-primary);
  border: 3px solid var(--c-btn-primary-edge);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.menu-list li:nth-child(2) .menu-item {
  background: var(--c-btn-secondary);
  border-color: var(--c-btn-secondary-edge);
}
.menu-list li:nth-child(3) .menu-item {
  background: var(--c-btn-sakura);
  border-color: var(--c-btn-sakura-edge);
}


/* =========================================================
   5. 画面の土台
   ========================================================= */
.app-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 14px 56px;
}

/* 各画面は「紙」のような面にして、背景の柄より文字を読みやすくする */
.screen {
  padding: 20px 16px 28px;
  background: var(--c-paper);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}

/* 紙の内側に、細い点線のふちどり（和の便箋のような雰囲気） */
.screen {
  outline: 2px dashed var(--c-line);
  outline-offset: -11px;
}
.screen :focus-visible {
  outline-offset: 3px;
}

.screen-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.screen-header .screen-title {
  flex: 1 1 100%;
  order: 2;
}
.screen-header .button-back {
  order: 1;
}
.screen-header .button-icon {
  order: 1;
  margin-left: auto;
}


/* =========================================================
   6. メイン画面
   ========================================================= */
/* キャッチコピー */
.catchcopy {
  display: block;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 1.1875rem;
  text-align: center;
  color: var(--c-title);
  background: var(--c-header);
  border: 3px solid var(--c-btn-primary-edge);
  border-radius: var(--radius-pill);
}

/* 期限が近い食材のまとめ */
.home-summary {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-l);
}
.home-summary-text {
  margin-bottom: 8px;
  color: var(--c-text-sub);
}
.home-summary-list,
.expiry-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 一覧の1行：左に食材名、右に「あと○日」。文字で優先順位が分かる */
.home-summary-list li,
.expiry-modal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 16px;
  font-weight: 700;
  background: var(--c-warn-bg);
  border: 2px solid var(--c-warn-edge);
  border-radius: var(--radius-pill);
}
.home-summary-list li.is-expired,
.expiry-modal-list li.is-expired {
  background: var(--c-expired-bg);
  border-color: var(--c-expired-edge);
}

/* 主要機能ボタン：2列のタイル */
.home-menu {
  margin-bottom: 24px;
}
.home-menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.home-menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 140px;
  padding: 14px 8px;
  font-family: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--c-btn-text);
  background: var(--c-btn-primary);
  border: 3px solid var(--c-btn-primary-edge);
  border-radius: var(--radius-l);
  box-shadow: 0 5px 0 var(--c-btn-primary-edge);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-menu-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--c-btn-primary-edge);
}
/* 4つのボタンを淡い色で塗り分け（桜・抹茶・柿・藍） */
.home-menu-list li:nth-child(2) .home-menu-button {
  background: var(--c-btn-secondary);
  border-color: var(--c-btn-secondary-edge);
  box-shadow: 0 5px 0 var(--c-btn-secondary-edge);
}
.home-menu-list li:nth-child(3) .home-menu-button {
  background: var(--c-btn-sakura);
  border-color: var(--c-btn-sakura-edge);
  box-shadow: 0 5px 0 var(--c-btn-sakura-edge);
}
.home-menu-list li:nth-child(4) .home-menu-button {
  background: #d6e6ee;
  border-color: #8fb1c4;
  box-shadow: 0 5px 0 #8fb1c4;
}
:root[data-theme="dark"] .home-menu-list li:nth-child(4) .home-menu-button {
  background: #a9c8dc;
  border-color: #6f93a8;
  box-shadow: 0 5px 0 #6f93a8;
}
.home-menu-list li:nth-child(2) .home-menu-button:active { box-shadow: 0 1px 0 var(--c-btn-secondary-edge); }
.home-menu-list li:nth-child(3) .home-menu-button:active { box-shadow: 0 1px 0 var(--c-btn-sakura-edge); }
.home-menu-list li:nth-child(4) .home-menu-button:active { box-shadow: 0 1px 0 #8fb1c4; }

/* バッジ（称号） */
.badge-section {
  padding: 16px;
  background: var(--c-card);
  border: 3px dashed var(--c-btn-primary-edge);
  border-radius: var(--radius-l);
}
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 104px;
  text-align: center;
}
.badge-name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}


/* =========================================================
   7. 食材登録・食材一覧
   ========================================================= */
.filter-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.search-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-m);
}

/* 食材カード */
.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ingredient-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}

/* 期限の状態（JavaScriptが付ける想定のクラス）
   is-near ... 期限が近い／ is-expired ... 期限切れ */
.ingredient-card.is-near {
  border-color: var(--c-warn-edge);
}
.ingredient-card.is-expired {
  border-color: var(--c-expired-edge);
}

.ingredient-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.ingredient-name {
  flex: 1 1 120px;
  font-size: 1.25rem;
  color: var(--c-text);
}

/* 「残り：○日」「期限切れ」の文字つきラベル */
.expiry-warning {
  margin: 0;
  padding: 2px 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-warn-bg);
  border: 2px solid var(--c-warn-edge);
  border-radius: var(--radius-pill);
}
.is-expired .expiry-warning {
  background: var(--c-expired-bg);
  border-color: var(--c-expired-edge);
}

.ingredient-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}
.ingredient-info-row {
  display: flex;
  align-items: baseline;   /* 文字の下線（ベースライン）をそろえて、まっすぐ見せる */
  gap: 8px;
  font-size: 1rem;
  line-height: 1.6;
}
.ingredient-info dt {
  margin: 0;
  font-size: 0.9375rem;
  line-height: inherit;
  color: var(--c-text-sub);
}
.ingredient-info dd {
  margin: 0;
  line-height: inherit;
  font-weight: 700;
}

.ingredient-memo {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.9688rem;
  background: var(--c-paper);
  border: 2px dashed var(--c-line);
  border-radius: var(--radius-s);
  white-space: pre-wrap;
}

.ingredient-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ingredient-actions .button {
  flex: 1 1 0;
  min-width: 88px;
  padding-left: 0.8em;
  padding-right: 0.8em;
}

/* 残量ボタン（ボトル＋「残：3割」） */
.remaining-button {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  min-height: var(--tap-size);
  padding: 4px 18px 4px 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-paper);
  border: 3px solid var(--c-btn-secondary-edge);
  border-radius: var(--radius-pill);
  cursor: pointer;
}


/* =========================================================
   8. ボトル（残量表示）
   ---------------------------------------------------------
   使い方：.bottle に data-level="full|70|50|30|empty" を付けると
   中身（.bottle-fill）の高さが変わります。
   （JavaScriptから style.setProperty("--fill", "70%") でもOK）
   ※ 後から画像に差し替える場合は、.bottle の枠を消して
     背景画像を設定してください。
   ========================================================= */
.bottle {
  --fill: 100%;
  position: relative;
  display: block;
  flex: none;
  width: 64px;
  height: 104px;
  margin: 8px auto 12px;
  background: color-mix(in srgb, var(--c-card) 70%, transparent);
  border: 4px solid var(--c-btn-secondary-edge);
  border-radius: 14px 14px 22px 22px;
  overflow: hidden;
}
/* ボトルの口 */
.bottle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 26px;
  height: 14px;
  transform: translateX(-50%);
  background: var(--c-btn-secondary-edge);
  border-radius: 0 0 8px 8px;
}
.bottle-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill);
  background: #e8a95b;            /* 中身の色（調味料っぽい飴色） */
  transition: height 0.3s ease;
}
.bottle[data-level="full"]  { --fill: 92%; }
.bottle[data-level="70"]    { --fill: 70%; }
.bottle[data-level="50"]    { --fill: 50%; }
.bottle[data-level="30"]    { --fill: 30%; }
.bottle[data-level="empty"] { --fill: 6%;  }

/* 一覧用の小さいボトル */
.bottle-small {
  width: 28px;
  height: 46px;
  margin: 0;
  border-width: 3px;
  border-radius: 8px 8px 12px 12px;
}
.bottle-small::before {
  width: 12px;
  height: 7px;
}


/* =========================================================
   9. レシピ
   ========================================================= */
.recipe-results {
  margin-top: 28px;
}

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recipe-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.recipe-card.is-made {
  border-color: var(--c-btn-secondary-edge);
}
.recipe-card-title {
  font-size: 1.1875rem;
}
.recipe-card-meta,
.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.recipe-card-category,
.recipe-card-time,
.recipe-category,
.recipe-time {
  padding: 0 14px;
  font-size: 0.9062rem;
  font-weight: 700;
  line-height: 1.9;
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-pill);
}
.recipe-card-category,
.recipe-category {
  background: var(--c-btn-sakura);
  border-color: var(--c-btn-sakura-edge);
  color: var(--c-btn-text);
}

/* 「作った！済み」：色だけでなく文字でも示す */
.recipe-card-made,
.recipe-made-status {
  margin: 0;
  font-weight: 700;
}
.recipe-card-made {
  align-self: flex-start;
  padding: 0 14px;
  line-height: 1.9;
  color: var(--c-btn-text);
  background: var(--c-btn-secondary);
  border: 2px solid var(--c-btn-secondary-edge);
  border-radius: var(--radius-pill);
}

.recipe-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recipe-card-actions .button {
  flex: 1 1 140px;
}

/* レシピ詳細 */
.recipe-detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.recipe-ingredients {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 6px 16px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-m);
}
.recipe-ingredients li {
  padding: 8px 0;
  border-bottom: 2px dotted var(--c-line);
}
.recipe-ingredients li:last-child {
  border-bottom: 0;
}

/* 作り方：番号つきの丸いマーク */
.recipe-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recipe-steps li {
  counter-increment: step;
  position: relative;
  min-height: 44px;
  padding: 10px 14px 10px 62px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-m);
}
.recipe-steps li::before {
  content: counter(step);
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-weight: 700;
  color: var(--c-btn-text);
  background: var(--c-btn-primary);
  border: 3px solid var(--c-btn-primary-edge);
  border-radius: 50%;
}

.recipe-record {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--c-btn-secondary) 30%, var(--c-paper));
  border: 3px dashed var(--c-btn-secondary-edge);
  border-radius: var(--radius-l);
}
.recipe-record .section-title {
  margin-bottom: 0;
}

/* 5段階評価：1$301C5の丸いボタン。選んだものが濃く目立つ */
.rating {
  display: flex;
  gap: 10px;
}
.rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rating label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: 50%;
  cursor: pointer;
}
.rating input:checked + label {
  background: var(--c-btn-primary);
  border-color: var(--c-btn-primary-edge);
  box-shadow: 0 3px 0 var(--c-btn-primary-edge);
}
.rating input:focus-visible + label {
  outline: 4px solid var(--c-focus);
  outline-offset: 3px;
}


/* =========================================================
   10. 買い物メモ・設定・使い方・このアプリについて
   ========================================================= */
.shopping-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.shopping-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 14px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-pill);
}
.shopping-text {
  flex: 1;
  font-weight: 700;
}
/* 購入済み：グレー表示（JavaScriptが is-done を付ける）。文字の線でも分かるようにする */
.shopping-item.is-done {
  background: #e8e4df;
  border-color: #c9c2ba;
}
.shopping-item.is-done .shopping-text {
  color: #6f6861;
  text-decoration: line-through;
}
:root[data-theme="dark"] .shopping-item.is-done {
  background: #3a3531;
  border-color: #5a524b;
}
:root[data-theme="dark"] .shopping-item.is-done .shopping-text {
  color: #b5aca3;
}

.reset-section {
  margin-top: 36px;
  padding: 16px;
  background: color-mix(in srgb, var(--c-btn-danger) 25%, var(--c-paper));
  border: 3px dashed var(--c-btn-danger-edge);
  border-radius: var(--radius-l);
}

/* 使い方 */
.howto-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  padding-left: 1.6em;
}
.howto-steps li {
  padding-left: 4px;
}

.qa-item {
  margin-bottom: 12px;
  background: var(--c-card);
  border: 3px solid var(--c-line);
  border-radius: var(--radius-m);
}
.qa-item summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.qa-item summary::-webkit-details-marker {
  display: none;
}
/* 開閉を示す＋／$2212マーク（CSSで描画） */
.qa-item summary::after {
  content: "+";
  margin-left: auto;
  padding-left: 12px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-title);
}
.qa-item[open] summary::after {
  content: "\2212";
}
.qa-item p {
  margin: 0;
  padding: 0 16px 14px;
}

/* このアプリについて */
.about-logo {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 8px;
  object-fit: contain;
}
.about-catch {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-title);
}


/* =========================================================
   11. ダイアログ（モーダル）
   ========================================================= */
/* ※ dialog は open のときだけ表示されるので、display は指定しない */
.modal {
  width: min(480px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  color: var(--c-text);
  background: var(--c-paper);
  border: 4px solid var(--c-btn-primary-edge);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.modal::backdrop {
  background: var(--c-overlay);
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px 20px;
}
.modal-title {
  text-align: center;
  font-size: 1.5rem;
  color: var(--c-title);
}
.modal-text {
  margin: 0;
  text-align: center;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.modal-actions .button {
  flex: 1 1 140px;
}

/* モーダル上部の飾り（画像に差し替え可能。12章を参照） */
.modal-decoration {
  align-self: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--c-header);
  border: 4px solid var(--c-btn-primary-edge);
}
.modal-decoration:empty {
  /* 画像を入れるまでは、小さめの丸だけ表示 */
  width: 56px;
  height: 56px;
}


/* =========================================================
   12. 装飾画像の差し替え場所（絵文字は使わない）
   ---------------------------------------------------------
   .decorative-item は「飾りだけ」の要素です。
   下の background-image のコメントを外して画像を指定すると、
   CSSの丸い飾りの代わりに画像が表示されます。
   画像は images フォルダを作って入れる想定です（PNG / SVG）。
   画像がなくても、文字だけで内容が伝わる作りです。
   ========================================================= */
.decorative-item {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ★★★【変更】ここから ★★★ メイン画面のボタンの「丸」に画像を入れられるようにしました。
   ----------------------------------------------------------
   使い方：
   1) index.html と同じ場所に images フォルダを作る
   2) 次の4つの名前で画像（PNG）を入れる
        images/icon-register.png  ... 食材を登録
        images/icon-list.png      ... 食材一覧
        images/icon-recipe.png    ... レシピを探す
        images/icon-shopping.png  ... 買い物メモ
   3) ブラウザで Ctrl+F5
   ・画像がまだ無いボタンは、今までどおり白い丸だけが表示されます。
   ・背景が透明のPNGがおすすめです。
   ・正方形の画像だときれいに収まります。 */
.home-menu-icon {
  width: 72px;                              /* 【変更】丸を少し大きく（64px → 72px） */
  height: 72px;
  background-color: rgba(255, 255, 255, 0.7);
  background-size: 100%;                     /* 【変更】画像を丸の76%の大きさで中央に表示（ふちに当たらない） */
  border: 3px solid rgba(74, 52, 38, 0.25);
  border-radius: 50%;
}

/* 【変更】コメントを外して、画像を指定しました */
.icon-register { background-image: url("images/icon-register.png"); }
.icon-list     { background-image: url("images/icon-list.png"); }
.icon-recipe   { background-image: url("images/icon-recipe.png"); }
.icon-shopping { background-image: url("images/icon-shopping.png"); }

/* 【参考】丸を無くして、画像だけを大きく見せたい場合は、
   上の .home-menu-icon を次のように書きかえてください。
.home-menu-icon {
  width: 80px;
  height: 80px;
  background-color: transparent;
  background-size: contain;
  border: 0;
  border-radius: 0;
}
*/
/* ★★★【変更】ここまで ★★★ */

/* 虫眼鏡（CSSで描画。画像にしたいときは background-image を指定） */
.search-icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 3px solid var(--c-text);
  border-radius: 50%;
}
.search-icon::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: -7px;
  width: 9px;
  height: 3px;
  background: var(--c-text);
  border-radius: 3px;
  transform: rotate(45deg);
}
/* 画像に差し替えるとき：
   .search-icon { background-image: url("images/search.png"); border: 0; }
   .search-icon::after { display: none; } */

/* バッジの画像（いまはCSSの丸。画像にしたいときは差し替え） */
.badge-image {
  width: 76px;
  height: 76px;
  background-color: var(--c-header);
  border: 4px solid var(--c-btn-primary-edge);
  border-radius: 50%;
  box-shadow: var(--shadow);
}
/* .badge-image { background-image: url("images/badge.png"); } */

/* モーダルの飾り */
/* .modal-decoration { background-image: url("images/modal-deco.png"); } */


/* =========================================================
   13. PC表示（スマホ表示を土台に、広い画面で整える）
   ========================================================= */
@media (min-width: 768px) {
  body {
    font-size: 1.125rem;
  }
  .app-main {
    max-width: 920px;
    padding-top: 36px;
  }
  .screen {
    padding: 28px 32px 36px;
  }
  .home-menu-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .filter-area {
    grid-template-columns: 1fr 1fr;
  }
  .ingredient-list,
  .recipe-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
  .screen-header .screen-title {
    flex: 1;
    order: 1;
  }
  .screen-header .button-back {
    order: 0;
  }
  .screen-header .button-icon {
    order: 2;
  }
  .button-large {
    width: auto;
    min-width: 280px;
  }
  .form-actions {
    display: flex;
    justify-content: center;
  }
  .modal-body {
    padding: 28px 28px 24px;
  }
}


/* =========================================================
   14. その他
   ========================================================= */
/* 端末の「動きを減らす」設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* 印刷時は背景を消す */
@media print {
  body {
    background: #fff;
  }
  .app-header,
  .message-area {
    position: static;
  }
}