/* ==========================================================================
   harenohi design — style.css（全ページ共通のベース）
   デザインの正：design-source/ のv3デザイン。各要素のスタイルは pages.css（v3から生成）。
   v3はブラウザ標準の余白を前提にしているため、要素のリセットは行わない。
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* iPhone（Safari）が文字サイズを自動で拡大しないようにする */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safari（iPhone / Mac）：v3 の text-wrap: pretty は Safari では段落全体の行長を揃えるため、
   日本語が不自然な位置で改行され、文章の幅が狭くなる。Safari のみ通常の折り返しに戻す。
   （hanging-punctuation は Safari のみが対応しているプロパティ） */
@supports (hanging-punctuation: first) {
  [class] { text-wrap: wrap !important; }
}

/* hidden 属性の要素は常に非表示（要素側の display 指定より優先） */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #C9D5DF; color: #1E242B; }

/* アンカー移動時に固定ヘッダーの高さ分をあける（v3はJSで84px分ずらしていた） */
[id] { scroll-margin-top: 84px; }

/* スクロールで表示（v3と同じ動き。JS有効時のみ） */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 有機的な図形（v3はJSのアニメーション） */
.c-blob { animation: hnBlob 14s ease-in-out infinite; }
@keyframes hnBlob {
  0%, 100% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; transform: rotate(0) scale(1); }
  25% { border-radius: 46% 54% 50% 50% / 56% 44% 57% 43%; transform: rotate(7deg) scale(1.03); }
  50% { border-radius: 53% 47% 43% 57% / 45% 55% 50% 50%; transform: rotate(-5deg) scale(.98); }
  75% { border-radius: 47% 53% 57% 43% / 57% 43% 46% 54%; transform: rotate(4deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   個別調整（ユーザー指示による修正）
   ========================================================================== */

/* 制作実績 詳細：1173px以下は1カラムになるため、左側見出しの追従（sticky）を解除 */
@media (max-width: 1173px) {
  body[class*="page-works-"] [data-hn-sticky] {
    position: static;
    top: auto;
  }
}

/* 全ページ共通：1カラムのときは見出しの追従を解除（判定は main.js の initStickyRelease） */
[data-hn-unstick] {
  position: static !important;
  top: auto !important;
}

/* 制作実績 詳細：PC/スマホ表示のスクリーンショットは枠の幅に合わせ、縦長の画像は枠内でスクロール（v3と同じ表示） */
img[data-hn-scroll] {
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 事務所について 01 ABOUT：画像ファイルの右側にある余白が見えないよう、左寄せで枠いっぱいに表示 */
#about-naming {
  width: 115%;
  max-width: none;
  object-position: left center;
}

/* お問い合わせ：迷惑送信対策の入力欄（画面には表示しない） */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* お問い合わせ：ボット対策（Turnstile）の確認欄。確認が必要な場合のみ表示される */
.captcha-box { display: flex; justify-content: center; }

/* スマートフォン：下スクロール時はヘッダーを隠し、上スクロール時に再表示（main.js の initHeader） */
@media (max-width: 767px) {
  [data-hn-header] {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .4s, border-color .4s !important;
  }
  [data-hn-header][data-hn-header-hidden] {
    transform: translateY(-100%);
  }
}

/* 制作実績 詳細（スマートフォン）：スマホ版スクリーンショットの枠の高さを 2/3 に（幅はそのまま、枠内の縦スクロールは維持） */
@media (max-width: 767px) {
  #detail figure > div:first-child:has(> .sps21) {
    min-height: 0 !important;
    height: auto !important;
  }
  #detail .sps21 {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 14 !important; /* 元の 9 / 21 の 2/3 の高さ */
  }
}

/* 治療院さまへ MESSAGE（スマートフォン）：上部＝背景写真（見出し部分）、下部＝写真なしのカラー背景
   （事務所について VISION のスマホ表示と同じく、写真エリアとカラーエリアを上下に分ける構成） */
@media (max-width: 767px) {
  #message .sps12 {
    padding: 0 !important;
    row-gap: 0 !important;
  }
  /* 写真レイヤーを見出しの行だけに配置 */
  #message .sps12 > [aria-hidden="true"]:has(> #clinic-message) {
    grid-row: 1 / 2; /* 終了線も指定（未指定だと絶対配置ではコンテナ下端まで広がる） */
    grid-column: 1 / -1;
    inset: 0;
  }
  #message .sps12 > .v4d03f35 { /* 見出し（MESSAGE・h2） */
    grid-row: 1;
    padding: 56px 16px 40px;
  }
  #message .sps12 > .vc81374b { /* 本文・リスト・ボタン */
    padding: 36px 16px 56px;
  }
}

/* 旧サイトのページ内リンク用の互換アンカー（表示なし。直後のセクション先頭へ移動） */
.legacy-anchor { display: block; height: 0; }

/* お問い合わせ：送信ボタンの矢印（円）を他のボタンと同じく右端に配置 */
button[data-submit] {
  justify-content: space-between;
}
button[data-submit] > span:last-child {
  flex: none;
  width: 32px;
  height: 32px;
}

/* 川越市のホームページ制作：よくあるご質問の上部余白（他の主要セクションと同じ） */
.page-kawagoe-homepage #faq {
  padding-top: clamp(64px, 7vw, 104px);
}

/* TOP 3つの特徴 03：本文直下のテキストリンク（「くわしく見る →」の表現を流用） */
.feat-link {
  width: fit-content;
  margin-top: 12px;
  text-decoration: none;
}

/* 制作実績一覧：非公開実績はリンクなし。クリックできるように見えないよう hover の変化を無効化 */
[data-work-private] { cursor: default; }
[data-work-private]:hover { color: #1E242B !important; }
[data-work-private]:hover [data-hn-zoom-img] { transform: none !important; }

/* 選ばれる3つの理由（治療院さまへ・川越市のホームページ制作）：スマホでは TOP「3つの特徴」と同じく
   番号＋見出しを横並び、本文は横幅100%で表示 */
@media (max-width: 767px) {
  #reason .v0038361 {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
  }
  #reason .v0038361 > .vbbc0178 { display: contents; }
  #reason .v0038361 > .vbbc0178 > p { grid-column: 1 / -1; }
}