/* 見た目の決まり（2026-10-11 案4＝ミチクサ醸造所寄せ）
   判定の1行：初めて見た人が「ちゃんとしてて、話しやすそう」と思える
   ・キチンと感とセンス＝整え方（文字・余白の段階／色を絞る／配置をそろえる）
   ・親しみ＝声と人（語り口／人の写った写真／見出しの柔らかい明朝）
   値は :root だけ差し替えればページ全体に効く。build.py が HTML に埋め込む */
:root {
  /* 色：白・ごく薄いグレー・グレージュの3段＋アクセント1色（鉄紺は仮置き） */
  --paper: #FFFFFF;
  --white: #FFFFFF;
  --card: #EEEDEB;
  --wash: #E0DCD3;
  --ink: #222222;
  --sub: #6A6762;
  --line: #E2E0DC;
  --accent: #24506A;
  --on-accent: #FFFFFF;
  --tentative: #9A6B2F;
  --tentative-bg: #F3EADC;
  /* 書体：見出しは明朝、本文はゴシック */
  --display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --display-weight: 500;
  /* 配置 */
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1160px;
  /* 段階の間に置く配置の値は、名前をつけてここに集める（段階の外の値を本文に直書きしない） */
  --section-y: clamp(80px, 11vw, 152px);  /* セクションの上下 */
  --work-y: clamp(var(--sp-8), 8vw, 104px);    /* 作例1本の上下 */
  --work-band-gap: clamp(var(--sp-6), 4vw, 56px);  /* 帯の行の前後の間 */
  /* 文字サイズの段階 */
  --fs-xs: 11px;       /* ラベル・タグ・注記・見出しの英字 */
  --fs-sm: 12px;       /* 補足・ナビ・表の見出し */
  --fs-md: 13px;       /* 説明文 */
  --fs-base: 14px;     /* 本文 */
  --fs-lg: 18px;       /* 小見出し・作例のタイトル */
  --fs-xl: 24px;       /* 名前 */
  --fs-section: clamp(20px, 2vw, 24px);    /* セクションの見出し */
  --fs-heading: clamp(22px, 2.6vw, 30px);  /* 大きな見出し（トップの宣言・進め方の1・問い合わせ） */
  --fs-num: 30px;      /* 数字 */
  --fs-display: 48px;  /* 特大の数字 */
  /* 余白の段階（4 の倍数を基本に） */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--fs-base); line-height: 2.1; letter-spacing: .08em; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.proto-bar { background: var(--tentative-bg); color: var(--tentative); font-size: var(--fs-xs); line-height: 1.5; padding: var(--sp-1) var(--gutter); }
.tbd { display: inline-block; font-family: var(--body); font-weight: 400; font-size: var(--fs-xs); line-height: 1.5; padding: var(--sp-0) var(--sp-2); border-radius: 3px; background: var(--tentative-bg); color: var(--tentative); letter-spacing: .04em; vertical-align: 2px; margin-left: var(--sp-2); white-space: nowrap; writing-mode: horizontal-tb; }

/* ヘッダー：薄く1行 */
header.site { background: var(--paper); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-3); }
.brand { display: flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; flex-wrap: wrap; }
.brand .en { font-family: var(--body); font-weight: 700; font-size: var(--fs-md); letter-spacing: .24em; }
.brand .ja { font-size: var(--fs-xs); color: var(--sub); letter-spacing: .1em; }
nav.main { display: flex; flex-wrap: wrap; gap: var(--sp-0) var(--sp-5); font-size: var(--fs-sm); letter-spacing: .08em; }
nav.main a { text-decoration: none; color: var(--sub); }
nav.main a:hover { color: var(--ink); }

/* トップ：映像は左に寄せ、右の余白に縦書きの宣言（映像に文字を重ねない） */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 16vw, 210px); align-items: stretch; }
.hero .film { position: relative; min-width: 0; }
.hero .film img, .hero .film video { display: block; width: 100%; height: 100%; min-height: clamp(260px, 42vw, 560px); object-fit: cover; max-width: 100%; }
.hero .copy { display: flex; justify-content: center; padding-top: clamp(var(--sp-5), 4vw, var(--sp-8)); }
.hero h1 { writing-mode: vertical-rl; font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-heading); line-height: 2; letter-spacing: .2em; margin: 0; white-space: nowrap; }
.lead-text { padding-block: clamp(var(--sp-6), 4vw, var(--sp-7)) 0; }
.lead-text p { margin: 0 0 0 auto; max-width: 30em; color: var(--sub); font-size: var(--fs-md); }

/* セクション：小さな和文の見出し＋さらに小さな英字を中央に */
section.block { padding-block: var(--section-y); }
.sec-head { margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-8)); text-align: center; }
.sec-head h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-section); letter-spacing: .2em; margin: 0; text-wrap: balance; }
.sec-head p { margin: var(--sp-5) auto 0; color: var(--sub); font-size: var(--fs-md); max-width: 36em; }
.sec-head .sec-en { margin-top: var(--sp-1); font-size: var(--fs-xs); letter-spacing: .24em; }

/* 作例：写真を片側の端まで寄せ、文字は反対側。左右を交互に、偶数は途中から始まる帯の上
   （10/11 写真を約55%→48%に・作例どうしの間を広げた＝詰まって野暮ったく見えたため） */
#works .wrap { max-width: none; padding-inline: 0; }
#works .sec-head { padding-inline: var(--gutter); }
.work { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); gap: var(--sp-3) clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: center; padding-block: var(--work-y); }
.work > :not(.thumb) { grid-column: 2; padding-right: var(--gutter); max-width: 34em; }
.work:nth-child(even) { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); margin-block: var(--work-band-gap); background: linear-gradient(to right, transparent 0 var(--band-start), var(--wash) var(--band-start) 100%); --band-start: max(0px, min(30%, calc(52% - 38em))); }  /* 帯の始まりは文字の左端より外へ（10/14 幅を縮めると文字が帯からはみ出した） */
.work:nth-child(even) > .thumb { grid-column: 2; }
.work:nth-child(even) > :not(.thumb) { grid-column: 1; padding-right: 0; padding-left: var(--gutter); justify-self: end; }
.work .thumb { grid-column: 1; grid-row: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); max-width: 100%; }
.work .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--hz, 1)); transition: transform .5s ease; }
.work .thumb:hover img { --hz: 1.03; }
.work .thumb .play { position: absolute; right: var(--sp-3); bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--white); background: rgba(38,40,42,.6); padding: var(--sp-1) var(--sp-3); border-radius: 999px; }
/* 作例の動画の窓（10/23）＝背景を暗くして真ん中に 16:9。閉じるは窓の右下 */
.player { padding: 0; border: 0; background: transparent; width: min(960px, 92vw); max-width: none; overflow: visible; }
.player::backdrop { background: rgba(20,20,20,.82); }
.player .frame { aspect-ratio: 16 / 9; background: #000; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player .poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.player .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player .poster .btn { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; } /* YouTube 風の再生ボタン（10/23 菊野さん）＝赤い角丸＋白い三角 */
.player .poster .btn rect { fill: #212121; fill-opacity: .8; transition: fill .2s, fill-opacity .2s; }
.player .poster .btn path { fill: #fff; }
.player .poster:hover .btn rect, .player .poster:focus-visible .btn rect { fill: #f00; fill-opacity: 1; }
.player .bar { display: flex; justify-content: flex-end; gap: var(--sp-6); margin-top: var(--sp-3); padding-inline: var(--sp-3); }
.player .yt, .player .close { background: none; border: 0; color: var(--white); font: inherit; font-size: var(--fs-sm); letter-spacing: .1em; cursor: pointer; padding: var(--sp-2) 0; text-decoration: none; }
.work .kind { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--sub); margin: 0; }
.work .kind::before { content: "── "; }
.work h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-lg); line-height: 1.65; margin: 0; text-wrap: balance; }
.work .roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.work .roles li { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: var(--sp-0) var(--sp-3); }
.work .story { margin: 0; font-size: var(--fs-md); }
/* 文字の4行は写真の高さの真ん中に寄せる（上下の 1fr が余りを受ける・10/14 行の間が写真の高さに引き伸ばされていた） */
.work { grid-template-rows: 1fr repeat(4, auto) 1fr; }
.work .kind { grid-row: 2; } .work h3 { grid-row: 3; } .work .roles { grid-row: 4; } .work .story { grid-row: 5; }
/* 料金の参考例の内訳（10/14）＝料金ページのカードの中。作例ページには金額を置かない（作例はあくまで作例） */

/* 進め方：薄いグレーの地に、1つ目だけ白い面 */
#process { background: var(--card); }
.steps { display: grid; gap: clamp(var(--sp-5), 4vw, var(--sp-7)); max-width: 860px; margin-inline: auto; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-1) var(--sp-5); }
.step .num { font-family: var(--display); font-size: var(--fs-num); color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.step h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 700; }
.step p { margin: 0; max-width: 40em; }
.step.main { background: var(--paper); padding: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.step.main h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-heading); letter-spacing: .08em; margin-bottom: var(--sp-3); }
.step.main .num { font-size: var(--fs-display); }
.step ul { margin: var(--sp-4) 0 0; padding-left: 1.2em; color: var(--sub); font-size: var(--fs-md); }
.step:not(.main) { padding-left: clamp(0px, 3vw, var(--sp-7)); }

/* 料金 */
.price { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--sp-5), 4vw, var(--sp-7)); align-items: end; max-width: 880px; margin-inline: auto; }
.price .floor { background: var(--card); padding: var(--sp-5) var(--sp-6); }
.price .floor p { margin: 0; font-size: var(--fs-md); }
.price .floor .sub { font-size: var(--fs-sm); color: var(--sub); margin-top: var(--sp-1); }
.price .floor .big { font-family: var(--display); font-size: var(--fs-num); font-weight: var(--display-weight); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-top: var(--sp-1); }
.price .note { grid-column: 1 / -1; color: var(--sub); font-size: var(--fs-sm); margin: 0; }

/* プロフィール：左3割だけ濃いグレージュにして面をずらす */
#profile { background: linear-gradient(to right, var(--wash) 0 20%, var(--card) 20% 100%); } /* 帯の上は写真の左端だけ＝はっきりはみ出させる（半分ずつだと「ずれた」に見えた・10/23 菊野さん A） */
.profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: start; }
.profile figure { margin: 0; }
.profile .clip { display: block; overflow: hidden; }
.profile img { width: 100%; display: block; max-width: 100%; }
.profile .name { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-xl); letter-spacing: .16em; margin: 0 0 var(--sp-0); }
.profile .role { color: var(--sub); font-size: var(--fs-sm); letter-spacing: .14em; margin: 0 0 var(--sp-5); }
.profile p { margin: 0 0 var(--sp-4); font-size: var(--fs-md); }
.profile a { color: inherit; text-underline-offset: 3px; }
.profile .facts { margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-2); font-size: var(--fs-md); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.profile .facts > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: var(--sp-3); }
.profile .facts dt { font-size: var(--fs-sm); color: var(--sub); }
.profile .facts dd { margin: 0; }


/* 問い合わせ：グレージュの地に、大きめの角の丸い鉄紺のボタン（白地だと沈んで見えたため） */
.contact { background: var(--wash); }
.contact .wrap { padding-block: clamp(var(--sp-8), 8vw, var(--sp-9)); display: grid; gap: var(--sp-3); justify-items: center; text-align: center; }
.contact h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-heading); letter-spacing: .12em; margin: 0; }
.contact p { margin: 0; color: var(--sub); max-width: 40em; }
.contact .contact-btn { margin-top: var(--sp-3); display: inline-block; background: var(--accent); color: var(--on-accent); text-decoration: none; letter-spacing: .14em; font-size: var(--fs-base); padding: var(--sp-5) var(--sp-8); border-radius: 999px; box-shadow: 0 6px 18px rgba(36,80,106,.22); /* 影の色は --accent の鉄紺 */ transition: opacity .2s; }
.contact .contact-btn::after { content: " ↗"; }
.contact .contact-btn:hover { opacity: .85; }
.contact .contact-note { font-size: var(--fs-sm); }

footer.site { padding-block: var(--sp-6); font-size: var(--fs-sm); color: var(--sub); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-5); }

.side-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 10; background: var(--accent); color: var(--on-accent); border-right: 0; text-decoration: none; writing-mode: vertical-rl; letter-spacing: .3em; font-size: var(--fs-md); padding: var(--sp-5) var(--sp-3); border-radius: 8px 0 0 8px; }
.side-tab:hover { opacity: .85; }


@media (max-width: 760px) {
  .player { width: 100vw; } /* スマホは窓を画面の幅いっぱいに */
  .work { grid-template-rows: none; }
  .work .kind, .work h3, .work .roles, .work .story { grid-row: auto; }
  .hero { grid-template-columns: minmax(0, 1fr) 76px; }
  .hero h1 { font-size: var(--fs-lg); letter-spacing: .14em; }
  .lead-text p { margin: 0; }
  .work, .work:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-6); }
  .work:nth-child(even) { background: linear-gradient(to bottom, transparent 0 18%, var(--wash) 18% 100%); }
  .work .thumb, .work:nth-child(even) > .thumb { grid-column: 1; grid-row: auto; margin-bottom: var(--sp-2); }
  .work > :not(.thumb), .work:nth-child(even) > :not(.thumb) { grid-column: 1; padding-inline: var(--gutter); justify-self: stretch; }
  .work:nth-child(even) > :last-child { padding-bottom: var(--sp-2); }
  .step, .step:not(.main) { grid-template-columns: 40px minmax(0, 1fr); padding-left: 0; gap: var(--sp-1) var(--sp-3); }
  .step.main { padding: var(--sp-5) var(--sp-4); }
  .step .num, .step.main .num { font-size: var(--fs-num); }
  .price { grid-template-columns: minmax(0, 1fr); }
  #profile { background: var(--card); }
  .profile { grid-template-columns: minmax(0, 1fr); }
  .contact .contact-btn { padding: var(--sp-4) var(--sp-6); }
  .side-tab { top: auto; transform: none; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; writing-mode: horizontal-tb; letter-spacing: .1em; padding: var(--sp-2) var(--sp-4); border-radius: 999px; font-size: var(--fs-sm); box-shadow: 0 2px 10px rgba(38,40,42,.2); }
}
/* スクロールの動き：画面に入った塊を下からふわっと浮かび上がらせる（2026-10-10 Aに決定） */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .work .thumb img { transition: none; transform: none; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 複数ページ（10/14 v0.7 粗い版）：トップの入口・下層ページ */
.subpage { padding-top: var(--sp-6); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.tile { display: flex; flex-direction: column; gap: var(--sp-1); text-decoration: none; }
.tile .clip { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); margin-bottom: var(--sp-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.03); }
.tile .kind { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--sub); line-height: 1.6; }
.tile .t { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-base); line-height: 1.7; }
.more { text-align: center; margin: var(--sp-6) 0 0; }
.more a, .case .go { color: var(--accent); font-size: var(--fs-sm); letter-spacing: .1em; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: var(--sp-0); }
.more a::after, .case .go::after { content: " →"; }
.price-rules { grid-column: 1 / -1; margin: 0; padding-left: 1.2em; font-size: var(--fs-md); color: var(--ink); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); max-width: 880px; margin-inline: auto; }
.case { display: flex; flex-direction: column; gap: var(--sp-1); background: var(--card); padding: var(--sp-5); text-decoration: none; }
.case .kind { font-size: var(--fs-xs); color: var(--sub); letter-spacing: .1em; }
.case .t { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-base); line-height: 1.7; }
.case .go { align-self: flex-start; margin-top: var(--sp-3); }
.case .scope { font-size: var(--fs-sm); color: var(--sub); line-height: 1.7; } /* 中身の目安は言葉で＝日数は書かない（10/23 単価の表を外した） */
.case .total { font-family: var(--display); font-size: var(--fs-heading); color: var(--accent); font-variant-numeric: tabular-nums; margin-top: var(--sp-2); }
.case .total small { display: block; font-family: var(--body); font-size: var(--fs-xs); color: var(--sub); }
@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .cases { grid-template-columns: minmax(0, 1fr); }
}

/* コンセプト＋ABOUT の要約（10/14）＝ファーストビューと作例の間。全文は about.html */
.concept { text-align: center; padding-bottom: 0; }
.concept .concept-line { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-heading); line-height: 1.8; letter-spacing: .12em; margin: 0 0 var(--sp-5); }
.concept .concept-line span { display: inline-block; } /* 句の途中で切らない＝PC は1行・狭い幅では読点のあとで折り返す（10/23） */
.concept p { margin: 0 auto; max-width: 48em; font-size: var(--fs-md); color: var(--ink); }
.concept .more { margin-top: var(--sp-5); }
/* トップの料金＝1行＋リンク（10/14 紹介で来た人に売り込みに見えないよう軽く） */
.sec-head .price-line { color: var(--ink); font-size: var(--fs-base); }
.price-line .big { font-family: var(--display); font-size: var(--fs-heading); color: var(--accent); margin-inline: var(--sp-2); font-variant-numeric: tabular-nums; }
.price-line small { display: block; color: var(--sub); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.sec-head .more { margin-top: var(--sp-5); }