/**
 * main.css
 * 中原ポートフォリオ — 完全スタイルシート（単体動作版）
 *
 * ■ このファイルについて
 *   style.css はWordPressテーマ認識用のヘッダーコメントを持つ必須ファイルですが、
 *   実際のスタイルはこの main.css に集約しています。
 *   style.css に @import で読み込むか、functions.php で別途enqueueしてください。
 *
 * ■ functions.php への追記（nakahara_enqueue_assets内）:
 *   wp_enqueue_style(
 *     'nakahara-main',
 *     NAKAHARA_THEME_URI . '/css/main.css',
 *     array( 'nakahara-style' ),
 *     NAKAHARA_VERSION
 *   );
 *
 * ■ ファイル配置:
 *   nakahara-portfolio/
 *     css/
 *       main.css   ← このファイル
 *     js/
 *       gsap-animation.js
 *       main.js
 *     style.css
 *     functions.php
 *
 * @package nakahara-portfolio
 * @version 1.0.0
 */

/* ============================================================
   GOOGLE FONTS
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;700&display=swap");

/* ============================================================
   CSS カスタムプロパティ（デザイントークン）
============================================================ */
:root {
  /* ---- カラーパレット ---- */
  --ink: #0d1117;
  --ink-mid: #1e2a35;
  --white: #ffffff;
  --off: #f7f6f3;
  --cream: #f0ede6;
  --paper: #f5f5f5;
  --stone: #6b7a8d;
  --blue: #1565c0;
  --blue-mid: #1976d2;
  --blue-light: #42a5f5;
  --blue-pale: #e3f2fd;
  --blue-dark: #0a1e3c;
  --gold: #c8991a;
  --gold-light: #f5c842;
  --accent: #e85d04;
  --muted: #6b7a8d;
  --border: #dde3ea;

  /* ---- タイポグラフィ ---- */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Noto Sans JP", sans-serif;

  /* ---- スペーシング ---- */
  --section-py: 130px;
  --section-px: 100px;
  --nav-h: 76px;

  /* ---- トランジション ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  overflow-y: visible;
  line-height: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul,
ol {
  list-style: none;
}

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

input,
textarea,
select {
  font-family: inherit;
}

/* ============================================================
   LOADING SCREEN
============================================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
}

.loader-logo {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0);
  white-space: nowrap;
  transition: color 0.8s ease;
}

.loader-bar-wrap {
  width: 200px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.loader-bar {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   NAVIGATION
============================================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: var(--nav-h);
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#site-header.scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

/* ---- ロゴ ---- */
.nav-logo {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
  flex-shrink: 1;
  flex-basis: auto;
  min-width: 0;
  max-width: 46vw;
  overflow: hidden;
}

.nav-logo small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-family: var(--font-sans);
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- ナビ右エリア ---- */
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  flex-shrink: 0;
}

/* ---- メニューリンク ---- */
.nav-links {
  display: flex;
  gap: clamp(14px, 2vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.nav-links a {
  font-family: var(--font-serif);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  text-decoration: none;
  font-weight: 700;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}

.nav-links a:hover {
  color: var(--blue);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* ---- CTAボタン ---- */
.nav-cta {
  font-family: var(--font-serif);
  padding: 11px 26px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-cta:hover {
  background: var(--blue);
}

/* WordPress管理バー対応 */
.admin-bar #site-header {
  top: 32px;
}

.admin-bar .hero-scroll {
  bottom: 40px;
}

/* ============================================================
   HERO — フルスクリーン・3枚スライド
============================================================ */
#top {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: 0;
}

/* スライドラッパー */
.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease, transform 8s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* 3枚スライド写真 */
.slide-1 {
  background-image: url("https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=1920&q=90&auto=format&fit=crop");
}

.slide-2 {
  background-image: url("https://images.unsplash.com/photo-1561070791-2526d30994b5?w=1920&q=90&auto=format&fit=crop");
}

.slide-3 {
  background-image: url("https://images.unsplash.com/photo-1572044162444-ad60f128bdea?w=1920&q=90&auto=format&fit=crop");
}

/* オーバーレイ */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(5, 10, 20, 0.25) 0%,
    rgba(10, 30, 60, 0.15) 45%,
    rgba(5, 20, 45, 0.05) 100%
  );
}

.hero-line-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top right,
    rgba(21, 101, 192, 0.22) 0%,
    transparent 60%
  );
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ドットナビ */
.hero-dots {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.4s;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.hero-dot.active {
  background: var(--white);
  transform: scale(1.5);
}

/* メインコンテンツ */
.hero-body {
  position: relative;
  z-index: 5;
  padding: 0 0 0 var(--section-px);
  max-width: 860px;
}

/* タグライン */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateX(-20px);
}

.hero-tag::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold-light);
  flex-shrink: 0;
}

/* タイトル */
.hero-h1 {
  font-family: var(--font-serif);
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  letter-spacing: 0.04em;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

/* テキストマスク */
.hero-h1 .line {
  display: block;
  overflow: hidden;
}

.hero-h1 .line span {
  display: block;
  opacity: 0;
  transform: translateY(108%);
}

/* グラデーションテキスト */
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #f5c842, #ffb703);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 区切りライン */
.hero-rule {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light), transparent);
  margin: 40px 0;
  opacity: 0;
}

/* リードコピー */
.hero-lead {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 2;
  font-weight: 300;
  max-width: 500px;
  opacity: 0;
  transform: translateY(18px);
}

/* CTAボタン群 */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  opacity: 0;
  transform: translateY(18px);
}

/* プライマリボタン */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-serif);
  transition: all 0.35s;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.25);
}

.btn-primary:hover {
  background: var(--gold-light);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* ゴーストボタン */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 3px;
  transition: all 0.3s;
}

.btn-ghost:hover {
  color: var(--white);
  border-color: var(--white);
}

/* スクロールインジケーター */
.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: var(--section-px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
}

.scroll-line {
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  animation: scrollRun 2.2s ease-in-out infinite;
}

@keyframes scrollRun {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* スライドカウンター */
.hero-counter {
  position: absolute;
  left: 52px;
  bottom: 44px;
  z-index: 10;
  font-family: var(--font-serif);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.12em;
  opacity: 0;
}

.hero-counter .cur {
  font-size: 22px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  margin-right: 6px;
}

/* ============================================================
   SECTION 共通
============================================================ */
.section-kicker {
  font-size: 11px;
  letter-spacing: 0.4em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--blue);
}

.section-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--blue);
  flex-shrink: 0;
}

/* ダーク背景のキッカー */
.section-kicker--light {
  color: var(--blue-light);
}

.section-kicker--light::before {
  background: var(--blue-light);
}

.section-kicker--gold {
  color: var(--gold-light);
}

.section-kicker--gold::before {
  background: var(--gold-light);
}

.section-h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 10px;
}

.section-h2--white {
  color: var(--white);
}

.section-sub {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 52px;
}

/* ============================================================
   ABOUT
============================================================ */
#about {
  padding: var(--section-py) var(--section-px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
  align-items: center;
  background: var(--white);
}

.about-h2 {
  color: var(--ink);
  margin-bottom: 36px;
}

.about-h2 em {
  font-style: normal;
  color: var(--blue);
}

.about-text {
  font-size: 16px;
  line-height: 2.3;
  color: #4a5568;
  font-weight: 300;
  margin-bottom: 44px;
}

.about-text strong {
  color: var(--ink);
  font-weight: 700;
}

/* バッジ */
.about-badges {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
}

.about-badge-item {
  flex: 1;
  padding: 22px 18px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.about-badge-item:last-child {
  border-right: none;
}

.badge-val {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.badge-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
}

/* プロフィール写真 (4:3 = 800×600) */
.about-photo {
  position: relative;
}

.about-photo-bg {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  display: block;
  /* デフォルト画像（front-page.php のインラインstyleで上書きされます） */
  background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=900&q=90&auto=format&fit=crop");
}

.about-photo-bg img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.about-photo-frame {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80%;
  height: 80%;
  border: 2px solid var(--blue-pale);
  z-index: -1;
  pointer-events: none;
}

.about-photo-tag {
  position: absolute;
  bottom: 20px;
  left: -1px;
  background: var(--blue);
  color: var(--white);
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.about-photo-tag strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

/* ============================================================
   SERVICE
============================================================ */
#service {
  padding: var(--section-py) var(--section-px);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.service-bg-num {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 300px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.02);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.05em;
}

.service-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}

/* サービスカードをリンク化した場合のスタイル補正 */
a.service-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.service-card:hover .sc-arrow {
  opacity: 1 !important;
}

/* サービスセクション見出し（ダーク背景のため白に上書き） */
#service .section-h2,
#service .service-h2 {
  color: var(--white);
}

.service-desc {
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  align-self: end;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.service-card {
  background: var(--ink);
  padding: 44px 32px 36px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.4s;
}

.service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-out);
}

.service-card:hover {
  background: rgba(21, 101, 192, 0.12);
}

.service-card:hover::before {
  transform: scaleY(1);
}

.service-card:hover .sc-num {
  color: rgba(255, 255, 255, 0.25);
}

.service-card:hover .sc-name {
  color: var(--white);
}

.sc-num {
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--blue-light);
  letter-spacing: 0.15em;
  margin-bottom: 28px;
  display: block;
  transition: color 0.4s;
}

.sc-icon {
  font-size: 32px;
  margin-bottom: 20px;
  display: block;
  line-height: 1;
}

.sc-name {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  transition: color 0.4s;
  line-height: 1.6;
}

.sc-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
  line-height: 1.7;
  font-weight: 300;
}

/* CTAカード（8枚目） */
.service-card.cta-card {
  background: var(--blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.service-card.cta-card::before {
  display: none;
}

.service-card.cta-card:hover {
  background: var(--blue-mid);
}

.cta-card-txt {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.cta-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   WORKS — モザイクグリッド
============================================================ */
#works {
  padding: var(--section-py) var(--section-px);
  background: var(--off);
}

.works-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 72px;
}

.works-link {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid var(--blue);
  padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
  align-self: end;
}

.works-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 12カラムモザイク */
.works-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}

.wc:nth-child(1) {
  grid-column: 1/8;
  grid-row: 1/3;
}

.wc:nth-child(2) {
  grid-column: 8/13;
  grid-row: 1/2;
}

.wc:nth-child(3) {
  grid-column: 8/10;
  grid-row: 2/3;
}

.wc:nth-child(4) {
  grid-column: 10/13;
  grid-row: 2/3;
}

.wc:nth-child(5) {
  grid-column: 1/5;
  grid-row: 3/4;
}

.wc:nth-child(6) {
  grid-column: 5/9;
  grid-row: 3/4;
}

.wc:nth-child(7) {
  grid-column: 9/13;
  grid-row: 3/4;
}

.wc {
  position: relative;
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}

.wc-img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: block;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wc:nth-child(1) .wc-img {
  min-height: 460px;
}

.wc:nth-child(2) .wc-img {
  min-height: 220px;
}

/* ホバーオーバーレイ */
.wc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 10, 20, 0.88) 0%,
    rgba(5, 10, 20, 0.1) 55%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.45s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 24px;
  text-decoration: none;
}

.wc:hover .wc-overlay {
  opacity: 1;
}

.wc-tag {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.wc-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.wc-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.4s;
}

.wc:hover .wc-arrow {
  opacity: 1;
  transform: translateY(0);
}

.wc-label {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--white);
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-weight: 700;
  border-bottom-right-radius: 2px;
}

/* ============================================================
   CTA BANNER
============================================================ */
#cta-banner {
  padding: 90px var(--section-px);
  background: linear-gradient(120deg, var(--ink) 0%, #0d2244 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  position: relative;
  overflow: hidden;
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  background: url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80&auto=format&fit=crop")
    center/cover;
  opacity: 0.08;
}

.cta-banner-text {
  position: relative;
  z-index: 2;
}

.cta-banner-label {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold-light);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cta-banner-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-light);
  flex-shrink: 0;
}

.cta-banner-h {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.cta-banner-action {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.btn-cta-lg {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 52px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.35s;
}

.btn-cta-lg:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   CONTACT
============================================================ */
#contact {
  padding: var(--section-py) var(--section-px);
  background: var(--white);
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.contact-h2 {
  color: var(--ink);
  margin-bottom: 10px;
}

.contact-sub {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 40px;
}

.contact-body {
  font-size: 15px;
  line-height: 2.2;
  color: #4a5568;
  font-weight: 300;
  margin-bottom: 44px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.ci {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.ci-key {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--blue);
  font-weight: 700;
}

.ci-val {
  font-size: 14px;
  color: var(--ink-mid);
  font-weight: 400;
}

/* フォームラッパー */
.contact-form {
  background: var(--off);
  padding: 52px 48px;
}

.cf-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.cf-field {
  margin-bottom: 24px;
}

.cf-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 8px;
}

/* フォーム入力共通 */
.cf-field input,
.cf-field textarea,
.cf-field select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.3s;
  line-height: 1.6;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.cf-field input:focus,
.cf-field textarea:focus,
.cf-field select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--blue);
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: #bbb;
}

.cf-field textarea,
.wpcf7-form textarea {
  min-height: 120px;
  resize: none;
}

.cf-field select {
  cursor: pointer;
}

/* 送信ボタン */
.cf-submit,
.wpcf7-form input[type="submit"] {
  width: 100%;
  padding: 18px;
  background: var(--ink);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.25em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.35s;
  margin-top: 8px;
}

.cf-submit:hover,
.wpcf7-form input[type="submit"]:hover {
  background: var(--blue);
}

/* CF7 バリデーション */
.wpcf7-not-valid-tip {
  font-size: 12px;
  color: #e53e3e;
  margin-top: 4px;
  display: block;
  letter-spacing: 0.05em;
}

.wpcf7-response-output {
  margin-top: 20px;
  padding: 12px 18px;
  font-size: 13px;
  border: 1px solid var(--border);
  letter-spacing: 0.05em;
}

/* ============================================================
   FOOTER
============================================================ */
#site-footer {
  background: var(--ink);
  padding: 60px var(--section-px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--white);
}

.footer-logo span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 300;
}

.footer-right {
  text-align: right;
}

.footer-nav {
  list-style: none;
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
  justify-content: flex-end;
  padding: 0;
}

.footer-nav a {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.3s;
  font-weight: 500;
}

.footer-nav a:hover {
  color: var(--blue-light);
}

.footer-copy {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.2);
}

/* ページトップボタン */
#page-top {
  position: fixed;
  bottom: 36px;
  right: 36px;
  z-index: 150;
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.4s, background 0.3s, transform 0.4s;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#page-top:hover {
  background: var(--blue);
  transform: translateY(0) translateY(-3px);
}

/* ============================================================
   SCROLL REVEAL アニメーション
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.on {
  opacity: 1;
  transform: translateY(0);
}

.reveal-l {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal-l.on {
  opacity: 1;
  transform: translateX(0);
}

.reveal-r {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal-r.on {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   ページヒーロー（各固定ページ共通）
============================================================ */
.page-hero {
  margin-top: var(--nav-h);
  padding: 90px var(--section-px) 80px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(21, 101, 192, 0.4),
    transparent
  );
}

.page-hero-deco {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 260px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.025);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
}

.page-hero-kicker {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold-light);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.page-hero-kicker::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold-light);
  flex-shrink: 0;
}

.page-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5.5vw, 66px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.22;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.page-hero-lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  line-height: 2;
  max-width: 520px;
}

/* パンくずリスト */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 28px;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
}

.breadcrumb-current {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   SINGLE WORKS
============================================================ */
.works-single-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: var(--nav-h);
}

.works-single-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px var(--section-px);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: start;
}

.works-single-content {
  font-size: 16px;
  line-height: 2.3;
  color: #4a5568;
  font-weight: 300;
  margin-bottom: 72px;
}

.works-single-content h2,
.works-single-content h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  margin: 40px 0 16px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.works-single-content h2 {
  font-size: 24px;
  font-weight: 700;
}

.works-single-content h3 {
  font-size: 20px;
  font-weight: 700;
}

.works-single-content p {
  margin-bottom: 20px;
}

.works-single-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.works-single-content strong {
  color: var(--ink);
  font-weight: 700;
}

.works-single-content ul {
  list-style: disc;
  margin: 16px 0 20px 1.5em;
}

.works-single-content ol {
  list-style: decimal;
  margin: 16px 0 20px 1.5em;
}

.works-single-content li {
  margin-bottom: 6px;
  line-height: 2;
}

/* ギャラリー */
.works-gallery {
  margin-bottom: 72px;
}

.works-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.works-gallery-item {
  overflow: hidden;
  background: var(--off);
}

.works-gallery-item img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.works-gallery-item img:hover {
  transform: scale(1.04);
}

/* サイドバー */
.works-single-sidebar {
  position: sticky;
  top: 100px;
}

.works-info-card {
  background: var(--off);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.works-info-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: start;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.works-info-key {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
  padding-top: 2px;
}

.works-info-val {
  font-size: 14px;
  color: var(--ink-mid);
  font-weight: 400;
  line-height: 1.7;
}

/* 前後ナビ */
.works-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}

.works-pager-link {
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  background: var(--off);
  text-decoration: none;
  transition: background 0.3s;
  border: 1px solid var(--border);
}

.works-pager-link:hover {
  background: var(--blue);
}

.works-pager-link:hover .works-pager-label,
.works-pager-link:hover .works-pager-title {
  color: rgba(255, 255, 255, 0.9);
}

.works-pager-link--next {
  align-items: flex-end;
}

.works-pager-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
  transition: color 0.3s;
}

.works-pager-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: color 0.3s;
}

.works-pager-link--next .works-pager-title {
  text-align: right;
}

/* 関連実績 */
.works-related {
  padding: 90px var(--section-px);
  background: var(--off);
  border-top: 1px solid var(--border);
}

.works-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--border);
}

.works-related-card {
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.works-related-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--blue-pale);
}

.works-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.works-related-card:hover .works-related-thumb img {
  transform: scale(1.05);
}

.works-related-body {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

.works-related-cat {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.works-related-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: color 0.3s;
  text-decoration: none;
  display: block;
}

.works-related-card:hover .works-related-title {
  color: var(--blue);
}

/* ============================================================
   ARCHIVE / PAGE-WORKS
============================================================ */
.works-filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--section-px);
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.works-filter-tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}

.works-filter-tabs::-webkit-scrollbar {
  display: none;
}

.works-filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 20px 22px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 400;
}

.works-filter-tab:hover {
  color: var(--ink);
}

.works-filter-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 700;
}

.archive-card {
  background: var(--white);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.archive-card-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--blue-pale);
}

.archive-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.archive-card:hover .archive-card-thumb img {
  transform: scale(1.05);
}

.archive-card-label {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--white);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-weight: 700;
}

.archive-card-body {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border);
}

.archive-card-cat {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.archive-card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: color 0.3s;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.archive-card-title:hover {
  color: var(--blue);
}

.archive-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   PAGE-ABOUT 固有
============================================================ */
.skill-bar-wrap {
  height: 3px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.skill-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  width: 0;
}

.career-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  position: relative;
}

.career-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 72px;
  bottom: -32px;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.philosophy-card {
  background: var(--white);
  padding: 52px 44px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
  cursor: default;
}

.philosophy-card:hover {
  background: var(--ink);
}

.philosophy-card:hover .philosophy-title {
  color: var(--white);
}

.philosophy-card:hover .philosophy-body {
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   PAGE-SERVICE 固有
============================================================ */
.service-lead {
  font-size: 16px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin: 24px 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--blue);
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.flow-card {
  background: var(--ink);
  padding: 40px 28px;
  position: relative;
  transition: background 0.4s;
}

.flow-card:hover {
  background: rgba(21, 101, 192, 0.12);
}

.flow-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgba(255, 255, 255, 0.07);
  z-index: 2;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
}

.faq-item {
  background: var(--white);
  cursor: pointer;
}

.faq-item summary {
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  list-style: none;
  transition: background 0.3s;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: var(--off);
}

/* ============================================================
   PAGE-CONTACT 固有
============================================================ */
.contact-form-card {
  background: var(--off);
  border: 1px solid var(--border);
}

.contact-form-card-head {
  background: var(--ink);
  padding: 28px 44px;
}

.contact-form-card-body {
  padding: 44px 44px 48px;
}

.cf-input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.3s;
  line-height: 1.6;
  appearance: none;
  border-radius: 0;
}

.cf-input:focus {
  border-color: var(--blue);
}

.cf-input::placeholder {
  color: #bbb;
}

.cf-textarea {
  min-height: 140px;
  resize: vertical;
}

.cf-btn {
  width: 100%;
  padding: 20px;
  background: var(--ink);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.25em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.35s, transform 0.2s;
}

.cf-btn:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

/* ============================================================
   INDEX.PHP ブログ一覧
============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  margin-bottom: 72px;
}

.blog-card {
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.blog-card-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--blue-pale);
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.05);
}

.blog-card-body {
  padding: 24px 28px 28px;
  border-top: 1px solid var(--border);
}

.blog-card-cat {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.blog-card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.6;
  display: block;
  transition: color 0.3s;
  text-decoration: none;
  margin-bottom: 10px;
}

.blog-card-title:hover {
  color: var(--blue);
}

.blog-card-date {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: block;
}

/* ============================================================
   WORDPRESS 固有リセット
============================================================ */
.aligncenter {
  margin: 0 auto;
  display: block;
}

.alignleft {
  float: left;
  margin-right: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
  justify-content: center;
  width: 100%;
  font-family: var(--font-serif);
}

.page-numbers a,
.page-numbers span {
  padding: 10px 16px;
  border: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.3s;
}

.page-numbers .current,
.page-numbers a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ============================================================
   ユーティリティ
============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-serif {
  font-family: var(--font-serif);
}

.section-head-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}

.section-head-auto {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 64px;
}

/* ============================================================
   ハンバーガーメニュー（全レスポンシブ共通パーツ）
   杉田建設サイト完全準拠
============================================================ */
/* ハンバーガーボタン本体（デフォルト非表示） */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 500; /* ドロワー(300)・オーバーレイ(250)より上 */
  position: relative;
  flex-shrink: 0;
}

/* 3本線：常にインク色（黒）固定 */
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  transform-origin: center;
}

/* スクロール後も黒のまま（上書き不要だが明示） */
#site-header.scrolled .nav-hamburger span,
#site-header.is-scrolled .nav-hamburger span {
  background: var(--ink);
}

/* is-open 状態（✕ アイコン）
   gap:6px + 線高さ1px → 隣接線の中心間距離 = 7px
   1本目を +7px、3本目を -7px 移動させて中心で交差 */
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* is-open 中も黒固定 */
.nav-hamburger.is-open span {
  background: var(--ink) !important;
}

/* ドロワーメニュー（杉田建設スタイル：右からスライドイン） */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 300;
  width: 280px;
  height: 100%;
  background: var(--ink);
  padding: 100px 40px 40px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}

/* ドロワー開放状態：右からスライドイン */
.nav-drawer.is-open {
  transform: translateX(0);
}

/* ドロワー内 ナビリンク */
.nav-drawer-link {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.3s;
}

.nav-drawer-link:hover {
  color: var(--gold-light);
}

/* ドロワー内 CTAボタン */
.nav-drawer-cta {
  margin-top: 32px;
  padding: 14px 24px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-align: center;
  display: block;
  transition: background 0.3s;
}

.nav-drawer-cta:hover {
  background: var(--blue-mid);
}

/* オーバーレイ */
#drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

/* .is-checked で表示（杉田建設スタイルと完全一致） */
#drawer-overlay.is-checked {
  opacity: 1;
  pointer-events: auto;
}

/* ドロワー開放時 body スクロール禁止 */
body.drawer-open {
  overflow: hidden;
}

/* ============================================================
   レスポンシブ — 小さめPC（1280px 以下）
============================================================ */
@media (max-width: 1280px) {
  :root {
    --section-px: 80px;
  }
  #site-header {
    padding: 0 48px;
  }
  .hero-body {
    padding-left: 80px;
  }
  .hero-scroll {
    left: 80px;
  }
  .hero-counter {
    left: 48px;
  }
  .works-single-wrap {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* ============================================================
   レスポンシブ — タブレット横（1024px 以下）
============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-py: 90px;
    --section-px: 52px;
    --nav-h: 68px;
  }

  /* ---- ナビ ---- */
  #site-header {
    padding: 0 40px;
    height: 68px;
  }
  .nav-links {
    display: none;
  } /* PCメニュー非表示（タブレットからハンバーガー化） */
  .nav-cta {
    display: none;
  } /* CTAボタン非表示（ドロワー内に移動） */
  .nav-right {
    gap: 16px;
  }
  .nav-hamburger {
    display: flex;
  } /* ハンバーガー表示 */

  /* ---- ヒーロー ---- */
  .hero-body {
    padding-left: 52px;
    max-width: 680px;
  }
  .hero-scroll {
    left: 52px;
  }
  .hero-counter {
    left: 40px;
  }
  .hero-dots {
    right: 32px;
  }

  /* ---- About ---- */
  #about {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 90px 52px;
  }

  /* ---- Service ---- */
  #service {
    padding: 90px 52px;
  }
  .service-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 52px;
  }
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ---- Works ---- */
  #works {
    padding: 90px 52px;
  }
  /* モザイク → 3列均等グリッドに切替 */
  .works-mosaic {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .works-mosaic .wc {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .works-mosaic .wc .wc-img {
    min-height: 220px !important;
  }
  .works-mosaic .wc:nth-child(1) .wc-img {
    min-height: 260px !important;
  }

  /* ---- CTA Banner ---- */
  #cta-banner {
    padding: 72px 52px;
    gap: 40px;
  }

  /* ---- Contact ---- */
  #contact {
    padding: 90px 52px;
  }
  .contact-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 52px;
  }
  .contact-form {
    padding: 40px 36px;
  }

  /* ---- Footer ---- */
  #site-footer {
    padding: 52px 40px;
  }
  .footer-nav {
    gap: 24px;
  }

  /* ---- single-works ---- */
  .works-single-wrap {
    grid-template-columns: 1fr 280px;
    gap: 52px;
    padding: 80px 52px;
  }
  .works-single-sidebar {
    top: 88px;
  }
  .works-related {
    padding: 80px 52px;
  }
  .works-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ---- page-works filter ---- */
  .works-filter-bar {
    padding: 0 52px;
    top: 68px;
  }

  /* ---- flow ---- */
  .flow-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .flow-card:nth-child(4)::after,
  .flow-card:nth-child(5)::after {
    display: none;
  }

  /* ---- faq ---- */
  .faq-grid {
    grid-template-columns: 1fr;
  }

  /* ---- section heads ---- */
  .section-head-2col {
    gap: 40px;
  }
}

/* ============================================================
   レスポンシブ — タブレット縦（768px 以下）
============================================================ */
@media (max-width: 768px) {
  :root {
    --section-py: 72px;
    --section-px: 32px;
    --nav-h: 64px;
  }

  /* ---- ナビ（1024px以下のハンバーガー化を引き継ぎ、サイズのみ調整） ---- */
  #site-header {
    padding: 0 28px;
    height: 64px;
  }
  .nav-right {
    gap: 12px;
  }

  /* ---- ヒーロー ---- */
  #top {
    height: 100svh;
    min-height: 600px;
  }
  .hero-body {
    padding: 0 32px;
    max-width: 100%;
  }
  .hero-scroll {
    left: 32px;
    bottom: 28px;
  }
  .hero-counter {
    left: 28px;
    bottom: 72px;
    font-size: 10px;
  }
  .hero-counter .cur {
    font-size: 18px;
  }
  .hero-dots {
    right: 18px;
    gap: 10px;
  }
  .hero-lead {
    font-size: 15px;
    max-width: 100%;
  }

  /* ---- About ---- */
  #about {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 32px;
  }
  .about-photo {
    order: -1;
    padding-bottom: 0;
    padding-right: 0;
  } /* 上に移動 */
  .about-photo-frame {
    display: none;
  }
  .about-photo-tag {
    left: 0;
    bottom: 0;
  }
  .about-badges {
    flex-wrap: nowrap;
  }

  /* ---- Service ---- */
  #service {
    padding: 72px 32px;
  }
  .service-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-card {
    padding: 32px 24px 28px;
  }
  .sc-icon {
    font-size: 28px;
    margin-bottom: 14px;
  }
  .sc-name {
    font-size: 15px;
  }

  /* ---- Works ---- */
  #works {
    padding: 72px 32px;
  }
  .works-head {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 40px;
  }
  .works-link {
    font-size: 12px;
    align-self: flex-start;
  }
  .works-mosaic {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 4px !important;
  }
  .works-mosaic .wc {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .works-mosaic .wc .wc-img {
    min-height: 180px !important;
  }

  /* ---- CTA Banner ---- */
  #cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 32px;
    gap: 32px;
    text-align: left;
  }
  .cta-banner-label {
    justify-content: flex-start;
  }
  .cta-banner-action {
    width: 100%;
  }
  .btn-cta-lg {
    width: 100%;
    justify-content: center;
    padding: 18px 32px;
  }

  /* ---- Contact ---- */
  #contact {
    padding: 72px 32px;
  }
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .contact-form {
    padding: 36px 28px;
  }
  .cf-title {
    font-size: 17px;
    margin-bottom: 28px;
  }

  /* ---- Footer ---- */
  #site-footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 28px;
    text-align: center;
  }
  .footer-right {
    text-align: center;
  }
  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* ---- ページトップボタン ---- */
  #page-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  /* ---- ページヒーロー ---- */
  .page-hero {
    padding: 72px 32px 60px;
    margin-top: 64px;
  }
  .page-hero-deco {
    font-size: 140px;
    right: -10px;
  }
  .page-hero-title {
    font-size: clamp(28px, 7vw, 44px);
    margin-bottom: 16px;
  }
  .page-hero-lead {
    font-size: 14px;
    max-width: 100%;
  }

  /* ---- single-works ---- */
  .works-single-hero {
    height: 50vh;
    min-height: 300px;
  }
  .works-single-wrap {
    grid-template-columns: 1fr;
    padding: 60px 32px;
    gap: 40px;
  }
  .works-single-sidebar {
    position: static;
  }
  .works-gallery-grid {
    grid-template-columns: 1fr;
  }
  .works-pager {
    grid-template-columns: 1fr;
  }
  .works-pager-link {
    padding: 20px 24px;
  }
  .works-pager-link--next {
    align-items: flex-start;
  }
  .works-pager-link--next .works-pager-title {
    text-align: left;
  }
  .works-related {
    padding: 60px 32px;
  }
  .works-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- page-works フィルター ---- */
  .works-filter-bar {
    padding: 0 32px;
    top: 64px;
  }
  .works-filter-tab {
    padding: 16px 16px;
    font-size: 12px;
  }

  /* ---- flow ---- */
  .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow-card::after {
    display: none;
  }
  .flow-card {
    padding: 32px 24px;
  }

  /* ---- faq ---- */
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .faq-item summary {
    padding: 22px 24px;
  }
  .faq-answer {
    padding: 0 24px 24px;
    padding-top: 16px;
  }

  /* ---- blog grid ---- */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- section heads ---- */
  .section-head-2col {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
  .section-head-auto {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }

  /* ---- ユーティリティ ---- */
  .contact-form-card-body {
    padding: 28px 24px;
  }
}

/* ============================================================
   レスポンシブ — スマートフォン標準（480px 以下）
============================================================ */
@media (max-width: 480px) {
  :root {
    --section-py: 60px;
    --section-px: 20px;
    --nav-h: 60px;
  }

  /* ---- ナビ ---- */
  #site-header {
    padding: 0 20px;
    height: 60px;
  }
  .nav-logo {
    font-size: 16px;
  }
  .nav-logo small {
    font-size: 9px;
  }

  /* ---- ヒーロー ---- */
  #top {
    min-height: 580px;
  }
  .hero-body {
    padding: 0 20px;
  }
  .hero-tag {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
  }
  .hero-tag::before {
    width: 24px;
  }
  .hero-h1 {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.3;
  }
  .hero-rule {
    margin: 24px 0;
  }
  .hero-lead {
    font-size: 14px;
    line-height: 1.9;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
  }
  .btn-primary {
    padding: 15px 28px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
  }
  .btn-ghost {
    font-size: 12px;
  }
  .hero-scroll {
    display: none;
  } /* 小画面では非表示 */
  .hero-counter {
    display: none;
  }
  .hero-dots {
    right: 14px;
    gap: 8px;
  }
  .hero-dot {
    width: 5px;
    height: 5px;
  }

  /* ---- About ---- */
  #about {
    padding: 60px 20px;
    gap: 32px;
  }
  .about-text {
    font-size: 14px;
    line-height: 2.1;
    margin-bottom: 28px;
  }
  .about-badges {
    flex-wrap: wrap;
  }
  .about-badge-item {
    min-width: 80px;
    padding: 16px 12px;
  }
  .badge-val {
    font-size: 22px;
  }
  .about-photo-tag {
    padding: 10px 16px;
    font-size: 11px;
  }
  .about-photo-tag strong {
    font-size: 16px;
  }

  /* ---- Service ---- */
  #service {
    padding: 60px 20px;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    padding: 28px 20px;
  }
  .sc-icon {
    font-size: 26px;
  }

  /* ---- Works ---- */
  #works {
    padding: 60px 20px;
  }
  .works-mosaic {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  .works-mosaic .wc .wc-img {
    min-height: 200px !important;
  }
  .wc-title {
    font-size: 15px;
  }
  .wc-overlay {
    padding: 20px 20px 18px;
  }

  /* ---- CTA Banner ---- */
  #cta-banner {
    padding: 52px 20px;
  }
  .cta-banner-h {
    font-size: clamp(18px, 5vw, 28px);
  }
  .btn-cta-lg {
    padding: 16px 24px;
    font-size: 13px;
  }

  /* ---- Contact ---- */
  #contact {
    padding: 60px 20px;
  }
  .contact-form {
    padding: 28px 20px;
  }
  .cf-title {
    font-size: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  .cf-field {
    margin-bottom: 18px;
  }
  .cf-field label {
    font-size: 10px;
  }
  .cf-field input,
  .cf-field textarea,
  .cf-field select {
    font-size: 16px;
    padding: 12px 14px;
  } /* iOS zoom 防止に16px */
  .cf-field textarea {
    min-height: 100px;
  }
  .cf-submit {
    font-size: 13px;
    padding: 16px;
  }

  /* ---- Footer ---- */
  #site-footer {
    padding: 40px 20px;
    gap: 24px;
  }
  .footer-logo {
    font-size: 17px;
  }
  .footer-nav {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-nav a {
    font-size: 12px;
  }
  .footer-copy {
    font-size: 10px;
  }

  /* ---- ページトップ ---- */
  #page-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  /* ---- ページヒーロー ---- */
  .page-hero {
    padding: 60px 20px 48px;
    margin-top: 60px;
  }
  .page-hero-deco {
    font-size: 100px;
  }
  .page-hero-title {
    font-size: clamp(24px, 8vw, 36px);
    line-height: 1.3;
  }
  .page-hero-lead {
    font-size: 13px;
  }
  .page-hero-kicker {
    font-size: 10px;
    letter-spacing: 0.3em;
  }
  .breadcrumb {
    font-size: 10px;
    margin-bottom: 18px;
  }

  /* ---- single-works ---- */
  .works-single-wrap {
    padding: 48px 20px;
    gap: 36px;
  }
  .works-gallery-grid {
    gap: 4px;
  }
  .works-related-grid {
    grid-template-columns: 1fr;
  }
  .works-related {
    padding: 52px 20px;
  }
  .works-info-row {
    grid-template-columns: 80px 1fr;
    padding: 14px 20px;
  }

  /* ---- page-works フィルター ---- */
  .works-filter-bar {
    padding: 0 20px;
    top: 60px;
    overflow-x: auto;
  }
  .works-filter-tab {
    padding: 14px 14px;
    font-size: 11px;
  }

  /* ---- flow ---- */
  .flow-grid {
    grid-template-columns: 1fr;
  }
  .flow-card {
    padding: 28px 20px;
  }

  /* ---- faq ---- */
  .faq-item summary {
    padding: 18px 20px;
  }
  .faq-q-text {
    font-size: 13px;
  }
  .faq-answer {
    padding: 0 20px 20px;
    padding-top: 14px;
  }
  .faq-a-text {
    font-size: 12px;
  }

  /* ---- blog ---- */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* ---- section head ---- */
  .section-h2 {
    font-size: clamp(24px, 6vw, 36px);
  }
  .section-head-2col {
    margin-bottom: 32px;
  }
}

/* ============================================================
   レスポンシブ — 小型スマートフォン（375px 以下）
   iPhone SE / Galaxy A など
============================================================ */
@media (max-width: 375px) {
  :root {
    --section-py: 52px;
    --section-px: 16px;
  }

  /* ---- ナビ ---- */
  #site-header {
    padding: 0 16px;
  }
  .nav-logo {
    font-size: 13px;
    white-space: nowrap;
  }
  .nav-logo small {
    display: none;
  } /* サブテキスト非表示 */

  /* ---- ヒーロー ---- */
  .hero-body {
    padding: 0 16px;
  }
  .hero-h1 {
    font-size: clamp(26px, 8vw, 36px);
  }
  .hero-lead {
    font-size: 13px;
    line-height: 1.85;
  }
  .btn-primary {
    padding: 14px 20px;
    font-size: 12px;
  }

  /* ---- About ---- */
  #about {
    padding: 52px 16px;
  }
  .about-badge-item {
    padding: 14px 8px;
  }
  .badge-val {
    font-size: 20px;
  }

  /* ---- Service ---- */
  #service {
    padding: 52px 16px;
  }
  .service-card {
    padding: 24px 16px;
  }

  /* ---- Works ---- */
  #works {
    padding: 52px 16px;
  }

  /* ---- Contact ---- */
  #contact {
    padding: 52px 16px;
  }
  .contact-form {
    padding: 24px 16px;
  }

  /* ---- Footer ---- */
  #site-footer {
    padding: 36px 16px;
  }
  .footer-nav a {
    font-size: 11px;
  }

  /* ---- ページヒーロー ---- */
  .page-hero {
    padding: 52px 16px 44px;
  }
  .page-hero-title {
    font-size: clamp(22px, 7.5vw, 30px);
  }

  /* ---- single-works ---- */
  .works-single-wrap {
    padding: 40px 16px;
  }
}

/* ============================================================
   レスポンシブ — 横向きスマートフォン（landscape）
   スマホを横に持ったとき特有のレイアウト調整
============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  #top {
    height: 100vw;
    min-height: 360px;
  }
  .hero-h1 {
    font-size: clamp(24px, 5vw, 40px);
  }
  .hero-rule {
    margin: 16px 0;
  }
  .hero-lead {
    font-size: 13px;
  }
  .hero-actions {
    margin-top: 20px;
  }
  .hero-body {
    padding-bottom: 20px;
  }
  .hero-scroll,
  .hero-counter {
    display: none;
  }
  .page-hero {
    padding-top: 52px;
    padding-bottom: 40px;
  }
  #about {
    padding: 52px var(--section-px);
  }
  #service {
    padding: 52px var(--section-px);
  }
  #works {
    padding: 52px var(--section-px);
  }
  #contact {
    padding: 52px var(--section-px);
  }
  #site-footer {
    padding: 36px var(--section-px);
  }
}

/* ============================================================
   高解像度ディスプレイ（Retina / HiDPI）
   1.5倍以上の pixel ratio を持つデバイス向け微調整
============================================================ */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  /* ボーダーを細く見せる */
  .about-badges,
  .about-badge-item,
  .service-grid,
  .works-mosaic,
  .contact-wrap {
    border-width: 0.5px;
  }
  /* シャープなラインアクセント */
  .hero-rule {
    height: 1px;
  }
  .section-kicker::before {
    height: 1px;
  }
}

/* ============================================================
   アクセシビリティ — モーション低減
   システム設定で「視差効果を減らす」が有効な場合
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* GSAPアニメーション要素を即時表示 */
  .hero-tag,
  .hero-h1 .line span,
  .hero-rule,
  .hero-lead,
  .hero-actions,
  .hero-scroll,
  .hero-counter {
    opacity: 1 !important;
    transform: none !important;
  }
  /* スライドアニメーション停止 */
  .hero-slide.active {
    transform: scale(1) !important;
  }
  /* リビールアニメーション即時表示 */
  .reveal,
  .reveal-l,
  .reveal-r {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   プリントスタイル
============================================================ */
@media print {
  /* 不要な要素を非表示 */
  #site-header,
  #loader,
  .hero-dots,
  .hero-scroll,
  .hero-counter,
  #page-top,
  .works-filter-bar,
  .nav-hamburger,
  .nav-drawer,
  #cta-banner {
    display: none !important;
  }
  /* 余白リセット */
  #top,
  .page-hero {
    margin-top: 0 !important;
  }
  /* フォント・色 */
  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
    line-height: 1.6;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  /* セクション余白 */
  section,
  #about,
  #service,
  #works,
  #contact,
  #site-footer {
    padding: 24pt 40pt !important;
  }
  /* グリッドをシングルカラムに */
  #about,
  .contact-wrap,
  .works-single-wrap {
    grid-template-columns: 1fr !important;
  }
  /* モザイクを3列に */
  .works-mosaic {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* ヒーローを縮小 */
  #top {
    height: 200pt;
  }
  /* アニメーションリセット */
  .reveal,
  .reveal-l,
  .reveal-r {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-tag,
  .hero-h1 .line span,
  .hero-rule,
  .hero-lead,
  .hero-actions {
    opacity: 1 !important;
    transform: none !important;
  }
  /* ページ区切り */
  section {
    page-break-before: always;
  }
  section:first-of-type {
    page-break-before: avoid;
  }
  .works-single-wrap,
  .works-info-card {
    page-break-inside: avoid;
  }
}

/* ============================================================
   サービス詳細ページ共通レスポンシブ
   （page-service-web/design/ad/card/logo/sign/novelty.php）
   インラインスタイルを !important で上書き
============================================================ */

/* ----------------------------------------------------------
   タブレット横（1024px 以下）
---------------------------------------------------------- */
@media (max-width: 1024px) {
  /* ヒーロー */
  .svc-hero {
    padding: 72px 52px 60px !important;
  }
  /* 概要 2カラム → gap縮小 */
  .svc-overview {
    gap: 60px !important;
    padding: 90px 52px !important;
  }
  /* 対応内容 */
  .svc-items {
    padding: 90px 52px !important;
  }
  /* プロセス */
  .svc-flow {
    padding: 90px 52px !important;
  }
  /* プロセスグリッド 4列 → 2列 */
  .svc-flow-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 料金 */
  .svc-price {
    padding: 90px 52px !important;
  }
  /* FAQ */
  .svc-faq {
    padding: 90px 52px !important;
  }
  /* 他サービス */
  .svc-others {
    padding: 72px 52px !important;
  }
  /* CTA */
  .svc-cta {
    padding: 72px 52px !important;
  }
  /* 料金テーブル */
  .svc-price-table-head,
  .svc-price-row {
    padding: 16px 28px !important;
  }
}

/* ----------------------------------------------------------
   スマートフォン（768px 以下）
   主なレイアウト変更：
     - 全セクション 1カラム化
     - パディング縮小
     - 横スクロールなし
---------------------------------------------------------- */
@media (max-width: 768px) {
  /* ===== ヒーロー ===== */
  section[aria-label$="ページヘッダー"] {
    padding: 60px 24px 52px !important;
    margin-top: 64px !important;
  }
  section[aria-label$="ページヘッダー"] > div:last-child > p {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  /* ===== 概要セクション（2カラム → 1カラム） ===== */
  section[style*="grid-template-columns: 1fr 1fr"] {
    display: block !important;
    padding: 60px 24px !important;
  }
  /* 概要の右カラム写真：上に表示 */
  section[style*="grid-template-columns: 1fr 1fr"] > .reveal-r {
    margin-bottom: 40px;
  }
  /* 装飾フレームを非表示 */
  section[style*="grid-template-columns: 1fr 1fr"]
    > .reveal-r
    > div[style*="border:2px solid"] {
    display: none !important;
  }

  /* ===== 全セクション padding ===== */
  section[style*="var(--section-py, 130px)"],
  section[style*="padding: var(--section-py"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ===== 対応内容 3列グリッド → 1列 ===== */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ===== 対応内容カード padding 縮小 ===== */
  div[style*="padding:44px 36px"] {
    padding: 28px 24px !important;
  }

  /* ===== プロセス ヘッドの2カラム → 1カラム ===== */
  div[style*="grid-template-columns:1fr 1fr"] {
    display: block !important;
  }
  div[style*="grid-template-columns:1fr 1fr"] > p {
    margin-top: 16px;
    font-size: 14px !important;
  }

  /* ===== プロセス 4列グリッド → 1列 ===== */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* プロセスカード内の矢印（横→縦のため非表示） */
  div[style*="grid-template-columns:repeat(4,1fr)"]
    > div
    > div[style*="border-left:10px solid"] {
    display: none !important;
  }

  /* ===== 料金テーブル ===== */
  /* ヘッダー行：備考列を非表示 */
  div[style*="grid-template-columns:1fr 180px 1fr"] {
    grid-template-columns: 1fr 120px !important;
    padding: 14px 20px !important;
  }
  /* 備考列（3列目）を非表示 */
  div[style*="grid-template-columns:1fr 180px 1fr"] > span:nth-child(3),
  div[style*="grid-template-columns:1fr 180px 1fr"] > span:last-child {
    display: none !important;
  }
  /* 料金行の注意書き */
  div[style*="padding:18px 40px"] {
    padding: 16px 20px !important;
    font-size: 11px !important;
  }

  /* ===== FAQ 2列グリッド → 1列 ===== */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ===== 他サービス 4列グリッド → 2列 ===== */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ===== CTA バナー 横並び → 縦積み ===== */
  div[style*="justify-content: space-between"][style*="gap: 60px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 60px 24px !important;
    gap: 32px !important;
  }
  div[style*="justify-content: space-between"][style*="gap: 60px"]
    > div:last-child {
    width: 100%;
  }
  div[style*="justify-content: space-between"][style*="gap: 60px"]
    a[style*="padding:20px 52px"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------
   スマートフォン標準（480px 以下）
---------------------------------------------------------- */
@media (max-width: 480px) {
  /* ヒーロー余白最小化 */
  section[aria-label$="ページヘッダー"] {
    padding: 52px 20px 44px !important;
  }
  /* 全セクション padding */
  section[style*="var(--section-py, 130px)"],
  section[style*="padding: var(--section-py"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 他サービス 2列 → 1列 */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* 対応内容カード */
  div[style*="padding:44px 36px"] {
    padding: 24px 20px !important;
  }
  div[style*="padding:44px 36px"] > span:first-child {
    font-size: 28px !important;
  }
  /* 料金テーブル さらに縮小 */
  div[style*="grid-template-columns:1fr 180px 1fr"] {
    grid-template-columns: 1fr auto !important;
    padding: 14px 16px !important;
  }
  /* FAQ summary */
  details > summary {
    padding: 18px 20px !important;
  }
  details > div[style*="padding:0 30px"] {
    padding: 0 20px 20px !important;
    padding-top: 14px !important;
  }
  /* CTA バナー */
  div[style*="justify-content: space-between"][style*="gap: 60px"] {
    padding: 52px 20px !important;
  }
}

/* ----------------------------------------------------------
   スマートフォン小型（375px 以下）
---------------------------------------------------------- */
@media (max-width: 375px) {
  section[aria-label$="ページヘッダー"] {
    padding: 44px 16px 36px !important;
  }
  section[style*="var(--section-py, 130px)"],
  section[style*="padding: var(--section-py"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  div[style*="justify-content: space-between"][style*="gap: 60px"] {
    padding: 44px 16px !important;
  }
}

/* ============================================================
   コラム機能スタイル
   archive-column.php / single-column.php 共通
============================================================ */

/* ----------------------------------------------------------
   コラム一覧：ヒーロー
---------------------------------------------------------- */
.col-hero {
  background: var(--ink);
  padding: 80px 0 64px;
  text-align: center;
}

.col-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

.col-hero-label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 16px;
}

.col-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.col-hero-sub {
  font-size: clamp(14px, 2vw, 16px);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.8;
}

/* ----------------------------------------------------------
   カテゴリタブナビ
---------------------------------------------------------- */
.col-cat-nav {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
}

.col-cat-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.col-cat-inner::-webkit-scrollbar {
  display: none;
}

.col-cat-tab {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--stone);
  text-decoration: none;
  padding: 18px 20px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.col-cat-tab:hover {
  color: var(--ink);
}

.col-cat-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

/* ----------------------------------------------------------
   コラム記事グリッド（一覧）
---------------------------------------------------------- */
.col-archive {
  background: var(--paper);
  padding: 64px 0 100px;
}

.col-archive-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.col-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ----------------------------------------------------------
   記事カード
---------------------------------------------------------- */
.col-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.col-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.col-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* サムネイル */
.col-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.col-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.col-card:hover .col-card-thumb img {
  transform: scale(1.05);
}

/* カテゴリバッジ */
.col-card-cats {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

.col-card-cat {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 2px;
}

/* プレースホルダー（アイキャッチなし） */
.col-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ink) 0%, var(--blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-card-thumb-placeholder span {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.3);
}

/* カードボディ */
.col-card-body {
  padding: 24px 24px 28px;
}

.col-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.col-card-date {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.05em;
}

.col-card-read {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.05);
  padding: 3px 8px;
  border-radius: 20px;
}

.col-card-title {
  font-family: var(--font-serif);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.col-card-excerpt {
  font-size: 13px;
  color: var(--stone);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}

.col-card-more {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue);
}

/* ----------------------------------------------------------
   ページネーション
---------------------------------------------------------- */
.col-pagination {
  margin-top: 60px;
  text-align: center;
}

.col-pagination .page-numbers {
  display: inline-flex;
  list-style: none;
  gap: 8px;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.col-pagination .page-numbers li a,
.col-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.col-pagination .page-numbers li a:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.col-pagination .page-numbers li .current {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  font-weight: 700;
}

.col-pagination .page-numbers li .prev,
.col-pagination .page-numbers li .next {
  width: auto;
  padding: 0 20px;
  font-size: 13px;
}

/* ----------------------------------------------------------
   記事なし
---------------------------------------------------------- */
.col-empty {
  text-align: center;
  padding: 80px 0;
}

.col-empty-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.col-empty-text {
  font-size: 16px;
  color: var(--stone);
  line-height: 1.8;
  margin-bottom: 32px;
}

.col-back-btn {
  display: inline-block;
  padding: 14px 40px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.3s;
}

.col-back-btn:hover {
  background: var(--blue);
}

/* ----------------------------------------------------------
   コラム詳細：ヒーロー
---------------------------------------------------------- */
.scol-hero {
  background: linear-gradient(
    135deg,
    var(--ink) 0%,
    var(--blue-dark, #0a1e3c) 100%
  );
  padding: 120px 40px 80px;
  position: relative;
  overflow: hidden;
}

.scol-hero.has-thumb {
  padding: 160px 40px 100px;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}

.scol-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scol-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scol-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(5, 10, 20, 0.88) 0%,
    rgba(5, 10, 20, 0.55) 50%,
    rgba(5, 10, 20, 0.3) 100%
  );
}

.scol-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.scol-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.scol-cat {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--white);
  background: var(--gold);
  padding: 5px 14px;
  border-radius: 2px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.3s;
}

.scol-cat:hover {
  background: var(--gold-light);
}

.scol-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}

.scol-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-en);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.scol-meta-sep {
  opacity: 0.4;
}

/* ----------------------------------------------------------
   コラム詳細：本文レイアウト
---------------------------------------------------------- */
.scol-wrap {
  background: var(--paper);
  padding: 60px 0 100px;
}

.scol-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 72px;
}

.scol-main {
  min-width: 0;
}

/* ----------------------------------------------------------
   目次
---------------------------------------------------------- */
.scol-toc {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 24px 28px;
  margin-bottom: 48px;
}

.scol-toc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}

.scol-toc-toggle {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--stone);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.3s;
}

.scol-toc-toggle:hover {
  color: var(--ink);
}

.scol-toc-list {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scol-toc-item a {
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
  line-height: 1.6;
  transition: color 0.3s;
}

.scol-toc-item a:hover {
  color: var(--gold);
}

.scol-toc-h3 {
  padding-left: 16px;
}

.scol-toc-h3 a {
  font-size: 13px;
  color: var(--stone);
}

/* ----------------------------------------------------------
   本文スタイル（Gutenberg / クラシックエディタ共通）
---------------------------------------------------------- */
.scol-content {
  font-size: 18px;
  line-height: 2;
  color: var(--ink);
}

.scol-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  font-weight: 700;
  color: var(--ink);
  border-left: 4px solid var(--gold);
  padding-left: 18px;
  margin: 56px 0 24px;
  line-height: 1.5;
}

.scol-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.8vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 10px;
  margin: 44px 0 18px;
}

.scol-content p {
  margin-bottom: 24px;
}

.scol-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.scol-content a:hover {
  color: var(--gold);
}

.scol-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 8px 0 28px;
}

.scol-content blockquote {
  background: rgba(0, 0, 0, 0.03);
  border-left: 4px solid var(--blue);
  padding: 20px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--stone);
}

.scol-content code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: "Courier New", monospace;
}

.scol-content pre {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  padding: 24px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 32px 0;
}

.scol-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.scol-content ul,
.scol-content ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

.scol-content li {
  margin-bottom: 8px;
  line-height: 1.8;
}

.scol-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  font-size: 14px;
}

.scol-content th,
.scol-content td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  text-align: left;
}

.scol-content th {
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
}

.scol-content tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

/* ----------------------------------------------------------
   タグ
---------------------------------------------------------- */
.scol-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 48px 0 40px;
}

.scol-tag {
  font-size: 13px;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.scol-tag:hover {
  background: var(--blue);
  color: var(--white);
}

/* ----------------------------------------------------------
   シェアボタン
---------------------------------------------------------- */
.scol-share {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 28px 32px;
  margin-bottom: 48px;
}

.scol-share-label {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}

.scol-share-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.scol-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.3s, transform 0.2s;
}

.scol-share-btn:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.scol-share-x {
  background: #000;
  color: #fff;
}

.scol-share-fb {
  background: #1877f2;
  color: #fff;
}

.scol-share-line {
  background: #06c755;
  color: #fff;
}

.scol-share-copy {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------------
   前後ナビ
---------------------------------------------------------- */
.scol-post-nav {
  margin-bottom: 20px;
}

.scol-post-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.scol-post-nav-item {
  background: var(--white);
  padding: 24px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.3s;
}

.scol-post-nav-item:hover {
  background: var(--ink);
}

.scol-post-nav-item:hover .scol-post-nav-dir,
.scol-post-nav-item:hover .scol-post-nav-ttl {
  color: var(--white);
}

.scol-post-nav-next {
  text-align: right;
}

.scol-post-nav-empty {
  background: transparent;
}

.scol-post-nav-dir {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--stone);
  transition: color 0.3s;
}

.scol-post-nav-ttl {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s;
}

/* ----------------------------------------------------------
   サイドバー
---------------------------------------------------------- */
.scol-sidebar {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scol-sidebar-widget {
  background: var(--white);
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.scol-sidebar-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

/* プロフィールカード */
.scol-profile-card {
  text-align: center;
}

.scol-profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  border: 3px solid var(--gold);
}

.scol-profile-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.scol-profile-role {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--stone);
  margin-bottom: 14px;
}

.scol-profile-bio {
  font-size: 14px;
  line-height: 1.85;
  color: var(--stone);
  margin-bottom: 18px;
}

.scol-profile-link {
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.scol-profile-link:hover {
  color: var(--gold);
}

/* カテゴリ一覧 */
.scol-sidebar-cats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scol-sidebar-cats li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.3s, color 0.3s;
}

.scol-sidebar-cats li a:hover {
  background: var(--paper);
  color: var(--blue);
}

.scol-sidebar-count {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--stone);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 20px;
}

/* 最新記事 */
.scol-sidebar-recent {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scol-sidebar-recent-link {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.scol-sidebar-recent-thumb {
  width: 84px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 3px;
}

.scol-sidebar-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.scol-sidebar-recent-link:hover .scol-sidebar-recent-thumb img {
  transform: scale(1.08);
}

.scol-sidebar-recent-body time {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--stone);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}

.scol-sidebar-recent-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTAウィジェット */
.scol-sidebar-cta {
  background: linear-gradient(
    135deg,
    var(--ink) 0%,
    var(--blue-dark, #0a1e3c) 100%
  ) !important;
  text-align: center;
}

.scol-sidebar-cta-ttl {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.scol-sidebar-cta-txt {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 20px;
}

.scol-sidebar-cta-btn {
  display: block;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.3s;
}

.scol-sidebar-cta-btn:hover {
  background: var(--gold-light, #c9a84c);
}

/* ----------------------------------------------------------
   サイドバー検索窓
---------------------------------------------------------- */
.scol-search-wrap {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s;
}

.scol-search-wrap:focus-within {
  border-color: var(--blue);
}

.scol-search-input {
  flex: 1;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  border: none;
  outline: none;
  min-width: 0;
}

.scol-search-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.scol-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  background: var(--ink);
  color: var(--white);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s;
}

.scol-search-btn:hover {
  background: var(--blue);
}

/* ----------------------------------------------------------
   関連記事
---------------------------------------------------------- */
.scol-related {
  background: var(--white);
  padding: 64px 0 80px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.scol-related-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.scol-related-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 40px;
}

/* ----------------------------------------------------------
   トップページ：最新コラムセクション
---------------------------------------------------------- */
.home-column {
  background: var(--paper);
  padding: 100px 0;
}

.home-column-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}

.home-column-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
  gap: 20px;
  flex-wrap: wrap;
}

.home-column-more {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.home-column-more:hover {
  color: var(--gold);
}

/* ----------------------------------------------------------
   レスポンシブ
---------------------------------------------------------- */
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
  .col-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .scol-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .scol-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .scol-profile-card {
    grid-column: 1 / -1;
  }
  .home-column-inner {
    padding: 0 40px;
  }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
  /* ヒーロー */
  .col-hero {
    padding: 72px 0 48px;
  }
  .col-hero-inner {
    padding: 0 24px;
  }

  /* カテゴリタブ */
  .col-cat-inner {
    padding: 0 16px;
    gap: 0;
  }
  .col-cat-tab {
    padding: 14px 14px;
    font-size: 12px;
  }

  /* グリッド */
  .col-archive {
    padding: 40px 0 72px;
  }
  .col-archive-inner {
    padding: 0 20px;
  }
  .col-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .col-grid--3 {
    grid-template-columns: 1fr;
  }

  /* カード */
  .col-card-body {
    padding: 20px;
  }
  .col-card-title {
    font-size: 16px;
  }

  /* 詳細ヒーロー */
  .scol-hero {
    padding: 100px 24px 56px;
  }
  .scol-hero.has-thumb {
    padding: 120px 24px 64px;
    min-height: 360px;
  }
  .scol-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  /* 詳細本文 */
  .scol-wrap {
    padding: 40px 0 72px;
  }
  .scol-inner {
    padding: 0 20px;
    gap: 40px;
  }
  .scol-content {
    font-size: 15px;
  }
  .scol-content h2 {
    font-size: 1.15rem;
  }
  .scol-content h3 {
    font-size: 1rem;
  }

  /* サイドバー */
  .scol-sidebar {
    grid-template-columns: 1fr;
  }

  /* シェアボタン */
  .scol-share {
    padding: 20px;
  }
  .scol-share-btns {
    gap: 8px;
  }
  .scol-share-btn {
    padding: 9px 14px;
    font-size: 12px;
  }

  /* 前後ナビ */
  .scol-post-nav-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .scol-post-nav-next {
    text-align: left;
  }
  .scol-post-nav-item {
    padding: 20px;
  }

  /* 関連記事 */
  .scol-related {
    padding: 48px 0 64px;
  }
  .scol-related-inner {
    padding: 0 20px;
  }

  /* トップ最新コラム */
  .home-column {
    padding: 72px 0;
  }
  .home-column-inner {
    padding: 0 20px;
  }
  .home-column-head {
    margin-bottom: 36px;
  }

  /* ページネーション */
  .col-pagination {
    margin-top: 48px;
  }
  .col-pagination .page-numbers li a,
  .col-pagination .page-numbers li span {
    width: 40px;
    height: 40px;
  }
}

/* iPhone SE（375px以下） */
@media (max-width: 375px) {
  .col-archive-inner {
    padding: 0 16px;
  }
  .scol-inner {
    padding: 0 16px;
  }
  .scol-related-inner {
    padding: 0 16px;
  }
  .home-column-inner {
    padding: 0 16px;
  }
}

/* ============================================================
   コラム一覧ページ（page-column.php）スタイル
============================================================ */

/* ----------------------------------------------------------
   ヒーロー
---------------------------------------------------------- */
.pcol-hero {
  background: var(--ink);
  padding: 80px 0 52px;
  text-align: center;
}

.pcol-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

.pcol-hero-en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.pcol-hero-title {
  font-family: var(--font-en);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 16px;
}

.pcol-hero-sub {
  font-family: var(--font-serif);
  font-size: clamp(13px, 2vw, 15px);
  color: rgba(255, 255, 255, 0.5);
}

/* ----------------------------------------------------------
   パンくずリスト
---------------------------------------------------------- */
.pcol-breadcrumb {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.pcol-breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--stone);
  flex-wrap: wrap;
}

.pcol-breadcrumb-inner a {
  color: var(--stone);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.3s;
}

.pcol-breadcrumb-inner a:hover {
  color: var(--blue);
}

.pcol-breadcrumb-sep {
  opacity: 0.4;
}

/* ----------------------------------------------------------
   メインレイアウト（記事 + サイドバー）
---------------------------------------------------------- */
.pcol-wrap {
  background: #f5f5f5;
  padding: 48px 0 100px;
}

.pcol-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

/* category.php 専用：single.php と同じ横幅・サイドバー幅に統一 */
.pcol-inner.pcol-inner--wide {
  max-width: 1400px;
  padding: 0 48px;
  grid-template-columns: 1fr 380px;
  gap: 72px;
}

.pcol-main {
  min-width: 0;
}

/* ----------------------------------------------------------
   カテゴリタブ
---------------------------------------------------------- */
.pcol-cat-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.pcol-cat-tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--stone);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 7px 18px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.pcol-cat-tab:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.pcol-cat-tab.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  font-weight: 700;
}

/* ----------------------------------------------------------
   記事グリッド（2カラム）
---------------------------------------------------------- */
.pcol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.pcol-card {
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}

.pcol-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.pcol-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.pcol-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e0e0e0;
}

.pcol-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.pcol-card:hover .pcol-card-thumb img {
  transform: scale(1.04);
}

/* カテゴリバッジ */
.pcol-card-cats {
  position: absolute;
  top: 12px;
  left: 12px;
}

.pcol-card-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  background: #e53935;
  padding: 4px 10px;
  border-radius: 3px;
}

/* プレースホルダー */
.pcol-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ink), var(--blue-dark, #0a1e3c));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcol-card-thumb-placeholder span {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.25);
}

/* カードボディ */
.pcol-card-body {
  padding: 20px;
}

.pcol-card-meta {
  font-size: 12px;
  color: var(--stone);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pcol-card-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcol-card-excerpt {
  font-size: 13px;
  color: var(--stone);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcol-card-more {
  font-size: 13px;
  color: var(--stone);
  margin-top: 6px;
  display: inline-block;
}

/* ----------------------------------------------------------
   ページネーション
---------------------------------------------------------- */
.pcol-pagination {
  margin-top: 48px;
  text-align: center;
}

.pcol-pagination .page-numbers {
  display: inline-flex;
  list-style: none;
  gap: 6px;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.pcol-pagination .page-numbers li a,
.pcol-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  transition: background 0.3s, color 0.3s;
}

.pcol-pagination .page-numbers li a:hover {
  background: var(--ink);
  color: var(--white);
}

.pcol-pagination .page-numbers li .current {
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  border-color: var(--ink);
}

/* ----------------------------------------------------------
   サイドバーウィジェット共通
---------------------------------------------------------- */
.pcol-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pcol-widget {
  background: var(--white);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* category.php 専用：single.php サイドバーと同じ余白に統一 */
.pcol-inner--wide .pcol-widget {
  padding: 32px;
}

.pcol-inner--wide .pcol-widget-title {
  font-size: 17px;
}

.pcol-widget-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 16px;
}

/* プロフィール */
.pcol-profile {
  text-align: center;
}

.pcol-profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  margin-bottom: 12px;
}

.pcol-profile-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.pcol-profile-role {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--stone);
  margin-bottom: 12px;
}

.pcol-profile-bio {
  font-size: 13px;
  line-height: 1.8;
  color: var(--stone);
  margin-bottom: 14px;
  text-align: left;
}

.pcol-profile-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.pcol-profile-link:hover {
  color: var(--gold);
}

/* カテゴリリスト */
.pcol-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pcol-cat-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
}

.pcol-cat-list li a span {
  font-size: 12px;
  color: var(--stone);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 20px;
}

.pcol-cat-list li a:hover,
.pcol-cat-list li a.is-active {
  background: #f5f5f5;
  color: var(--blue);
}

/* 最新記事 */
.pcol-recent {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pcol-recent li a {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.pcol-recent-thumb {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 3px;
}

.pcol-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.pcol-recent li a:hover .pcol-recent-thumb img {
  transform: scale(1.06);
}

.pcol-recent-body time {
  font-size: 11px;
  color: var(--stone);
  display: block;
  margin-bottom: 4px;
}

.pcol-recent-body p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA */
.pcol-cta {
  background: linear-gradient(
    135deg,
    var(--ink) 0%,
    var(--blue-dark, #0a1e3c) 100%
  ) !important;
  text-align: center;
}

.pcol-cta-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.pcol-cta-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 16px;
}

.pcol-cta-btn {
  display: block;
  padding: 11px 16px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.3s;
}

.pcol-cta-btn:hover {
  background: var(--gold-light, #c9a84c);
}

/* ----------------------------------------------------------
   記事なし
---------------------------------------------------------- */
.pcol-empty {
  text-align: center;
  padding: 80px 40px;
  grid-column: 1 / -1;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ----------------------------------------------------------
   レスポンシブ
---------------------------------------------------------- */
@media (max-width: 1024px) {
  .pcol-inner,
  .pcol-inner.pcol-inner--wide {
    grid-template-columns: 1fr 260px;
    gap: 32px;
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .pcol-hero {
    padding: 64px 0 40px;
  }
  .pcol-hero-inner {
    padding: 0 20px;
  }
  .pcol-breadcrumb-inner {
    padding: 10px 20px;
  }
  .pcol-wrap {
    padding: 32px 0 72px;
  }
  .pcol-inner,
  .pcol-inner.pcol-inner--wide {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }
  .pcol-sidebar {
    position: static;
  }
  .pcol-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pcol-cat-nav {
    gap: 6px;
  }
  .pcol-cat-tab {
    padding: 6px 14px;
    font-size: 12px;
  }
}

@media (max-width: 375px) {
  .pcol-inner {
    padding: 0 16px;
  }
}

/* ============================================================
   コラム一覧・詳細 追加レスポンシブ（480px以下・375px以下）
============================================================ */
@media (max-width: 480px) {
  /* --- コラム一覧ヒーロー --- */
  .col-hero {
    padding: 56px 0 40px;
  }
  .col-hero-inner {
    padding: 0 20px;
  }
  .col-hero-title {
    font-size: 1.8rem;
  }

  /* --- カテゴリタブ --- */
  .col-cat-inner {
    padding: 0 16px;
  }
  .col-cat-tab {
    padding: 12px 12px;
    font-size: 12px;
  }

  /* --- 記事グリッド --- */
  .col-archive {
    padding: 32px 0 56px;
  }
  .col-archive-inner {
    padding: 0 16px;
  }
  .col-grid {
    gap: 20px;
  }
  .col-card-body {
    padding: 16px 16px 20px;
  }
  .col-card-title {
    font-size: 15px;
  }
  .col-card-excerpt {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  /* --- 詳細ヒーロー --- */
  .scol-hero {
    padding: 88px 20px 48px;
  }
  .scol-hero.has-thumb {
    padding: 100px 20px 52px;
    min-height: 300px;
  }
  .scol-title {
    font-size: 1.3rem;
  }

  /* --- 詳細本文 --- */
  .scol-wrap {
    padding: 32px 0 56px;
  }
  .scol-inner {
    padding: 0 16px;
    gap: 32px;
  }
  .scol-content {
    font-size: 14px;
  }
  .scol-content h2 {
    font-size: 1.05rem;
    padding-left: 12px;
  }
  .scol-content h3 {
    font-size: 0.95rem;
  }
  .scol-content pre {
    padding: 16px;
    font-size: 12px;
  }
  .scol-content table {
    font-size: 12px;
  }
  .scol-content th,
  .scol-content td {
    padding: 8px 10px;
  }

  /* --- 目次 --- */
  .scol-toc {
    padding: 18px 20px;
    margin-bottom: 32px;
  }
  .scol-toc-item a {
    font-size: 13px;
  }

  /* --- シェアボタン --- */
  .scol-share {
    padding: 16px;
  }
  .scol-share-btns {
    gap: 6px;
  }
  .scol-share-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  .scol-share-btn svg {
    width: 15px;
    height: 15px;
  }

  /* --- 前後ナビ --- */
  .scol-post-nav-item {
    padding: 16px 18px;
  }
  .scol-post-nav-ttl {
    font-size: 13px;
  }

  /* --- サイドバー --- */
  .scol-sidebar-widget {
    padding: 20px;
  }
  .pcol-widget {
    padding: 20px;
  }

  /* --- 関連記事 --- */
  .scol-related {
    padding: 40px 0 52px;
  }
  .scol-related-inner {
    padding: 0 16px;
  }
  .scol-related-title {
    font-size: 1.1rem;
    margin-bottom: 28px;
  }

  /* --- page-column一覧 --- */
  .pcol-wrap {
    padding: 28px 0 56px;
  }
  .pcol-inner {
    padding: 0 16px;
    gap: 32px;
  }
  .pcol-hero {
    padding: 52px 0 36px;
  }
  .pcol-hero-title {
    font-size: 3rem;
  }
  .pcol-hero-sub {
    font-size: 13px;
  }
  .pcol-card-body {
    padding: 16px;
  }
  .pcol-card-title {
    font-size: 14px;
  }
  .pcol-card-excerpt {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }
  .pcol-widget-title {
    font-size: 14px;
  }
}

@media (max-width: 375px) {
  /* --- コラム一覧 --- */
  .col-archive-inner {
    padding: 0 12px;
  }
  .col-hero-inner {
    padding: 0 16px;
  }

  /* --- コラム詳細 --- */
  .scol-inner {
    padding: 0 12px;
  }
  .scol-related-inner {
    padding: 0 12px;
  }
  .scol-hero {
    padding: 80px 16px 44px;
  }

  /* --- page-column --- */
  .pcol-inner {
    padding: 0 12px;
  }
  .pcol-breadcrumb-inner {
    padding: 10px 16px;
  }
}

/* ============================================================
   home.php（コラム一覧）追加レスポンシブ
   投稿ページとして表示される場合の調整
============================================================ */
@media (max-width: 768px) {
  /* home.phpのページヒーローにmargin-topを付与 */
  .pcol-hero {
    margin-top: var(--nav-h);
  }
}

@media (max-width: 480px) {
  .pcol-hero {
    margin-top: 60px;
  }
}

/* ============================================================
   single.php（記事詳細）追加レスポンシブ
============================================================ */
@media (max-width: 768px) {
  /* 記事詳細にmargin-top付与 */
  .scol-hero {
    margin-top: var(--nav-h);
  }
  /* サイドバーをグリッド表示 */
  .scol-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* プロフィールカードは全幅 */
  .scol-profile-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .scol-hero {
    margin-top: 60px;
  }
  /* サイドバーを1カラムに戻す */
  .scol-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   全体：スマホ共通の細かい調整
============================================================ */
/* タッチデバイスでのホバーエフェクト無効化 */
@media (hover: none) {
  .col-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }
  .pcol-card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .service-card:hover {
    background: var(--ink);
  }
  .service-card:hover::before {
    transform: scaleY(0);
  }
  .wc:hover .wc-overlay {
    opacity: 0;
  }
  .btn-primary:hover {
    transform: none;
  }
  .btn-cta-lg:hover {
    transform: none;
  }
}

/* 画像の長押しメニュー防止（スマホ） */
@media (max-width: 768px) {
  img {
    -webkit-touch-callout: none;
  }
  /* フォームのズーム防止（iOS） */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
  /* スクロールの慣性 */
  .col-cat-inner,
  .col-cat-nav,
  .works-filter-tabs,
  .pcol-cat-nav {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   page-contact.php レスポンシブ
============================================================ */
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
  .contact-page-hero {
    padding: 80px 52px 64px !important;
    margin-top: 68px !important;
  }
  .contact-main-grid {
    padding: 80px 52px 100px !important;
    grid-template-columns: 1fr 400px !important;
    gap: 60px !important;
  }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
  .contact-page-hero {
    padding: 72px 28px 56px !important;
    margin-top: 64px !important;
  }
  .contact-main-grid {
    padding: 56px 28px 72px !important;
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* スマートフォン標準（480px以下） */
@media (max-width: 480px) {
  .contact-page-hero {
    padding: 60px 20px 48px !important;
    margin-top: 60px !important;
  }
  .contact-main-grid {
    padding: 44px 20px 60px !important;
    gap: 40px !important;
  }
}

/* 小型スマートフォン（375px以下） */
@media (max-width: 375px) {
  .contact-page-hero {
    padding: 52px 16px 40px !important;
  }
  .contact-main-grid {
    padding: 40px 16px 52px !important;
  }
}

/* ============================================================
   page-contact.php FAQ レスポンシブ
============================================================ */
@media (max-width: 1024px) {
  .contact-faq-section {
    padding: 80px 52px !important;
  }
}

@media (max-width: 768px) {
  .contact-faq-section {
    padding: 60px 28px !important;
  }
  /* 2カラム → 1カラム */
  .contact-faq-grid {
    grid-template-columns: 1fr !important;
  }
  /* detailsのパディング調整 */
  .contact-faq-grid details > summary {
    padding: 20px 24px !important;
    font-size: 14px !important;
  }
  .contact-faq-grid details > div {
    padding: 0 24px 20px !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
  }
}

@media (max-width: 480px) {
  .contact-faq-section {
    padding: 52px 20px !important;
  }
  .contact-faq-grid details > summary {
    padding: 18px 20px !important;
    font-size: 13px !important;
  }
  .contact-faq-grid details > div {
    padding: 0 20px 18px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 375px) {
  .contact-faq-section {
    padding: 44px 16px !important;
  }
  .contact-faq-grid details > summary {
    padding: 16px !important;
  }
  .contact-faq-grid details > div {
    padding: 0 16px 16px !important;
  }
}

/* ============================================================
   page-service-web.php 制作実績セクション
============================================================ */
.sw-works-section {
  padding: 100px 0;
  background: var(--white);
}

.sw-works-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}

.sw-works-head {
  margin-bottom: 52px;
}

.sw-works-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-top: 16px;
  letter-spacing: 0.03em;
}

/* 3カラムグリッド */
.sw-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* カード */
.sw-works-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.sw-works-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

.sw-works-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.sw-works-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper);
}

.sw-works-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
  display: block;
}

.sw-works-card:hover .sw-works-thumb img {
  transform: scale(1.05);
}

/* ホバーオーバーレイ */
.sw-works-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s;
}

.sw-works-card:hover .sw-works-overlay {
  opacity: 1;
}

.sw-works-view {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 10px 24px;
  border-radius: 2px;
}

/* テキスト */
.sw-works-body {
  padding: 18px 20px 20px;
}

.sw-works-tag {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--blue);
  display: inline-block;
  margin-bottom: 6px;
}

.sw-works-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .sw-works-inner {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .sw-works-section {
    padding: 72px 0;
  }
  .sw-works-inner {
    padding: 0 24px;
  }
  .sw-works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .sw-works-section {
    padding: 56px 0;
  }
  .sw-works-inner {
    padding: 0 20px;
  }
  .sw-works-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 375px) {
  .sw-works-inner {
    padding: 0 16px;
  }
}

/* ============================================================
   page-service-web.php レスポンシブ
============================================================ */
/* --- タブレット（1024px以下） --- */
@media (max-width: 1024px) {
  .psw-hero {
    padding: 80px 52px 64px !important;
  }
  .psw-overview {
    padding: 80px 52px !important;
    gap: 52px !important;
  }
  .psw-items,
  .psw-price,
  .psw-flow,
  .psw-faq {
    padding: 80px 52px !important;
  }
  .psw-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .psw-price-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .psw-price-features {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .psw-flow-step {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .psw-faq-grid {
    grid-template-columns: 1fr !important;
  }
  .psw-cta-icons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- スマートフォン（768px以下） --- */
@media (max-width: 768px) {
  /* ヒーロー */
  .psw-hero {
    padding: 72px 24px 52px !important;
  }
  /* サービス概要：縦積み */
  .psw-overview {
    padding: 56px 24px !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* ポイントバッジ：縦積み */
  .psw-points-grid {
    grid-template-columns: 1fr !important;
  }
  /* 対応内容 */
  .psw-items {
    padding: 56px 24px !important;
  }
  .psw-items-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  /* 料金 */
  .psw-price {
    padding: 56px 24px !important;
  }
  .psw-price-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .psw-price-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
  /* 制作の流れ */
  .psw-flow {
    padding: 56px 24px !important;
  }
  .psw-flow-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .psw-flow-step {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* FAQ */
  .psw-faq {
    padding: 56px 24px !important;
  }
  .psw-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  /* CTAアイコン */
  .psw-cta-icons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- スマートフォン標準（480px以下） --- */
@media (max-width: 480px) {
  .psw-hero {
    padding: 60px 20px 44px !important;
  }
  .psw-overview {
    padding: 44px 20px !important;
  }
  .psw-items {
    padding: 44px 20px !important;
  }
  .psw-price {
    padding: 44px 20px !important;
  }
  .psw-flow {
    padding: 44px 20px !important;
  }
  .psw-faq {
    padding: 44px 20px !important;
  }
}

/* --- 小型スマートフォン（375px以下） --- */
@media (max-width: 375px) {
  .psw-hero {
    padding: 52px 16px 40px !important;
  }
  .psw-overview {
    padding: 40px 16px !important;
  }
  .psw-items {
    padding: 40px 16px !important;
  }
  .psw-price {
    padding: 40px 16px !important;
  }
  .psw-flow {
    padding: 40px 16px !important;
  }
  .psw-faq {
    padding: 40px 16px !important;
  }
  .psw-price-features {
    grid-template-columns: 1fr 1fr !important;
  }
  .psw-cta-icons {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   index.php ページネーション
============================================================ */
.idx-pagination {
  margin-top: 56px !important;
  text-align: center !important;
  width: 100% !important;
}

.idx-pagination nav.pagination,
.idx-pagination .navigation {
  display: block !important;
  width: 100% !important;
}

.idx-pagination .nav-links {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
}

/* WordPress標準出力：<a class="page-numbers"> が直接並ぶケース */
.idx-pagination .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 42px !important;
  max-width: none !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  font-family: var(--font-en) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  background: var(--white) !important;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s !important;
  margin: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  float: none !important;
}

.idx-pagination a.page-numbers:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px) !important;
}

.idx-pagination .page-numbers.current {
  background: var(--ink) !important;
  color: var(--white) !important;
  border-color: var(--ink) !important;
  font-weight: 700 !important;
}

.idx-pagination .page-numbers.dots {
  border: none !important;
  background: transparent !important;
  color: var(--muted) !important;
  min-width: 20px !important;
  padding: 0 2px !important;
}

.idx-pagination .page-numbers.prev,
.idx-pagination .page-numbers.next {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* ul/li構造で出力された場合のフォールバック */
.idx-pagination ul.page-numbers {
  display: flex !important;
  list-style: none !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

.idx-pagination ul.page-numbers li {
  display: flex !important;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .idx-pagination {
    margin-top: 40px !important;
  }
  .idx-pagination .nav-links,
  .idx-pagination ul.page-numbers {
    gap: 8px !important;
  }
  .idx-pagination .page-numbers {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .idx-pagination .page-numbers {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   index.php レスポンシブ
============================================================ */
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
  #main-content {
    padding: 80px 52px !important;
  }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
  #main-content {
    margin-top: 64px !important;
    padding: 56px 24px !important;
    min-height: calc(100vh - 64px) !important;
  }
  /* 投稿グリッド：1カラムに変更 */
  .idx-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    background: transparent !important;
    margin-bottom: 48px !important;
  }
  .idx-posts-grid article {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
  /* テキスト部分のパディング縮小 */
  .idx-posts-grid article > div:last-of-type {
    padding: 18px 18px 20px !important;
  }
  /* タイトルの文字サイズ調整 */
  .idx-posts-grid article h2 a {
    font-size: 15px !important;
  }
}

/* スマートフォン標準（480px以下） */
@media (max-width: 480px) {
  #main-content {
    padding: 44px 20px !important;
  }
  .idx-posts-grid {
    gap: 16px !important;
  }
  .idx-posts-grid article > div:last-of-type {
    padding: 16px 16px 18px !important;
  }
  .idx-posts-grid article h2 a {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
}

/* 小型スマートフォン（375px以下） */
@media (max-width: 375px) {
  #main-content {
    padding: 40px 16px !important;
  }
}

/* ============================================================
   page-service-web.php 他サービスへの導線セクション
============================================================ */
@media (max-width: 1024px) {
  .psw-other-services {
    padding: 70px 52px !important;
  }
}

@media (max-width: 768px) {
  .psw-other-services {
    padding: 56px 24px !important;
  }
}

@media (max-width: 480px) {
  .psw-other-services {
    padding: 44px 20px !important;
  }
}

@media (max-width: 375px) {
  .psw-other-services {
    padding: 40px 16px !important;
  }
}

/* ============================================================
   page-service-web.php 料金テーブル行
============================================================ */
@media (max-width: 768px) {
  .psw-price-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 16px 20px !important;
    text-align: left !important;
  }
  .psw-price-row span:nth-child(2) {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .psw-price-row {
    padding: 14px 16px !important;
  }
}

/* ============================================================
   page-service-web.php 料金セクション ヘッド（2カラム）
============================================================ */
@media (max-width: 768px) {
  .psw-price-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: start !important;
  }
}

/* ============================================================
   page-service-web.php 制作プロセス ヘッド（2カラム）
============================================================ */
@media (max-width: 768px) {
  .psw-flow-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }
}

/* ============================================================
   page-about.php スキル・使用ツール バッジ表示
============================================================ */
@media (max-width: 1024px) {
  .about-skills-grid > div {
    padding: 40px 32px !important;
  }
}

@media (max-width: 768px) {
  .about-skills-grid {
    grid-template-columns: 1fr !important;
  }
  .about-skills-grid > div {
    padding: 32px 24px !important;
  }
}

@media (max-width: 480px) {
  .about-skills-grid > div {
    padding: 28px 20px !important;
  }
}

/* ============================================================
   page-about.php レスポンシブ
============================================================ */
/* --- タブレット（1024px以下） --- */
@media (max-width: 1024px) {
  .pab-profile {
    padding: 80px 52px !important;
    gap: 60px !important;
  }
  .pab-skills {
    padding: 80px 52px !important;
  }
  .pab-career {
    padding: 80px 52px !important;
  }
  .pab-career-grid {
    gap: 60px !important;
  }
  .pab-philosophy {
    padding: 80px 52px !important;
  }
}

/* --- スマートフォン（768px以下） --- */
@media (max-width: 768px) {
  /* プロフィール：縦積み */
  .pab-profile {
    padding: 56px 24px !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* スキル */
  .pab-skills {
    padding: 56px 24px !important;
  }
  /* 経歴：縦積み */
  .pab-career {
    padding: 56px 24px !important;
  }
  .pab-career-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .pab-career-item {
    grid-template-columns: 64px 1fr !important;
    gap: 16px !important;
  }
  /* 制作への想い：縦積み */
  .pab-philosophy {
    padding: 56px 24px !important;
  }
  .pab-philosophy-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
}

/* --- スマートフォン標準（480px以下） --- */
@media (max-width: 480px) {
  .pab-profile {
    padding: 44px 20px !important;
  }
  .pab-skills {
    padding: 44px 20px !important;
  }
  .pab-career {
    padding: 44px 20px !important;
  }
  .pab-philosophy {
    padding: 44px 20px !important;
  }
}

/* --- 小型スマートフォン（375px以下） --- */
@media (max-width: 375px) {
  .pab-profile {
    padding: 40px 16px !important;
  }
  .pab-skills {
    padding: 40px 16px !important;
  }
  .pab-career {
    padding: 40px 16px !important;
  }
  .pab-philosophy {
    padding: 40px 16px !important;
  }
}

/* ============================================================
   page-service.php レスポンシブ
============================================================ */
/* --- タブレット（1024px以下） --- */
@media (max-width: 1024px) {
  .psv-hero {
    padding: 80px 52px 64px !important;
  }
  .psv-service-item {
    padding: 70px 52px !important;
    gap: 52px !important;
  }
  .psv-flow {
    padding: 80px 52px !important;
  }
  .psv-price {
    padding: 80px 52px !important;
  }
  .psv-faq {
    padding: 80px 52px !important;
  }
  .psv-flow-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .psv-faq-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- スマートフォン（768px以下） --- */
@media (max-width: 768px) {
  /* ヒーロー */
  .psv-hero {
    margin-top: 64px !important;
    padding: 64px 24px 48px !important;
  }
  /* サービス詳細（各セクション）：縦積み */
  .psv-service-item {
    padding: 56px 24px !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* 対応内容リスト：1カラム */
  .psv-item-list {
    grid-template-columns: 1fr !important;
  }
  /* 制作の流れ */
  .psv-flow {
    padding: 56px 24px !important;
  }
  .psv-flow-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .psv-flow-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  /* 料金 */
  .psv-price {
    padding: 56px 24px !important;
  }
  .psv-price-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .psv-price-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 16px 20px !important;
    text-align: left !important;
  }
  /* FAQ */
  .psv-faq {
    padding: 56px 24px !important;
  }
  .psv-faq-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- スマートフォン標準（480px以下） --- */
@media (max-width: 480px) {
  .psv-hero {
    margin-top: 60px !important;
    padding: 52px 20px 40px !important;
  }
  .psv-service-item {
    padding: 44px 20px !important;
  }
  .psv-flow {
    padding: 44px 20px !important;
  }
  .psv-price {
    padding: 44px 20px !important;
  }
  .psv-faq {
    padding: 44px 20px !important;
  }
  .psv-price-row {
    padding: 14px 16px !important;
  }
}

/* --- 小型スマートフォン（375px以下） --- */
@media (max-width: 375px) {
  .psv-hero {
    padding: 48px 16px 36px !important;
  }
  .psv-service-item {
    padding: 40px 16px !important;
  }
  .psv-flow {
    padding: 40px 16px !important;
  }
  .psv-price {
    padding: 40px 16px !important;
  }
  .psv-faq {
    padding: 40px 16px !important;
  }
  .psv-price-row {
    padding: 12px 14px !important;
  }
}

/* ============================================================
   全デバイス対応：堅牢性強化レイヤー
   Mac・Windows・タブレット・スマホ間の表示崩れを防止する
   最終調整ルール。最大幅1920px／最小幅375pxを基準に設計。
============================================================ */
/* ---- グローバル基盤：横スクロール完全防止 ---- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ---- flex/gridの子要素が縮小できるようにする（横あふれ防止） ---- */
#site-header > *,
.nav-right > *,
.nav-links > * {
  min-width: 0;
}

/* ---- ヘッダーのflex設定（折り返し防止のみ、padding等の見た目は変更しない） ---- */
#site-header {
  display: flex;
  flex-wrap: nowrap;
}

/* ---- 1920px超のワイドモニターでは、中身が際限なく間延びしないよう
        ヘッダー・各セクションに上限幅を設定。1920px以下は元のレイアウトのまま、
        1920pxを超えた分だけ左右中央寄せで余白になる ---- */
#site-header,
#about,
#service,
#works,
#cta-banner,
#contact,
#site-footer {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ---- ナビが画面幅ギリギリで詰まる事故を防ぐ安全策（768px〜1024px帯） ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-links {
    display: none !important;
  }
  .nav-cta {
    display: none !important;
  }
  .nav-hamburger {
    display: flex !important;
  }
}

/* ---- 375px未満の極小デバイスでも横あふれだけは防止（見た目のサイズ感は変更しない） ---- */
@media (max-width: 374px) {
  #site-header {
    padding: 0 12px !important;
  }
  .hero-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---- フォームやボタンが画面幅を超えないようにする全体安全策 ---- */
input,
textarea,
select,
button {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- 画像・iframe等のメディアが常にコンテナ幅に収まるようにする ---- */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* ---- テーブルがスマホで横にあふれないようにする ---- */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

@media (min-width: 769px) {
  table {
    display: table;
    overflow-x: visible;
  }
}

/* ============================================================
   追加修正①：Gutenbergテーブルブロックの横あふれ対策
   （移行記事の横スクロール問題）
============================================================ */
.scol-content .wp-block-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
}

.scol-content table.has-fixed-layout {
  table-layout: fixed;
  width: 100%;
}

.scol-content table td,
.scol-content table th {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================================
   追加修正②：管理バー（adminバー）のモバイル高さ対応
   （ログイン中にヘッダーが管理バーと重なる問題）
============================================================ */
@media (max-width: 782px) {
  .admin-bar #site-header {
    top: 46px;
  }
  .admin-bar .hero-scroll {
    bottom: 40px;
  }
}

/* ============================================================
   追加修正③：コラム一覧ページ（page-column.php）の横あふれ対策
============================================================ */
.pcol-card-title,
.pcol-card-excerpt,
.pcol-profile-bio,
.pcol-recent-body p {
  overflow-wrap: break-word;
  word-break: break-word;
}

.pcol-cat-nav,
.pcol-cat-list {
  max-width: 100%;
}

.pcol-card-thumb img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.pcol-wrap,
.pcol-inner,
.pcol-grid,
.pcol-card {
  max-width: 100%;
  overflow-x: hidden;
}
/* ============================================================
   追加修正④：本文内キャプション画像の余白調整
   （画像とキャプション文字の間が空きすぎる問題）
============================================================ */
.scol-content figure {
  margin: 0 0 28px;
}

.scol-content figure img {
  margin: 0 0 6px;
}

.scol-content .wp-element-caption,
.scol-content figcaption {
  margin-top: 0;
  font-size: 13px;
  color: var(--stone);
  text-align: center;
  line-height: 1.6;
}
/* ============================================================
   追加修正⑤：ヘッダーロゴを1行固定（文字切れ防止版）
============================================================ */
.nav-logo {
  white-space: nowrap !important;
  font-size: clamp(11px, 4.2vw, 19px) !important;
  max-width: 58vw !important;
  letter-spacing: 0.02em !important;
  text-overflow: ellipsis;
}
/* ============================================================
   追加修正⑥：見出しテキストの不自然な改行（孤立行）防止
============================================================ */
.section-h2,
.hero-h1,
.page-hero-title,
.cta-banner-h {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (min-width: 1025px) {
  .service-head {
    grid-template-columns: 1.3fr 1fr;
  }
}

/* ============================================================
   追加修正⑦：制作実績一覧ページ（archive-works.php）
   このページのインライン style には @media 対応が一切なく、
   左右 100px 固定パディング・CTAバナーの flex 行が
   スマホ幅で詰まる／あふれる原因になっていたため新規追加。
   （デザイン・配色・フォントは変更せず、余白と折り返しのみ調整）
============================================================ */
@media (max-width: 1024px) {
  .archive-hero {
    padding: 90px 52px 70px !important;
  }
  div[style*="padding:0 100px"] {
    padding: 0 24px !important;
  }
  section[style*="padding:80px 100px 130px"] {
    padding: 64px 24px 96px !important;
  }
}

@media (max-width: 768px) {
  .archive-hero {
    padding: 60px 24px 48px !important;
    margin-top: 64px !important;
  }
  div[style*="padding:0 100px"] {
    padding: 0 16px !important;
    top: 64px !important;
  }
  section[style*="padding:80px 100px 130px"] {
    padding: 40px 16px 72px !important;
  }
  /* フィーチャードカード：2列スパン解除（1列化のため） */
  article[style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }
  /* CTA バナー：横並び → 縦積み（固定 gap:60px の flex 行が
     画面外にあふれていたのを解消） */
  div[style*="justify-content:space-between"][style*="gap:60px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 48px 24px !important;
    gap: 28px !important;
  }
  div[style*="justify-content:space-between"][style*="gap:60px"]
    > div[style*="flex-shrink:0"] {
    width: 100%;
  }
  div[style*="justify-content:space-between"][style*="gap:60px"]
    a[style*="padding:20px 52px"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 18px 24px !important;
  }
}

@media (max-width: 430px) {
  .archive-hero {
    padding: 52px 20px 40px !important;
  }
  div[style*="padding:0 100px"] {
    padding: 0 20px !important;
  }
  section[style*="padding:80px 100px 130px"] {
    padding: 32px 20px 56px !important;
  }
  div[style*="justify-content:space-between"][style*="gap:60px"] {
    padding: 40px 20px !important;
  }
}

@media (max-width: 390px) {
  div[style*="padding:0 100px"] {
    padding: 0 16px !important;
  }
  section[style*="padding:80px 100px 130px"] {
    padding: 28px 16px 48px !important;
  }
  div[style*="justify-content:space-between"][style*="gap:60px"] {
    padding: 36px 16px !important;
  }
}

/* ============================================================
   追加修正⑧：固定 flex 行のセレクタ表記ゆれ統一
   "justify-content: space-between"（スペース有）と
   "justify-content:space-between"（スペース無）の両方が
   テーマ内に混在しており、片方しかCSSが対応していなかったため、
   両方の表記をカバーするよう統一（横スクロール防止の最終策）。
============================================================ */
@media (max-width: 768px) {
  div[style*="justify-content: space-between"][style*="gap: 60px"],
  div[style*="justify-content:space-between"][style*="gap: 60px"],
  div[style*="justify-content: space-between"][style*="gap:60px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
}

/* 横スクロール最終防止策（全ページ共通の安全網） */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.scol-content {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   追加修正⑨：投稿本文（single.php）がスマホで右に寄って見える問題
   原因：WordPress標準の .alignleft / .alignright（float指定）が
   モバイル幅でも float したまま残り、画像サイズによって本文の
   センタリングが崩れて見えていたため、768px以下では float を
   解除して通常の縦積みに変更（PC表示は元のまま floatを維持）。
============================================================ */
@media (max-width: 768px) {
  .scol-content .alignleft,
  .scol-content .alignright,
  .scol-content .wp-block-image.alignleft,
  .scol-content .wp-block-image.alignright {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
  }
  .scol-content .alignleft img,
  .scol-content .alignright img {
    margin: 0 auto;
  }
  /* 本文・サイドバー全体を確実に中央固定 */
  .scol-wrap,
  .scol-inner,
  .scol-main,
  .scol-content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
   ▼▼▼ ここから下：リニューアル用 追加オーバーレイ
   （main-renewal.css の内容をここに統合。元のスタイルは上書きせず、
     セレクタの優先と後勝ちのCSSカスケードで装飾のみ追加しています）
============================================================ */

:root {
  /* ベースはそのまま継承しつつ、表現力を拡張 */
  --signal: #ff5a36; /* 主役のシグナルカラー（コーラルオレンジ） */
  --signal-light: #ff8a65;
  --lime: #c6f135; /* ポートフォリオらしい遊びのスパイス */
  --violet: #6c5ce7;
  --ink-soft: #2b3744;

  --grad-signal: linear-gradient(
    135deg,
    var(--signal) 0%,
    var(--gold-light) 100%
  );
  --grad-deep: linear-gradient(135deg, var(--blue-dark) 0%, var(--violet) 100%);
  --grad-mesh: radial-gradient(
      circle at 15% 20%,
      rgba(255, 90, 54, 0.16),
      transparent 45%
    ),
    radial-gradient(circle at 85% 0%, rgba(108, 92, 231, 0.14), transparent 40%),
    radial-gradient(
      circle at 50% 100%,
      rgba(198, 241, 53, 0.12),
      transparent 45%
    );

  --shadow-soft: 0 12px 32px rgba(13, 17, 23, 0.08);
  --shadow-lift: 0 20px 48px rgba(13, 17, 23, 0.16);
  --radius-lg: 28px;
  --radius-md: 16px;

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 選択範囲・スクロールバーにも世界観を */
::selection {
  background: var(--signal);
  color: var(--white);
}

html {
  scrollbar-color: var(--signal) var(--off);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--off);
}
::-webkit-scrollbar-thumb {
  background: var(--grad-signal);
  border-radius: 10px;
  border: 2px solid var(--off);
}

/* 背面にうっすらメッシュグラデを敷き、紙っぽさ→個性派スタジオ感へ */
body {
  background-image: var(--grad-mesh);
  background-attachment: fixed;
}

/* ============================================================
   2. ヘッダー / ナビ
============================================================ */
#site-header {
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(13, 17, 23, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

#site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 30px rgba(13, 17, 23, 0.07);
}

.nav-logo {
  position: relative;
  letter-spacing: 0.08em;
}

.nav-logo::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.15);
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--grad-signal);
  border-radius: 2px;
  transition: width 0.35s var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.current-menu-item::after {
  width: 100%;
}

/* ============================================================
   3. ボタン
============================================================ */
.btn-primary,
.btn-cta-lg {
  background: var(--ink);
  background-image: var(--grad-signal);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease-pop), box-shadow 0.35s var(--ease-out);
}

.btn-primary:hover,
.btn-cta-lg:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lift);
}

.btn-primary::before,
.btn-cta-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-primary:hover::before,
.btn-cta-lg:hover::before {
  opacity: 1;
}

.btn-ghost {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: all 0.3s var(--ease-out);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ============================================================
   4. セクション見出し系
============================================================ */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.section-kicker::before {
  background: var(--grad-signal) !important;
  width: 28px;
  height: 3px;
  border-radius: 3px;
}

.section-h2 {
  /* 見本(main.css)の文字色をそのまま維持。装飾はkickerの下線やカード側で表現する */
  color: var(--ink);
}

.section-h2--white {
  color: var(--white);
}

/* ============================================================
   5. CTAカード / 汎用カード共通の“立体感”
============================================================ */
.cta-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.9),
    rgba(247, 246, 243, 0.7)
  );
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-pop), box-shadow 0.4s var(--ease-out);
}

.cta-card:hover {
  transform: translateY(-6px) rotate(-0.3deg);
  box-shadow: var(--shadow-lift);
}

.cta-card-arrow {
  color: var(--signal);
  transition: transform 0.35s var(--ease-pop);
}

.cta-card:hover .cta-card-arrow {
  transform: translateX(6px) rotate(8deg);
}

/* ============================================================
   6. 作品カード（works）に質感とホバーの“効き”を追加
   ※ クラス名は archive-works.php / front-page.php 内の
     画像ラッパーに準拠（既存 .works 系クラスへ非破壊で重ねる）
============================================================ */
img {
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}

a:hover img {
  filter: saturate(1.08);
}

/* ============================================================
   7. コラム（BtoBコラム）— scol- / col- 系の質感アップ
============================================================ */
.col-hero,
.scol-hero {
  position: relative;
}

.col-hero::after,
.scol-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  pointer-events: none;
}

.scol-cats,
.col-card-cats {
  gap: 8px;
}

.scol-cat,
.col-card-cat {
  border-radius: 999px;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.scol-cat:hover,
.col-card-cat:hover {
  transform: translateY(-1px);
}

.col-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-pop), box-shadow 0.4s var(--ease-out);
}

.col-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.col-card-thumb img {
  transition: transform 0.6s var(--ease-out);
}

.col-card:hover .col-card-thumb img {
  transform: scale(1.06);
}

.col-card-title {
  position: relative;
}

.col-cat-tab {
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.25s var(--ease-out);
}

.col-cat-tab.is-active {
  background: var(--ink);
  color: var(--white);
}

.scol-profile-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff, var(--off));
  box-shadow: var(--shadow-soft);
}

.scol-sidebar-cta {
  border-radius: var(--radius-lg);
  background: var(--grad-deep);
  color: var(--white);
}

.scol-sidebar-cta-btn {
  background: var(--grad-signal);
  border-radius: 999px;
  font-weight: 700;
}

.scol-toc {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--off);
}

.scol-share-btn {
  border-radius: 50%;
  transition: transform 0.3s var(--ease-pop), box-shadow 0.3s;
}

.scol-share-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   8. フッター
============================================================ */
footer,
#colophon {
  position: relative;
}

.footer-logo {
  color: var(--white);
}

.footer-nav a {
  transition: color 0.25s, padding-left 0.25s;
}

.footer-nav a:hover {
  color: var(--signal);
  padding-left: 4px;
}

/* ============================================================
   9. フォーカス可視性（アクセシビリティ）
============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   10. レスポンシブ補強
   既存ブレークポイント（1280 / 1024 / 768 / 480 / 375）に追従。
   新規装飾要素のみ、ここで密度調整。
============================================================ */
@media (max-width: 1024px) {
  .cta-card:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll; /* fixed背景はスマホで描画負荷になるため固定解除 */
  }
  .col-card:hover,
  .cta-card:hover {
    transform: none; /* タッチデバイスではホバー演出を無効化し誤動作を防止 */
  }
  .nav-logo::before {
    display: none; /* SPの狭いロゴ領域では装飾ドットを省略 */
  }
}

@media (max-width: 480px) {
  :root {
    --radius-lg: 20px;
    --radius-md: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-cta-lg,
  .cta-card,
  .col-card,
  img {
    transition: none !important;
  }
}

@media print {
  body {
    background-image: none;
  }
}
/* home.php / single.php：スマホ完成版 */
@media (max-width: 768px) {
  .pcol-wrap,
  .scol-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 0 56px !important;
    overflow-x: hidden !important;
  }

  .pcol-inner,
  .pcol-inner.pcol-inner--wide,
  .scol-inner {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 375px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .pcol-main,
  .pcol-sidebar,
  .pcol-widget,
  .pcol-grid,
  .pcol-card,
  .scol-main,
  .scol-content,
  .scol-sidebar,
  .scol-sidebar-widget,
  .scol-toc {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .pcol-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .pcol-sidebar,
  .scol-sidebar {
    position: static !important;
    margin-top: 32px !important;
  }

  .pcol-widget,
  .scol-sidebar-widget {
    padding: 32px 22px !important;
    overflow: hidden !important;
  }

  .scol-search,
  .scol-search-wrap,
  .scol-search-form,
  .pcol-search form {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .scol-search-input,
  .scol-search-form input,
  .pcol-search input,
  .pcol-search input[type="search"] {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  .scol-search-btn,
  .scol-search-form button,
  .pcol-search button {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    box-sizing: border-box !important;
  }

  .scol-content img,
  .pcol-card img,
  .pcol-profile-img {
    max-width: 100% !important;
    height: auto !important;
  }
}