/* ============================================================
   HONEST — 共通スタイル
   色・文字サイズを変えたいときは、この :root だけ触れば全ページ変わります
   ============================================================ */

:root{
  /* ---- 色 ---- */
  --ink:      #101416;   /* 基本の背景（濃いガンメタ） */
  --ink-2:    #1A2124;   /* 一段明るい面 */
  --line:     #2C3639;   /* 罫線 */
  --paper:    #F2F0EA;   /* 文字・明るい面 */
  --mute:     #8C989C;   /* 補助テキスト */
  --sea:      #7FB3A6;   /* アクセント：ヴィンテージのシーフォーム */
  --mustard:  #D9A22B;   /* アクセント2：価格・ラベル */
  --line-g:   #06C755;   /* LINE緑 */

  /* ---- 文字 ---- */
  --display: "Anton", "Noto Sans JP", sans-serif;
  --body:    "Noto Sans JP", sans-serif;
  --mono:    "Roboto Mono", monospace;

  /* ---- 余白 ---- */
  --pad: clamp(20px, 5vw, 64px);
  --gap: clamp(16px, 3vw, 32px);
  --max: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.u-sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sea); color:var(--ink); padding:12px 20px;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; }

/* ============================================================
   ヘッダー
   ============================================================ */
.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px var(--pad);
  background:rgba(16,20,22,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.bar__logo{
  font-family:var(--display);
  font-size:26px; letter-spacing:.14em;
  text-decoration:none;
}

.bar__toggle{
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:2px;
  cursor:pointer;
}
.bar__bars,
.bar__bars::before,
.bar__bars::after{
  content:""; display:block;
  width:20px; height:1.5px; background:var(--paper);
}
.bar__bars::before{ transform:translateY(-6px); }
.bar__bars::after{  transform:translateY(4.5px); }

.nav{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  flex-direction:column;
  padding:8px var(--pad) 20px;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.nav.is-open{ display:flex; }
.nav a{
  padding:14px 0;
  text-decoration:none;
  font-size:15px; letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}

@media (min-width:880px){
  .bar__toggle{ display:none; }
  .nav{
    display:flex; flex-direction:row; position:static;
    gap:26px; padding:0; background:none; border:none;
  }
  .nav a{ padding:0; border:none; font-size:14px; }
  .nav a:hover{ color:var(--sea); }
}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{
  position:relative;
  min-height:min(88vh, 760px);
  display:flex; align-items:flex-end;
  padding:var(--pad);
  overflow:hidden;
}

/* 写真が入るまでの仮の面。img を入れると自動で隠れます */
.hero__media{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 70% 15%, #24312F 0%, transparent 60%),
    linear-gradient(160deg, #161C1E 0%, #0C1012 100%);
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,20,22,.95) 5%, rgba(16,20,22,.25) 60%);
}

/* ── 署名要素：ガソリンリッド ── */
.lid{
  position:absolute;
  top:12%; right:-70px;
  width:min(58vw, 340px); aspect-ratio:1;
  z-index:1;
  animation:lid-in 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.lid__ring{
  width:100%; height:100%; border-radius:50%;
  padding:10px;
  background:conic-gradient(
    from 210deg,
    #E9EEF0 0deg, #8E999D 60deg, #F6F9FA 120deg,
    #6E797D 200deg, #DCE3E5 280deg, #8E999D 340deg, #E9EEF0 360deg
  );
  box-shadow:0 30px 60px rgba(0,0,0,.55);
}
.lid__glass{
  width:100%; height:100%; border-radius:50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.30), rgba(127,179,166,.10) 45%, rgba(0,0,0,.30));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
}
@keyframes lid-in{
  from{ opacity:0; transform:translateY(24px) rotate(-18deg); }
  to  { opacity:1; transform:translateY(0) rotate(0); }
}

.hero__body{ position:relative; z-index:2; max-width:640px; }

.eyebrow{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em;
  color:var(--sea);
  text-transform:uppercase;
}

.hero__title{
  margin:0 0 18px;
  font-size:clamp(30px, 7.5vw, 60px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:.01em;
}
.hero__title span{ display:block; }

.hero__lead{
  margin:0 0 28px;
  color:var(--mute);
  font-size:15px;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   ボタン
   ============================================================ */
.btn{
  display:inline-block;
  padding:14px 26px;
  font-size:14px; font-weight:500; letter-spacing:.06em;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:2px;
  transition:background .2s, color .2s, border-color .2s;
}
.btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--solid:hover{ background:var(--sea); border-color:var(--sea); }
.btn--line{ background:var(--line-g); color:#fff; border-color:var(--line-g); }
.btn--line:hover{ filter:brightness(1.1); }
.btn--ghost:hover{ border-color:var(--sea); color:var(--sea); }

/* ============================================================
   セクション
   ============================================================ */
.sec{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(56px, 10vw, 104px) var(--pad);
}
.sec--dark{
  max-width:none;
  background:var(--ink-2);
  border-block:1px solid var(--line);
}
.sec--dark > *{ max-width:var(--max); margin-inline:auto; }

.sec__title{
  margin:0 0 8px;
  font-size:clamp(24px, 4.5vw, 34px);
  font-weight:700; letter-spacing:.02em;
}
.sec__lead{ margin:0 0 var(--gap); color:var(--mute); font-size:14px; }
.sec__more{ margin:var(--gap) 0 0; }

.grid{ display:grid; gap:var(--gap); margin-top:var(--gap); }
@media (min-width:640px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:940px){
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   カード
   ============================================================ */
.card{
  padding:24px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:3px;
}
.sec--dark .card{ background:var(--ink); }

.card__title{
  margin:0 0 10px;
  font-size:17px; font-weight:700; letter-spacing:.03em;
}
.card__text{ margin:0; font-size:14px; color:var(--mute); }

/* 写真つきカード（施工実績・商品） */
.tile{
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  text-decoration:none;
  display:block;
  transition:border-color .2s, transform .2s;
}
.tile:hover{ border-color:var(--sea); transform:translateY(-3px); }
.tile__img{
  aspect-ratio:4/3;
  background:linear-gradient(150deg,#232C2E,#141A1C);
  display:grid; place-items:center;
}
.tile__img img{ width:100%; height:100%; object-fit:cover; }
.tile__ph{
  font-family:var(--mono); font-size:11px;
  color:#4A5457; letter-spacing:.15em;
}
.tile__body{ padding:16px 18px 18px; }
.tile__name{ margin:0 0 6px; font-size:15px; font-weight:700; }

/* 作業伝票ふうのデータ帯（署名要素その2） */
.tile__strip{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  padding-top:10px; margin-top:10px;
  border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:11px; color:var(--mute);
  letter-spacing:.06em;
}
.tile__price{
  font-family:var(--mono); font-size:16px;
  color:var(--mustard); letter-spacing:.04em;
}

/* ============================================================
   カフェ帯
   ============================================================ */
.band{
  background:
    linear-gradient(rgba(16,20,22,.72), rgba(16,20,22,.72)),
    linear-gradient(120deg,#2A3A36,#16201F);
  border-block:1px solid var(--line);
}
.band__inner{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(56px, 10vw, 96px) var(--pad);
  text-align:center;
}
.band__title{ margin:0 0 12px; font-size:clamp(22px,4vw,30px); }
.band__text{ margin:0 auto 24px; max-width:34em; color:var(--mute); font-size:14px; }

/* ============================================================
   店舗情報テーブル
   ============================================================ */
.spec{ margin:var(--gap) 0 0; border-top:1px solid var(--line); }
.spec__row{
  display:grid; grid-template-columns:7.5em 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.spec dt{ color:var(--mute); font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
.spec dd{ margin:0; }

/* ============================================================
   フッター
   ============================================================ */
.foot{
  padding:clamp(40px,7vw,64px) var(--pad);
  border-top:1px solid var(--line);
  text-align:center;
}
.foot__logo{
  margin:0 0 18px;
  font-family:var(--display); font-size:26px; letter-spacing:.16em;
}
.foot__nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 22px; margin-bottom:22px;
}
.foot__nav a{ font-size:13px; color:var(--mute); text-decoration:none; }
.foot__nav a:hover{ color:var(--sea); }
.foot__copy{ margin:0; font-family:var(--mono); font-size:11px; color:#5C686B; }

/* ============================================================
   動きを減らす設定にしている端末への配慮
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}