/* 色（役割ごと）。coolors「Autumn Harvest」をもとにした小麦色と茶色 */
:root {
  --bg: #fbf7f1;        /* 地 */
  --surface: #ecd8bc;   /* 色の面（小麦色のパネル） */
  --ink: #3b2a1e;       /* 本文 */
  --ink-head: #5a3d28;  /* 見出し */
  --ink-sub: #6b5545;   /* 補助の文字 */
  --line: #b08968;      /* 線 */
  --accent: #8f5a3a;    /* リンク・ボタン */
  --dark: #4a3324;      /* 暗い面（フッター） */
  --on-dark: #fbf7f1;
  --on-dark-accent: #e6c79a;
  --ph: #d6d0c7;        /* 仮画像 */
  --ph-2: #c9c2b8;
  --ph-3: #bdb6ab;
  --ph-ink: #4f4a43;

  --gut: clamp(40px, 5.556vw, 80px);
  --nav-h: 80px;
  --r-l: 40px;
  --r-m: 20px;
  --ff-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-en: "Roboto Condensed", "Zen Kaku Gothic New", sans-serif;
  --ease: cubic-bezier(.39, .575, .565, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-gothic);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .06em;
  overflow-x: clip;
  line-break: strict;
  overflow-wrap: anywhere;
}
h1, h2, p, ul, dl, dd, dt { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: currentColor; }
.defs { position: absolute; }
.nb { display: inline-block; }
.u-sp { display: none; }

/* 小さな見出し（英字＋和文） */
.label { display: flex; align-items: center; gap: 10px; color: var(--ink-head); }
.label__en { font-family: var(--ff-en); font-size: 20px; line-height: 28px; letter-spacing: .02em; }
.label__ja { font-size: 12px; font-weight: 500; line-height: 17px; color: var(--ink); }

/* 矢印つきのリンク（ホバーで矢印が伸びる） */
.linkrow { display: flex; justify-content: flex-start; align-items: center; height: 80px; }
.linelink { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; line-height: 25px; color: var(--ink-head); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.linelink__line { position: relative; display: block; width: 26px; height: 1px; background: var(--accent); transition: width .4s var(--ease); }
.linelink__line::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); }
.linelink:hover .linelink__line { width: 44px; }

/* ボタン */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 10px 28px;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--bg); color: var(--accent);
  font-weight: 500; line-height: 1.4;
  transition: background .3s, color .3s;
}
.btn small { display: block; font-size: 13px; font-weight: 400; letter-spacing: .08em; }
.btn--main { background: var(--accent); color: var(--on-dark); }
.btn:hover { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }

/* 仮画像（あとで写真に差し替える） */
.ph {
  position: relative;
  display: flex; align-items: flex-end; justify-content: flex-end;
  overflow: hidden;
  background: var(--ph);
  color: var(--ph-ink);
}
.ph--b { background: var(--ph-2); }
.ph--c { background: var(--ph-3); }
.ph--fill { width: 100%; height: 100%; }
.ph--img { background-size: cover; background-position: center; }
.ph--shelf { background-image: url(../assets/img/shelf.jpg); }
.ph--baking { background-image: url(../assets/img/baking.jpg); }
.ph--exterior { background-image: url(../assets/img/exterior.jpg); }
.ph--shiopan { background-image: url(../assets/img/shiopan.jpg); }
.ph--croissant { background-image: url(../assets/img/croissant.jpg); }
.ph--shokupan { background-image: url(../assets/img/shokupan.jpg); }
.ph__label {
  margin: 0 14px 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-size: 12px; line-height: 1.6; letter-spacing: .04em;
  white-space: nowrap;
}

/* スクロールで出す */
/* 文は下から少し上がって出る。写真は左から幕が開くように出る */
.fade { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease) .1s, transform 1s cubic-bezier(.2, .7, .2, 1) .1s; }
.fadeup { clip-path: inset(0 100% 0 0 round var(--r-m)); transition: clip-path 1.2s cubic-bezier(.65, 0, .2, 1) .15s; }
.fade.is-on { opacity: 1; transform: none; }
.fadeup.is-on { clip-path: inset(0 round var(--r-m)); }
.is-capture .fade { opacity: 1; transform: none; transition: none; }
.is-capture .fadeup { clip-path: none; transition: none; }

@media (max-width: 899px) {
  :root { --gut: 15px; --nav-h: 75px; }
  .u-sp { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
  .fadeup { clip-path: none; transition: none; }
}