/*
Theme Name: TT5 Child
Template: twentytwentyfive
*/

/* =============================================
   共通設定
============================================= */
:root {
  /* レイアウト変数（WordPressに定義がないもののみ） */
  --haru-element-gap: 1px;
  --haru-space-small: clamp(0.7rem, 1.3vw, 1rem);
  --haru-space-medium: clamp(2rem, 4vw, 3rem);
  --haru-space-large: clamp(3rem, 7vw, 6rem);
  --haru-border-width: 1px;
  --haru-hover-scale: 1.03;
  --haru-hover-transition: transform 0.2s ease-out;
  --haru-hover-duration: 0.3s ease-out;
  --haru-card-padding: clamp(0.5rem, 1.5vw + 0.25rem, 1rem);
  --haru-heading-size: clamp(1.125rem, 4vw, 1.5rem);
}

/* 最小幅設定（極端に狭い画面での横スクロール対応） */
body {
  min-width: 320px;
}

/* スムーススクロール（アクセシビリティ配慮） */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* スクロールバー */
html::-webkit-scrollbar {
  width: 13px;
}
html::-webkit-scrollbar-track {
  background: #f5f5f5;
}
html::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}

/* Google reCAPTCHAバッジを非表示 */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* マウスクリック時のみ枠を無効化、キーボードは維持 */
a:focus:not(:focus-visible),
.wpcf7-form-control:focus:not(:focus-visible),
.wpcf7-form input:focus:not(:focus-visible),
.haru-flip-card:focus:not(:focus-visible) {
  outline: none;
}

/* リンクの下線を無効化 */
a {
  text-decoration: none !important;
}

/* 全リンクホバー（透明度変化） */
a:hover {
  opacity: 0.6;
}
/* ホバーアニメ付き要素は透明度変化を除外 */
.wp-block-button__link:hover,
.haru-service-card:hover a,
.haru-scrap-card:hover a,
.haru-gallery-grid .wp-block-post-featured-image a:hover,
.haru-gallery-tag-list a:hover {
  opacity: 1;
}

/* 内部用タグを全サイトで非表示 */
a[href*="haru-gallery-item-wide"] {
  display: none !important;
}

/* タグ区切り文字の変更 */
.wp-block-post-terms__separator {
  display: none;
}
.wp-block-post-terms a:not(:last-child)::after {
  content: " ";
}

/* =============================================
   ユーティリティクラス
============================================= */
/* bodyの左右パディングを打ち消す */
.hr-no-pad {
  margin-left: calc(var(--wp--style--root--padding-left) * -1);
  margin-right: calc(var(--wp--style--root--padding-right) * -1);
}
/* bodyの上パディングを打ち消す */
.hr-no-pad-top {
  margin-top: calc(var(--wp--style--root--padding-top) * -1) !important;
}
/* bodyの下パディングを打ち消す */
.hr-no-pad-bot {
  margin-bottom: calc(var(--wp--style--root--padding-bottom) * -1) !important;
}

/* bodyのパディングをつける */
.hr-pad{
  margin-left : var(--wp--style--root--padding-left);
  margin-right: var(--wp--style--root--padding-right);
}

/* =============================================
   レスポンシブスペーサー
============================================= */
.haru-spacer-large {
  height: var(--haru-space-large) !important;
}

.haru-spacer-medium {
  height: var(--haru-space-medium) !important;
}

.haru-spacer-small {
  height: var(--haru-space-small) !important;
}

/* =============================================
   縦型ヘッダーバー
============================================= */
/* 右カラム全体に背景と高さ確保 */
.haru-bar-column{
  max-width: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(to bottom, var(--wp--preset--color--haru-light-cyan), var(--wp--preset--color--haru-light-yellow), var(--wp--preset--color--haru-light-orange), var(--wp--preset--color--haru-light-pink));
  margin-top: calc(var(--wp--style--root--padding-top) * -1) !important;
  margin-bottom: calc(var(--wp--style--root--padding-bottom) * -1) !important;
}

/* ナビ本体を sticky */
.haru-vertical-header {
  position: sticky;
  top: 3.5vh;
}
/* ナビメニューの間隔 */
.haru-vertical-header .wp-block-navigation {
  gap: 3.5vh;
}

/* 文字縦組み */
.haru-vertical-header .wp-block-navigation-item__content{
  writing-mode: vertical-rl;
  font-size: var(--wp--preset--font-size--medium);
}

/* =============================================
   共通ボタンスタイル
============================================= */
.wpcf7-submit,
.wp-block-button__link {
  /* --- リセット & スタイル --- */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50px;
  display: block;
  margin: 0 auto;
  min-width: clamp(140px, 50vw, 180px);
  padding: 15px 20px;
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  letter-spacing: 2px;
  cursor: pointer;
  border: var(--haru-border-width) solid var(--wp--preset--color--haru-black);
  color: var(--wp--preset--color--haru-white);
  background: linear-gradient(to left, var(--wp--preset--color--haru-black) 50%, transparent 50%) right / 200% 100%;
  transition: background-position var(--haru-hover-duration), color var(--haru-hover-duration);
}

.wpcf7-submit:focus-visible,
.wp-block-button__link:focus-visible {
  background-position: left;
  color: var(--wp--preset--color--haru-black);
}

/* 色反転ボタン（黒背景用） */
.haru-button-reverse .wp-block-button__link {
  border: var(--haru-border-width) solid var(--wp--preset--color--haru-white);
  color: var(--wp--preset--color--haru-black);
  background: linear-gradient(to left, var(--wp--preset--color--haru-white) 50%, transparent 50%) right / 200% 100%;
}

.haru-button-reverse .wp-block-button__link:focus-visible {
  background-position: left;
  color: var(--wp--preset--color--haru-white);
}

/* =============================================
   SVGロゴ - 左からスライドイン
============================================= */
.haru-main-logo svg {
  fill: #151515;
}

/* 初期状態：隠す */
.letter-h, .letter-a, .letter-r, .letter-u, 
.letter-s, .letter-e, .letter-g, .letter-a2, 
.letter-w, .letter-a3 {
  opacity: 0;
}

/* 左からスライドイン */
.letter-h { animation: slideFromLeft 0.4s ease-out 0.1s forwards; }
.letter-a { animation: slideFromLeft 0.4s ease-out 0.2s forwards; }
.letter-r { animation: slideFromLeft 0.4s ease-out 0.3s forwards; }
.letter-u { animation: slideFromLeft 0.4s ease-out 0.4s forwards; }
.letter-s { animation: slideFromLeft 0.4s ease-out 0.5s forwards; }
.letter-e { animation: slideFromLeft 0.4s ease-out 0.6s forwards; }
.letter-g { animation: slideFromLeft 0.4s ease-out 0.7s forwards; }
.letter-a2 { animation: slideFromLeft 0.4s ease-out 0.8s forwards; }
.letter-w { animation: slideFromLeft 0.4s ease-out 0.9s forwards; }
.letter-a3 { animation: slideFromLeft 0.4s ease-out 1.0s forwards; }

@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =============================================
   スクラップブックロゴ - アニメーション
============================================= */
/*
.haru-scrap-logo {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.haru-scrap-logo svg {
  fill: #151515;
}
*/

/* 初期状態：隠す */
/*
.harusegawa-left-group,
.haru-scrap-logo .letter-s, .haru-scrap-logo .letter-c, .haru-scrap-logo .letter-r, .haru-scrap-logo .letter-a, 
.haru-scrap-logo .letter-p, .haru-scrap-logo .letter-b, .haru-scrap-logo .letter-o, .haru-scrap-logo .letter-o2, 
.haru-scrap-logo .letter-k {
  opacity: 0;
}
*/

/* 左側：回転しているHARUSEGAWAグループ：まとめてスッと入る */
/*
.harusegawa-left-group { 
  animation: slideFromLeft 0.4s ease-out 0.1s forwards; 
}
*/

/* 右側：scrapbook：1文字ずつスライドイン */
/*
.haru-scrap-logo .letter-s { animation: slideFromLeft 0.4s ease-out 0.6s forwards; }
.haru-scrap-logo .letter-c { animation: slideFromLeft 0.4s ease-out 0.7s forwards; }
.haru-scrap-logo .letter-r { animation: slideFromLeft 0.4s ease-out 0.8s forwards; }
.haru-scrap-logo .letter-a { animation: slideFromLeft 0.4s ease-out 0.9s forwards; }
.haru-scrap-logo .letter-p { animation: slideFromLeft 0.4s ease-out 1.0s forwards; }
.haru-scrap-logo .letter-b { animation: slideFromLeft 0.4s ease-out 1.1s forwards; }
.haru-scrap-logo .letter-o { animation: slideFromLeft 0.4s ease-out 1.2s forwards; }
.haru-scrap-logo .letter-o2 { animation: slideFromLeft 0.4s ease-out 1.3s forwards; }
.haru-scrap-logo .letter-k { animation: slideFromLeft 0.4s ease-out 1.4s forwards; }
*/

/* =============================================
   キャッチコピー
============================================= */
.haru-catchcopy {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  opacity: 0;
  animation: slideFromLeft 0.4s ease-out 1.2s forwards;
}

/* =============================================
   セクションタイトル
============================================= */
.haru-section-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.1em;
}

/* 大きいサイズ */
.haru-sec-t-big {
  font-size: clamp(2rem, 7vw, 4rem);
}

/* 丸付き */
.haru-sec-t-bullet::before {
  content: "●";
  font-size: 0.5em;
}

/* 丸の色 */
.haru-bullet-l-cyan::before { color: var(--wp--preset--color--haru-light-cyan); }
.haru-bullet-l-yellow::before { color: var(--wp--preset--color--haru-light-yellow); }
.haru-bullet-l-orange::before { color: var(--wp--preset--color--haru-light-orange); }
.haru-bullet-l-pink::before { color: var(--wp--preset--color--haru-light-pink); }

/* 帯付き */
.haru-section-title-back-color {
  background-color: var(--wp--preset--color--haru-white);
  padding-left: var(--haru-card-padding);
  margin-top: var(--haru-element-gap);
  margin-bottom: var(--haru-element-gap);
}

/* =============================================
   共通カードスタイル
============================================= */
/* 本体 */
.haru-service-card,
.haru-scrap-card {
  background: var(--wp--preset--color--haru-white);
  padding: var(--haru-card-padding);
  position: relative;
  overflow: hidden;
}

/* 背景ホバーアニメーション */
.haru-service-card::before,
.haru-scrap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--wp--preset--color--haru-green);
  opacity: 0;
  transition: left 0.3s ease-out, opacity 0.3s ease-out;
  z-index: 1;
}

.haru-service-card > *,
.haru-scrap-card > * {
  position: relative;
  z-index: 2;
}

/* サムネ画像 */
.haru-service-card figure,
.haru-scrap-card figure,
.haru-gallery-grid figure {
  overflow: hidden;
}

/* サムネ画像ホバーアニメーション */
.haru-service-card img,
.haru-scrap-card .wp-post-image,
.haru-gallery-grid img {
  transition: var(--haru-hover-transition);
}
/* 画像拡大アニメ（全デバイス） */
.haru-gallery-grid a:hover img,
.haru-gallery-grid a:focus-visible img {
  transform: scale(var(--haru-hover-scale));
}
.haru-service-card:focus-visible img,
.haru-scrap-card:focus-visible .wp-post-image {
  transform: scale(var(--haru-hover-scale));
}

/* カード間の隙間調整 */
.haru-service-cards-container,
.haru-scrap-cards-container,
.haru-gallery-grid {
  gap: var(--haru-element-gap);
}

/* WP側のgrid-template-columns: 1fr;を上書き */
/* fr=伸縮だが最小幅制約あり / %=親幅基準で無制限に縮む */
@media (max-width: 600px) {
  .haru-scrap-cards-container {
    grid-template-columns: 100% !important; /* スクラップ1列 */
  }
  .haru-gallery-grid {
    grid-template-columns: 50% 50% !important; /* ギャラリー2列 */
  }
}

/* ============ サービスカード（個別設定） ============ */
/* 最大5列 */
@media (min-width: 1800px) {
  .haru-service-cards-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* サービス名 */
.haru-service-card h3 {
  font-size: var(--haru-heading-size);
  font-weight: 700;
  margin-top: var(--haru-card-padding);
  margin-bottom: var(--haru-card-padding);
}

/* オーバーレイリンク */
.haru-service-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  text-indent: -9999px;
  display: block;
}

/* ============ スクラップカード（個別設定） ============ */
/* 最大6列 */
@media (min-width: 1800px) {
  .haru-scrap-cards-container {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* サムネ画像 */
.haru-scrap-card figure {
  margin: 0.3rem clamp(2rem, 4vw, 1rem);
}

/* カテゴリ・変更日 */
.haru-scrap-card-cate-date .wp-block-post-terms {
  margin: 0;
}

/* タグ */
.haru-scrap-card .taxonomy-post_tag {
  /* 1行で省略 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.haru-scrap-card .taxonomy-post_tag a {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 300;
}

/* タイトル */
.haru-scrap-card .wp-block-post-title a {
  font-size: var(--haru-heading-size);
  /* カードの高さが行数で変わらないようにする */
  line-height: 1.2; /* 1行の高さ、明示的に指定 */
  min-height: 2.4em; /* 2行分 = 1.2 × 2 */
  /* 2行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ ギャラリーカード（個別設定） ============ */
/* 最大7列 */
@media (min-width: 1800px) {
  .haru-gallery-grid { grid-template-columns: repeat(7, 1fr); }
}
/* wide タグが付いた投稿だけ２列分 */
.haru-gallery-grid .tag-haru-gallery-item-wide {
  grid-column: span 2;
}

/* カード下を少し空ける */
.haru-gallery-grid {
  row-gap: 1rem;
}

/* 画像とテキストの間隔 */
.haru-gallery-grid figure {
  margin-bottom: 0.3rem;
}

/* タグとタイトルのテキスト */
.haru-gallery-grid a {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  line-height: 1.2;
}
/* タグが多い場合は複数行 */
.haru-gallery-grid .taxonomy-post_tag {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em; /* タグ間の隙間 */
}

/* =============================================
   フリップカード
============================================= */
.haru-flip-card {
  position: relative;
  cursor: pointer;
  user-select: none;
  perspective: 1500px;
}

.haru-flip-card-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.haru-flip-card-front,
.haru-flip-card-back {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}

.haru-flip-card-back {
  transform: rotateY(180deg);
}

/* フリップ時の回転 */
.haru-flip-card.flipped .haru-flip-card-inner {
  transform: rotateY(180deg);
}

/* フリップカード背景のはみ出しを隠す */
.haru-flip-card-front .has-background {
  overflow: hidden;
}

/* フリップカード矢印の色 */
.haru-flip-card-arrow {
  fill: var(--wp--preset--color--haru-green);
}

/* =============================================
   コンタクトフォーム7
============================================= */
/* --- 要素（送信ボタン以外） --- */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  border: var(--haru-border-width) solid transparent;
  border-radius: 0; /* スマホの角丸を無効化 */
  box-sizing: border-box;
  padding: 0.75rem 0.5rem;
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: 1rem;
}
/* プレースホルダーの色を薄く */
.wpcf7-form-control:not(.wpcf7-submit)::placeholder {
  color: #bbb;
  opacity: 1;
}
/* 要素同士の余白調整 */
.wpcf7-form p {
  margin: 0 0 0.7rem 0;
}
/* テキストエリアは縦方向のみリサイズ可能 */
.wpcf7-textarea {
  resize: vertical;
}

/* フォーカス時 */
.wpcf7-form-control:not(.wpcf7-submit):focus-visible {
  outline: none;
  border: var(--haru-border-width) solid var(--wp--preset--color--haru-black);
}

/* --- エラー時 --- */
.wpcf7-form .wpcf7-not-valid {
  border: var(--haru-border-width) solid #fe446a !important;
  color: #fe446a;
}
/* フォーカス時は文字色を元に戻す */
.wpcf7-form .wpcf7-not-valid:focus {
  color: var(--wp--preset--color--haru-black);
}
/* エラー時のプレースホルダー */
.wpcf7-form .wpcf7-not-valid::placeholder {
  color: #fe446a;
  opacity: 0.7;
}

/* 入力欄下のエラーメッセージを非表示 */
.wpcf7-form .wpcf7-not-valid-tip {
  display: none;
}

/* --- チェックボックス --- */
/* チェックボックスと内容を中央寄せ */
.wpcf7-form .wpcf7-acceptance {
  display: flex;
  justify-content: center;
}
/* チェックボックスの余白を消す */
.wpcf7-list-item {
  margin: 0 !important;
}

/* チェックボックスのアクセントカラー */
.wpcf7-form input[type="checkbox"] {
  accent-color: var(--wp--preset--color--haru-black);
}

/* --- 送信 --- */
/* 送信完了・エラーメッセージ */
.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: var(--haru-border-width) solid var(--wp--preset--color--haru-black);
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  font-size: var(--wp--preset--font-size--medium);
  text-align: center;
}

/* 送信成功時（シアン背景） */
.wpcf7 form.sent .wpcf7-response-output {
  background-color: var(--wp--preset--color--haru-light-cyan);
}

/* 送信エラー時（赤背景） */
.wpcf7 form.invalid .wpcf7-response-output {
  background-color: #fe446a;
  color: white;
}

/* 送信中のボタン無効化 */
.wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.5;
  cursor: not-allowed;
}

/* スピナーのデザイン調整 */
.wpcf7-spinner {
  background-color: var(--wp--preset--color--haru-light-cyan);
  opacity: 1;
  margin: 0;
}

/* =============================================
   サービス詳細 ページ
============================================= */
/* ============ 共通 ============ */
/* サービス内容コンテナ */
.haru-ser-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ============ ファーストビュー ============ */
/* 背景 */
.haru-se-fv {
  background: linear-gradient(90deg, #FFFFAA 0%, #14F096 100%);
}

/* コンテナ */
.haru-ser-fv-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* カラム */
.haru-ser-fv-column {
  gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
}

/* サービス名 */
.haru-service-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1.1;
}

/* キャッチコピー */
.haru-service-catchcopy {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ============ POINT ============ */
/* サービスポイント */
.haru-service-point {
  background: var(--wp--preset--color--haru-white);
  padding: var(--haru-card-padding);
}
.haru-service-point:not(:last-child) {
  margin-bottom: 3px;
}

/* サービスポイント見出し */
.haru-ser-poi-con-head {
  font-size: var(--haru-heading-size);
  font-weight: 700;
  margin-top: var(--haru-card-padding);
  margin-bottom: var(--haru-card-padding);
}

/* サービスポイント説明 */
.haru-ser-poi-con-desc {
  font-size: var(--wp--preset--font-size--medium);
}

/* ============ FLOW ============ */
/* 親でカウンタを0に戻す */
.haru-ser-flow-container {
  counter-reset: flow-step;
}

/* 子セクションを2カラムGrid化 */
.haru-ser-flow-step {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0.5rem 1rem;
  counter-increment: flow-step;
  margin-block: 1rem;
}

/* 番号セル（ゼロ埋め01,02…） */
.haru-ser-flow-step::before {
  content: counter(flow-step, decimal-leading-zero);
  font-size: var(--haru-heading-size);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 見出し・本文を右カラムに固定 */
.haru-ser-flow-step .haru-step-title,
.haru-ser-flow-step > p {
  grid-column: 2;
  margin: 0;   /* Gutenbergが付ける余白打ち消し */
}

/* フロー見出しのスタイル */
.haru-step-title {
  font-size: var(--haru-heading-size);
  font-weight: 700;
}

/* =============================================
   表
============================================= */
/* 基本テーブルスタイル */
.hr-table {
  --hr-table-border: var(--haru-border-width) solid var(--wp--preset--color--haru-black);
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--wp--preset--font-size--medium);
  border: var(--hr-table-border);
  border-bottom: none;
}
.hr-table col:first-child {
  width: clamp(120px, 30vw, 220px);
}

/* ヘッダー共通スタイル */
.hr-table caption,
.hr-table .hr-table-section {
  padding: var(--haru-card-padding);
  font-weight: 700;
  text-align: center;
}

/* ヘッダー個別スタイル */
.hr-table caption {
  background: var(--wp--preset--color--haru-black);
  color: var(--wp--preset--color--haru-white);
}

.hr-table .hr-table-section {
  background: #909090;
  color: var(--wp--preset--color--haru-white);
  border-right: none;
}

/* セル */
.hr-table th,
.hr-table td {
  padding: var(--haru-card-padding);
  border-bottom: var(--hr-table-border);
  overflow-wrap: break-word;
}

.hr-table th {
  background: var(--wp--preset--color--haru-gray);
  font-weight: 400;
  text-align: left;
  border-right: var(--hr-table-border);
}

.hr-table td {
  background: var(--wp--preset--color--haru-white);
}

/* コンテンツ要素 */
.hr-table p {
  margin: 0;
}

.hr-price {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 700;
}

/* 均等分割システム */
.hr-split {
  display: grid;
  grid-auto-rows: 1fr;
}

.hr-table .hr-split {
  padding: 0;
}

.hr-split .hr-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--haru-card-padding);
  border-top: var(--hr-table-border);
}

.hr-split .hr-pane:first-child {
  border-top: none;
}


/* =============================================
   共通タクソノミー一覧スタイル
============================================= */
/* タクソノミーリスト共通 */
.haru-gallery-tag-list,
.haru-scrap-category-list,
.haru-scrap-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--haru-element-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ベースタクソノミーリンク（色・ホバー共通） */
.haru-gallery-tag-list a,
.haru-scrap-category-list a,
.haru-scrap-tag-list a {
  display: inline-block;
  color: var(--wp--preset--color--haru-black);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


/* ============ タグ系（丸い） ============ */
.haru-gallery-tag-list a,
.haru-scrap-tag-list a {
  padding: 4px 10px;
  border-radius: 50px;
  border: 0.8px solid var(--wp--preset--color--haru-black);
  line-height: 1.2;
  font-weight: 300;
}

/* ============ ギャラリータグ（丸い） ============ */
/* 太めborder+大きめサイズ */
.haru-gallery-tag-list a {
  border: var(--haru-border-width) solid var(--wp--preset--color--haru-black);
  font-size: clamp(1rem, 2.5vw, 1.1rem);
}

/* 反転ホバーアニメ */
.haru-gallery-tag-list a:hover {
  background-color: var(--wp--preset--color--haru-black);
  color: var(--wp--preset--color--haru-beige);
}

/* ============ カテゴリ（四角） ============ */
.haru-scrap-category-list a {
  padding: clamp(0.15rem, 0.4vw, 0.3rem) clamp(0.4rem, 1vw, 0.6rem);
  border: var(--haru-border-width) solid var(--wp--preset--color--haru-black);
  font-size: var(--haru-heading-size);
  font-weight: 500;
}

/* =============================================
   フッター
============================================= */
.haru-footer-container {
  padding: var(--haru-card-padding);
  background-color: rgba(0, 0, 0, 0.08); /* 黒を混ぜてほんのり暗く */
}

/* フッターロゴの高さ統一 */
.haru-footer-logo {
  height: clamp(3rem, 6vw, 4.5rem);
  width: auto;
}

/* ナビメニュー */
.haru-footer-container .wp-block-navigation-item__content {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.2;
}
.haru-footer-container .wp-block-navigation {
  column-gap: 1.2em;
}

/* =============================================
   投稿ページ背景色
============================================= */
/* 投稿関連ページの背景色を変える */
body.single-post,
body.blog,
body.category,
body.tag,
body.archive {
  background-color: var(--wp--preset--color--haru-beige);
}

/* =============================================
   ホバー対応デバイス専用アニメーション
============================================= */
@media (hover: hover) and (pointer: fine) {
  /* スクロールバー */
  html::-webkit-scrollbar-thumb:hover {
    background: #ccc;
  }
  
  /* ボタンアニメーション */
  .wpcf7-submit:hover,
  .wp-block-button__link:hover {
    background-position: left;
    color: var(--wp--preset--color--haru-black);
  }
  
  .haru-button-reverse .wp-block-button__link:hover {
    background-position: left;
    color: var(--wp--preset--color--haru-white);
  }
  
  /* カード背景アニメーション */
  .haru-service-card:hover::before,
  .haru-scrap-card:hover::before {
    left: 0;
    opacity: 1;
  }
  
  /* カード画像拡大 */
  .haru-service-card:hover img,
  .haru-scrap-card:hover .wp-post-image {
    transform: scale(var(--haru-hover-scale));
  }
}

/* =============================================
   写真加工 ページ
============================================= */

/* サンプルギャラリー キャプション調整 */
.haru-retouch-gallery.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: linear-gradient(0deg, rgba(249, 249, 249, 0.4), rgba(249, 249, 249, 0));
  text-shadow: 0 0 20px var(--wp--preset--color--haru-white);
  font-size: var(--wp--preset--font-size--medium);
  padding: 0.5em;
}

/* =============================================
   プライバシーポリシー ページ(リーガルにも一部使用)
============================================= */

/* コンテナ */
.haru-page-container {
  max-width: 800px;
  margin: 0 auto;
  padding-top: var(--haru-space-medium);
}

/* マージンリセット */
.haru-page-container h1,
.haru-page-container h2,
.haru-page-container p {
  margin: 0;
}

/* H1見出し */
.haru-page-container h1 {
  margin-bottom: var(--haru-space-small);
}

/* H2見出し */
.haru-page-container h2 {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
}

/* 段落（最後以外） */
.haru-page-container > p:not(:last-of-type) {
  margin-bottom: var(--haru-space-small);
}