/* ============================================================
   made by trix — responsive.css（モバイル/タブレット専用の上書き）

   ★契約: レイアウト系ルールは @media (max-width: 1024px) 以下に限定する。
   1025px以上（デスクトップ）のレイアウトには影響しない。

   例外（全幅適用）: 下の「全幅の block-mappable 例外」節のみ @media 外。
   post-title 等 per-block css が保存時に破棄されるブロックの leaf-class 微調整に限る。
   measure 対象（about / header / footer）に存在しないクラスだけを対象にすること
   （＝デスクトップの measure 検証は引き続きこのファイルの影響を受けない）。

   背景: このサイトの装飾はブロック属性＋per-block css（DB）に置く方針だが、
   WPのper-block css属性は @media を書けず、また一部の動的ブロック（post-title）は
   css属性自体が保存時に破棄される。それらだけをこのファイルが担う。
   !important はインラインstyle／コアのブロックCSSに勝つために使用。
   内容は site/CSS-INVENTORY.md に記録。
   ============================================================ */

/* ---- 全幅の block-mappable 例外（@media 外）---- */

/* 作品カードのタイトル: コアの .wp-block-post-title{word-break:break-word} が
   「ビーズ刺繍ブロー/チ」のように単語途中で改行する。keep-all にして
   全角スペースの位置でのみ改行させる（自然な区切り）。Works一覧・Pick Up 両方に効く。
   post-title は per-block css を保存時に落とすためここに置く。leaf class・measure対象外。 */
.work-card__title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  /* 作品名は 20px → 14px に縮小（ユーザー要望：金額表示と同じサイズに揃える）。
     .work-card__price も 14px。 */
  font-size: 14px !important;
  line-height: 1.7 !important;
  /* 商品名の文字色（ユーザー要望）。Works一覧・Home Pick Up 両方に効く。 */
  color: #242424 !important;
}

/* ロゴを手書き風に（Great Vibes・セルフホスト）。商品写真の "made by trix" 透かしに寄せる。
   タグライン(<small>)は各partialのインラインで Noto Serif 指定のため影響を受けない（別書体のまま）。
   .site-logo-text / .footer-brand は Home含む全ページのヘッダー/フッターにある leaf クラス。
   measure --hf 対象なので、静的側(decorations.css)にも同じ @font-face・サイズを入れて一致させる。 */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/great-vibes-latin.woff2') format('woff2');
}
.site-logo-text {
  font-family: 'Great Vibes', cursive !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
}
/* ヘッダーのタグライン「ビーズ刺繍ブローチのアトリエ」を非表示（ユーザー要望）。
   .site-logo-text はヘッダー専用クラス（フッターは .footer-brand）なので、
   フッター側のタグラインは従来どおり表示されたまま。 */
.site-logo-text small {
  display: none !important;
}
.footer-brand {
  font-family: 'Great Vibes', cursive !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
}
/* フッターのタグライン「ビーズ刺繍ブローチのアトリエ」も非表示（ユーザー要望）。
   .footer-brand 内の <small>。ヘッダー(.site-logo-text small)と対で消す。 */
.footer-brand small {
  display: none !important;
}
/* ヘッダーナビ（Home/Works/Gallery/Blog/About/Contact）の文字色を #242424 に
   （ユーザー要望）。.site-nav はヘッダーナビ専用の leaf クラスなので、
   フッター等の他のリンクには影響しない。 */
.site-nav a {
  color: #242424 !important;
}

/* フッターの背景色を #242424 に（ユーザー要望）。
   既定は .has-dark-background-color→var(--wp--preset--color--dark)=#2b2723。
   .site-footer はフッター専用の leaf クラスなので、ここだけ上書き＝CTAバンド等
   他の暗色部分(#2b2723)には影響しない。詳細度を (0,2,0) にして
   .has-dark-background-color(0,1,0) に順序非依存で勝つ。 */
.site-footer.has-dark-background-color {
  background-color: #242424 !important;
}

/* ヘッダー: ロゴを中央＋その下にナビを中央（横並び両端→縦積み中央）。
   ★PC（デスクトップ・1025px以上）のみに適用。
   SP/タブレット（1024px以下）は元のまま＝ロゴ左＋ハンバーガー右上に戻すため、
   min-width:1025px で囲って限定する（ユーザー要望）。
   .site-header__inner はブロック属性で is-layout-flex(row)/justify space-between を
   持つため !important で上書きする。 */
@media (min-width: 1025px) {
  .site-header__inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .site-logo-text {
    text-align: center !important;
  }
  .site-nav .wp-block-navigation__container,
  .site-nav ul {
    justify-content: center !important;
  }
}

/* SP/タブレット（〜1024px）: ハンバーガーは右上のまま、タイトル(ロゴ)だけ中央寄せに。
   ナビ(ハンバーガー)を絶対配置で右に固定し、ロゴを中央に置く。
   PC(1025px以上)は上のブロックのままで、ここは一切影響しない（ユーザー要望）。 */
@media (max-width: 1024px) {
  /* ★ヘッダーを常時表示（スクロール追従）。ハンバーガーがいつでも押せるようにする。
     ・position:fixed で画面上部に固定。半透明＋blur で下のコンテンツが透けても読める。
     ・固定すると本文がヘッダーの下に潜り込むため、<main> の先頭に同じ高さの余白を足す。
     ・開いた全画面メニューは fixed の別レイヤー（z-index が上）なので影響しない。
     PC(1025px以上)は対象外＝一切変更なし。 */
  header.site-header,
  .wp-block-template-part > header.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100 !important;
    background: rgba(250, 247, 242, 0.94) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 8px rgba(43, 39, 35, 0.06);
  }
  /* 固定ヘッダーの高さぶん、本文を下げる（重なり防止） */
  body > .wp-site-blocks > main,
  .wp-site-blocks > main {
    padding-top: 84px !important;
  }

  .site-header__inner {
    position: relative !important;
    justify-content: center !important;
  }
  .site-logo-text {
    text-align: center !important;
  }
  /* ハンバーガーを右端・縦中央に置く。
     ★transform は使わない: transform を掛けた要素の内側では position:fixed の基準が
       画面全体ではなくその要素になるため、開いたメニュー（全画面モーダル）が
       ボタンサイズ(24px)に潰れて「押しても何も出ない」状態になる。
       代わりに top/bottom:0 + flex で縦中央に揃える（同じ見た目・副作用なし）。 */
  .site-nav {
    position: absolute !important;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex !important;
    align-items: center !important;
  }
  /* 開いた全画面メニューは、上の絶対配置・右寄せの影響を受けないよう中央に整える
     （閉じた状態のハンバーガー位置には影響しない）。
     ★ヘッダーを fixed にした結果、その内側のモーダルがヘッダーの高さ(73px)に
       収まってしまうため、inset:0 と 100dvh で明示的に全画面へ戻す。 */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    z-index: 200 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }
  /* 開いたメニューの閉じる(×)ボタンを大きく＝タップしやすく（既定 24px は小さすぎる）。
     タップ領域56px・アイコン34pxに拡大し、右上に十分な余白を確保する。 */
  .wp-block-navigation__responsive-container-close {
    width: 56px !important;
    height: 56px !important;
    top: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .wp-block-navigation__responsive-container-close svg {
    width: 34px !important;
    height: 34px !important;
  }
}

/* 作品カードの「送料無料」バッジを非表示（送料は変動するため実態と不一致）。
   バッジは各カードの最後の <p>（中に span.work-card__tag）。単語だけ消すと
   空の <p> で余白が残るため、包む <p> ごと非表示にする。ユーザー要望による削除。
   ★このルールは「バッジの <p> がカードの最後の子」であることに依存している。
     カードに要素を足すときは、必ずこの <p> より前に挿入すること
     （後ろに足すとバッジが再表示されてしまう）。 */
.work-card > p:last-child {
  display: none !important;
}

/* 作品タグ（work_tag）を一覧カードに表示。クリックで同じタグの作品一覧へ。 */
.work-card__tags {
  color: var(--wp--preset--color--text-light, #6E655A);
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.work-card__tags a {
  color: inherit;
  text-decoration: none;
}
.work-card__tags a:hover {
  text-decoration: underline;
}

/* Blog（Case Studies）カードのタイトル文字色（ユーザー要望）。.cs-card__title は
   Query Loop（投稿一覧）のタイトルに使われる leaf クラスなので、既存の投稿だけでなく
   今後追加されるブログ投稿のカードにも自動で適用される。 */
.cs-card__title {
  color: #242424 !important;
}

/* Blog（Case Studies）カード: PCの列幅・画像比率は元々 per-block css で持っていたが、
   ブロックエディタの「ブロックの復旧(Attempt Block Recovery)」で剥がれ、PCで画像が
   原寸大・カードが全幅になる事故が発生。ここに恒久ルールとして固定＝今後「復旧」しても
   崩れない（post-template グリッドを responsive.css に移したのと同じ方針）。
   PC(1025px以上)のみ。SP/タブレット(1024px以下)は既存のメディアクエリが担うため触らない。 */
@media (min-width: 1025px) {
  .cs-card {
    flex: 1 1 300px !important;
  }
  .cs-card__img img {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    height: auto !important;
  }
}

/* ===== Blog 一覧（/blog/ ・タグ/カテゴリー一覧）=====
   テンプレートは子テーマの templates/home.html / archive.html（＝FTP管理なので
   ブロックエディタの「復旧」で壊れない）。Home の静的カードと同じ見た目にするため
   .cs-card 系のクラスを再利用する。.blog-list は post-template 側の leaf クラスで、
   Home のカード（静的）には当たらない。 */
.blog-list {
  gap: var(--wp--preset--spacing--space-lg, 32px);
}
/* グリッドの各セルを flex にして、カードを行の高さいっぱいに伸ばす（高さ揃え） */
.blog-list > li {
  display: flex;
}
.blog-list .cs-card {
  width: 100%;
}
/* 一覧のタイトルはリンクになる。文字色（#242424）と下線なしを引き継ぐ */
.cs-card__title a {
  color: inherit;
  text-decoration: none;
}
.cs-card__title a:hover {
  text-decoration: underline;
}
/* カード内のタグ */
.cs-card__tags {
  color: var(--wp--preset--color--text-light, #6E655A);
}
.cs-card__tags a {
  color: inherit;
  text-decoration: none;
}
.cs-card__tags a:hover {
  text-decoration: underline;
}
/* 記事詳細ページのタグ */
.post-tags a {
  text-decoration: none;
}
.post-tags a:hover {
  text-decoration: underline;
}

/* フッターの Instagram / Rakuma リンクの文言のあとにアイコンを追加（::after＋SVGマスク）。
   currentColor で文字色に馴染む。DB/ブロックエディタに触れず、このCSSのみで完結。
   Instagram=カメラのアイコン / Rakuma=ショッピングバッグ（購入導線）のアイコン。 */
.site-footer a[href*="instagram.com"]::after,
.site-footer a[href*="fril.jp"]::after,
footer a[href*="instagram.com"]::after,
footer a[href*="fril.jp"]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 6px;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.site-footer a[href*="instagram.com"]::after,
footer a[href*="instagram.com"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.22.41.56.22.96.49 1.38.9.41.42.68.82.9 1.38.16.42.36 1.05.41 2.22.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.22-.22.56-.49.96-.9 1.38-.42.41-.82.68-1.38.9-.42.16-1.05.36-2.22.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.22-.41-.56-.22-.96-.49-1.38-.9-.41-.42-.68-.82-.9-1.38-.16-.42-.36-1.05-.41-2.22C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.22.22-.56.49-.96.9-1.38.42-.41.82-.68 1.38-.9.42-.16 1.05-.36 2.22-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.12 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.12.66.66 1.33 1.08 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.12-1.38.66-.66 1.08-1.33 1.38-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.12-.66-.66-1.33-1.08-2.12-1.38-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4zm6.41-10.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.22.41.56.22.96.49 1.38.9.41.42.68.82.9 1.38.16.42.36 1.05.41 2.22.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.22-.22.56-.49.96-.9 1.38-.42.41-.82.68-1.38.9-.42.16-1.05.36-2.22.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.22-.41-.56-.22-.96-.49-1.38-.9-.41-.42-.68-.82-.9-1.38-.16-.42-.36-1.05-.41-2.22C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.22.22-.56.49-.96.9-1.38.42-.41.82-.68 1.38-.9.42-.16 1.05-.36 2.22-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.12 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.12.66.66 1.33 1.08 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.12-1.38.66-.66 1.08-1.33 1.38-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.12-.66-.66-1.33-1.08-2.12-1.38-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4zm6.41-10.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z'/%3E%3C/svg%3E");
}
/* Rakuma は公式ロゴ（赤い R ＋スウッシュ）を色付きで表示するため、
   共有ルールの currentColor マスクを打ち消し、background-image に切り替える。
   ::after は後方の本ルールが同一詳細度で勝つので !important 不要。
   サイズは共有ルールの 1em（=14px）のまま。リンクの遷移先(fril.jp)は不変。 */
.site-footer a[href*="fril.jp"]::after,
footer a[href*="fril.jp"]::after {
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23C6272E'%3E%3Crect x='20' y='8' width='20' height='72'/%3E%3Cpath fill-rule='evenodd' d='M20 8 H58 C78 8 90 18 90 31 C90 44 78 54 58 54 H20 Z M40 22 H56 C65 22 70 26 70 31 C70 36 65 40 56 40 H40 Z'/%3E%3Cpolygon points='44,48 61,48 92,80 72,80'/%3E%3Cpolygon points='16,87 95,81 24,97'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ===== ボタン hover を Work Detail(single-work.css の .btn) と統一 =====
   他画面のブロックボタン(.wp-block-button__link)は WordPress 既定の hover
   ( :root :where(...) = 詳細度0 の暗い半透明 ) で沈むだけ＝Work Detail と別物。
   Work Detail と同じ「塗り反転」に上書きする。色はテーマプリセット
   (primary #5F617F / contrast #242424) で single-work.css と同一のブランド色。
   ブロックボタンの leaf クラスのみ対象＝フォーム送信・ナビ・フッターのテキスト
   リンクには当たらない。詳細度 (0,3,0)!important で既定 hover に確実に勝つ
   （本番で実測検証済み：①#5F617F ②白/#242424 ③#242424/白）。 */
.wp-block-button__link {
  transition: background-color .35s cubic-bezier(.25, .1, .25, 1),
              color .35s cubic-bezier(.25, .1, .25, 1),
              border-color .35s cubic-bezier(.25, .1, .25, 1) !important;
}
/* ① ゴールド(primary背景) → 濃いゴールド（.btn--gold と同じ） */
.wp-block-button__link.has-primary-background-color:hover {
  background-color: #2C2D3C !important;
  color: #fff !important;
  border-color: #2C2D3C !important;
}
/* ② アウトライン・白（暗背景のCTAカバー内、「よくあるご質問」等）
   → ③と同じ配色に統一（ユーザー要望：Instagramを見る のホバーに合わせる）。
   暗背景＋白文字（元は白背景＋濃い文字だったが反転）。 */
.wp-block-cover .wp-block-button__link.has-white-color:not(.has-background):hover {
  background-color: #242424 !important;
  color: #fff !important;
  border-color: #242424 !important;
}
/* ③ アウトライン・暗（明背景の本文）→ 暗背景＋白文字（.btn と同じ） */
.wp-block-button__link.has-contrast-color:not(.has-background):hover {
  background-color: #242424 !important;
  color: #fff !important;
  border-color: #242424 !important;
}

/* Home Instagram セクション → 全作品カルーセル（.insta-grid を insta-carousel.js が置換）。
   7件表示(PC)＋左右ボタン。項目幅はJSが画面幅/表示数で算出。 */
.insta-carousel { position: relative; }
/* 左右の端をぼんやりフェードさせる（続きがあることを示す）。マスクなので背景色に依存しない。 */
.insta-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.insta-carousel__viewport::-webkit-scrollbar { display: none; }
.insta-carousel__track { display: flex; gap: 8px; }
.insta-carousel__item { display: block; flex: 0 0 auto; }
.insta-carousel__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.insta-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.92); color: #2b2723; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); transition: opacity .2s, background .2s; }
.insta-carousel__arrow--prev { left: 4px; }
.insta-carousel__arrow--next { right: 4px; }
.insta-carousel__arrow:hover { background: #fff; }
/* 端でも押せる（末尾→先頭 / 先頭→末尾へループする）ため disabled による非表示は使わない */

/* Works一覧・トップ Pick Up の Query Loop グリッド: 各 li に flex-basis を与えて
   デスクトップ3列（モバイルは1列）にする。従来は post-template の per-block css
   （&>li{flex:1 1 300px}）で実現していたが、post-template の style.css は
   wp_update_post 保存で必ず剥がれ「縦積み退行」を繰り返していた（メモリ参照）。
   ここに恒久ルールとして移設＝再発しない。gallery(page-id-96)は独自の 220px を
   使うため対象外にしている（page限定）。measure対象(about/header/footer)に
   post-template は無いので measure 安全。
   .tax-work_tag は作品タグの一覧ページ（/work-tag/○○/）。Works と同じ3列にする。 */
.home .wp-block-post-template > li.wp-block-post,
.page-id-6 .wp-block-post-template > li.wp-block-post,
.tax-work_tag .wp-block-post-template > li.wp-block-post {
  flex: 1 1 300px !important;
  list-style: none !important;
  margin: 0 !important;
}

/* ★カードの高さ揃え（Works一覧・Home Pick Up）
   問題: post-template が align-items:center のため、商品名が2行になったカードだけ
         上下にはみ出し、画像・価格の位置が他とズレる（実測で画像が12px上にずれる）。
   対策1: 上揃え(flex-start)にして、画像の上端を全カードで揃える。
   対策2: 商品名の欄を「2行分の高さ」で確保し、1行の商品名でも高さを同じにする
         （＝価格や SOLD の位置も全カードで一直線に揃う）。
   ※ Gallery(page-id-96) は別レイアウトのため対象外。 */
.home .wp-block-post-template,
.page-id-6 .wp-block-post-template,
.tax-work_tag .wp-block-post-template {
  align-items: flex-start !important;
}
.home .work-card__title,
.page-id-6 .work-card__title,
.tax-work_tag .work-card__title {
  /* font-size:14px × line-height:1.7 × 2行 = 3.4em */
  min-height: 3.4em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 画像と商品名の間に余白（密着していたため）。padding なので上で揃えた
     整列（画像上端・価格の位置）は崩れず、全カードで同じだけ空く。 */
  padding-top: 14px !important;
  box-sizing: content-box !important;
}
/* 商品名と金額の間隔を詰める（ユーザー要望）。両者の間にはブロック内の
   空段落 <p></p> が挟まっており、その margin-top（既定 19.2px）が間隔の実体。
   タイトル直後の空段落のみを対象に縮小（金額↔送料無料など他の余白は不変）。
   Works一覧・Home Pick Up 両方の .work-card に効く。 */
.work-card__title + p:empty {
  margin-top: 6px !important;
}

/* Home の Instagram グリッド: 画像が増えても縦に伸びず、横スクロールで全枚数を見せる。
   デスクトップは6枚見え（従来の columns-6 折返しを nowrap+overflow-x に変更）。
   可視枚数は tablet=4 / mobile=2.5 に段階調整（下の @media）。gap は blockGap=8px 前提。
   .insta-grid は Home 固有クラス＝他ページ・measure対象に無影響。 */
.insta-grid.wp-block-gallery {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.insta-grid.wp-block-gallery > figure.wp-block-image {
  flex: 0 0 calc((100% - 5 * 8px) / 6) !important;
  width: calc((100% - 5 * 8px) / 6) !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* ---- タブレット以下（≤1024px）---- */
@media (max-width: 1024px) {

  /* Case Studies カード: 3列 → 2列（親のgap=32px前提で50%-16px） */
  .cs-card {
    flex: 1 1 calc(50% - 16px) !important;
  }
}

/* Instagram グリッド（横スクロール）: tablet=4枚見え */
@media (max-width: 1024px) {
  .insta-grid.wp-block-gallery > figure.wp-block-image {
    flex-basis: calc((100% - 3 * 8px) / 4) !important;
    width: calc((100% - 3 * 8px) / 4) !important;
  }
}
/* Instagram グリッド（横スクロール）: mobile=2.5枚見え（次の1枚が覗いてスクロール可能と分かる） */
@media (max-width: 600px) {
  .insta-grid.wp-block-gallery > figure.wp-block-image {
    flex-basis: calc((100% - 1.5 * 8px) / 2.5) !important;
    width: calc((100% - 1.5 * 8px) / 2.5) !important;
  }
}

/* ---- モバイル（≤781px = WPコアのcolumnsスタック境界と同じ）---- */
@media (max-width: 781px) {

  /* Case Studies カード: 1列 */
  .cs-card {
    flex-basis: 100% !important;
  }

  /* ヒーロー画像: デスクトップの600pxはモバイル1画面のほとんどを占めて圧迫感が強いので低くする */
  .hero {
    min-height: 380px !important;
  }

  /* Works一覧・Pick Up Works のカード画像: 4:5(縦長)は9枚並ぶと縦スクロールが非常に長くなるので
     1:1に近づけて一枚あたりの高さを抑える。
     figure自身に aspect-ratio:4/5 の inline style（post-featured-imageブロックの属性）が
     付くため、img側だけでなく figure(.work-card__img)側にも指定する。 */
  .work-card__img,
  .work-card__img img {
    aspect-ratio: 1 / 1 !important;
  }

  /* Case Studies・Concept・About のストーリー画像: 3:2 → 16:9 相当でやや低くする */
  .cs-card__img img,
  .concept-img img,
  .story-img img {
    aspect-ratio: 16 / 9 !important;
  }

  /* ハンバーガー展開メニュー: オリジナル仕様（アイボリー背景・中央寄せ・縦並び gap28px） */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(250, 247, 242, 0.98) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    height: 100%;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 0;
  }
  .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px;
    text-align: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open a {
    font-size: 19px !important;
    color: var(--wp--preset--color--contrast, #2b2723) !important;
  }

  /* Gallery（page-id-96）: デスクトップは flex:0 1 220px（伸びない固定幅）で最終行の間延びを防いでいるが、
     その値のままだとスマホで画像が220px中央寄せ＝両脇がスカスカになる。
     モバイルは2列（gap=16px前提で 50%-8px）にして画面幅を使い切る。grow=0のまま＝最終1点は伸びず半幅中央。
     page-id-96 限定なので Works一覧（同じ li.wp-block-post）には影響しない。 */
  body.page-id-96 .wp-block-post-template > li.wp-block-post {
    flex: 0 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  /* 各画像ラッパーは inline style="width:220px" を持つため、li幅に追従させる */
  body.page-id-96 .gallery-page__item {
    width: 100% !important;
  }
}