/* ===== pieces 統一スタイル（完全版）===================================== */
:root{
  --ink:#1c1c1c;
  --muted:#6f6f6f;
  --bg:#fff;
  --bg-soft:#fafafa;
  --line:#ececec;
  --paper:#fff;
  --accent:#1F9AA0;
  --accent-darker:#17807B;

  /* JSで上書きされる想定 */
  --headerH:90px;             /* 固定ヘッダー高さの基準 */
  --anchorOffset:-20px;       /* アンカー停止の共通微調整（全セクション統一） */
}

/* ===== ベース ===== */
*{ box-sizing:border-box; }
html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
.wrap{ max-width:1120px; margin:auto; padding:0 22px; }

/* ===== アンカー位置調整（全セクション同一） ===== */
html{ scroll-behavior:smooth; scroll-padding-top:0; }
.section{
  padding:72px 0; border-top:1px solid var(--line);
  scroll-margin-top: calc(var(--headerH) + var(--anchorOffset)) !important;
}
.section.alt{ background:var(--bg-soft); }
.section h2{
  position:relative; display:inline-block; margin:0 0 18px; padding-bottom:6px;
  color:#000; font-weight:600; font-size:26px;
}
.section h2::after{
  content:""; position:absolute; left:0; bottom:0; width:48px; height:3px;
  border-radius:2px; opacity:.9; background:var(--accent);
}

/* ===== ヘッダー ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:90px; padding:0 20px; }
.brand{ display:flex; align-items:center; gap:14px; margin-left:0; }
.brand img{ max-height:72px; width:auto; object-fit:contain; border-radius:12px; }
.brand span{ font-size:24px; font-weight:700; color:#000; letter-spacing:.02em; }
.menu{ display:flex; gap:22px; }
.menu a{ color:#000; font-weight:500; position:relative; padding-bottom:6px; }
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--accent); transition:width .2s ease;
}
.menu a:hover::after{ width:100%; }

/* ===== HERO ===== */
.hero{
  display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; padding:72px 0;
}
@media (max-width:980px){ .hero{ grid-template-columns:1fr; } }
.cta-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero a[href*="tel"],
.hero a[href*="instagram"],
.hero a[href*="pieces_hairsalon"],
.hero a[href*="maps.google.com"]{
  display:inline-block; background:#fff; color:#000; border:1px solid rgba(0,0,0,.6);
  border-radius:30px; padding:10px 22px; font-weight:500; font-size:15px; text-decoration:none;
  transition:all .25s ease; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.hero a:hover{ background:#000; color:#fff; border-color:#000; box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* ===== スライドショー（高さしっかり保証） ===== */
.slideshow{
  position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:12px;
}
.slideshow img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.2s ease-in-out;
}
.slideshow img.active{ opacity:1; z-index:1; }
@supports not (aspect-ratio: 16 / 9){
  .slideshow::before{ content:""; display:block; padding-top:56.25%; }
  .slideshow > img{ position:absolute; top:0; left:0; right:0; bottom:0; }
}
@media (max-width:420px){ .slideshow{ aspect-ratio:4 / 3; } }

/* ===== カード ===== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }
.card{
  border:1px solid #e7f2f1; border-radius:18px; padding:22px; background:var(--paper);
  box-shadow:0 8px 24px rgba(23,128,123,.08);
}
.staff .card img{ border-radius:12px; border:1px solid var(--line); }
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:900px){ .gallery{ grid-template-columns:1fr; } }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* ===== ボタン ===== */
.btn{
  display:inline-block; border:1px solid var(--accent); color:var(--accent);
  border-radius:28px; padding:12px 18px; font-weight:500;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s;
}
.btn:hover{ border-color:var(--accent-darker); color:var(--accent-darker); }
.btn.fill{
  background:var(--accent); color:#fff; border-radius:30px; padding:14px 24px; font-weight:500; transition:all .25s ease;
}
.btn.fill:hover{ background:var(--accent-darker); }

/* ===== concept（背景＋透かし） ===== */
#concept.section{ background:#bdecf5; position:relative; color:#000; overflow:hidden; }
#concept.section h2{ color:#000; }
#concept.section h2::after{ background:#fff; }
#concept.section p{ color:#000; font-size:18px; line-height:1.8; font-weight:500; margin-bottom:10px; }
#concept.section .muted{ color:#000; opacity:.9; font-size:15px; }
#concept.section::before{
  content:""; position:absolute; top:50%; left:50%; width:320px; height:320px;
  background:url("images/concept-bg.png") no-repeat center/contain;
  opacity:.08; transform:translate(-50%,-50%); filter:hue-rotate(170deg) saturate(150%) brightness(1.1);
  pointer-events:none; z-index:0;
}
#concept.section > *{ position:relative; z-index:1; }

/* ===== gallery CTA ===== */
#gallery a[href*="instagram.com/pieces_hairsalon"]{
  display:inline-block; background:var(--accent); color:#fff !important; border:none;
  border-radius:30px; padding:12px 24px; font-weight:500; font-size:15px; text-decoration:none; transition:all .25s ease;
}
#gallery a[href*="instagram.com/pieces_hairsalon"]:hover{ background:var(--accent-darker); }

/* ===== MENU 金額整列 ===== */
#menu .card ul{ list-style:none; padding:0; margin:0; }
#menu .card li{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px dotted #e5e5e5; padding:6px 0; font-size:16px; line-height:1.8;
}
#menu .card li .price{ flex-shrink:0; width:90px; text-align:right; }

/* ===== staff トップの文字色を黒で統一 ===== */
#staff.section { color:#000; }
#staff.section h2, #staff.section p, #staff.section span,
#staff.section .card, #staff.section .card p, #staff.section .card span { color:#000 !important; }

/* ===== フッター ===== */
footer{
  background:var(--accent); color:#fff; padding:24px 0; text-align:center;
  font-size:14px; letter-spacing:.05em;
}
footer a{ color:#fff; text-decoration:underline; }

/* ===== スマホ調整 ===== */
@media (max-width:720px){
  :root{ --headerH:72px; --anchorOffset:-8px; } /* モバイルは少し弱めに */
  .nav{ flex-wrap:wrap; align-items:flex-start; height:auto; padding:8px 12px; }
  .brand{ flex:1 0 100%; gap:10px; margin-left:0; }
  .brand img{ max-height:56px; }
  .brand span{ font-size:20px; }
  .menu{ flex:1 0 100%; display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; justify-content:flex-start; }
  .cards{ grid-template-columns:1fr; }
  .cta-row{ justify-content:center; }
}

/* ===== アクセシビリティ ===== */
a:focus,button:focus,.btn:focus{
  outline:3px solid color-mix(in srgb, var(--accent) 50%, #fff 50%);
  outline-offset:2px;
}/* === スマホ時は見切らせない（heroスライド） === */
@media (max-width: 720px){
  .slideshow img{
    object-fit: contain;   /* 全体を収める＝切れない */
    background:#fff;       /* 上下に余白が出る場合の下地 */
  }
}/* =========================
   HERO の余白とタイポ見直し
   ========================= */

/* PC基準：ゆったり・大きめ */
.hero{
  gap: 36px;                /* 要素間スペースを+8px */
  padding: 96px 0 88px;     /* 上下の余白を拡張（72→96） */
}

.hero h1{
  /* 画面幅に合わせてなめらかに可変：最小28px〜最大44px */
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.22;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  font-weight: 700;
}

.hero .sub,         /* サブ見出し用クラスがあれば */
.hero p.muted{      /* 既存の muted を併用している想定 */
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.9;
  color: var(--muted);
  max-width: 42ch;  /* 行幅を絞って読みやすく */
  margin: 0 0 18px;
}

/* CTAは少し大きく／間隔広く */
.hero .cta-row{
  gap: 14px;
  margin-top: 8px;
}
.hero .cta-row .btn,
.hero .cta-row a{
  padding: 14px 22px;       /* クリックしやすく */
  font-size: 15.5px;
  border-radius: 999px;     /* 丸さを強めてやさしい印象 */
}

/* スライドは“見せすぎない”＝文字が主役 */
.slideshow{
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  opacity: .96;             /* 少しだけ抑えて文字を主役に */
}

/* タブレット以下：余白を保ちつつ一段組に最適化 */
@media (max-width: 980px){
  .hero{
    gap: 22px;
    padding: 84px 0 72px;
  }
  .hero .sub,
  .hero p.muted{
    max-width: 48ch;
  }
}

/* スマホ：指で触るUIを意識して“ゆるめ” */
@media (max-width: 720px){
  .hero{
    padding: 68px 0 56px;
    gap: 18px;
  }
  .hero h1{
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.24;
    letter-spacing: 0.01em; /* つめ過ぎない */
    margin-bottom: 8px;
  }
  .hero .sub,
  .hero p.muted{
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.85;
    max-width: 48ch;
  }
  .hero .cta-row{
    gap: 10px;
    justify-content: flex-start;
  }
  .hero .cta-row .btn,
  .hero .cta-row a{
    padding: 13px 18px;
    font-size: 15px;
  }
  /* 画像は少し小ぶりに見せて、余白を確保 */
  .slideshow{
    aspect-ratio: 4 / 3;    /* 既存維持 */
    margin-top: 4px;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
  }
}/* === HERO 見出しのサイズ調整（存在感アップ） === */
.hero h1{
  font-size: clamp(32px, 4.4vw, 48px); /* 少し大きく */
  line-height: 1.25;                   /* 行間はやや詰めて塊感を出す */
  letter-spacing: 0.01em;
  font-weight: 700;
  margin: 0 0 16px;
}

/* サブ見出しなどの段落も少し余裕を持たせる */
.hero p{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 18px;
}

/* スマホ時 */
@media (max-width:720px){
  .hero h1{
    font-size: clamp(26px, 6vw, 34px); /* モバイルも見やすく */
    line-height: 1.3;
    margin-bottom: 12px;
  }
  .hero p{
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.8;
  }
}