/* ============================================================
  CSS Custom Properties
============================================================ */
:root {
  /* Colors */
  --color-primary:     #1a3a5c;   /* Navy – 信頼感・誠実さ */
  --color-primary-lt:  #2a5a8c;
  --color-accent:      #2e7d52;   /* Green – 芝・成長・安心 */
  --color-accent-lt:   #3d9a66;
  --color-line:        #06c755;   /* LINE Brand Green */
  --color-line-dk:     #05b34c;   /* LINE ホバー */
  --color-dark:        #111827;
  --color-body:        #374151;
  --color-muted:       #6b7280;
  --color-border:      #e5e7eb;
  --color-bg:          #ffffff;
  --color-bg-light:    #f7f9f7;
  --color-bg-dark:     #0c2235;
  --color-success:     #059669;
  --color-error:       #dc2626;
  --color-error-bg:    #fef2f2;

  --color-white:       #fff;
  --color-primary-dk:  #1a4a7c;   /* CTAのグラデーション終点 */
  --color-accent-dk:   #1a4a34;   /* 緑のグラデーション終点 */

  /* 白の透明度（濃色背景の上の文字・面・線）。数字は不透明度% */
  --white-05: rgba(255, 255, 255, .05);
  --white-06: rgba(255, 255, 255, .06);
  --white-07: rgba(255, 255, 255, .07);
  --white-08: rgba(255, 255, 255, .08);
  --white-10: rgba(255, 255, 255, .1);
  --white-12: rgba(255, 255, 255, .12);
  --white-20: rgba(255, 255, 255, .2);
  --white-22: rgba(255, 255, 255, .22);
  --white-25: rgba(255, 255, 255, .25);
  --white-30: rgba(255, 255, 255, .3);
  --white-40: rgba(255, 255, 255, .4);
  --white-50: rgba(255, 255, 255, .5);
  --white-55: rgba(255, 255, 255, .55);
  --white-60: rgba(255, 255, 255, .6);
  --white-65: rgba(255, 255, 255, .65);
  --white-70: rgba(255, 255, 255, .7);
  --white-75: rgba(255, 255, 255, .75);
  --white-85: rgba(255, 255, 255, .85);
  --white-95: rgba(255, 255, 255, .95);
  /* アクセント（緑）の透明度 */
  --accent-08: rgba(46, 125, 82, .08);
  --accent-12: rgba(46, 125, 82, .12);
  --accent-18: rgba(46, 125, 82, .18);
  /* 濃紺（--color-bg-dark）の透明度 */
  --navy-55: rgba(12, 34, 53, .55);
  --navy-94: rgba(12, 34, 53, .94);
  --overlay-card:   rgba(15, 37, 64, .75);   /* 実績カードのホバー時の幕 */

  /* フォーカス表示（キーボード操作時）。濃色・淡色どちらの背景でも見える緑 */
  --focus-outline: 2px solid var(--color-accent-lt);
  --focus-offset:  3px;
  /* 入力欄のフォーカス */
  --focus-ring: 0 0 0 3px rgba(26, 58, 92, .1);

  /* Typography */
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-display: 'Oswald', sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Section padding */
  --section-py: clamp(4rem, 8vw, 7rem);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;   /* 丸いバッジ・タグ */

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-lightbox: 0 12px 48px rgba(0, 0, 0, .45);

  /* Transition */
  --transition: 0.25s ease;
  --transition-img: 0.4s ease;   /* カード画像のズーム */
  --hover-lift: -4px;            /* クリックできるカードの浮き上がり */

  /* Card typography */
  --card-title-lg: 1.125rem;     /* サービス・料金プラン */
  --card-title:    1.0625rem;    /* 制作実績・大切にしていること・制作の流れ */
  --card-text:     0.875rem;
  --card-text-lh:  1.8;

  /* Header（固定ヘッダーの高さ。下層ページの上余白・スマホメニューの位置にも使う） */
  --header-h: 64px;
  --admin-bar-h: 0px;   /* ログイン中の管理バーの高さ（.admin-bar で上書き） */

  /* Container */
  --container-max: 1100px;
  --container-px:  clamp(1.25rem, 5vw, 2.5rem);
}

/* ============================================================
  Reset & Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--color-body);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ============================================================
  Utilities
============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ============================================================
  Section Commons
============================================================ */
.section {
  padding-block: var(--section-py);
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-white);
}

.section--light {
  background: var(--color-bg-light);
}

.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}

.section--dark .section-title,
.section-header--light .section-title {
  color: var(--color-white);
}

.section-lead {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--color-muted);
}

.section--dark .section-lead,
.section-header--light .section-lead {
  color: var(--white-65);
}

/* ============================================================
  Buttons
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  /* 塗り・線のボタンで高さが揃うよう、すべてのボタンに2pxの枠を持たせる */
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-accent-lt); }

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: var(--white-50);
}
.btn--outline-light:hover {
  background: var(--white-12);
  border-color: var(--color-white);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-primary);
}
.btn--white:hover {
  background: var(--color-bg-light);
}

.btn--sm { padding: 0.625rem 1.375rem; font-size: 0.875rem; }
.btn--lg { padding: 1.125rem 2.75rem; font-size: 1.0625rem; }

/* キーボード操作時のフォーカス表示（ボタン・リンク・カードで共通） */
.btn:focus-visible,
.line-button:focus-visible,
.nav-list a:focus-visible,
.nav-toggle:focus-visible,
.site-logo:focus-visible,
.work-card__link:focus-visible,
.blog-card a:focus-visible,
.page-top:focus-visible,
.footer__nav a:focus-visible,
.hero-badge:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ============================================================
  Site Header
============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  background: var(--white-95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  text-decoration: none;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: var(--radius-sm);
}

.logo-text {
  font-size: 0.9375rem;
  color: var(--color-dark);
  letter-spacing: -.01em;
}

/* Nav */
.global-nav { display: flex; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-list a {
  display: block;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-body);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-list a:hover { color: var(--color-primary); background: var(--color-bg-light); }

.nav-cta {
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
}
.nav-cta:hover { background: var(--color-accent-lt) !important; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  margin-right: -4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: flex; }

  /* ヘッダーに backdrop-filter があるため position: fixed だとヘッダー基準になり高さが潰れる。
     ヘッダー直下に absolute で置き、高さを画面に合わせる（本番 1.0.2 で修正済みの方式） */
  .global-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem var(--container-px) 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .global-nav.is-open { transform: translateX(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0.25rem; }

  .nav-list a { padding: 0.875rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--color-border); border-radius: 0; }

  .nav-cta { margin-top: 1rem; border-bottom: none !important; border-radius: var(--radius-sm) !important; text-align: center; }
}

/* ============================================================
  Hero
============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-bg-dark);
  color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__diamond {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(60vw, 600px);
  height: auto;
  color: var(--color-accent);
}

/* Gradient overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, var(--accent-08) 0%, transparent 60%),
              linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary) 100%);
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  width: 100%;
  padding-block: clamp(3rem, 8vw, 5rem);
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.hero__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

.hero__title em {
  font-style: normal;
  color: var(--color-accent);
  position: relative;
}

/* 見出し下のサブタイトル（例: ホームページ制作 ＋ SEO対策） */
.hero__sub {
  display: inline-block;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  padding-left: 0.875rem;
  border-left: 3px solid var(--color-accent);
  margin-bottom: 1.25rem;
}

.hero__lead {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--white-75);
  margin-bottom: 2.5rem;
  line-height: 1.9;
  max-width: 52ch;
}

/* 文節の切れ目で改行する（対応ブラウザのみ。非対応でも通常どおり表示）
   「改善サポ／ート」のような単語途中の改行を防ぐ。見出し・リード文が対象 */
.hero__title,
.hero__sub,
.hero__lead,
.section-title,
.section-lead,
.service-card__title,
.work-card__title,
.gallery-card__title,
.feature-item__title,
.plan-card__name,
.flow-step__title,
.cta-banner__title,
.cta-banner__text,
.page-hero__title,
.page-hero__lead {
  word-break: auto-phrase;
}

/* 1段目に通常ボタン、2段目にLINEボタンを縦に並べる。
   width: fit-content + align-items: stretch で、
   2段目が1段目の横幅にぴったり揃う。 */
/* ボタンは何個増えても同じ大きさに揃うようにする。
   幅を固定しておき、その中で均等割り（2列）＋自動折り返し。 */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 420px);
  gap: 1rem;
}

/* 1段目・2段目とも同じ並べ方。2列で折り返す。 */
.hero__actions-row,
.hero__actions-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ボタン類は段をまたいでも同じ幅（2列ぶん）に固定する。
   gap が 1rem なので、1列あたり (100% - 1rem) / 2。
   ※ 直下の子だけに効かせる（縦並びの .hero__actions に直接当てると
      flex-basis が高さの指定になってしまうため） */
.hero__actions-row > .btn,
.hero__actions-row > .line-button,
.hero__actions-links > .btn,
.hero__actions-links > .line-button {
  flex: 0 0 calc((100% - 1rem) / 2);
  width: auto;
}

/* バッジ画像はボタンと性質が違うので、画像本来の大きさのまま並べる */
.hero__actions-links > .hero-badge,
.hero__actions-row > .hero-badge {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .hero__actions { width: 100%; }
  .hero__actions-row > .btn,
  .hero__actions-row > .line-button,
  .hero__actions-links > .btn,
  .hero__actions-links > .line-button { flex-basis: 100%; }
}

/* ボタンは1行に収める（幅を揃えたときに文字が折り返して高さがずれないように） */
.hero__actions .btn,
.hero__actions .line-button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), opacity var(--transition);
}

.hero-badge img {
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.hero-badge:hover {
  transform: translateY(-2px);
  opacity: .9;
}

@media (max-width: 480px) {
  .hero__actions { width: 100%; }
  .hero__actions-row > .btn { flex-basis: 100%; }
}

/* Score Board */
.hero__score { flex-shrink: 0; }

.score-board {
  background: var(--white-06);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  backdrop-filter: blur(8px);
  min-width: 180px;
}

.score-board__label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: .15em;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
  text-align: center;
}

.score-board__stats {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.stat-unit {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--white-55);
  margin-top: 0.25rem;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white-40);
  z-index: 1;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--white-40), transparent);
  animation: scroll-line 1.8s ease infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (max-width: 767px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__score {
    display: none;
  }

  .hero__title { font-size: clamp(1.75rem, 6vw, 2.4rem); }
}

/* ============================================================
  About
============================================================ */
.about__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.about__photo { position: relative; }

.about__photo-frame {
  aspect-ratio: 4/5;
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__badge {
  position: absolute;
  bottom: -0.75rem;
  right: -0.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 0.625rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

.about__name {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  color: var(--color-dark);
}

.about__name small {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 0.75rem;
}

.about__catch {
  font-size: 0.9375rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.about__text {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.9375rem;
  color: var(--color-body);
}

.about__text strong {
  color: var(--color-primary);
}

/* Skills */
.about__skills {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.about__skills li {
  display: grid;
  grid-template-columns: 12.5em 1fr;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}

.skill-name { font-weight: 500; color: var(--color-dark); }

.skill-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.skill-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-pill);
  transition: width 1s ease 0.3s;
}

.skill-bar span.is-animated {
  width: var(--w);
}

@media (max-width: 767px) {
  .about__inner {
    grid-template-columns: 1fr;
  }

  .about__photo {
    max-width: 260px;
    margin-inline: auto;
  }

  .about__skills li {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

/* ============================================================
  Philosophy
============================================================ */
.philosophy__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.philosophy__head .section-title {
  line-height: 1.4;
}

.philosophy__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.9375rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--color-accent);
}

@media (max-width: 767px) {
  .philosophy__inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
  Service
============================================================ */
/* サービスは今後増える前提。項目数が変わっても最終行が中央に揃うようにする。
   row-gap を広めにとっているのは「Most Popular」バッジがカード上端から
   はみ出す分の逃げ幅を確保するため。 */
.service__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2.25rem 1.25rem;
}

.service__grid > .service-card {
  flex: 1 1 280px;
  max-width: calc((100% - 2.5rem) / 3); /* 1行あたり最大3列 */
}

.service-card {
  background: var(--white-05);
  border: 1px solid var(--white-10);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}

/* サービス・特徴・料金のカードはクリックできないため、ホバーで動かさない */

.service-card--featured {
  border-color: var(--color-accent);
  background: var(--accent-12);
}

.service-card__badge {
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.service-card__icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent-lt);
}

.service-card__title {
  font-size: var(--card-title-lg);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
}

.service-card__title small {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: .75;
}

.service-card__desc {
  font-size: 0.875rem;
  color: var(--white-65);
  line-height: var(--card-text-lh);
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.service-card__list li {
  font-size: 0.8125rem;
  color: var(--white-75);
  padding-left: 1.25em;
  position: relative;
}

.service-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent-lt);
  font-weight: 700;
}

.service-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  margin-top: 0.5rem;
}

.price-from { font-size: 1rem; color: var(--white-55); }

.price-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.price-unit { font-size: 0.875rem; color: var(--white-55); margin-left: 0.25rem; }

@media (max-width: 900px) {
  .service__grid > .service-card { max-width: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 620px) {
  .service__grid > .service-card { max-width: 100%; flex-basis: 100%; }
}

/* ============================================================
  Works
============================================================ */
.works__subtitle {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.25rem;
  padding-left: 0.875rem;
  border-left: 4px solid var(--color-accent);
}

.works__grid + .works__subtitle {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.work-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.work-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--hover-lift));
}

.work-card__link { display: block; }

.work-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* アイキャッチ画像を枠にぴったり収める。
   この指定が無いと画像が元の高さのまま表示され、上部だけが見える状態になる。 */
.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.work-card:hover .work-card__thumb img { transform: scale(1.04); }

.thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.thumb-placeholder--01 { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%); }
.thumb-placeholder--02 { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); }
.thumb-placeholder--03 { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dk) 100%); }
.thumb-placeholder--04 { background: linear-gradient(135deg, #1a4040 0%, #0f2a2a 100%); }

.thumb-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--white-20);
  color: var(--color-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

.work-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity var(--transition);
}

.work-card:hover .work-card__overlay { opacity: 1; }

.work-card__body { padding: 1.25rem 1.5rem 1.5rem; }

.work-card__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.work-card__title {
  font-size: var(--card-title);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.work-card__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: var(--card-text-lh);
}

@media (max-width: 600px) {
  .works__grid { grid-template-columns: 1fr; }
}

/* ============================================================
  Works Gallery
============================================================ */
.works__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.gallery-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.gallery-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--hover-lift));
}

.gallery-card__thumb {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-bg-light);
  cursor: zoom-in;
}

.gallery-card__thumb:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* 拡大アイコン（ホバー時に表示） */
.gallery-card__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--navy-55);
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery-card__zoom svg {
  width: 34px;
  height: 34px;
}

.gallery-card:hover .gallery-card__zoom,
.gallery-card__thumb:focus-visible .gallery-card__zoom {
  opacity: 1;
}

.gallery-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.gallery-card:hover .gallery-card__thumb img {
  transform: scale(1.04);
}

.gallery-card__body {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gallery-card__title {
  font-size: var(--card-title);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.4;
}

/* クライアント別カードの制作点数 */
.gallery-card__count {
  margin-left: auto;
}

.tag {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 0.2rem 0.625rem;
  background: var(--color-bg-light);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}

.works__more {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 900px) {
  .works__gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .works__gallery { grid-template-columns: 1fr; }
}

/* ============================================================
  Feature
============================================================ */
/* 項目数が increase/decrease しても崩れないよう flex + 中央寄せ。
   最終行が半端な数になっても、余った項目が中央に揃う。 */
.feature__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 960px;
  margin-inline: auto;
}

.feature__grid > .feature-item {
  flex: 1 1 260px;
  max-width: calc((100% - 3rem) / 3); /* 1行あたり最大3列 */
}

.feature-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}

.feature-item__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.feature-item__icon {
  font-size: 2rem;
  margin-bottom: 0.875rem;
  line-height: 1;
}

.feature-item__title {
  font-size: var(--card-title);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.feature-item__text {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: var(--card-text-lh);
}

@media (max-width: 900px) {
  /* 1行あたり最大2列 */
  .feature__grid > .feature-item { max-width: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 560px) {
  /* 1列 */
  .feature__grid > .feature-item { max-width: 100%; flex-basis: 100%; }
}

/* ============================================================
  Price
============================================================ */
/* 料金プランも増減する前提。サービスと同じ考え方で組む。 */
.price__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2.25rem 1.25rem;
}

.price__grid > .plan-card {
  flex: 1 1 260px;
  max-width: calc((100% - 2.5rem) / 3); /* 1行あたり最大3列 */
}

.plan-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  position: relative;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}

.plan-card--featured {
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}

.plan-card__badge {
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0.25rem 1rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.plan-card__name {
  font-size: var(--card-title-lg);
  font-weight: 700;
  color: var(--color-dark);
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.125rem;
}

.plan-price-from { font-size: 1rem; color: var(--color-muted); }

.plan-price-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.plan-price-num--text {
  font-family: var(--font-sans);
  font-size: 1.75rem;
}

.plan-price-unit { font-size: 1rem; color: var(--color-muted); margin-left: 0.25rem; }

.plan-card__desc {
  font-size: 0.875rem;
  line-height: var(--card-text-lh);
  color: var(--color-body);
  text-align: left;
}

/* 補足（小さな注記） */
.plan-card__note {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-muted);
  text-align: left;
}

/* 内容量が違ってもボタンの位置を揃える */
.plan-card > .btn { margin-top: auto; }

/* 2枚のときは1枚あたりを広めにとる */
.price__grid > .plan-card:first-child:nth-last-child(2),
.price__grid > .plan-card:first-child:nth-last-child(2) ~ .plan-card {
  max-width: 420px;
}

.plan-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
  text-align: left;
  margin-inline: auto;
}

.plan-card__list li {
  font-size: 0.8125rem;
  color: var(--color-body);
  padding-left: 1.25em;
  position: relative;
}

.plan-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.price__note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .price__grid > .plan-card { max-width: calc((100% - 1.25rem) / 2); }
}

@media (max-width: 620px) {
  .price__grid > .plan-card,
  .price__grid > .plan-card:first-child:nth-last-child(2),
  .price__grid > .plan-card:first-child:nth-last-child(2) ~ .plan-card { max-width: 100%; flex-basis: 100%; }
}

/* ============================================================
  Flow
============================================================ */
.flow__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin-inline: auto;
  counter-reset: flow;
}

.flow-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2.5rem;
}

.flow-step:last-child { padding-bottom: 0; }

/* Connector line */
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 39px;
  width: 2px;
  height: calc(100% - 40px);
  background: linear-gradient(to bottom, var(--color-primary), var(--color-border));
  opacity: .35;
}

.flow-step__num {
  width: 80px;
  height: 56px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.flow-step__num span {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.flow-step__num small {
  font-size: 0.625rem;
  letter-spacing: .1em;
  opacity: .8;
  margin-top: 2px;
}

.flow-step:last-child .flow-step__num {
  background: var(--color-accent);
}

.flow-step__body {
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}

.flow-step__title {
  font-size: var(--card-title);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

.flow-step__text {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: var(--card-text-lh);
}

/* ---- 工程とは別の案内（公開後のSEO・集客サポートなど。任意の継続契約） ----
   工程の番号付きリストの下に、点線の枠で「制作工程とは別」と分かるように置く */
.flow__after {
  max-width: 700px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.flow-after {
  padding: 1.75rem 2rem;
  background: var(--color-bg-light);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-lg);
}

.flow-after__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-bottom: 0.75rem;
}

.flow-after__en {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-white);
  background: var(--color-accent);
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-pill);
}

.flow-after__title {
  font-size: var(--card-title);
  font-weight: 700;
  color: var(--color-dark);
}

.flow-after__price {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.flow-after__text {
  font-size: 0.9rem;
  color: var(--color-body);
  line-height: var(--card-text-lh);
}

.flow-after__note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.7;
}

@media (max-width: 600px) {
  .flow-after { padding: 1.5rem 1.25rem; }
  .flow-after__price { margin-left: 0; width: 100%; }
}

/* ============================================================
  CTA Banner
============================================================ */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '⚾';
  position: absolute;
  font-size: 18rem;
  right: -3rem;
  top: 50%;
  transform: translateY(-50%) rotate(-20deg);
  opacity: .04;
  pointer-events: none;
  line-height: 1;
}

.cta-banner__inner { position: relative; }

.cta-banner__eyebrow {
  font-size: 0.875rem;
  color: var(--color-accent-lt);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.cta-banner__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.cta-banner__text {
  font-size: 1rem;
  color: var(--white-75);
  margin-bottom: 2.25rem;
  line-height: 1.8;
}

/* ============================================================
  Contact
============================================================ */
.contact-form {
  max-width: 660px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.form-group { display: flex; flex-direction: column; gap: 0.375rem; }

.form-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.required {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-dark);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--color-error);
}

.form-textarea { resize: vertical; min-height: 140px; line-height: 1.7; }

.form-error {
  font-size: 0.8125rem;
  color: var(--color-error);
  min-height: 1.2em;
}

.form-submit { text-align: center; margin-top: 0.5rem; }

.form-notice {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-primary);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  line-height: 1.7;
}

/* Success State */
.contact-form__success {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 480px;
  margin-inline: auto;
}

.success-icon { font-size: 3rem; margin-bottom: 1rem; }

.success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
}

.success-text {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.8;
}

.contact__or {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-dark);
}

.contact__line {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
  max-width: 660px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.line-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 2.5rem;  /* .btn--lg と同じ高さ */
  background: var(--color-line);
  color: var(--color-white);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm); /* 通常ボタンと同じ角丸 */
  box-shadow: var(--shadow-md);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.line-button:hover {
  background: var(--color-line-dk);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.line-button svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* ヒーロー内で使う小さいサイズ。
   通常のボタン（.btn）と高さ・文字サイズ・角丸を揃える。
   ※ .line-button より後に置くこと（同じ詳細度なので後勝ち） */
.line-button--sm {
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;   /* .btn と同じ高さ */
  font-size: 0.9375rem;
  box-shadow: none;
}

.line-button--sm svg {
  width: 20px;
  height: 20px;
}

.line-button--sm:hover {
  box-shadow: var(--shadow-md);
}

.contact__note {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.9;
}

/* ============================================================
  Footer
============================================================ */
.site-footer {
  background: var(--color-dark);
  color: var(--white-60);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-block: 3rem;
}

.site-logo--light .logo-text { color: var(--color-white); }

.footer__tagline {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--white-40);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.footer__nav a {
  font-size: 0.875rem;
  color: var(--white-55);
  transition: color var(--transition);
}

.footer__nav a:hover { color: var(--color-white); }

.footer__bottom {
  border-top: 1px solid var(--white-08);
  padding-block: 1.25rem;
}

.footer__bottom small {
  font-size: 0.75rem;
  color: var(--white-30);
}

@media (max-width: 600px) {
  .footer__inner { flex-direction: column; }
}

/* ============================================================
  Page Top Button
============================================================ */
.page-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 800;
}

.page-top svg { width: 20px; height: 20px; }

.page-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.page-top:hover { background: var(--color-primary-lt); transform: translateY(-2px); }

/* ============================================================
  Blog — 下層ページ共通パーツ
============================================================ */
.container--narrow {
  max-width: 760px;
}

/* ---- ページヘッダー ---- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  color: var(--color-white);
  background:
    radial-gradient(ellipse at 75% 50%, var(--accent-18) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary) 100%);
}

.page-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-lt);
  margin-bottom: 0.625rem;
}

.page-hero__title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.page-hero__lead {
  font-size: 0.9375rem;
  color: var(--white-70);
}

/* ---- パンくず ---- */
.breadcrumb {
  padding-block: 0.875rem;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb--entry {
  padding-top: calc(var(--header-h) + 0.875rem);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.breadcrumb__list li + li::before {
  content: '›';
  margin-right: 0.5rem;
  color: var(--color-border);
}

.breadcrumb__list a { color: var(--color-primary); }
.breadcrumb__list a:hover { text-decoration: underline; }

.breadcrumb__list li[aria-current] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

/* ---- カテゴリー絞り込み ---- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.blog-filter__item {
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-body);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.blog-filter__item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.blog-filter__item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---- 記事一覧 ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 1.5rem;
}

.blog-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--hover-lift));
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-bg-light);
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-img);
}

.blog-card:hover .blog-card__thumb img { transform: scale(1.04); }

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem 1.5rem;
  flex-grow: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.blog-card__date {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: .04em;
  color: var(--color-muted);
}

.blog-card__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 0.15rem 0.625rem;
  color: var(--color-primary);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.blog-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-dark);
}

.blog-card:hover .blog-card__title { color: var(--color-primary); }

.blog-card__excerpt {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* アイキャッチ未設定時のプレースホルダー */
.blog-thumb-ph {
  width: 100%;
  height: 100%;
}

.blog-thumb-ph--web {
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, var(--white-07) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--white-07) 22px 23px),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
}

.blog-thumb-ph--baseball {
  background:
    repeating-linear-gradient(90deg, var(--white-06) 0 28px, transparent 28px 56px),
    linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dk) 100%);
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---- ページ送り ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ============================================================
  Blog — 記事ページ
============================================================ */
.entry {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}

.entry__header {
  margin-bottom: 1.75rem;
}

.entry__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.entry__date {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: .04em;
  color: var(--color-muted);
}

.entry__cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 0.2rem 0.75rem;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.entry__title {
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-dark);
  letter-spacing: -.01em;
}

.entry__thumb {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entry__thumb img {
  width: 100%;
  height: auto;
}

/* ---- 本文タイポグラフィ ----
   WordPress化時、the_content() の出力がこの .entry-content 内に入るため
   ここで指定した見出し・段落・リスト等のスタイルがそのまま適用されます。
------------------------------------------------------------ */
.entry-content {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--color-body);
}

.entry-content > * + * { margin-top: 1.75em; }

.entry-lead {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-dark);
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  line-height: 1.9;
}

.entry-content h2 {
  margin-top: 2.75em;
  padding-left: 0.875rem;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-dark);
  border-left: 5px solid var(--color-accent);
}

.entry-content h3 {
  margin-top: 2.25em;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-primary);
}

.entry-content h2 + *,
.entry-content h3 + * { margin-top: 1.25em; }

.entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.entry-content a:hover { color: var(--color-accent); }

.entry-content strong { font-weight: 700; color: var(--color-dark); }

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li + li { margin-top: 0.5em; }

.entry-content li::marker {
  color: var(--color-accent);
  font-weight: 700;
}

.entry-content blockquote {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-border);
  background: var(--color-bg-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-muted);
}

.entry-content blockquote > * + * { margin-top: 1em; }

.entry-content figure { margin: 2.25em 0; }

.entry-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.entry-content figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

/* ---- 記事フッター ---- */
.entry__footer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.entry-tags__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-right: 0.25rem;
}

.entry-tags .tag { transition: background var(--transition), color var(--transition); }

.entry-tags .tag:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ---- 前後の記事 ---- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition);
}

.post-nav__item:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-light);
}

.post-nav__item--next { text-align: right; }

.post-nav__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
}

.post-nav__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry__back {
  margin-top: 2.5rem;
  text-align: center;
}

@media (max-width: 600px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { text-align: left; }
}

/* ============================================================
  Lightbox
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(3.5rem, 8vw, 5rem) clamp(0.75rem, 3vw, 2rem);
  background: var(--navy-94);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  min-width: 0;
}

.lightbox__img {
  max-width: min(88vw, 1100px);
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-lightbox);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox__img.is-loaded {
  opacity: 1;
}

.lightbox__caption {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--white-85);
  text-align: center;
}

.lightbox__title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.lightbox__counter {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: .08em;
  color: var(--color-accent-lt);
}

/* 閉じる・前後ボタン */
.lightbox__close,
.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-white);
  background: var(--white-10);
  border: 1px solid var(--white-20);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--white-22);
  border-color: var(--white-50);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--color-accent-lt);
  outline-offset: 3px;
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 44px;
  height: 44px;
}

.lightbox__close svg { width: 22px; height: 22px; }

.lightbox__nav {
  width: 48px;
  height: 48px;
}

.lightbox__nav svg { width: 24px; height: 24px; }

/* 1作品だけのときは前後ボタンを出さない */
.lightbox__nav[hidden] {
  display: none;
}

/* 複数作品のときのサムネイル一覧 */
.lightbox__thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: min(88vw, 1100px);
}

.lightbox__thumbs[hidden] {
  display: none;
}

.lightbox__thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid var(--white-25);
  border-radius: var(--radius-sm);
  opacity: .55;
  transition: opacity var(--transition), border-color var(--transition);
}

.lightbox__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox__thumb:hover,
.lightbox__thumb.is-current {
  opacity: 1;
  border-color: var(--color-accent-lt);
}

.lightbox__thumb:focus-visible {
  outline: 2px solid var(--color-accent-lt);
  outline-offset: 2px;
}

/* サムネイル一覧のぶん、画像の高さを少し抑える */
.lightbox:not(.is-single) .lightbox__img {
  max-height: 64vh;
}

.lightbox__nav[disabled] {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 600px) {
  .lightbox {
    flex-wrap: wrap;
  }

  .lightbox__figure {
    order: -1;
    width: 100%;
  }

  .lightbox__img {
    max-width: 94vw;
    max-height: 62vh;
  }

  .lightbox:not(.is-single) .lightbox__img {
    max-height: 54vh;
  }

  .lightbox__thumb {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img {
    transition: none;
  }
}

/* ============================================================
  Animations / Scroll Reveal
  ※ .js-reveal は現在どのテンプレートでも使っていない（2026-10 時点）。
    今後のUI改善で使う可能性があるため残している。main.js の Scroll reveal と対。
============================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal-delay-1 { transition-delay: 0.1s; }
.js-reveal-delay-2 { transition-delay: 0.2s; }
.js-reveal-delay-3 { transition-delay: 0.3s; }

/* OSの「視差効果を減らす／アニメーションを減らす」設定に合わせて動きを止める。
   色の変化などは一瞬で切り替わり、位置・大きさの動きは無くす */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn:hover,
  .line-button:hover,
  .work-card:hover,
  .gallery-card:hover,
  .blog-card:hover,
  .page-top:hover,
  .hero-badge:hover,
  .contact-form-wrap button:not(.btn):hover,
  .contact-form-wrap input[type="submit"]:hover,
  .work-card:hover .work-card__thumb img,
  .gallery-card:hover .gallery-card__thumb img,
  .blog-card:hover .blog-card__thumb img {
    transform: none;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
  ここから下は WordPress 固有のマークアップ用
  （静的版には存在しない、WordPress が出力する要素のスタイル）
============================================================ */

/* ---- スクリーンリーダー用テキスト ---- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the_posts_pagination() の出力 ---- */
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 0.875rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pagination .page-numbers:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-light);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

.pagination .prev,
.pagination .next {
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* ---- wp_nav_menu() の出力（現在ページの強調） ---- */
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
  color: var(--color-primary);
  font-weight: 700;
}

.nav-list .nav-cta.current-menu-item > a {
  color: var(--color-white);
}

/* ---- ブロックエディターの配置クラス ---- */
.entry-content .alignwide {
  width: auto;
  max-width: calc(100% + 8vw);
  margin-inline: -4vw;
}

.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.entry-content .alignleft {
  float: left;
  margin: 0.5em 1.5em 1em 0;
  max-width: 50%;
}

.entry-content .alignright {
  float: right;
  margin: 0.5em 0 1em 1.5em;
  max-width: 50%;
}

.entry-content .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.entry-content::after {
  content: '';
  display: block;
  clear: both;
}

/* ---- ブロックエディターの各ブロック ---- */
.entry-content .wp-block-image { margin: 2.25em 0; }
.entry-content .wp-block-image img { border-radius: var(--radius-md); }

.entry-content .wp-block-image figcaption,
.entry-content .wp-caption-text {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

.entry-content .wp-block-quote {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-border);
  background: var(--color-bg-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-muted);
}

.entry-content .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--color-muted);
}

.entry-content .wp-block-table { overflow-x: auto; }

.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.entry-content .wp-block-table th {
  background: var(--color-bg-light);
  font-weight: 700;
  color: var(--color-dark);
}

.entry-content .wp-block-code,
.entry-content pre {
  padding: 1.25rem;
  background: var(--color-bg-dark);
  color: #e5e7eb;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

.entry-content :not(pre) > code {
  padding: 0.15em 0.4em;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

.entry-content .wp-block-separator {
  margin-block: 2.5em;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 2rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.entry-content .wp-block-embed { margin: 2.25em 0; }

.page-links {
  margin-top: 2rem;
  font-size: 0.875rem;
}

/* ---- 制作実績の詳細（課題／工夫／使用技術） ---- */
.works-detail {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--color-border);
}

.works-detail__row {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.works-detail__row dt {
  font-weight: 700;
  color: var(--color-primary);
}

.works-detail__row dd { color: var(--color-body); }

.works-visit {
  margin-top: 2.5rem;
  text-align: center;
}

@media (max-width: 560px) {
  .works-detail__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ---- お問い合わせフォーム（プラグイン出力を想定） ----
   Snow Monkey Forms / Contact Form 7 などプラグインを問わず整うよう、
   クラス名ではなく要素セレクタで指定しています。
------------------------------------------------------------ */
.contact-form-wrap {
  max-width: 660px;
  margin-inline: auto;
}

.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap input[type="url"],
.contact-form-wrap input[type="number"],
.contact-form-wrap input[type="date"],
.contact-form-wrap select,
.contact-form-wrap textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-dark);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.contact-form-wrap textarea {
  min-height: 140px;
  line-height: 1.7;
  resize: vertical;
}

.contact-form-wrap label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-dark);
}

/* プラグインのフォーム用。テーマ内蔵フォームのボタン（.btn）は通常のボタン設定に従う */
.contact-form-wrap button:not(.btn),
.contact-form-wrap input[type="submit"],
.contact-form-wrap input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2.75rem;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.contact-form-wrap button:not(.btn):hover,
.contact-form-wrap input[type="submit"]:hover {
  background: var(--color-accent-lt);
  transform: translateY(-2px);
}

/* 送信ボタンを中央に寄せる（プラグイン共通の親要素を想定） */
.contact-form-wrap .smf-action,
.contact-form-wrap .wpcf7-form .form-submit {
  margin-top: 1.5rem;
  text-align: center;
}

/* フォームが無くLINEだけの場合は区切り線を出さない */
.contact__line--only {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---- ハニーポット（スパム対策・人には見えない項目） ---- */
.you23-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 検索フォーム ---- */
.search-form-wrap {
  max-width: 480px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.search-form-wrap form {
  display: flex;
  gap: 0.5rem;
}

.search-form-wrap label { flex: 1 1 auto; }

.search-form-wrap input[type="search"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
}

.search-form-wrap input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.search-form-wrap input[type="submit"] {
  padding: 0 1.5rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* ---- 記事が無いとき ---- */
.no-posts {
  padding: 3rem 0;
  text-align: center;
  color: var(--color-muted);
}

/* ---- 管理バーが出ているときの固定ヘッダー位置調整 ---- */
/* 管理バーの高さは WordPress 本体に合わせる（PC 32px / 782px以下 46px） */
.admin-bar { --admin-bar-h: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar { --admin-bar-h: 46px; }
}

.admin-bar .site-header { top: var(--admin-bar-h); }
@media (max-width: 767px) {
  .admin-bar .global-nav { height: calc(100dvh - var(--header-h) - var(--admin-bar-h)); } /* スマホメニューの高さ */
}
.admin-bar .page-hero { padding-top: calc(var(--header-h) + var(--admin-bar-h) + clamp(2.5rem, 6vw, 4rem)); }
.admin-bar .breadcrumb--entry { padding-top: calc(var(--header-h) + var(--admin-bar-h) + 0.875rem); }