/* sirocraft / Recipot サイト共通のトークンと部品。
   値はアプリ(app/lib/theme)と同じ名前・同じ数値にそろえる。
   アプリにない値は「LPだけ」と書いて足し、ここ以外に数値を書かない。 */

@font-face {
  font-family: "GenJyuuGothic";
  src: url("/assets/fonts/GenJyuuGothic-Medium.subset.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "GenJyuuGothic";
  src: url("/assets/fonts/GenJyuuGothic-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- 色(RCColors) ---- */
  --c-accent: #85705F;
  --c-heart: #D9705F;
  --c-text-main: #4B4A46;
  --c-text-sub: #96897A;
  --c-text-faint: #C0B4A6;
  --c-border: #E5E5E1;
  --c-danger: #E2543A;
  --c-danger-bg: #FCEEEA;
  --c-background: #F7F5F1;
  --c-surface: #FFFFFF;
  --c-on-fill: #FFFFFF;
  --c-shadow: rgba(0, 0, 0, .05);
  --c-scrim: rgba(0, 0, 0, .2);
  --c-image-badge: rgba(255, 255, 255, .85);
  /* タグの色(folderPalette) */
  --c-tag-0: #85705F; --c-tag-1: #B5654A; --c-tag-2: #C98A3A; --c-tag-3: #6F8F6A;
  --c-tag-4: #5F8A87; --c-tag-5: #5F7A8C; --c-tag-6: #8A6A8F; --c-tag-7: #B0787E;
  /* LPだけ: 説明文の補足色。textSub は背景の上で 3.1 しかないため、4.5 以上(4.9)にした色 */
  --c-lp-text-sub: #75695C;
  /* LPだけ: ヒーローの面。アプリの tint(14%)をアクセントに当てたもの */
  --c-lp-accent-tint: color-mix(in srgb, var(--c-accent) 14%, var(--c-background));

  /* ---- 文字(RCFont / RCWeight) ---- */
  --fs-micro: 11px;
  --fs-small: 12px;
  --fs-body: 14px;
  --fs-title: 16px;
  --fs-heading: 20px;
  /* LPだけ: 節の見出しとヒーローの見出し */
  --fs-lp-section: 24px;
  --fs-lp-hero: 32px;
  --lh-body: 1.5;
  --lh-small: 1.8;
  --fw-medium: 500;
  --fw-bold: 700;
  --ls-wide: .16em; /* 英字の小ラベルだけ */

  /* ---- 余白(RCSpace) ---- */
  --sp-page: 24px;
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px;
  --sp-xxl: 32px; --sp-xxxl: 40px; --sp-huge: 48px; --sp-empty: 64px; --sp-fab: 96px;

  /* ---- 角丸(RCRadius) ---- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  /* LPだけ: 端末の枠。アプリには端末そのものの角がないため */
  --r-lp-device: 48px;

  /* ---- 大きさ(RCSize / RCIconSize / RCControl / RCImageSize) ---- */
  --size-tiny: 24px; --size-small: 32px; --size-medium: 40px; --size-large: 48px;
  --size-xlarge: 56px; --size-huge: 64px; --size-dot: 12px;
  --icon-small: 16px; --icon-medium: 20px; --icon-large: 24px; --icon-xlarge: 32px;
  --control: 44px;
  --img-row-thumb: 80px; --img-edit-slot: 128px;

  /* ---- 線(RCLine / RCStroke) ---- */
  --line: 1px; --stroke: 2px;

  /* ---- 影(RCShadow)。LPだけ: 端末の影を1つ足す ---- */
  --shadow-card: 0 1px 4px var(--c-shadow);
  --shadow-lp-device: 0 24px 48px rgba(75, 74, 70, .16);

  /* ---- 動き ---- */
  --t-fast: .15s; --t-slow: .3s; --t-dialog: .4s;
  /* アプリと同じ: 登録完了のチェックが弾む動き(1200ms)、文字が浮き上がる動き(900ms)、読み込み中の回転 */
  --t-pop: 1.2s; --t-rise: .9s; --t-spin: 1s;
  --ease-pop: cubic-bezier(.3, 1.6, .5, 1);

  --font: "GenJyuuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  /* LPだけ: 端末の枠の幅 */
  --lp-device-hero: 240px; --lp-device-hero-wide: 260px; --lp-device-demo: 320px; --lp-device-video: 280px;
  /* LPだけ: 本文の最大幅 */
  --lp-max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-text-main);
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  text-align: left;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ページの幅。左右はアプリと同じページ余白 24 */
.wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--sp-page); }

/* ---- アイコン(RCIcon)。SVGの形を mask で使い、色は currentColor で塗る ---- */
.rc-icon {
  display: inline-block; flex: none;
  width: var(--icon-large); height: var(--icon-large);
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.rc-icon.s { width: var(--icon-small); height: var(--icon-small); }
.rc-icon.m { width: var(--icon-medium); height: var(--icon-medium); }
.rc-icon.l { width: var(--icon-large); height: var(--icon-large); }
.rc-icon.xl { width: var(--icon-xlarge); height: var(--icon-xlarge); }
.i-alert { --i: url("/recipot/assets/icons/alert.svg"); }
.i-camera { --i: url("/recipot/assets/icons/camera.svg"); }
.i-check { --i: url("/recipot/assets/icons/check.svg"); }
.i-chevron-left { --i: url("/recipot/assets/icons/chevron_left.svg"); }
.i-chevron-right { --i: url("/recipot/assets/icons/chevron_right.svg"); }
.i-clock { --i: url("/recipot/assets/icons/clock.svg"); }
.i-close { --i: url("/recipot/assets/icons/close.svg"); }
.i-drag-handle { --i: url("/recipot/assets/icons/drag_handle.svg"); }
.i-edit { --i: url("/recipot/assets/icons/edit.svg"); }
.i-heart { --i: url("/recipot/assets/icons/heart.svg"); }
.i-heart-filled { --i: url("/recipot/assets/icons/heart_filled.svg"); }
.i-image { --i: url("/recipot/assets/icons/image.svg"); }
.i-link { --i: url("/recipot/assets/icons/link.svg"); }
.i-logo-pot { --i: url("/recipot/assets/icons/logo_pot.svg"); }
.i-manual-input { --i: url("/recipot/assets/icons/manual_input.svg"); }
.i-more { --i: url("/recipot/assets/icons/more.svg"); }
.i-paste { --i: url("/recipot/assets/icons/paste.svg"); }
.i-photo { --i: url("/recipot/assets/icons/photo.svg"); }
.i-play { --i: url("/recipot/assets/icons/play.svg"); } /* LPだけ: 機能紹介の再生の印 */
.i-plus { --i: url("/recipot/assets/icons/plus.svg"); }
.i-remove-filled { --i: url("/recipot/assets/icons/remove_filled.svg"); }
.i-search { --i: url("/recipot/assets/icons/search.svg"); }
.i-settings { --i: url("/recipot/assets/icons/settings.svg"); }
.i-sort { --i: url("/recipot/assets/icons/sort.svg"); }
.i-tag { --i: url("/recipot/assets/icons/tag.svg"); }
.i-trash { --i: url("/recipot/assets/icons/trash.svg"); }
.i-view-grid { --i: url("/recipot/assets/icons/view_grid.svg"); }
.i-view-list { --i: url("/recipot/assets/icons/view_list.svg"); }

/* ---- アプリアイコン(ストアと同じ画像) ---- */
.app-icon { border-radius: 22.37%; box-shadow: var(--shadow-card); }

/* ---- カード(RCCard) ---- */
.rc-card { background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--sp-lg); }

/* ---- 小ラベル(LPの英字見出し) ---- */
.eyebrow { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); color: var(--c-accent); margin: 0 0 var(--sp-sm); }

/* ---- ストアの入口(公開前は押せない「近日公開」) ---- */
.store-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.store-badge {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: var(--size-xlarge); padding: 0 var(--sp-xl);
  border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--shadow-card);
  font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-body); color: var(--c-text-main);
}
.store-badge small { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-accent); }

/* ---- フッター ---- */
.site-footer { border-top: var(--line) solid var(--c-border); padding: var(--sp-xxl) 0 var(--sp-xxxl); font-size: var(--fs-small); color: var(--c-lp-text-sub); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-xl); align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-lg); }
/* 文中リンクは見た目を変えずに上下のタップ範囲だけ広げる */
.site-footer a { display: inline-block; padding: var(--sp-md) 0; margin: calc(-1 * var(--sp-md)) 0; color: var(--c-lp-text-sub); }
.site-footer p { margin: 0; }
/* お問い合わせ先はリンクにせず、文字だけで載せる(選んでコピーできる) */
.site-footer .contact { display: inline-block; padding: var(--sp-md) 0; margin: calc(-1 * var(--sp-md)) 0; -webkit-user-select: text; user-select: text; }

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