@charset "UTF-8";
/* =========================================
   Service-detail page shared styles
========================================= */
.sd-mv {
  position: relative;
  padding: clamp(80px, 11vw, 140px) 0 0;
  background: #ffffff;
  border-bottom: 0;
  overflow: hidden;
}
.sd-mv .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.sd-mv .breadcrumb {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-sub);
  margin-bottom: 16px;
}
.sd-mv .breadcrumb span { color: var(--c-line); }
.sd-mv .cat {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
  margin-bottom: 20px;
  display: inline-block;
}
.sd-mv .en-label {
  font-family: var(--font-en);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-black);
  line-height: 1.05;
  display: block;
  margin-bottom: 18px;
}
.sd-mv h1 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  line-height: 1.7;
  margin-top: 8px;
}
.sd-mv .lead {
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
}
@media (max-width: 800px) { .sd-mv .container { grid-template-columns: 1fr; } }

/* アイキャッチ画像が設定されている場合のヒーロー（ダークオーバーレイ + 白文字）。
   wp_head フックで `<style>.sd-mv { background-image: url(...) }</style>` が出力され、
   body.apricot-has-hero がトリガーになる。 */
body.apricot-has-hero .sd-mv {
  background-color: #1f2226;
  background-size: cover;
  background-position: center;
  /* 背景写真があるパターンでは上下に余白を入れて文字が端に張り付かないように */
  padding: clamp(160px, 22vw, 280px) 0 clamp(80px, 10vw, 120px);
}
body.apricot-has-hero .sd-mv::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
body.apricot-has-hero .sd-mv .container { z-index: 2; }
body.apricot-has-hero .sd-mv .breadcrumb,
body.apricot-has-hero .sd-mv .breadcrumb a,
body.apricot-has-hero .sd-mv .breadcrumb span,
body.apricot-has-hero .sd-mv .cat,
body.apricot-has-hero .sd-mv .en-label,
body.apricot-has-hero .sd-mv h1,
body.apricot-has-hero .sd-mv .lead,
body.apricot-has-hero .sd-mv .lead-fv { color: #fff !important; }
body.apricot-has-hero .sd-mv .breadcrumb a { opacity: 0.85; }

/* Intro block */
.sd-intro { background: var(--c-bg-soft); padding-bottom: 0 !important; }
.sd-intro h2 {
  font-family: var(--font-serif-jp);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.85;
  color: var(--c-black);
  letter-spacing: 0.06em;
  margin-bottom: 40px;
  max-width: 920px;
}
.sd-intro p {
  font-size: 15px;
  line-height: 2.2;
  margin-bottom: 24px;
  max-width: 900px;
}

/* CAN DO 中央寄せ版（縮小写真の下に配置） */
.sd-intro-center .section-head { text-align: center; }
.sd-intro-center .section-head h2,
.sd-intro-center .section-head .sub { margin-left: auto; margin-right: auto; }
.sd-intro-center .container-narrow > .reveal { text-align: center; }
.sd-intro-center .container-narrow > .reveal h2 { margin-left: auto; margin-right: auto; }
.sd-intro-center .container-narrow > .reveal p {
  margin-left: auto;
  margin-right: auto;
}

/* PHILOSOPHY: 左に画像 / 右にコンテンツ */
.sd-philosophy {
  background: var(--c-bg-soft);
  padding: var(--section-py) 0;
}
.sd-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.sd-philosophy-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-bg);
}
.sd-philosophy-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.sd-philosophy-grid:hover .sd-philosophy-img img { transform: scale(1.04); }
.sd-philosophy-body .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.sd-philosophy-body h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 500;
  line-height: 2;
  color: var(--c-black);
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  max-width: none;
}
.sd-philosophy-body p {
  font-size: 15px;
  line-height: 2.2;
  margin-bottom: 20px;
  max-width: none;
  color: var(--c-text);
}
.sd-philosophy-body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .sd-philosophy-grid { grid-template-columns: 1fr; gap: 32px; }
  .sd-philosophy-img { aspect-ratio: 3 / 2; }
}

/* "Such Like" pain points */
.sd-such {
  position: relative;
  padding-bottom: 160px;
  background: url('/wp-content/themes/apricot-2026/assets/photos/branding/sd-such-bg.jpg') center/cover no-repeat;
}
.sd-such::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 0;
}
.sd-such > .container { position: relative; z-index: 1; }
.sd-such .section-head .en-label,
.sd-such .section-head h2,
.sd-such .section-head .sub { color: #ffffff; }
.sd-such-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.sd-such-item {
  background: #ffffff;
  padding: 28px clamp(24px, 3vw, 40px);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.18), 0 2px 6px -3px rgba(0, 0, 0, 0.08);
  display: block;
}
.sd-such-item::before { content: none; }
.sd-such-item p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 700px) { .sd-such-list { grid-template-columns: 1fr; } }

/* ============================================
   SUCH AS マーキー — 3 段が右←左 / 左→右 / 右←左 の順で流れる
   JS が <section.sd-such .sd-such-list> を 3 行の .sd-such-marquee に再構築する
============================================ */
.sd-such .sd-such-list.is-marquee {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  grid-template-columns: none;
  /* container の左右 padding を打ち消して画面端まで流す */
  margin-left: calc(var(--pad-x, 32px) * -1);
  margin-right: calc(var(--pad-x, 32px) * -1);
  padding-left: 0;
  padding-right: 0;
}
.sd-such-marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.sd-such-marquee-track {
  display: flex;
  gap: clamp(14px, 1.4vw, 22px);
  flex-shrink: 0;
  padding-right: clamp(14px, 1.4vw, 22px);
  animation: sd-such-marquee-left 60s linear infinite;
  will-change: transform;
}
.sd-such-marquee.is-rtl .sd-such-marquee-track {
  animation-name: sd-such-marquee-right;
}
.sd-such-marquee:hover .sd-such-marquee-track,
.sd-such-marquee:focus-within .sd-such-marquee-track {
  animation-play-state: paused;
}
.sd-such-marquee .sd-such-item {
  flex-shrink: 0;
  width: clamp(260px, 24vw, 360px);
}
@keyframes sd-such-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes sd-such-marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-such-marquee-track { animation: none; }
}
@media (max-width: 700px) {
  .sd-such-marquee .sd-such-item { width: 240px; }
}

/* Approach blocks */
.sd-approach { background: var(--c-bg); }

/* =========================================
   APPROACH（進め方）— ミニマルカードグリッド
   .sd-approach 内の .proc-slider はスライダーを止めて
   4 カラムカードグリッド + 右上に矢印円 のレイアウトに変換。
   写真（.img）と説明文（p）は非表示にして、STEP / JP / EN だけのミニマル表示。
========================================= */
.sd-approach .proc-slider {
  display: block;
  margin: 0;
}
.sd-approach .proc-viewport {
  overflow: visible;
  padding: 0 !important;
}
.sd-approach .proc-track {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  height: auto !important;
  align-items: stretch !important;
  padding: 0 !important;
  transform: none !important;
  width: auto !important;
}
.sd-approach .proc-controls,
.sd-approach .proc-dots,
.sd-approach .proc-arrow { display: none !important; }

.sd-approach .proc-slide {
  position: relative;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: none !important;
  background: #fff;
  border: 0;
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 2.8vw, 36px);
  min-height: clamp(220px, 22vw, 280px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.sd-approach .proc-slide:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.sd-approach .proc-slide .img { display: none; }
.sd-approach .proc-slide .body {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}
/* STEP 01 ラベル（左上） */
.sd-approach .proc-slide .num {
  position: absolute;
  top: clamp(22px, 2.6vw, 32px);
  left: clamp(24px, 2.8vw, 36px);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--c-sub);
}
/* JP タイトル（大、下部） */
.sd-approach .proc-slide h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--c-black);
  margin: 0 0 10px;
  order: 1;
}
/* EN サブラベル（JP の下） */
.sd-approach .proc-slide .en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  margin: 0;
  order: 2;
}
.sd-approach .proc-slide p { display: none; }
/* 右上：矢印円 */
.sd-approach .proc-slide::after {
  content: '';
  position: absolute;
  top: clamp(20px, 2.4vw, 28px);
  right: clamp(20px, 2.4vw, 28px);
  width: clamp(34px, 2.8vw, 42px);
  height: clamp(34px, 2.8vw, 42px);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='10,7 16,12 10,17' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
  transition: background-color .25s ease, border-color .25s ease;
}
.sd-approach .proc-slide:hover::after {
  background-color: var(--c-black);
  border-color: var(--c-black);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='10,7 16,12 10,17' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* タブレット：2 列 */
@media (max-width: 1024px) {
  .sd-approach .proc-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* SP：1 列 */
@media (max-width: 560px) {
  .sd-approach .proc-track {
    grid-template-columns: 1fr !important;
  }
  .sd-approach .proc-slide {
    min-height: clamp(160px, 38vw, 220px);
  }
}
.sd-approach-list {
  border-top: 1px solid var(--c-line);
}
.sd-approach-row {
  display: grid;
  grid-template-columns: 100px 220px 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: flex-start;
}
.sd-approach-row .num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
}
.sd-approach-row .title h3 {
  font-family: var(--font-en);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--c-black);
  font-weight: 400;
  margin-bottom: 10px;
}
.sd-approach-row .title .jp {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.06em;
}
.sd-approach-row .body p {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .sd-approach-row { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}

/* Deliverables grid */
.sd-deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
  margin-top: 40px;
}
.sd-deliverable {
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 32px clamp(20px, 3vw, 36px);
}
.sd-deliverable .en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-sub);
  margin-bottom: 12px;
  display: block;
}
.sd-deliverable h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--c-black);
}
.sd-deliverable p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text);
}
@media (max-width: 800px) { .sd-deliverables { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .sd-deliverables { grid-template-columns: 1fr; } }

/* Pricing card */
.sd-pricing { background: #ffffff; padding-bottom: 0 !important; }
.sd-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.sd-price {
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
  background: var(--c-bg-soft);
}
.sd-price .plan {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-sub);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column-reverse; /* 吹き出しを PLAN 名の上に表示 */
  align-items: flex-start;
  gap: 14px;
}

/* PRICING の黒い吹き出しラベル（PLAN 名の上に表示・下向きしっぽ） */
.sd-price-bubble {
  position: relative;
  display: inline-block;
  background: #1a1a1a;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 14px;
  white-space: nowrap;
}
.sd-price-bubble::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #1a1a1a;
}
.sd-price .price {
  font-family: var(--font-en);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--c-black);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.sd-price .price small { font-size: 14px; color: var(--c-sub); margin-left: 4px; letter-spacing: 0.06em; }
.sd-price h4 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.sd-price p { font-size: 13px; line-height: 1.9; color: var(--c-text); margin-bottom: 20px; }
.sd-price ul { margin-top: 16px; }
.sd-price ul li {
  font-size: 13px;
  padding: 10px 0;
  border-top: 1px dashed var(--c-line);
  display: flex;
  gap: 10px;
  color: var(--c-text);
}
.sd-price ul li::before {
  content: '\2014';
  color: var(--c-sub);
  flex-shrink: 0;
}
@media (max-width: 800px) { .sd-pricing-grid { grid-template-columns: 1fr; } }

/* Related works */
.sd-related { background: var(--c-bg-soft); }

/* =========================================
   Photo accents (used between sections)
========================================= */
.sd-photo-band {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin: 0;
}
.sd-photo-band img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sd-photo-band.aspect-21x9 { aspect-ratio: 21 / 9; }
.sd-photo-band.aspect-16x9 { aspect-ratio: 16 / 9; }
.sd-photo-band.aspect-3x2  { aspect-ratio: 3 / 2; }

.sd-photo-offset {
  display: grid;
  grid-template-columns: 12fr 4fr;
  gap: 0;
  padding: clamp(60px, 8vw, 120px) 0;
  background: var(--c-bg);
}
.sd-photo-offset.right { grid-template-columns: 4fr 12fr; }
.sd-photo-offset .img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-soft); }
.sd-photo-offset .img img { width: 100%; height: 100%; object-fit: cover; }
.sd-photo-offset .caption {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px) clamp(40px, 5vw, 80px);
}
.sd-photo-offset.right .caption { padding: 0 clamp(40px, 5vw, 80px) clamp(16px, 2vw, 32px) clamp(24px, 3vw, 48px); }
.sd-photo-offset .caption .num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--c-sub);
  margin-bottom: 12px;
}
.sd-photo-offset .caption p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-sub);
  letter-spacing: 0.08em;
}
@media (max-width: 800px) {
  .sd-photo-offset, .sd-photo-offset.right { grid-template-columns: 1fr; }
  .sd-photo-offset .caption { padding: 24px clamp(24px, 5vw, 40px) 0 !important; }
}

.sd-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(60px, 8vw, 120px) clamp(32px, 6vw, 112px);
  background: var(--c-bg);
  align-items: end;
}
.sd-photo-pair .img { overflow: hidden; background: var(--c-bg-soft); }
.sd-photo-pair .img img { width: 100%; height: 100%; object-fit: cover; }
.sd-photo-pair .img-1 { aspect-ratio: 4 / 5; }
.sd-photo-pair .img-2 { aspect-ratio: 3 / 4; transform: translateY(clamp(-40px, -5vw, -80px)); }
@media (max-width: 700px) {
  .sd-photo-pair { grid-template-columns: 1fr; }
  .sd-photo-pair .img-2 { transform: none; }
}

/* ============================================================
   Related list — used by parent service pages (.detail-list / .detail-row)
============================================================ */
.detail-list {
  max-width: 1080px;
  margin: 0 auto;
}
.detail-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-text);
  transition: background .2s ease, padding .2s ease;
}
.detail-row:hover { background: var(--c-bg); padding-left: 16px; padding-right: 16px; }
.detail-row .num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--c-sub);
}
.detail-row .body h3 {
  font-family: var(--font-serif-jp);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-bottom: 6px;
  line-height: 1.6;
}
.detail-row .body p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-sub);
  letter-spacing: 0.04em;
}
.detail-row .arrow-link {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-black);
  text-align: right;
  white-space: nowrap;
}
.detail-row .arrow-link::after { content: ' →'; color: var(--c-sub); }
@media (max-width: 700px) {
  .detail-row { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .detail-row .num { font-size: 12px; }
  .detail-row .arrow-link { text-align: left; margin-top: 8px; }
}

/* ============================================================
   SP-specific MV scaling — keep hero readable on small screens
============================================================ */
@media (max-width: 600px) {
  .sd-mv h1, .ind-mv h1 + .container h1 { letter-spacing: 0.04em; }
  .sd-mv .lead, .ind-mv .lead { font-size: 13px; line-height: 2; }
  .sd-mv .container { padding-top: clamp(120px, 24vw, 180px); padding-bottom: clamp(48px, 10vw, 80px); }
}

/* ============================================================
   FAQ-list common visuals (used by many parent service pages)
============================================================ */
/* .faq-list / .faq-item の見た目は common.css のカード型アコーディオンに統一 */

/* ==========================================================================
   RELATED BANNERS — 横長カード + 件数に応じて 1/2/3 列
   ========================================================================== */
.related-banners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
  padding-bottom: 160px;
}
@media (max-width: 1000px) { .related-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related-banner {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #2a2a2a;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}
.related-banner .rb-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(.2,.8,.2,1);
}
.related-banner:hover .rb-bg { transform: scale(1.06); }
.related-banner .rb-overlay {
  position: absolute; inset: 0;
  background: rgba(50, 50, 50, .42);
  z-index: 1;
  transition: background .35s ease;
}
.related-banner:hover .rb-overlay {
  background: rgba(50, 50, 50, .30);
}
.related-banner .rb-body {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(20px, 2.2vw, 28px);
  gap: 6px;
}
.related-banner .rb-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.related-banner .rb-en {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255,255,255,.85);
}
.related-banner .rb-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: .06em;
  line-height: 1.55;
  color: #fff;
  margin: 0;
}
.related-banner .rb-desc { display: none; }
/* 矢印は右下 */
.related-banner .rb-arrow {
  position: absolute;
  bottom: clamp(20px, 2.2vw, 28px);
  right: clamp(20px, 2.2vw, 28px);
  font-size: clamp(14px, 1.1vw, 16px);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  transition: transform .3s ease;
  z-index: 3;
}
.related-banner:hover .rb-arrow { transform: translateX(6px); }

@media (max-width: 600px) {
  .related-banners { gap: 16px; }
  .related-banner { aspect-ratio: 3 / 2; }
}

/* =====================================================
 * SERVICE 同階層ピルナビ（fieldcorp.jp/works/ 風の横並び）
 * 流し込み HTML（.sd-mv）の上、ヘッダー直下に配置。
 * journal の media-cats と同じ「上下罫線・横並び・wrap」仕様。
 * ===================================================== */
.ss-pillnav {
  background: #2a2a2a;
  border-top: 0;
  border-bottom: 0;
  padding: clamp(28px, 3vw, 40px) 0;
  margin-top: 0;
  color: #e8e8e8;
}
.ss-pillnav .ss-pillnav-head { color: #fff; }
.ss-pillnav .ss-pillnav-list li a {
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.32);
  background: transparent;
}
.ss-pillnav .ss-pillnav-list li a:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.ss-pillnav .ss-pillnav-list li.is-current a {
  background: #fff;
  color: #2a2a2a;
  border-color: #fff;
}
.ss-pillnav .ss-pillnav-section-head .en-label,
.ss-pillnav .ss-pillnav-head .en,
.ss-pillnav .ss-pillnav-head .jp { color: #fff; }
.ss-pillnav-section-head {
  text-align: center;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.ss-pillnav-section-head .en-label {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: 0.18em;
  color: var(--c-black);
  margin-bottom: 6px;
  font-weight: 500;
}
.ss-pillnav-section-head .jp {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
}
.ss-pillnav > .container {
  max-width: var(--container, 1600px);
  margin: 0 auto;
  padding: 0 clamp(40px, 9.6vw, 100px);
}
@media (max-width: 800px) {
  .ss-pillnav > .container { padding: 0 clamp(20px, 5vw, 32px); }
}
.ss-pillnav-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  flex-wrap: wrap;
}
.ss-pillnav-head {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--c-black);
  padding-right: clamp(16px, 2.5vw, 32px);
  border-right: 1px solid var(--c-line);
  flex-shrink: 0;
}
.ss-pillnav-head .en {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 500;
  line-height: 1.2;
}
.ss-pillnav-head .jp {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-sub);
  line-height: 1.2;
}
.ss-pillnav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.ss-pillnav-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ss-pillnav-list li a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-sub);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.ss-pillnav-list li a:hover {
  color: var(--c-black);
  border-color: var(--c-line);
}
.ss-pillnav-list li.is-current a,
.ss-pillnav-head.is-current {
  color: var(--c-black);
}
.ss-pillnav-list li.is-current a {
  background: var(--c-black);
  color: #fff;
  border-color: var(--c-black);
}

@media (max-width: 800px) {
  .ss-pillnav { position: relative; top: 0; padding: 30px 0; } /* #1952 SP 上下 12→30 */
  .ss-pillnav-inner {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* #1953 横スクロール可能を視覚化：右端をフェードして「続きがある」ことを示す */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    padding-right: 12px;
  }
  .ss-pillnav-inner::-webkit-scrollbar { display: none; }
  .ss-pillnav-head { padding-right: 16px; }
  .ss-pillnav-list { flex-wrap: nowrap; flex: 0 0 auto; }
  .ss-pillnav-list li a { white-space: nowrap; padding: 5px 12px; font-size: 12px; }
}

/* =====================================================
 * /branding-design/ 一覧（fieldcorp.jp/works/ 風カードグリッド）
 * ===================================================== */
.bd-archive .bd-hero {
  padding: clamp(64px, 8vw, 120px) clamp(32px, 6vw, 80px) clamp(40px, 6vw, 80px);
  background: #ffffff; /* 背景を白に */
}
.bd-archive .bd-hero-inner { max-width: 980px; }
.bd-archive .bd-hero .breadcrumb {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  margin-bottom: clamp(28px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.bd-archive .bd-hero .breadcrumb a {
  color: var(--c-sub);
  text-decoration: none;
  transition: color .25s ease;
}
.bd-archive .bd-hero .breadcrumb a:hover { color: var(--c-black); }
.bd-archive .bd-hero .breadcrumb span:not(:has(*)):not(:last-child) { color: var(--c-line); }
.bd-archive .bd-hero .en-label {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(36px, 4.6vw, 60px);
  letter-spacing: 0.05em;
  color: var(--c-black);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 16px;
}
.bd-archive .bd-hero h1 {
  font-family: var(--font-jp);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--c-black);
  margin: 0 0 24px;
}
.bd-archive .bd-hero .lead {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text);
  max-width: 720px;
  margin: 0;
}
.bd-archive .bd-grid-wrap {
  padding: clamp(32px, 5vw, 64px) clamp(32px, 6vw, 80px) clamp(80px, 10vw, 140px);
  background: #ffffff; /* 背景を白に */
}
/* #1900 sub-page 既定の padding-bottom:0 を上書きして下余白140を確保 */
.bd-archive .bd-grid-wrap { padding-bottom: 140px !important; }
.bd-archive .bd-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 4vw, 80px);
  align-items: start;
}
.bd-archive .bd-sidebar {
  position: sticky;
  top: clamp(100px, 12vh, 140px);
  align-self: start;
}
.bd-archive .bd-sidebar-title {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-black);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-black);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
}
.bd-archive .bd-sidebar-title .ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-sub);
}
.bd-archive .bd-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
.bd-archive .bd-sidebar-list li {
  border-bottom: 1px dotted var(--c-line);
}
.bd-archive .bd-sidebar-list li:last-child { border-bottom: none; }
.bd-archive .bd-sidebar-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 4px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: color .25s ease, padding .25s ease;
}
.bd-archive .bd-sidebar-list li a:hover {
  color: var(--c-black);
  padding-left: 8px;
}
.bd-archive .bd-sidebar-list li a:hover .arrow { opacity: 1; transform: translateX(2px); }
.bd-archive .bd-sidebar-list .arrow {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--c-sub);
  opacity: 0.4;
  transition: opacity .25s ease, transform .25s ease;
  flex-shrink: 0;
}
.bd-archive .bd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 64px) clamp(28px, 3vw, 40px);
  min-width: 0;
}
@media (max-width: 1100px) {
  .bd-archive .bd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .bd-archive .bd-layout { grid-template-columns: 1fr; gap: 32px; }
  .bd-archive .bd-sidebar { position: static; }
  .bd-archive .bd-sidebar-list { max-height: 240px; }
  .bd-archive .bd-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
.bd-archive .bd-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.bd-archive .bd-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: 22px;
}
.bd-archive .bd-card-img img,
.bd-archive .bd-card-img .bd-card-noimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.bd-archive .bd-card-noimg {
  background: linear-gradient(135deg, #ececec 0%, #f5f5f5 100%);
}
.bd-archive .bd-card:hover .bd-card-img img,
.bd-archive .bd-card:hover .bd-card-img .bd-card-noimg { transform: scale(1.05); }
.bd-archive .bd-card-body { padding: 0 4px; }
.bd-archive .bd-card-no {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
  margin-bottom: 14px;
}
.bd-archive .bd-card-no::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c-line);
}
.bd-archive .bd-card-title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 14px;
}
.bd-archive .bd-card-excerpt {
  font-size: 13px;
  line-height: 1.95;
  color: var(--c-text);
  margin: 0 0 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bd-archive .bd-card-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-black);
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 4px;
  transition: gap .3s ease;
}
.bd-archive .bd-card:hover .bd-card-more { gap: 14px; }
@media (max-width: 800px) {
  .bd-archive .bd-grid { grid-template-columns: 1fr; gap: 48px; }
  .bd-archive .bd-hero { padding-left: clamp(20px, 5vw, 32px); padding-right: clamp(20px, 5vw, 32px); }
  .bd-archive .bd-grid-wrap { padding-left: clamp(20px, 5vw, 32px); padding-right: clamp(20px, 5vw, 32px); }
}

/* =====================================================
   グラフィックデザイン詳細ページ v2 (rebuild-graphic-pages-v2.php)
   gp-values / gp-steps / gp-spec / gp-pricing-list / gp-faq / gp-cta-bottom
   ===================================================== */

/* VALUES — 4カード（2x2 → 1 列） */
.gp-values {
  background: var(--c-bg);
}
.gp-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
  max-width: 980px;
  margin: 0 auto;
}
.gp-value {
  background: var(--c-bg-soft);
  padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3vw, 36px);
  border: 1px solid var(--c-line);
}
.gp-value h3 {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-bottom: 16px;
  line-height: 1.7;
}
.gp-value p {
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 800px) {
  .gp-values-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* STEPS — 縦タイムライン（番号 + 本文） */
.gp-steps {
  background: var(--c-bg-soft);
}
.gp-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.gp-steps-list::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--c-line);
}
.gp-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(28px, 3vw, 36px) 0;
  position: relative;
}
.gp-step-num {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 300;
  color: var(--c-black);
  line-height: 1;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  background: var(--c-bg-soft);
  display: inline-block;
  padding: 4px 8px 4px 0;
}
.gp-step-body h3 {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-bottom: 14px;
  line-height: 1.7;
}
.gp-step-body p {
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 700px) {
  .gp-step { grid-template-columns: 56px 1fr; gap: 16px; }
  .gp-steps-list::before { left: 24px; }
}

/* SPEC */
.gp-spec {
}
.gp-spec-body {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.gp-spec-body p {
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin: 0;
}

/* PRICING — 柔軟なカード */
.gp-pricing-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 1080px;
  margin: 0 auto;
}
.gp-price {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 36px);
  text-align: center;
}
.gp-price-label {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.gp-price-value {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  color: var(--c-black);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.gp-price-value small {
  font-size: 13px;
  color: var(--c-text);
  letter-spacing: 0.06em;
  margin-left: 4px;
  font-weight: 400;
}
.gp-price-value-text {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
}
.gp-price-note {
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 8px;
}
.gp-pricing-foot {
  text-align: center;
  font-size: 13px;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  margin-top: clamp(28px, 3vw, 40px);
  line-height: 2;
}

/* gp-price-sub: 親項目の派生（例：名刺の「2人目以降」、ロゴの「ガイドライン」） */
.gp-price.gp-price-sub {
  background: transparent;
  border: 1px dashed var(--c-line);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
}
.gp-price.gp-price-sub .gp-price-label {
  text-transform: none;
  letter-spacing: 0.06em;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--c-sub);
}
.gp-price.gp-price-sub .gp-price-label .gp-sub-mark {
  display: inline-block;
  margin-right: 8px;
  color: var(--c-line);
  font-family: var(--font-en);
}
.gp-price.gp-price-sub .gp-price-value {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
}

/* FAQ */
.gp-faq {
  background: var(--c-bg);
}
.gp-faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.gp-faq-item {
  border-bottom: 1px solid var(--c-line);
  padding: clamp(24px, 3vw, 36px) 0;
}
.gp-faq-item:first-child { border-top: 1px solid var(--c-line); }
.gp-faq-item dt {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--c-black);
  margin-bottom: 16px;
  line-height: 1.8;
  position: relative;
  padding-left: 32px;
}
.gp-faq-item dt::before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  color: var(--c-sub);
  letter-spacing: 0.04em;
}
.gp-faq-item dd {
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: var(--c-text);
  margin: 0;
  padding-left: 32px;
  position: relative;
}
.gp-faq-item dd::before {
  content: "A.";
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  color: var(--c-sub);
  letter-spacing: 0.04em;
}

/* CTA BOTTOM（共通文言） */
.gp-cta-bottom {
  background: var(--c-bg-soft);
  text-align: center;
}
.gp-cta-bottom h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.gp-cta-bottom-buttons {
  display: inline-flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .gp-cta-bottom-buttons { flex-direction: column; gap: 14px; width: 100%; max-width: 360px; margin: 0 auto; }
}

/* RELATED 共通スコープ（gp-related = service-detail と同じスタイルを継承） */
.gp-related {
}

/* =====================================================
   sd-from-live — apricot-design.com から取得した本文の素朴な整形
   ===================================================== */
.sd-from-live {
  padding: clamp(60px, 8vw, 120px) 0;
}
.sd-from-live-body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--c-text);
}
.sd-from-live-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: clamp(28px, 3vw, 48px) auto;
}
.sd-from-live-body h2 {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-black);
  margin: clamp(56px, 6vw, 80px) 0 clamp(24px, 3vw, 36px);
  line-height: 1.6;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.sd-from-live-body h3 {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: clamp(36px, 4vw, 56px) 0 clamp(16px, 2vw, 24px);
  line-height: 1.7;
}
.sd-from-live-body h4 {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: clamp(28px, 3vw, 40px) 0 12px;
  line-height: 1.7;
}
.sd-from-live-body p {
  margin: 0 0 clamp(20px, 2vw, 28px);
}
.sd-from-live-body ul,
.sd-from-live-body ol {
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding-left: 1.4em;
}
.sd-from-live-body li {
  margin-bottom: 12px;
  line-height: 2.1;
}
.sd-from-live-body blockquote {
  border-left: 2px solid var(--c-line);
  padding: 12px 0 12px 20px;
  margin: clamp(24px, 3vw, 36px) 0;
  font-style: normal;
  color: var(--c-sub);
}
.sd-from-live-body a {
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sd-from-live-body a:hover { opacity: 0.65; }
.sd-from-live-body table {
  border-collapse: collapse;
  width: 100%;
  margin: clamp(24px, 3vw, 36px) 0;
  font-size: 14px;
}
.sd-from-live-body table th,
.sd-from-live-body table td {
  border-bottom: 1px solid var(--c-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}
.sd-from-live-body table th {
  font-weight: 500;
  color: var(--c-black);
  width: 30%;
  white-space: nowrap;
}
/* 旧サイトのナビ系/ヘッダー残骸を非表示 */
.sd-from-live-body .gnav,
.sd-from-live-body .breadcrumb,
.sd-from-live-body .header-inner,
.sd-from-live-body .site-header,
.sd-from-live-body footer,
.sd-from-live-body .footer,
.sd-from-live-body .ttl_cmn_01,
.sd-from-live-body .ttl_cmn_01_wrap,
.sd-from-live-body .gallery_brand,
.sd-from-live-body .pagenav,
.sd-from-live-body .breadcrumb_bottom,
.sd-from-live-body .related_links,
.sd-from-live-body .cta_cmn_01 { display: none; }

/* ============================================
   2026-05-05 追記：フォントサイズ統一
   - 全ページ共通: section-head の en-label 50px、center h2 18px、margin-bottom 半分
   - サービス詳細: sd-mv h1 18px / lead-fv ゴシック 18px
   - sd-intro: section-head h2 32px、en-label 18px（sd-intro内のみ縮小）
   - reveal アニメ完了後（.is-in）は text-align:center
============================================ */

/* 全ページ共通 */
.section-head { margin-bottom: clamp(24px, 3.5vw, 48px); }
.section-head .en-label { font-size: 50px; }
.section-head.center h2,
.section-head.center.is-revealed h2 { font-size: 18px; }
.sd-philosophy-body h2,
.sd-philosophy-body h2.section-head { font-size: 16px; }

/* sd-intro 内の section-head は en-label 18px / h2 32px、PC で 1 行に収める */
.sd-intro .section-head .en-label,
.sd-intro-center .section-head .en-label {
  font-size: 18px;
  letter-spacing: 0.18em;
  line-height: 1.4;
  margin-bottom: 14px;
}
.sd-intro .section-head.center h2,
.sd-intro-center .section-head.center h2 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.55;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 1100px) {
  .sd-intro .section-head.center h2,
  .sd-intro-center .section-head.center h2 {
    white-space: normal;
    font-size: clamp(20px, 3.4vw, 30px);
  }
}

/* サービスページ FV (.sd-mv) */
.sd-mv h1 {
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}
.sd-mv .lead-fv {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0.06em !important;
  margin-top: 24px !important;
  color: var(--c-text) !important;
}

/* 2026-06-15 websupport #2031/#2032：SP の全ページ共通タイポ調整
   （個別ページのより高特異度な上書き：例 branding の lead-fv 14px はそのまま維持される） */
@media (max-width: 900px) {
  .sd-mv h1 { font-size: 16px !important; } /* 2026-06-20 SP h1 全ページ16px統一 */
  .sd-mv .lead-fv { font-size: 14px !important; font-weight: 300 !important; line-height: 30px !important; } /* #2031→統一 18→16→14（全ページ SP lead-fv 14px）*/
  /* #2032 の sd-intro h2（22→30 / lh44）は #527 ルール（:has(.intro-lead), !important）を更新して対応 */
}

/* sd-intro: heading + lead + intro paragraphs */
.sd-intro-center .intro-lead {
  font-size: 20px;
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin-bottom: 32px;
  font-weight: 700;
  text-align: center;
}
.sd-intro-center .intro-paragraphs { text-align: center; margin-bottom: 40px; }
.sd-intro-center .intro-paragraphs p {
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  margin-bottom: 1.2em;
}
.sd-intro-center .intro-paragraphs p:last-child { margin-bottom: 0; }
/* sd-intro-center 以外の汎用 .intro-paragraphs もまとめて 40px に */
.intro-paragraphs { margin-bottom: 40px; }

/* グラフィック詳細など、CAN DO を <ul> 形式で持つページでも
   /service/branding/ と同じ視覚密度（コンテナ幅・行送り・字色）に揃える */
.sd-intro-center ul {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0;
  border-top: 1px solid var(--c-line);
}
.sd-intro-center ul > li {
  padding: 18px 0 18px 28px !important;
  border-bottom: 1px solid var(--c-line) !important;
  position: relative;
  font-size: 15px !important;
  line-height: 2.2 !important;
  letter-spacing: 0.06em !important;
  color: var(--c-text) !important;
  text-align: left;
  list-style: none;
}
.sd-intro-center ul > li::before,
.sd-intro-center ul > li > span:first-child {
  position: absolute;
  left: 0;
  top: 1.7em;
  width: 12px !important;
  height: 1px !important;
  background: var(--c-sub) !important;
}
.sd-intro-center ul > li::before { content: ''; }

/* reveal アニメ完了時に中央寄せ */
.sd-intro .reveal.is-in,
.sd-intro-center .reveal.is-in { text-align: center; }

@media (max-width: 800px) {
  .section-head .en-label { font-size: 36px; }
}

/* ============================================
   2026-05-05 追記：WEB制作 統合ページ用 wb-* クラス
   /branding-service/web-branding/ の各セクションに使用。
============================================ */

/* WHY/HOW/WHAT 3 カラム */
.wb-pillars { padding: 0 0 var(--section-py); padding-top: 0 !important; background: var(--c-bg-soft); }
.wb-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: stretch;
  padding-bottom: 160px;
}
.wb-pillar {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}
.wb-pillar-en {
  display: block;
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-black);
  margin-bottom: 18px;
  line-height: 1;
}
.wb-pillar-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--c-black);
  margin: 0 0 24px;
  border-top: 1px solid var(--c-line);
  padding-top: 24px;
}
.wb-pillar p {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text);
  margin-bottom: 1em;
}
.wb-pillar-steps,
.wb-pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wb-pillar-steps li {
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}
.wb-pillar-steps li:last-child { border-bottom: 0; }
.wb-pillar-steps li b {
  display: block;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-bottom: 4px;
}
.wb-pillar-list li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
}
.wb-pillar-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 19px;
  width: 8px; height: 1px;
  background: var(--c-black);
}
@media (max-width: 1000px) {
  .wb-pillars-grid { grid-template-columns: 1fr; }
}

/* REASON */
.wb-reason {
  padding: var(--section-py) 0 0;
  padding-bottom: 0 !important;
  background: #fff;
}
.wb-reason.wb-reason-slider { padding-bottom: 0 !important; }
.wb-reason-lead {
  text-align: center;
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.wb-reason-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(36px, 4vw, 56px);
}
.wb-reason-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid var(--c-line);
}
.wb-reason-list li:last-child { border-bottom: 1px solid var(--c-line); }
.wb-reason-num {
  font-family: var(--font-en);
  font-size: 50px;
  font-weight: 400;
  color: var(--c-black);
  line-height: 1;
  letter-spacing: 0.04em;
}
.wb-reason-list h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--c-black);
  margin: 0 0 16px;
  grid-column: 2;
}
.wb-reason-list p {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text);
  margin: 0;
  grid-column: 2;
}
@media (max-width: 800px) {
  .wb-reason-list li { grid-template-columns: 1fr; gap: 16px; }
  .wb-reason-num { font-size: 36px; }
  .wb-reason-list h3,
  .wb-reason-list p { grid-column: auto; }
}

/* =========================================
   CONCEPT / PHILOSOPHY — karuizawa365 Feature 風
   左：section-head + intro + ゲージ（sticky）
   右：Point カードが縦に並んで、各カードが大きく viewport を占めながらスクロール
   ゲージは現在のカードに連動してアクティブ表示が動く
========================================= */
/* =========================================
   bd-intro — branding-design 詳細ページの
   HERO 直下「写真 + タイトル + リード」セクション。
   2026-06-07 / 全 24 ページ共通の構造。
========================================= */
.bd-intro {
  background: #ffffff;
  padding-top: 0 !important;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
}
.bd-intro-photo {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin: 0 0 clamp(60px, 7vw, 100px);
  background: var(--c-bg);
}
.bd-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bd-intro-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.bd-intro-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  color: var(--c-black);
  text-align: center;
}
.bd-intro-lead {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 2.15;
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 0;
  text-align: left;
}
@media (max-width: 700px) {
  .bd-intro-photo { aspect-ratio: 4 / 3; }
}

.wb-concept {
  padding: var(--section-py) 0;
  background: var(--c-bg-soft);
  position: relative;
}
.wb-concept .container {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
  column-gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.wb-concept-left {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  align-self: start;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 40px) 0;
}
.wb-concept .section-head {
  text-align: left !important;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.wb-concept .section-head h2,
.wb-concept .section-head .en-label {
  text-align: left;
}
.wb-concept-intro {
  margin: 0;
  text-align: left;
}
.wb-concept-intro h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.75;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: var(--c-black);
  text-align: left;
}
.wb-concept-intro p {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text);
  margin: 0;
  text-align: left;
}

/* 左カラム下部に配置するゲージ（01 / 02 / 03 / 04 ...） */
.wb-concept-gauge {
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding-left: 0;
}
.wb-concept-gauge-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--c-sub);
  transition: color .35s ease;
  cursor: pointer;
}
.wb-concept-gauge-item::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: width .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.wb-concept-gauge-item.is-active {
  color: var(--c-black);
}
.wb-concept-gauge-item.is-active::after {
  width: 64px;
  opacity: 1;
}

/* 右カラム：Point カードの縦並び */
.wb-points {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wb-point {
  background: transparent;
  border: 0;
  padding: clamp(36px, 5vw, 64px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.wb-point + .wb-point {
  border-top: 1px solid var(--c-line);
}
.wb-point:first-of-type { padding-top: 0; }
.wb-point:last-of-type { padding-bottom: 0; }
.wb-point-num {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--c-sub);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.wb-point h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--c-black);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
.wb-point p {
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 2.15;
  color: var(--c-text);
  margin: 0;
  max-width: 540px;
}

/* SP/タブレット：sticky 解除、単純な縦並びに */
@media (max-width: 900px) {
  .wb-concept .container {
    display: block;
  }
  .wb-concept-left {
    position: static;
    max-height: none;
    padding: 0;
    margin-bottom: clamp(32px, 5vw, 48px);
  }
  .wb-concept-gauge { display: none; }
  .wb-point {
    min-height: auto;
    padding: clamp(36px, 6vw, 48px) 0;
  }
  .wb-point:first-child {
    padding-top: 0;
  }
}

/* ============================================================
 * 2026-06-27 社長指示: DESIGN CONCEPT セクションのヘッダーを
 *   単一カラム中央縦並びに（DESIGN CONCEPT → デザイン・コンセプト設計を重要視
 *   → 見出し → リード文）。現状 .wb-concept は web-branding のみ使用。
 * ============================================================ */
.wb-concept .container {
  display: block;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.wb-concept .section-head {
  text-align: center !important;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.wb-concept .section-head h2,
.wb-concept .section-head .en-label { text-align: center; }
.wb-concept .wb-concept-intro {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.wb-concept .wb-concept-intro h3 { text-align: center; }
.wb-concept .wb-concept-intro p { text-align: center; }

/* SPEC */
.wb-spec {
  padding: var(--section-py) 0;
  padding-bottom: 0 !important;
  background: #fff;
}
.wb-spec-lead {
  text-align: center;
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  max-width: 880px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.wb-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.wb-spec-card {
  border: 0;
  padding: clamp(28px, 3vw, 36px);
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.wb-spec-card h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 0 0 14px;
  color: var(--c-black);
}
.wb-spec-card p {
  font-size: 13px;
  line-height: 2;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 1000px) {
  .wb-spec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .wb-spec-grid { grid-template-columns: 1fr; }
}

/* SUPPORT (認知 × チューニング) */
.wb-support {
  padding: var(--section-py) 0 0;
  background: var(--c-bg-soft);
}
.wb-support-lead {
  text-align: center;
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  max-width: 880px;
  margin: 0 auto clamp(56px, 7vw, 80px);
}
.wb-support-block {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--c-line);
}
.wb-support-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.wb-support-block-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.wb-support-en {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-black);
}
.wb-support-block-head h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  margin: 0;
}
.wb-support-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.wb-support-card {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: clamp(28px, 3vw, 40px);
}
.wb-support-card h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 0 0 16px;
  color: var(--c-black);
}
.wb-support-card p {
  font-size: 13px;
  line-height: 2;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 1000px) {
  .wb-support-cards { grid-template-columns: 1fr; }
}

/* SERVICES (継続 × スポット) */
.wb-services {
  padding: var(--section-py) 0;
  padding-bottom: 160px;
  background: #fff;
}
.wb-services-block {
  margin-top: clamp(40px, 5vw, 64px);
}
.wb-services-block:first-of-type { margin-top: 0; }
.wb-services-block-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.wb-services-en {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-black);
}
.wb-services-block-head h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  margin: 0;
}
.wb-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.wb-services-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.wb-service-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  padding: clamp(28px, 3vw, 40px);
  text-decoration: none;
  color: inherit;
  transition: background .3s ease, transform .3s ease;
}
.wb-service-card:hover {
  background: #fff;
  transform: translateY(-4px);
}
.wb-service-card h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 0 0 16px;
  color: var(--c-black);
}
.wb-service-card p {
  font-size: 13px;
  line-height: 2;
  color: var(--c-text);
  margin: 0 0 24px;
  flex: 1;
}
.wb-service-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-black);
  margin-top: auto;
}
.wb-service-arrow {
  display: inline-block;
  transition: transform .3s ease;
}
.wb-service-card:hover .wb-service-arrow { transform: translateX(6px); }
@media (max-width: 1000px) {
  .wb-services-grid,
  .wb-services-grid:has(> :nth-child(3)) { grid-template-columns: 1fr; }
}

/* ============================================
   2026-05-05: 連続する同色背景セクションの境目 padding を半分に
   - 連続グレー（sd-pricing → sd-cta-bottom など）
   - 連続白（wb-pillars → wb-reason → wb-concept など）
============================================ */

/* 2026-05-05 改: 余白を均一化。隣接ルールで凸凹していた問題を解消し、
   全 .sd-* / .gp-* / .pm-* セクションを同じ padding スケールに揃える */
.sd-intro,
.sd-such,
.sd-philosophy,
.sd-approach,
.sd-deliverables,
.sd-pricing,
.sd-faq,
.sd-cta-bottom,
.gp-values,
.gp-steps,
.gp-spec,
.gp-pricing-list,
.gp-faq,
.gp-cta-bottom,
.pm-block {
  /* padding-top: clamp(80px, 10vw, 140px) !important; */
  /* padding-bottom: clamp(80px, 10vw, 140px) !important; */
}
/* 2026-05-06 改：.philosophy.is-service（spot-consulting / branding / consulting 等）—
   横スクロール pin カルーセルを廃止して縦スタックに（sticky 余白を解消）。
   既に mobile 用ルールで縦スタック化されていたものを desktop にも展開。 */
body .sd-philosophy-body .section-head { margin-bottom: clamp(16px, 2vw, 27px) !important; }

body .philosophy.is-service .ph-intro { margin-bottom: 48px !important; }
/* 横スクロール sticky pin を維持（about の .philosophy と同じ動き） */

/* photo-band は写真の前後で「呼吸」させるためやや小さめ */
.sd-photo-band {
  margin-top: 0;
  margin-bottom: 0;
}

/* ============================================
   2026-05-08: 下層ページのセクション間隔を統一
   各セクション padding-top/bottom 160px に統一
   （背景色が同じ／違うに関わらず一律）

   ヒーロー / 共通テンプレート部品はこのリズムから除外
     .sd-mv, .ind-mv, .rc-mv, .post-hero, .page-hero, .brand-collage, .contact-cta, .promotion, .float-cta
============================================ */
body.is-sub-page section:not(:is(.sd-mv, .ind-mv, .rc-mv, .post-hero, .page-hero, .brand-collage, .contact-cta, .promotion, .float-cta)) {
  padding-top: 160px;
  padding-bottom: 0;
}
/* 個別セクション override: 下に十分な余白を持たせる */
body.is-sub-page section.sd-such,
body.is-sub-page section.sd-faq,
body.is-sub-page section.sd-intro.sd-intro-center,
body.is-sub-page section.sd-approach,
body.is-sub-page section.wb-services,
body.is-sub-page section.wb-spec,
body.is-sub-page section#toc-sec-6 {
  padding-bottom: 160px;
}
body.is-sub-page section.sd-pricing,
body.is-sub-page section.ind-works { padding-bottom: 0; }
body.is-sub-page section#toc-sec-3 { padding-bottom: 0; }

/* SP では 160px は余白過多。各セクション padding を圧縮 */
@media (max-width: 900px) {
  body.is-sub-page section:not(:is(.sd-mv, .ind-mv, .rc-mv, .post-hero, .page-hero, .brand-collage, .contact-cta, .promotion, .float-cta)) {
    padding-top: clamp(48px, 9vw, 72px);
  }
  body.is-sub-page section.sd-such,
  body.is-sub-page section.sd-faq,
  body.is-sub-page section.sd-intro.sd-intro-center,
  body.is-sub-page section.sd-approach,
  body.is-sub-page section.wb-services,
  body.is-sub-page section.wb-spec,
  body.is-sub-page section#toc-sec-6 {
    padding-bottom: clamp(48px, 9vw, 72px);
  }
  /* 写真バンド系は SP で marign を 0 にして上下の白余白を排除 */
  .sd-photo-band,
  .photo-band,
  .rc-photo-band {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* 2026-06-14: SUCH AS（.sd-such）セクションは全ページで上下 padding 100px に統一。
   サブページ既定（上160/下160, SP clamp）を後勝ち・同特異度(0,2,2)で上書きする。
   @media ブロックより後に置くことで SP でも勝つ。 */
body.is-sub-page section.sd-such {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ============================================
   2026-05-05: dark-aware ラップ時の wb-* オーバーライド
============================================ */
.wb-dark-aware { background: transparent; }
.wb-dark-aware.is-dark .wb-support,
.wb-dark-aware.is-dark .wb-services { background: transparent; color: #e8e8e8; }
.wb-dark-aware.is-dark .wb-support-lead { color: #d8d8d8; }
.wb-dark-aware.is-dark .wb-support-en,
.wb-dark-aware.is-dark .wb-services-en { color: #f4f4f4; }
.wb-dark-aware.is-dark .wb-support-block-head h3,
.wb-dark-aware.is-dark .wb-services-block-head h3 { color: #b8b8b8; }
.wb-dark-aware.is-dark .wb-support-block,
.wb-dark-aware.is-dark .wb-services-block-head { border-color: rgba(255,255,255,0.12); }
.wb-dark-aware.is-dark .wb-support-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.wb-dark-aware.is-dark .wb-support-card h4 { color: #f4f4f4; }
.wb-dark-aware.is-dark .wb-support-card p { color: #d8d8d8; }
.wb-dark-aware.is-dark .wb-service-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: #e8e8e8;
}
.wb-dark-aware.is-dark .wb-service-card:hover {
  background: rgba(255,255,255,0.08);
}
.wb-dark-aware.is-dark .wb-service-card h4 { color: #f4f4f4; }
.wb-dark-aware.is-dark .wb-service-card p { color: #d8d8d8; }
.wb-dark-aware.is-dark .wb-service-link { color: #f4f4f4; }
/* section-head 内 (en-label / h2) は .dark-aware.is-dark のグローバルルールで白くなる */

/* ============================================
   2026-05-05: 写真撮影・動画制作 統合ページ用 pm-* クラス
============================================ */
.pm-block { background: #fff; }
.pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-bottom: 160px;
}
.pm-figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-bg);
}
.pm-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.pm-grid:hover .pm-figure img { transform: scale(1.04); }
.pm-en {
  display: block;
  font-family: var(--font-en);
  font-size: 50px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin-bottom: 14px;
  line-height: 1;
}
.pm-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
.pm-lede {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0 0 28px;
}
.pm-body p {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text);
  margin: 0 0 1.4em;
}
.pm-pricing {
  width: 100%;
  margin: 28px 0 12px;
  border-collapse: collapse;
  border-top: 1px solid var(--c-line);
}
.pm-pricing tr { border-bottom: 1px solid var(--c-line); }
.pm-pricing th,
.pm-pricing td {
  padding: 18px 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-black);
  text-align: left;
}
.pm-pricing td {
  text-align: right;
  font-family: var(--font-en);
  letter-spacing: 0.06em;
}
.pm-note {
  font-size: 12px !important;
  color: var(--c-sub) !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .pm-grid { grid-template-columns: 1fr; }
  .pm-block-flip .pm-figure { order: -1; }
}

/* ============================================
   2026-05-05: 大切にしている考え方を /about/ の PHILOSOPHY と同じ
   横スクロールピン形式で表示する。.philosophy + .ph-* を使用
   （/about/ の about-detail.css と同じ class 名を採用、
   common.js の setupPhilosophy() が自動でハンドリングする）
============================================ */
.sd-content .philosophy,
/* =========================================
   .philosophy.is-service — karuizawa365 Feature 風（sticky 画像左 + テキスト右）
   JS が各 .ph-card 内の .ph-figure を 1 つの .ph-figures-pane（左 sticky）に集約し、
   どのカードが viewport 中央に入ったかで figure を crossfade。
========================================= */
.philosophy.is-service {
  background: var(--c-bg-soft);
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
  position: relative;
}
.philosophy.is-service .ph-intro {
  text-align: center;
  margin: 0 auto clamp(48px, 6vw, 80px);
  max-width: 980px;
  padding: 0 var(--pad-x);
}
.philosophy.is-service .ph-en {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--c-black);
  margin-bottom: 14px;
}
.philosophy.is-service .ph-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.26em;
  line-height: 1.55;
  color: var(--c-sub);
  margin: 0;
}

/* 2-カラムグリッド ＋ JS で .ph-figures-pane を左に注入 */
.philosophy.is-service .ph-pin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 100px);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: auto;
}
.philosophy.is-service .ph-figures-pane {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  align-self: start;
  height: calc(100vh - 160px);
  max-height: 760px;
  aspect-ratio: auto;
}
.philosophy.is-service .ph-figures-pane .ph-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.4,0,.2,1);
}
.philosophy.is-service .ph-figures-pane .ph-figure.is-active { opacity: 1; }
.philosophy.is-service .ph-figures-pane .ph-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ゲージ（01 / 02 / 03） */
.philosophy.is-service .ph-figures-pane .ph-gauge {
  position: absolute;
  left: 0;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 0 14px;
  margin: 0;
  list-style: none;
  z-index: 2;
}
.philosophy.is-service .ph-figures-pane .ph-gauge li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, .65);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: color .35s ease;
}
.philosophy.is-service .ph-figures-pane .ph-gauge li::after {
  content: '';
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width .4s ease;
}
.philosophy.is-service .ph-figures-pane .ph-gauge li.is-active {
  color: #fff;
}
.philosophy.is-service .ph-figures-pane .ph-gauge li.is-active::after {
  width: 36px;
}

/* 右カラム = .ph-track には .ph-card が縦に並ぶ */
.philosophy.is-service .ph-track {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  height: auto !important;
  padding: 0 !important;
  transform: none !important;
}
.philosophy.is-service .ph-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: 0;
  width: auto;
  min-height: 80vh;
  padding: 0;
}
.philosophy.is-service .ph-card + .ph-card {
  border-top: 1px solid var(--c-line);
}
/* JS が figure を pane に移動するため、card 内の元 figure は desktop で非表示 */
.philosophy.is-service .ph-card > .ph-figure { display: none; }
.philosophy.is-service .ph-body {
  padding: clamp(48px, 6vw, 72px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.philosophy.is-service .ph-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.22em;
  color: var(--c-sub);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.philosophy.is-service .ph-card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--c-black);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
.philosophy.is-service .ph-card-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 2.15;
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 0;
  max-width: 540px;
}

/* 旧 ph-viewport / ph-progress は不要 */
.philosophy.is-service .ph-viewport {
  position: static;
  height: auto;
  overflow: visible;
}
.philosophy.is-service .ph-progress { display: none !important; }

/* SP/タブレット：sticky 解除、各カードは画像 + テキストの縦並びに */
@media (max-width: 900px) {
  .philosophy.is-service .ph-pin {
    display: block;
    padding: 0 var(--pad-x);
  }
  .philosophy.is-service .ph-figures-pane { display: none; }
  .philosophy.is-service .ph-card { min-height: auto; }
  .philosophy.is-service .ph-card > .ph-figure {
    display: block;
    margin: 0 0 clamp(20px, 4vw, 28px);
    aspect-ratio: 16/10;
    overflow: hidden;
  }
  .philosophy.is-service .ph-card > .ph-figure img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .philosophy.is-service .ph-body { padding: 0 0 clamp(36px, 6vw, 48px); }
}


/* ============================================
   2026-05-05: TEAM（情報発信支援 / 専属チーム）— マーケ PDF p5 風の黒バー + 説明
============================================ */
.sd-team {
  background: var(--c-bg-soft);
  padding-top: clamp(80px, 10vw, 140px) !important;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
}
.ct-team-head {
  text-align: center;
  margin: 0 auto clamp(48px, 5vw, 72px);
  max-width: 760px;
}
.ct-team-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-black);
  line-height: 1;
  margin-bottom: 18px;
}
.ct-team-title {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--c-black);
  position: relative;
  padding: 0 4px 10px;
  margin: 0 0 24px;
}
.ct-team-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 36px;
  height: 1px;
  background: var(--c-black);
  transform: translateX(-50%);
}
.ct-team-sub {
  font-size: 14px;
  line-height: 2.2;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.ct-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 48px) clamp(28px, 3vw, 40px);
  max-width: 1080px;
  margin: 0 auto;
}
.ct-team-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ct-team-role {
  background: var(--c-black);
  color: #fff;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 16px 14px;
  line-height: 1.4;
}
.ct-team-desc {
  font-size: 13px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.04em;
  padding: 0 4px;
}
.ct-team-foot {
  text-align: center;
  font-size: 13px;
  color: var(--c-sub);
  line-height: 2;
  letter-spacing: 0.06em;
  margin: clamp(48px, 5vw, 72px) auto 0;
  max-width: 760px;
}
@media (max-width: 800px) {
  .ct-team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
@media (max-width: 500px) {
  .ct-team-grid { grid-template-columns: 1fr; }
}

/* ============================================
   2026-05-05: 運用支援 — スポット料金テーブル群
============================================ */
.op-spot-block {
  max-width: 920px;
  margin: 0 auto clamp(48px, 5vw, 72px);
}
.op-spot-block:last-of-type { margin-bottom: 0; }
.op-spot-head {
  text-align: center;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.op-spot-en {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
  margin-bottom: 10px;
}
.op-spot-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-black);
  margin: 0;
}
.op-spot-note {
  font-size: 13px;
  line-height: 2;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.op-spot-note strong { color: var(--c-black); font-weight: 500; }
.op-spot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.op-spot-table th,
.op-spot-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.op-spot-table th {
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.op-spot-table th small {
  display: block;
  font-size: 12px;
  color: var(--c-sub);
  margin-top: 4px;
  letter-spacing: 0;
}
.op-spot-table td {
  text-align: right;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  color: var(--c-black);
  font-size: 16px;
  white-space: nowrap;
}
.op-spot-table td small {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--c-sub);
  margin-left: 2px;
}
/* 3カラム（作業項目 / 目安時間 / 料金） */
.op-spot-table-3col thead th {
  background: var(--c-black);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  padding: 14px 14px;
  text-align: left;
}
.op-spot-table-3col thead th:nth-child(2),
.op-spot-table-3col thead th:nth-child(3) {
  text-align: center;
}
.op-spot-table-3col tbody td {
  font-size: 13px;
  white-space: normal;
  padding: 14px 14px;
}
.op-spot-table-3col tbody td:nth-child(1) {
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--c-text);
}
.op-spot-table-3col tbody td:nth-child(2) {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.op-spot-table-3col tbody td:nth-child(3) {
  text-align: right;
  font-family: 'Oswald', sans-serif;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .op-spot-table th,
  .op-spot-table td { padding: 12px 8px; }
  .op-spot-table-3col tbody td { padding: 10px 8px; font-size: 13px; }                 /* #3425 12->13 全ページ */
  .op-spot-table-3col thead th { font-size: 13px; }                                   /* #3424 12->13 全ページ */
  .op-spot-table:not(.op-spot-table-3col) th { font-size: 15px; font-weight: 700; }   /* #3427 14->15/700 全ページ（2colテーブルの見出しth） */
}

/* ============================================
   2026-05-05: 運用支援 — 月額プラン（保守 + クリエイティブ）の追加 CSS
============================================ */
.op-spot-lead {
  text-align: center;
  font-size: 14px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin: 12px 0 0;
  max-width: 760px;
  margin-inline: auto;
}
.op-spot-lead-strong {
  background: var(--c-black);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  margin: 16px auto 28px;
  font-size: 14px;
  letter-spacing: 0.06em;
  max-width: 600px;
}
.op-spot-lead-strong strong {
  color: #fff;
  font-weight: 500;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.04em;
}
.op-block-h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.1em;
  margin: clamp(40px, 5vw, 64px) 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.op-block-h4:first-of-type { margin-top: 8px; }

/* 月額プランカード（保守A/B + ドメイン管理 / クリエイティブA/B/C） */
.op-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
  margin: clamp(20px, 2.4vw, 32px) 0 clamp(8px, 1vw, 16px);
}
.op-plan {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 32px);
  position: relative;
  display: flex;
  flex-direction: column;
}
.op-plan.op-plan-recommend {
  border-color: var(--c-black);
  background: var(--c-bg);
}
.op-plan-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.op-plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--c-black);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
}
.op-plan h5 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 16px;
  line-height: 1.5;
}
.op-plan-price {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--c-black);
  line-height: 1.2;
  margin-bottom: 8px;
}
.op-plan-price small {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0.06em;
}
.op-plan-period {
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  margin: 8px 0 16px;
  padding: 8px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.op-plan-period strong { color: var(--c-black); font-weight: 500; }
.op-plan ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}
.op-plan ul li {
  font-size: 12px;
  line-height: 1.8;
  color: var(--c-text);
  letter-spacing: 0.04em;
  padding-left: 14px;
  position: relative;
}
.op-plan ul li::before {
  content: '―';
  position: absolute;
  left: 0;
  color: var(--c-sub);
  font-family: 'Oswald', sans-serif;
}
.op-spot-foot-note {
  font-size: 12px;
  line-height: 2;
  color: var(--c-sub);
  letter-spacing: 0.04em;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--c-line);
}

/* CASE（よくあるご依頼例） */
.op-cases { margin-top: clamp(40px, 4vw, 56px); }
.op-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.op-case-list > li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  align-items: center;
}
.op-case-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.04em;
}
.op-case-calc {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-sub);
  white-space: nowrap;
}
.op-case-calc strong {
  color: var(--c-black);
  font-weight: 500;
}

@media (max-width: 800px) {
  .op-plans-grid { grid-template-columns: 1fr; }
  .op-case-list > li { grid-template-columns: 1fr; gap: 6px; }
  .op-case-calc { white-space: normal; }
}

/* ============================================
   2026-05-06: 運用支援ページ — anchor nav / wider plan blocks / diagnosis quiz
============================================ */

/* PRICING section-head の下に余白 */
body.page-id-16694 .sd-pricing > .container > .section-head {
  margin-bottom: clamp(56px, 7vw, 92px);
}

/* anchor nav under section-head */
.op-anchors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  max-width: 1200px;
  margin: 0 auto clamp(72px, 9vw, 120px);
  padding: 0 clamp(12px, 2vw, 20px);
  list-style: none;
}
.op-anchors a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  min-height: 110px;
}
.op-anchors a:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  transform: translateY(-2px);
}
.op-anchors a .num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--c-sub);
}
.op-anchors a .jp {
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.06em;
  color: var(--c-black);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  position: relative;
  padding-bottom: 0;
}
.op-anchors a .jp::after {
  content: '↓';
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--c-sub);
  transition: transform .25s ease;
}
.op-anchors a:hover .num,
.op-anchors a:hover .jp { color: #fff; }
.op-anchors a:hover .jp::after { color: #fff; transform: translateY(3px); }
@media (max-width: 700px) {
  .op-anchors { grid-template-columns: repeat(2, 1fr); }
}

/* Wider plan blocks (BRANDING-style 1200px container) */
.op-plan-block {
  max-width: 1200px;
  margin: 0 auto clamp(112px, 12vw, 176px);
  padding: 0 clamp(20px, 2vw, 32px);
}
.op-plan-block .op-block-h4 {
  text-align: center;
  margin-bottom: 16px;
}
.op-plan-block .op-spot-note {
  margin-bottom: clamp(28px, 3vw, 44px);
}
.op-block-h4-center { text-align: center; }
.op-plan-block .op-spot-foot-note {
  margin-top: clamp(28px, 3vw, 36px);
}
/* pr-plan inside operation page — slightly tweaked */
.op-plan-block .pr-plan h3 {
  margin-top: 4px;
}
.op-plan-block .pr-plan-price .num {
  font-size: clamp(26px, 3vw, 34px);
}
.op-plan-block .pr-plan-price .unit {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Plan diagnosis */
.op-diagnosis {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.op-diagnosis .container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.op-diag-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.op-diag-head .en-label {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.18em;
  color: var(--c-black);
  margin-bottom: 14px;
  font-weight: 400;
}
.op-diag-head h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-black);
  margin: 0 0 18px;
}
.op-diag-head .sub {
  font-size: 13px;
  line-height: 2;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  max-width: 640px;
  margin: 0 auto;
}
.op-diag-quiz {
  background: var(--c-bg-soft);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--c-line);
}
.op-diag-progress {
  height: 2px;
  background: var(--c-line);
  margin-bottom: clamp(28px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}
.op-diag-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--c-black);
  width: 0;
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.op-diag-q { display: none; }
.op-diag-q[data-active] { display: block; }
.op-diag-q-num {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--c-sub);
  margin-bottom: 12px;
}
.op-diag-q-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--c-line);
}
.op-diag-options {
  display: grid;
  gap: 12px;
}
.op-diag-options button {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 18px 22px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-text);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.op-diag-options button:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: #fff;
  transform: translateX(4px);
}
.op-diag-result {
  text-align: center;
  padding: clamp(20px, 2.4vw, 32px) 0;
}
.op-diag-result .en-label {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--c-sub);
  margin-bottom: 18px;
}
.op-diag-result-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 24px;
}
.op-diag-result-desc {
  font-size: 14px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.06em;
  max-width: 600px;
  margin: 0 auto 32px;
}
.op-diag-result-cta {
  display: inline-flex;
}
/* 複数のおすすめプランを箇条書きで表示（保守 + 修正 など組み合わせ用） */
.op-diag-result-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 36px;
  max-width: 600px;
  display: grid;
  gap: 14px;
  text-align: left;
}
.op-diag-result-list li {
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  background: var(--c-bg);
  border-left: 2px solid var(--c-black);
}
.op-diag-result-list li strong {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
}
.op-diag-result-list li span {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
/* CTA ボタンを複数並べる */
.op-diag-result-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.op-diag-result-ctas .op-diag-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.op-diag-restart {
  display: inline-block;
  margin-top: 28px;
  background: transparent;
  border: none;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-sub);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}
.op-diag-restart:hover { color: var(--c-black); }
/* 質問の補足 */
.op-diag-q-note {
  font-size: 12px;
  line-height: 1.85;
  color: var(--c-sub);
  letter-spacing: 0.04em;
  margin: -12px 0 24px;
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 700px) {
  .op-diag-options button { padding: 16px 18px; font-size: 13px; }
  .op-diag-result-cta + .op-diag-restart { display: block; margin-left: 0; margin-top: 20px; }
}

/* ============================================
   2026-05-07: post_content の inline style="..." を削減するための共通クラス
   - サービス詳細・グラフィックデザイン詳細の繰り返しパターンを集約
============================================ */

/* 中央寄せ・幅制限のラッパー（post_content 内で max-width:760/880/920 を inline 指定していた箇所） */
.sd-narrow-760 { max-width: 760px; margin-left: auto; margin-right: auto; }
.sd-narrow-880 { max-width: 880px; margin-left: auto; margin-right: auto; }
.sd-narrow-920 { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* PRICING カード内のメタ情報（期間など） */
.sd-price .sd-price-meta {
  font-size: 13px;
  color: var(--c-sub);
  margin-top: 8px;
}

/* PRICING カード内の機能リスト（先頭が ― のシンプル箇条書き） */
.sd-price ul.sd-price-features {
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sd-price ul.sd-price-features li {
  font-size: 12px;
  color: var(--c-text);
  position: relative;
  padding: 0 0 0 14px;
  border-top: 0;
}
.sd-price ul.sd-price-features li::before { content: ''; }

/* PRICING の補足（「料金案内ページに詳細を…」のキャプション） */
.sd-pricing-note {
  font-size: 13px;
  line-height: 2;
  color: var(--c-sub);
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
}
.sd-pricing-note.is-wide-margin { margin-top: 48px; }
.sd-pricing-note.is-left { text-align: left; }
.sd-pricing-note.is-fluid { max-width: 100%; }
.sd-pricing-note a {
  color: var(--c-black);
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 2px;
}

/* PRICING カードの補足キャプション（[ MEMBER ] / ※注 など） */
.sd-price-caption {
  font-size: 12px;
  color: var(--c-sub);
  margin-top: 18px;
}
.sd-price-caption + .sd-price-caption { margin-top: 8px; }

/* PRICING の section-head 直下のサブテキスト */
.sd-pricing .section-head .sub {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ セクションの背景 */
.sd-faq { background: #ffffff; }

/* /service/logo-branding/ 個別調整 */
body.page-id-16691 .logo-marquee { background: #ffffff; padding-top: 0 !important; } /* 背景白 + #1824 上 padding 160→0 */
body.page-id-16691 .logo-marquee-item { border: 0; }                               /* #1825 ロゴカードの枠線を撤去 */
body.page-id-16691 .logo-marquee-inner { margin-bottom: 150px; }                   /* #1820/#1869 下マージン 0→150 */
body.page-id-16691 .logo-marquee-item { width: 300px; }                            /* #1870 ロゴカード幅 202→300 */
body.page-id-16691 .wb-pillars .section-head h2 { font-size: 16px; }               /* #1821 見出し 18→16 */
body.page-id-16691 .wb-pillar-title { font-weight: 700; }                          /* #1822 ピラー見出し 500→700 */
body.page-id-16691 .section-head-wrap { padding-top: 0 !important; }               /* #1823 「ロゴ制作実績」見出し帯の上 padding 160→0（#toc-sec-2＝唯一の section-head-wrap。body.is-sub-page section の既定を上書き） */

/* /branding-service/web-branding/ 個別調整 */
body.page-id-16656 .wb-design-steps li b { font-size: 16px; font-weight: 700; margin-bottom: 10px; } /* #1826 */
body.page-id-16656 .wb-design-steps li { padding: 20px 0; }                        /* #1827 */
body.page-id-16656 .wb-reason-lead { display: none; }                              /* #1828 リード文を削除 */
body.page-id-16656 .wb-reason-slide-text h3 { font-size: 28px; font-weight: 700; } /* #1829/#1831 スライダー見出し 26→28・700 */
body.page-id-16656 .wb-concept-intro h3 { font-size: 28px; font-weight: 700; }     /* #1830 20→28・700 */
body.page-id-16656 .wb-spec-card h4 { font-weight: 700; }                          /* #1832 500→700 */
body.page-id-16656 .wb-design-title { font-weight: 700; }                          /* #1840/#1841/#1842 500→700 */
body.page-id-16656 .sd-pricing-note { margin-left: 0; }                            /* #1843 注記を左端へ */
body.page-id-16656 .sd-pricing .sub.sd-narrow-760 { margin-left: 0; }              /* #1848 リード文を左へ */

/* /branding-service/web-branding/recruit/ 個別調整（page-id-16659） */
body.page-id-16659 .wb-pillar-steps li b { font-size: 18px; font-weight: 700; margin-bottom: 15px; } /* #1865 */
body.page-id-16659 .wb-pillar-title { font-weight: 700; }                          /* #1866 500→700 */
body.page-id-16659 .wb-pillar-steps li { padding: 30px 0; }                        /* #1867 14→30 */
body.page-id-16659 .sd-pricing .sub.sd-narrow-760 { margin-left: 0; }              /* #1868 リード文を左へ */

/* /service/concents/（page-id-16688） */
body.page-id-16688 .sd-pricing .sub.sd-narrow-760 { margin-left: 0; }              /* #1871 リード文を左へ */
body.page-id-16688 section:has(.related-banners) { display: none; }                /* #1872 関連する支援内容セクションを削除 */

/* /branding-service/consulting/（page-id-16652） */
body.page-id-16652 section:nth-of-type(3) > div { margin-bottom: 40px; }          /* #1873→#2739 「できること」コンテナの下マージン */
body.page-id-16652 .sd-such .sd-such-list { padding-bottom: 80px; }                /* #1874 */
body.page-id-16652 .philosophy .ph-num { font-size: 38px; margin-bottom: 20px; }   /* #1875 番号を拡大 */
body.page-id-16652 .sd-pricing .sub.sd-narrow-760 { margin-left: 0; }              /* #1876 リード文を左へ */

/* /service/operation/（page-id-16694） */
body.page-id-16694 .sd-pricing > .container { margin-bottom: 150px; }              /* #1877 費用セクション下マージン */
body.page-id-16694 #diagnosis { padding-bottom: 160px; }                           /* #1878 診断セクション下 padding 0→160 */
body.page-id-16694 section:has(.related-banners) { display: none; }                /* #1879 関連する支援内容セクションを削除 */

/* /service/advertising-operation/（page-id-16685） */
body.page-id-16685 section:nth-of-type(2) > .container { margin-bottom: 80px; }     /* #1903 */
body.page-id-16685 section:nth-of-type(3) .section-head h2 { margin-bottom: 0; }    /* #1904 「できること」見出し下マージン 40→0 */
body.page-id-16685 section:nth-of-type(3) > .container { padding-bottom: 120px; }   /* #1905 */
body.page-id-16685 .sd-such > .container { padding-bottom: 80px; }                  /* #1906 */
body.page-id-16685 .sd-pricing .sub.sd-narrow-760 { margin-left: 0; }               /* #1907 リード文を左へ */
body.page-id-16685 section:has(.related-banners) { display: none; }                 /* #1908 関連する支援内容セクションを削除 */

/* == グラフィックデザイン詳細（branding-design CPT）一括調整 == */
body.single-branding-design .bd-intro-photo { margin-top: 80px; }                  /* 冒頭写真の上に余白80px */
body.single-branding-design .gp-cta-bottom { display: none; }                      /* ボトムCTA削除 */
body.single-branding-design .gp-related { display: none; }                         /* 関連する支援セクション削除 */
body.single-branding-design .gp-steps { display: none; }                           /* PROCESS（進め方）削除 */
body.single-branding-design .wb-concept-intro { display: none; }                   /* wb-concept-intro 削除（web-branding は対象外） */
body.single-branding-design .sd-pricing > .container { padding-bottom: 100px; }    /* #1895 費用セクション下余白 */
body.single-branding-design .gp-faq > .container-narrow { padding-bottom: 100px; } /* #1894 FAQセクション下余白 */
body.single-branding-design .bd-intro-lead { text-align: center; }                 /* #1898 リードを中央寄せ */
body.single-branding-design .bd-intro { padding-bottom: 0 !important; }             /* #1899 bd-intro 下 padding 140→0 */

/* /service/photo-movie/（page-id-16697）#1885/#1886 pm-lede 強調（.pm-block p の14pxを上書き） */
body.page-id-16697 .pm-lede { font-size: 20px; font-weight: 700; line-height: 38px; margin-bottom: 30px; }

/* ボトム CTA（「まずはお気軽に…」）— サービス全ページで非表示（共通 Contact CTA に集約） */
.sd-cta-bottom {
  display: none;
  background: var(--c-bg);
  text-align: center;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.sd-cta-bottom h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-bottom: 28px;
}
.sd-cta-bottom > .container-narrow > p {
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  max-width: none;
  margin: 0 auto 48px;
}
.sd-cta-bottom .actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
 * WEB制作 ABOUT カバー（写真背景 + 右寄せ白カード）
 * ============================================================ */
.wb-about-cover {
  position: relative;
  min-height: clamp(480px, 62vw, 760px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(60px, 8vw, 120px) clamp(24px, 6vw, 96px);
}
.wb-about-cover-card {
  background: #fff;
  padding: clamp(36px, 4vw, 64px) clamp(32px, 4vw, 60px);
  max-width: 560px;
  width: 100%;
}
.wb-about-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--c-sub);
  margin-bottom: clamp(18px, 2vw, 26px);
}
.wb-about-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}
.wb-about-lead {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  color: var(--c-text);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.wb-about-text {
  font-size: 13px;
  line-height: 2.1;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 800px) {
  .wb-about-cover {
    justify-content: center;
    padding: clamp(40px, 12vw, 80px) clamp(20px, 5vw, 32px);
    min-height: clamp(420px, 90vw, 600px);
  }
  .wb-about-cover-card { max-width: 100%; }
}

/* ============================================================
 * WEB制作 OUR APPROACH（Design 01/02/03 の 2カラム交互レイアウト）
 * ============================================================ */
.wb-design-section {
  padding: var(--section-py) 0 0;
  background: #fff;
}
.wb-design-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(80px, 10vw, 140px);
}
.wb-design-row:first-of-type { margin-top: clamp(40px, 5vw, 72px); }
.wb-design-row--reverse .wb-design-photo { order: 2; }
.wb-design-row--reverse .wb-design-body  { order: 1; }
.wb-design-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.wb-design-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.wb-design-row:hover .wb-design-photo img { transform: scale(1.04); }
.wb-design-body { padding: 0 clamp(0px, 2vw, 24px); }
.wb-design-num {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.wb-design-num .en {
  font-family: var(--font-en);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--c-sub);
}
.wb-design-num strong {
  font-family: var(--font-en);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-black);
  line-height: 1;
}
.wb-design-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}
.wb-design-body p {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text);
  margin: 0 0 14px;
}
.wb-design-body p:last-child { margin-bottom: 0; }
.wb-design-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wb-design-steps li {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 13px;
  line-height: 1.95;
  color: var(--c-text);
}
.wb-design-steps li:last-child { border-bottom: 0; }
.wb-design-steps li b {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--c-black);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.wb-design-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wb-design-list li {
  position: relative;
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  line-height: 1.95;
  color: var(--c-text);
}
.wb-design-list li:last-child { border-bottom: 0; }
.wb-design-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  width: 12px;
  height: 1px;
  background: var(--c-black);
}
@media (max-width: 900px) {
  .wb-design-row,
  .wb-design-row--reverse {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  .wb-design-row--reverse .wb-design-photo { order: 0; }
  .wb-design-row--reverse .wb-design-body  { order: 0; }
  .wb-design-body { padding: 0; }
}

/* ============================================================
 * REASON 横スライダー（写真コラージュ + 大きな番号 + 左右丸ボタン）
 * ============================================================ */
.wb-reason-slider .wb-reason-stage {
  position: relative;
  margin: clamp(48px, 6vw, 80px) 0 0;
}
.wb-reason-slider .proc-viewport {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.wb-reason-slider .proc-viewport::-webkit-scrollbar { display: none; }
.wb-reason-slider .proc-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.wb-reason-slider .proc-slide.wb-reason-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 0 clamp(96px, 11vw, 180px);
}
.wb-reason-slide-text { padding: 0 clamp(0px, 2vw, 32px); }
.wb-reason-slide-num {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.wb-reason-slide-num .num-current {
  font-family: var(--font-en);
  font-size: clamp(72px, 8vw, 112px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-black);
}
.wb-reason-slide-num .num-divider {
  display: inline-block;
  width: 1px;
  height: clamp(64px, 7vw, 96px);
  background: var(--c-line);
  transform: rotate(20deg);
  margin: 8px 4px 0;
}
.wb-reason-slide-num .num-total {
  font-family: var(--font-en);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-sub);
  margin-top: clamp(40px, 4vw, 60px);
}
.wb-reason-slide-text h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--c-black);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  padding: 0;
  border: 0;
}
.wb-reason-slide-text p {
  font-size: 14px;
  line-height: 2.2;
  color: var(--c-text);
  margin: 0;
}
.wb-reason-slide-photos {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 0.9vw, 14px);
  aspect-ratio: 4 / 4.2;
}
.wb-reason-slide-photos figure {
  margin: 0;
  overflow: hidden;
}
.wb-reason-slide-photos figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wb-reason-slide-photos .photo-main  { grid-column: 1; grid-row: 1 / span 2; }
.wb-reason-slide-photos .photo-sub-1 { grid-column: 2; grid-row: 1; }
.wb-reason-slide-photos .photo-sub-2 { grid-column: 2; grid-row: 2; }

/* Side circular arrows */
.wb-reason-slider .proc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(56px, 5vw, 80px);
  height: clamp(56px, 5vw, 80px);
  background: #fff;
  border: 0;
  border-radius: 999px;
  z-index: 5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-reason-slider .proc-arrow.prev { left: clamp(16px, 2.4vw, 36px); }
.wb-reason-slider .proc-arrow.next { right: clamp(16px, 2.4vw, 36px); }
.wb-reason-slider .proc-arrow:hover { background: var(--c-black); }
.wb-reason-slider .proc-arrow:hover::before { border-color: #fff; }
.wb-reason-slider .proc-arrow::before {
  content: '';
  width: 10px; height: 10px;
  border-top: 1px solid var(--c-black);
  border-right: 1px solid var(--c-black);
}
.wb-reason-slider .proc-arrow.prev::before { transform: rotate(-135deg) translate(-3px, -3px); }
.wb-reason-slider .proc-arrow.next::before { transform: rotate(45deg) translate(-3px, -3px); }
.wb-reason-slider .proc-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.wb-reason-slider .proc-arrow:disabled:hover { background: #fff; }
.wb-reason-slider .proc-arrow:disabled:hover::before { border-color: var(--c-black); }

/* Dots row (override .proc-dots default underline-bar style) */
.wb-reason-slider .proc-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.wb-reason-slider .proc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.wb-reason-slider .proc-dot.is-active {
  background: var(--c-black);
  width: 8px;
  transform: scale(1.4);
}

@media (max-width: 900px) {
  .wb-reason-slider .proc-slide.wb-reason-slide {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
    padding: 0 clamp(40px, 8vw, 80px);
  }
  .wb-reason-slide-photos {
    aspect-ratio: 4 / 3.4;
  }
  .wb-reason-slider .proc-arrow {
    top: auto;
    bottom: clamp(24px, 5vw, 40px);
    transform: none;
  }
  .wb-reason-slider .proc-arrow.prev { left: clamp(12px, 3vw, 20px); }
  .wb-reason-slider .proc-arrow.next { right: clamp(12px, 3vw, 20px); }
}

/* =========================================
   2026-06-09 / #525
   sd-mv 直下の sd-intro-center（＝ABOUT セクション）に
   装飾の縦線（上から下へ流れる）アニメを追加。
========================================= */
/* セクション直下ではなく、section-head（en-label + h2）と本文の間に
   "下に向かって動く下線" を separator として配置する。 */
.sd-mv + .sd-intro-center .section-head.center {
  position: relative;
  margin-bottom: clamp(120px, 14vw, 180px);
}
.sd-mv + .sd-intro-center .section-head.center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + clamp(30px, 4vw, 50px));
  width: 1px;
  height: clamp(60px, 7vw, 110px);
  background: var(--c-black);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  animation: sd-vline-flow 3s cubic-bezier(.55, 0, .2, 1) infinite;
  pointer-events: none;
}
@keyframes sd-vline-flow {
  0%   { transform: translateX(-50%) scaleY(0); transform-origin: top center; }
  45%  { transform: translateX(-50%) scaleY(1); transform-origin: top center; }
  55%  { transform: translateX(-50%) scaleY(1); transform-origin: bottom center; }
  100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom center; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-mv + .sd-intro-center .section-head.center::after {
    animation: none;
    transform: translateX(-50%) scaleY(1);
  }
}

/* ============================================
   2026-06-10: /service/branding/ SP 調整
   websupport コメント #527-532（viewport=sp）
============================================ */
@media (max-width: 700px) {
  /* #527→#2032 ABOUT/intro h2 を 22→30px / lh44（全ページ共通 SP） */
  .sd-intro-center:has(.intro-lead) .section-head.center h2 {
    font-size: 26px !important;
    line-height: 38px !important;
  }
  /* #528 .intro-lead を 18px に */
  .sd-intro-center .intro-lead {
    font-size: 18px !important;
  }
  /* #529 CAN DO h2（.sd-such-list を持つ .sd-intro-center）の margin を 0 に */
  .sd-intro-center:has(.sd-such-list) .section-head.center h2 {
    margin: 0 !important;
  }
}
@media (max-width: 900px) {
  /* #530 philosophy の上余白を 80px に */
  body.is-sub-page section.philosophy.is-service {
    padding-top: 80px !important;
  }
  /* #531 ph-num の下余白を 10px に */
  .philosophy.is-service .ph-num {
    margin-bottom: 10px !important;
  }
  /* #532→#1951 SUCH AS（#toc-sec-3=sd-faq）コンテナ下余白 80→100px（branding ページのみ） */
  body.page-id-16687 section#toc-sec-3 > .container {
    margin-bottom: 100px !important;
  }
}

/* ============================================
   2026-06-11: /service/branding/ PC 調整
   websupport コメント #963-968（viewport=pc）
   この要素だけに適用（他のページに波及しないよう page-id-16687 でスコープ）
============================================ */
@media (min-width: 901px) {
  /* #963 SUCH AS（#toc-sec-3）コンテナ下に 150px 余白 */
  body.page-id-16687 section#toc-sec-3 > .container {
    margin-bottom: 150px !important;
  }
  /* #965 .intro-paragraphs を親（.sd-narrow-760 = 760px）から +40px 広げて 800px に */
  body.page-id-16687 .sd-intro-center .intro-paragraphs {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
  /* #966 HERO breadcrumb の下余白を 200px に */
  body.page-id-16687 .sd-mv .breadcrumb { margin-bottom: 200px; }
  /* #967 HERO en-label の下余白を 10px に */
  body.page-id-16687 .sd-mv .en-label { margin-bottom: 10px; }
  /* #968 HERO lead-fv の上余白を 40px に */
  body.page-id-16687 .sd-mv .lead-fv { margin-top: 40px !important; }
}

/* ============================================
   2026-06-14 websupport ラウンド（#1912-#1920）
   section:nth-of-type(N) 規約は既存ルール（#1873 等）に踏襲
============================================ */

/* /branding-service/consulting/（page-id-16652） */
body.page-id-16652 section:nth-of-type(2) > .container { margin-bottom: 40px; }    /* #1919→#2738 toc-sec-1（できること1）コンテナ下 0→100 */
body.page-id-16652 section:nth-of-type(3) .section-head h2 { margin-bottom: 0; }    /* #1920 toc-sec-2 見出し下 40→0 */

/* /service/spot-consulting/（page-id-16701） */
body.page-id-16701 section:nth-of-type(3) .section-head h2 { margin-bottom: 0; }    /* #1915 toc-sec-2 見出し下 40→0 */
body.page-id-16701 section:nth-of-type(3) > .container { margin-bottom: 160px; }    /* #1916 toc-sec-2 コンテナ下 0→160 */
body.page-id-16701 section.sd-faq { padding-bottom: 0; }                            /* #1917 FAQ 下 padding 160→0 */
body.page-id-16701 section:has(.related-banners) { display: none; }                 /* #1918 関連する支援内容セクションを削除 */

/* /service/concents/（page-id-16688） */
body.page-id-16688 .sd-philosophy h2 { font-size: 20px; font-weight: 700; line-height: 36px; } /* #1912 PHILOSOPHY 見出し 16→20 / 500→700 / lh32→36 */
body.page-id-16688 section.sd-team { padding-bottom: 0 !important; }                 /* #1913 sd-team 下 padding 140→0（基底が !important のため必須） */
body.page-id-16688 section.sd-pricing > .container { margin-bottom: 160px; }        /* #1914 toc-sec-3 費用コンテナ下 0→160 */

/* /service/branding/（page-id-16687）SP 余白調整 #1944/#1946-#1951/#1954 */
@media (max-width: 900px) {
  body.page-id-16687 .sd-mv .lead-fv { font-size: 14px !important; font-weight: 300 !important; line-height: 28px !important; } /* #1944 18→14 / 400→300 / lh36→28（基底 !important のため上書き） */
  body.page-id-16687 section:nth-of-type(2) > .container2 { padding: 0 32px 80px; }  /* #1946→#2703 下 160→100→80 */
  body.page-id-16687 section:nth-of-type(3) > .container2 { padding: 0 32px 0; }  /* #1947→#2550 下 160→100→0 */
  body.page-id-16687 section.philosophy.is-service { padding-top: 100px !important; } /* #1948 上 80→100（#530 の全ページ 80px !important を branding だけ後勝ち） */
  body.page-id-16687 section.sd-pricing { padding-top: 70px; }                        /* #1949 toc-sec-2 上 48→70 */
  body.page-id-16687 section.sd-faq { padding-top: 100px; }                           /* #1950 toc-sec-3 上 48→100 */
  body.page-id-16687 section.sd-faq > .container { margin-bottom: 100px !important; } /* #1951 下 80→100（id ルール #532 不在時の安定フォールバック） */
  body.page-id-16687 section.contact-cta { padding-bottom: 0; }                       /* #1954 下 80→0 */
}

/* /service/personal-branding/（page-id-16696）SP 余白調整 #2033/#2034/#2035 */
@media (max-width: 900px) {
  body.page-id-16696 section.philosophy.is-service { padding-top: 100px !important; } /* #2033 上 80→100（#530 の全ページ 80!important を後勝ち） */
  body.page-id-16696 section.sd-pricing { padding-top: 80px; }                        /* #2034 toc-sec-4 上 48→80 */
  body.page-id-16696 section.sd-faq { padding-top: 100px; padding-bottom: 0; margin-bottom: 100px; } /* #2035→#2745 toc-sec-5 上48→80 / 下48→0 / margin下0→80 */
}

/* #2656 page-id-16653 toc-sec-2(section3) .container 下padding 160→0（PC/SP両方・この要素のみ・.mb160 !important上書き） */
body.page-id-16653 section:nth-of-type(3) > .container { padding-bottom: 0 !important; }

/* /branding-service/entrepreneurial-branding/（page-id-16653）SP 余白調整 #2036-#2040, #2652-#2655 */
@media (max-width: 900px) {
  body.page-id-16653 section:nth-of-type(2) > .container { padding: 0 32px 60px !important; } /* #2036→#2737 下 160→100（.mb160 !important を上書き） */
  body.page-id-16653 section:nth-of-type(2) .intro-paragraphs { margin-bottom: 0 !important; } /* #2652 toc-sec-1 intro-paragraphs 下 40→0 */
  body.page-id-16653 section:nth-of-type(3) > .container { padding: 0 32px 0 !important; }      /* #2037→#2653 下 80→0 */
  body.page-id-16653 section.philosophy.is-service { padding-top: 100px !important; }          /* #2038 上 80→100 */
  body.page-id-16653 .philosophy.is-service article:nth-of-type(2) .ph-body { padding-bottom: 60px; } /* #2654 philosophy カード2 ph-body 下 36→60 */
  body.page-id-16653 section.sd-pricing { padding-top: 80px; }                                 /* #2039 toc-sec-4 上 48→80 */
  body.page-id-16653 section.sd-faq { padding-top: 100px; padding-bottom: 0; margin-bottom: 100px; } /* #2040→#2655 toc-sec-5 上80→100 / 下0 / margin下80→100 */
}

/* /service/concept-meeting/（page-id-16689）SP 余白調整 #2041-#2045 */
@media (max-width: 900px) {
  body.page-id-16689 section:nth-of-type(2) > .container { padding: 0 32px 40px !important; }  /* #2041→#2725 下 160→80→40 */
  body.page-id-16689 .sd-mv h1 { font-size: 16px !important; }                              /* #2610 18→16 */
  body.page-id-16689 .sd-mv .lead-fv { font-size: 14px !important; font-weight: 400 !important; line-height: 28px !important; } /* #2611 16→14 / 300→400 / lh30→28 */
  body.page-id-16689 .sd-intro-center:has(.intro-lead) .section-head.center h2 { font-size: 28px !important; } /* #2612 toc-sec-1 h2 30→28（:has で #2032の30!important上書き）*/
  body.page-id-16689 section:nth-of-type(3) > .container { padding: 0 32px 0 !important; } /* #2042→#2613 下 160→100→0 */
  body.page-id-16689 section.philosophy.is-service { padding-top: 100px !important; }          /* #2043 上 80→100 */
  body.page-id-16689 section.sd-pricing { padding-top: 80px; }                                 /* #2044 toc-sec-4 上 48→80 */
  body.page-id-16689 section.sd-faq { padding-top: 80px; padding-bottom: 0; margin-bottom: 100px; } /* #2045→#2614 margin下80→100 */
}

/* ============================================================
   2026-06-20 websupport #2197-#2202 余白調整（PC/SP 両方）
============================================================ */
/* /service/operation/（page-id-16694）*/
body.page-id-16694 .op-plan-block { margin-bottom: 150px; }                /* #2197/#2198 下 176→150 */
body.page-id-16694 #spot-pricing { margin-bottom: 150px; }                 /* #2199 下 72→150 */
body.page-id-16694 .op-spot-block:has(.op-cases) { margin-bottom: 150px; } /* #2200 op-cases ブロック 下 72→150 */

/* /service/spot-consulting/（page-id-16701）*/
body.page-id-16701 section.sd-such > .container { padding-bottom: 80px; }  /* #2201 toc-sec-3 下padding 0→80 */
body.page-id-16701 section.sd-faq > .container { margin-bottom: 150px; }   /* #2202 toc-sec-5 下margin 0→150 */

/* ============================================================
 * 2026-06-20 websupport #2551/#2553-#2555: branding/session SP 余白・本文
 * （既存の page-id スコープ規約に準拠。末尾配置で同特異度ルールに後勝ち）
 * ============================================================ */
@media (max-width: 900px) {
  /* #2551 /service/branding/ section2 本文段落 15→14 / lh33→28 */
  .sd-intro-center .intro-paragraphs p { font-size: 14px; line-height: 28px; }  /* #2551→#2564 全ページ共通化 */
  /* #2553 /service/session/ toc-sec-2(=section3 .container.mb160) 下 160→20 */
  body.page-id-16700 section:nth-of-type(3) > .container { padding: 0 32px 20px !important; }
  /* #2554 /service/session/ toc-sec-4(=sd-pricing) 上 48→60 */
  body.page-id-16700 section.sd-pricing { padding-top: 60px; }
  /* #2555 /service/session/ toc-sec-5(=sd-faq) 48/48→100/100 */
  body.page-id-16700 section.sd-faq { padding-top: 100px; padding-bottom: 100px; }
}

/* ============================================================
 * 2026-06-20 websupport #2565-#2572: session/brand-vision-work SP
 * ============================================================ */
@media (max-width: 900px) {
  /* #2567 .ph-card-title 22→20（全ページ共通）*/
  .philosophy.is-service .ph-card-title { font-size: 20px; }

  /* ---- /service/session/ (16700) ---- */
  /* #2565 toc-sec-1(=section2) container 下マージン 0→100 */
  body.page-id-16700 section:nth-of-type(2) > .container { margin-bottom: 40px; }
  /* #2566 philosophy 上 80→100 */
  body.page-id-16700 section.philosophy.is-service { padding-top: 100px !important; }

  /* ---- /service/brand-vision-work/ (16686) ---- */
  /* #2569 toc-sec-1(=section2) .reveal.mb160 下 160→100 */
  body.page-id-16686 section:nth-of-type(2) > .container > .mb160 { padding-bottom: 80px !important; }
  /* #2570 toc-sec-2(=section3) .container.mb160 下 160→20 */
  body.page-id-16686 section:nth-of-type(3) > .container { padding: 0 32px 20px !important; }
  /* #2571 philosophy .ph-body 下 36→50 */
  body.page-id-16686 .philosophy.is-service .ph-body { padding-bottom: 60px; }  /* #2571→#2724 50→60 */
  /* #2589 philosophy 上 80→100 */
  body.page-id-16686 section.philosophy.is-service { padding-top: 100px !important; }
  /* #2572→#2590 toc-sec-5(=sd-faq) 上48→100・下0・下マージン100 */
  body.page-id-16686 section.sd-faq { padding-top: 100px; padding-bottom: 0; margin-bottom: 100px; }
}

/* ============================================================
 * 2026-06-21 sd-intro-split：ABOUT/intro を「左=写真／右=文章」2カラム化
 *   写真は旧 sd-photo-band の画像を左カラムへ流用。SPは縦積み。
 *   ※ section に .sd-intro-split を付けたページのみ適用。
 * ============================================================ */
.sd-intro-split .sd-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  text-align: left;
  max-width: none;
  margin-top: clamp(56px, 7vw, 96px);
}
.sd-intro-split .sd-split-media { margin: 0; }
.sd-intro-split .sd-split-media img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--c-bg-soft);
}
.sd-intro-split .sd-split-body { max-width: none; margin: 0; text-align: left; }
.sd-intro-split .sd-split-body .intro-lead,
.sd-intro-split .sd-split-body .intro-paragraphs,
.sd-intro-split .sd-split-body .intro-paragraphs p { text-align: left; margin-left: 0; margin-right: 0; }
.sd-intro-split .sd-split-body .sd-about-cta { justify-content: flex-start; }
@media (max-width: 900px) {
  .sd-intro-split .sd-split { grid-template-columns: 1fr; gap: 20px; margin-top: 52px; }
  .sd-intro-split .sd-split-media img { aspect-ratio: 16 / 9; }
}

/* 2026-06-21 sd-intro-split：intro-lead を大きめコピーに（28px）*/
.sd-intro-split .sd-split-body .intro-lead {
  font-size: 28px !important;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  color: var(--c-black);
}
@media (max-width: 900px) {
  .sd-intro-split .sd-split-body .intro-lead { font-size: 21px !important; margin-bottom: 20px; }
}

/* 2026-06-21 sd-intro-split：左端揃え（intro-lead / 本文 / CTA を同じ左端に）
   ※各ページの intro-paragraphs 拡幅ルール（例 #965 width:calc(100%+40px); margin-left:-20px）を打ち消す */
.sd-intro-split .sd-split-body .intro-lead,
.sd-intro-split .sd-split-body .intro-paragraphs {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
.sd-intro-split .sd-split-body .intro-paragraphs p { text-align: left !important; }
.sd-intro-split .sd-split-body .sd-about-cta {
  display: flex !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  text-align: left !important;
}

/* 2026-06-21 websupport #2678/#2679：/service/branding/ section2・3 の container2 PC 下余白 160→0 */
@media (min-width: 901px) {
  body.page-id-16687 section:nth-of-type(2) > .container2 { padding-bottom: 0 !important; }
  body.page-id-16687 section:nth-of-type(3) > .container2 { padding-bottom: 0 !important; }
}

/* 2026-06-21 websupport #2696-#2699 */
.sd-intro-split .sd-split-body .intro-lead { font-weight: 700; }                       /* #2699 intro-lead 500→700（PC/SP）*/
body.page-id-16687 section:nth-of-type(3) .section-head h2 { margin-bottom: 0; }        /* #2696 branding section3 h2 下40→0 */
body.page-id-16700 section:nth-of-type(3) .section-head h2 { margin-bottom: 0; }        /* #2697 session section3 h2 下40→0 */
@media (min-width: 901px) {
  body.page-id-16700 section:nth-of-type(3) > .container { padding-bottom: 0 !important; } /* #2698 session toc-sec-2 container PC 下160→0 */
}

/* 2026-06-21 websupport #2704：split 写真の下余白（SP・縦積み時の写真↓本文の間）0→15px（全splitページ）*/
@media (max-width: 900px) {
  .sd-intro-split .sd-split-media img { margin-bottom: 15px; }
}

/* 2026-06-27 社長指示: sd-split を「写真の上に白ボックスを重ねる」レイアウトへ（全 sd-intro-split ページ共通）。
   写真=左／白box=右で、box の左端を写真に少し重ね、box は写真の垂直中央に配置。SP（<=900px）は従来の縦積み維持。
   参考: 添付（Style no.01 / ORDER HOUSE 風）。影は使わず極薄ヘアラインで box を定義。 */
@media (min-width: 901px) {
  .sd-intro-split .sd-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
    align-items: center;
    position: relative;
  }
  .sd-intro-split .sd-split-media { grid-column: 1; grid-row: 1; }
  .sd-intro-split .sd-split-media img { aspect-ratio: 4 / 3; }
  .sd-intro-split .sd-split-body {
    grid-column: 2; grid-row: 1;
    position: relative;
    align-self: center;
    z-index: 2;
    background: #fff;
    padding: clamp(40px, 4vw, 72px);
    margin-left: clamp(-96px, -6vw, -48px);
  }
}

/* 2026-06-21 websupport #2717/#2718：philosophy カード（SP・全ページ共通）*/
@media (max-width: 900px) {
  .philosophy.is-service .ph-card-title { font-weight: 700; }   /* #2717 500→700 */
  .philosophy.is-service .ph-num { font-size: 15px; }           /* #2718 13→15 */
}

/* 2026-06-21 websupport #2724-#2729 */
@media (max-width: 900px) {
  .philosophy.is-service .ph-body { padding-bottom: 60px; }              /* #2726 ph-body 全ページ60（#2724 bvwと統一）*/
  body.page-id-16691 #toc-sec-1 > div { padding-bottom: 60px !important; } /* #2727 logo ABOUT container 160→60 */
  body.page-id-16691 .wb-pillars .section-head h2 { font-size: 14px; }   /* #2728 logo wb-pillars h2 SP 16→14 */
  body.page-id-16691 .logo-marquee-item { width: 150px; }                /* #2729 logo マーキー ロゴ半分 300→150 */
}

/* 2026-06-21 websupport #2736-#2745（SP） */
@media (max-width: 900px) {
  body.page-id-16652 .philosophy.is-service .ph-num { font-size: 18px; }                 /* #2740 consulting ph-num 38→18 */
  body.page-id-16652 section.sd-faq { padding-top: 100px; padding-bottom: 100px; }       /* #2741 consulting sd-faq 48→100/100 */
  body.page-id-16689 .philosophy.is-service article:nth-of-type(3) .ph-body { padding-bottom: 20px; } /* #2736 concept カード3 ph-body 60→20（この要素のみ）*/
  body.page-id-16696 section:nth-of-type(2) > .container,
  body.page-id-16696 section:nth-of-type(2) > .container2 { padding-bottom: 40px !important; } /* #2742 personal toc-sec-1 下160→40 */
  body.page-id-16696 section:nth-of-type(3) > .container,
  body.page-id-16696 section:nth-of-type(3) > .container2 { padding-bottom: 0 !important; }    /* #2743 personal toc-sec-2 下160→0 */
  body.page-id-16696 .philosophy.is-service article:nth-of-type(3) .ph-body { padding-bottom: 40px; } /* #2744 personal カード3 ph-body 60→40（この要素のみ）*/
}

/* 2026-06-21 websupport #2795-#2798（branding SP・MVヘッダー＋ABOUT h2）*/
@media (max-width: 900px) {
  body.page-id-16687 .sd-mv .breadcrumb { margin-bottom: 60px; }              /* #2795 16→60 */
  body.page-id-16687 .sd-mv .en-label { margin-bottom: 10px; }               /* #2796 18→10 */
  body.page-id-16687 .sd-mv .lead-fv { margin-top: 40px !important; }         /* #2797 24→40 */
}
@media (max-width: 700px) {
  body.page-id-16687 .sd-intro-center:has(.intro-lead) .section-head.center h2 { line-height: 40px !important; } /* #2798 lh 38→40（font26維持）*/
}

/* ============================================================
 * 2026-06-21 websupport #2799-#2838 web-branding(16656)/recruit(16659) SP
 *   #toc-sec-N = section:nth-of-type(N+1) に翻訳してスコープ
 * ============================================================ */
@media (max-width: 900px) {
  body.page-id-16656 section:nth-of-type(2) > div { padding-bottom: 20px !important; }
  body.page-id-16656 section:nth-of-type(4) > div:nth-of-type(1) > div > h2 { font-size: 14px; }
  body.page-id-16656 section:nth-of-type(5) { padding-top: 120px !important; }
  body.page-id-16656 section:nth-of-type(5) > div:nth-of-type(1) > div:nth-of-type(1) > h2 { font-size: 14px; letter-spacing: 1px; }
  body.page-id-16656 section:nth-of-type(5) > div:nth-of-type(1) > div:nth-of-type(1) { margin-bottom: 40px; }
  body.page-id-16656 section:nth-of-type(3) > div > div > h2 { font-size: 14px; letter-spacing: 1px; }
  body.page-id-16656 section:nth-of-type(6) { padding-top: 120px !important; }
  body.page-id-16656 section:nth-of-type(6) > div > div:nth-of-type(1) > h2 { font-size: 14px; letter-spacing: 1px; }
  body.page-id-16656 section:nth-of-type(6) > div > p { margin-bottom: 60px; }
  body.page-id-16656 section:nth-of-type(6) > div > div:nth-of-type(2) { gap: 40px; }
  body.page-id-16656 section:nth-of-type(6) > div > div:nth-of-type(2) > article > h4 { font-size: 18px; }
  body.page-id-16656 section:nth-of-type(7) { padding-top: 100px !important; }
  body.page-id-16656 section:nth-of-type(7) > div { padding-bottom: 100px !important; }
  body.page-id-16656 section:nth-of-type(7) > div > div:nth-of-type(1) > p { padding-bottom: 20px; }
  body.page-id-16656 section:nth-of-type(7) > div > div:nth-of-type(2) > div > h4 { font-size: 18px; margin-bottom: 10px; }
  body.page-id-16656 section:nth-of-type(7) > div > div:nth-of-type(2) > div:nth-of-type(1) > p { font-size: 14px; }
  body.page-id-16659 section:nth-of-type(2) > div { padding-bottom: 60px !important; }
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(1) > h2 { font-size: 16px; letter-spacing: 1px; }
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > h3 { font-size: 20px; line-height: 38px; }
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) { padding-bottom: 0; }   /* #3738 SP 80->0（wb-pillars-grid・#2838上書き） */
  body.page-id-16659 section:nth-of-type(5) { padding-top: 100px !important; padding-bottom: 100px !important; }
}

/* 2026-06-21 修正＋#2839-#2850：toc-sec-7=.wb-support / toc-sec-8=.wb-services（wrapper内＝nth-of-type外のためクラス指定）*/
@media (max-width: 900px) {
  body.page-id-16656 section:nth-of-type(4) { padding-top: 100px !important; }
  body.page-id-16656 section:nth-of-type(4) > div:nth-of-type(3) { margin-top: 10px; }
  body.page-id-16656 .wb-support { padding-top: 100px !important; }
  body.page-id-16656 .wb-support > .container > .section-head h2 { font-size: 14px; letter-spacing: 1px; }
  body.page-id-16656 .wb-support > .container > div:nth-of-type(2) { margin-top: 60px; padding-top: 60px; }
  body.page-id-16656 .wb-support > .container > div:nth-of-type(3) { margin-top: 100px; padding-top: 100px; }
  body.page-id-16656 .wb-support > .container > div:nth-of-type(2) > div > article > h4 { font-size: 18px; }
  body.page-id-16656 .wb-services { padding-top: 100px !important; padding-bottom: 100px !important; }
  body.page-id-16656 .wb-services > .container > .section-head h2 { font-size: 14px; letter-spacing: 1px; }
  body.page-id-16656 .wb-services > .container > p.wb-support-lead { font-size: 14px; line-height: 28px; }
  body.page-id-16656 .wb-services > .container > div:nth-of-type(2) > div > a > h4 { font-size: 18px; }
}

/* 2026-06-21 websupport #2854-#2867 web-branding SP 追補 */
@media (max-width: 900px) {
  body.page-id-16656 section:nth-of-type(3) .wb-design-photo { aspect-ratio: 4 / 3 !important; }
  body.page-id-16656 section:nth-of-type(4) > div:nth-of-type(2) > div > div > article > div:nth-of-type(1) > h3 { font-size: 22px; line-height: 40px; }
  body.page-id-16656 section:nth-of-type(5) > div:nth-of-type(1) > div:nth-of-type(2) > h3 { font-size: 24px; line-height: 40px; }
  body.page-id-16656 section:nth-of-type(5) > div:nth-of-type(2) > div > div > article > div:nth-of-type(1) > h3 { font-size: 20px; line-height: 36px; }
  body.page-id-16656 .wb-support > .container > div:nth-of-type(3) > div { gap: 40px; }
  body.page-id-16656 .wb-support > .container > div:nth-of-type(3) > div > article > h4 { font-size: 18px; }
  body.page-id-16656 .wb-services .wb-services-block-head { flex-direction: column; align-items: flex-start; }
  body.page-id-16656 .wb-services > .container > div:nth-of-type(3) { margin-top: 60px; }
  body.page-id-16656 .wb-services > .container > div:nth-of-type(3) > div > a > h4 { font-size: 18px; line-height: 34px; }
}

/* 2026-06-21 websupport #2870-#2880 web-branding SP（注記なし＝同種全要素）*/
@media (max-width: 900px) {
  body.page-id-16656 section:nth-of-type(3) > div > article > div > div > strong { font-size: 24px; }
  body.page-id-16656 section:nth-of-type(4) > div:nth-of-type(2) > div > div > article > div:nth-of-type(1) > div > span:nth-of-type(3) { font-size: 16px; }
  body.page-id-16656 section:nth-of-type(4) > div:nth-of-type(2) > div > div > article > div:nth-of-type(1) > div > span:nth-of-type(1) { font-size: 40px; }
  body.page-id-16656 .wb-support > .container > p.wb-support-lead { font-size: 14px; line-height: 28px; }
  body.page-id-16656 .wb-support .wb-support-block-head { flex-direction: column; align-items: flex-start; }
  body.page-id-16656 .wb-services .wb-services-block-head { gap: 3px; }
}

/* 2026-06-21 websupport #2901-#2909 web-branding SP（全要素）*/
@media (max-width: 900px) {
  body.page-id-16656 .wb-support .wb-support-block-head { gap: 3px; }            /* #2903/#2904 */
  body.page-id-16656 .wb-services .wb-services-block-head { margin-bottom: 40px; } /* #2906 */
  body.page-id-16656 .wb-services .wb-services-grid { gap: 40px; }                 /* #2907/#2909 */
}

/* 2026-06-21 websupport #2898/#2899 スライダー矢印を黒丸・白矢印・カード右上へ（SP・両スライダー）*/
@media (max-width: 900px) {
  body.page-id-16656 .wb-reason-slider .proc-arrow {
    width: 40px; height: 40px;
    background: #101010 !important;
    box-shadow: none;
    top: 6px; transform: none;
  }
  body.page-id-16656 .wb-reason-slider .proc-arrow.next { right: 6px; left: auto; }
  body.page-id-16656 .wb-reason-slider .proc-arrow.prev { right: 52px; left: auto; }
  body.page-id-16656 .wb-reason-slider .proc-arrow::before { border-color: #fff !important; }
  body.page-id-16656 .wb-reason-slider .proc-arrow:disabled { background: #101010 !important; }
}

/* 2026-06-21 websupport #2917-#2925 web-branding SP */
@media (max-width: 900px) {
  body.page-id-16656 .sd-mv .breadcrumb { margin-bottom: 60px; }
  body.page-id-16656 .sd-mv .lead-fv { line-height: 28px !important; }
  body.page-id-16656 section:nth-of-type(3) > div > article > div > h3 { font-size: 20px; line-height: 36px; }
  body.page-id-16656 section:nth-of-type(5) > div:nth-of-type(2) > div > div > article > div:nth-of-type(1) > div > span:nth-of-type(1) { font-size: 40px; }
  body.page-id-16656 section:nth-of-type(5) > div:nth-of-type(2) > div > div > article > div:nth-of-type(1) > div > span:nth-of-type(3) { font-size: 16px; }
}

/* 2026-06-21 #2928 矢印グリフを円の中央に（黒丸40px用に再センタリング）*/
@media (max-width: 900px) {
  body.page-id-16656 .wb-reason-slider .proc-arrow::before { margin: 0; }
  body.page-id-16656 .wb-reason-slider .proc-arrow.next::before { transform: translateX(-2px) rotate(45deg); }
  body.page-id-16656 .wb-reason-slider .proc-arrow.prev::before { transform: translateX(2px) rotate(-135deg); }
}

/* 2026-06-21 websupport #2934-#2939 recruit(16659) */
body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > span.wb-pillar-en { color: #f2f2f2; margin-bottom: 0; }            /* #2936/#2938 PC/SP両方・全article */
body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > h3.wb-pillar-title { border-top: 0; font-size: 22px; line-height: 38px; } /* #2937/#2939 PC/SP両方・全article */
@media (max-width: 900px) {
  body.page-id-16659 .sd-mv .breadcrumb { margin-bottom: 40px; }   /* #2934 */
}

/* 2026-06-21 websupport #2948-#2950 recruit wb-pillars SP（全article）*/
@media (max-width: 900px) {
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > span.wb-pillar-en { font-size: 50px; }
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > h3.wb-pillar-title { margin-top: -20px; }
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > ul > li > b { font-size: 16px; line-height: 30px; }
}

/* 2026-06-21 websupport #2963/#2964 recruit wb-pillars（PC/SP両方・全article）*/
body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > span.wb-pillar-en { font-size: 50px; }
body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > h3.wb-pillar-title { margin-top: -30px; }

/* 2026-06-21 websupport #2966 recruit / #2967-#2974 logo-branding SP */
@media (max-width: 900px) {
  body.page-id-16659 section:nth-of-type(3) > div > div:nth-of-type(2) > article > h3.wb-pillar-title { margin-top: -25px; padding-top: 0; }  /* #2966 */
  body.page-id-16691 .sd-mv h1 { font-size: 14px !important; }                              /* #2967 */
  body.page-id-16691 .sd-mv .lead-fv { line-height: 28px !important; }                      /* #2968 */
  body.page-id-16691 .sd-mv .breadcrumb { margin-bottom: 60px; }                            /* #2969 */
  body.page-id-16691 .logo-marquee-inner { margin-bottom: 100px; }                          /* #2970 */
  body.page-id-16691 .section-head-wrap .section-head h2 { font-size: 14px; }               /* #2971 */
  body.page-id-16691 section.sd-pricing { padding-top: 100px !important; }                   /* #2973 */
  body.page-id-16691 section.sd-pricing > .container { padding-bottom: 100px !important; }   /* #2972 */
  body.page-id-16691 section.wb-pillars .wb-pillar-title { font-size: 22px; line-height: 40px; }  /* #2974 全pillar */
}

/* 2026-06-23 websupport #3134-#3141 横展開 — graphic design 全ページ（single-branding-design）SP標準。business-card で確定した値を全 branding-design 単一ページへ適用。tabloid(418) の個別指定（sd-intro 上0 / FAQ余白）は後段の postid-418 ブロックが source-order で優先＝据え置き。 */
@media (max-width: 900px) {
  body.single-branding-design section.wb-concept { padding-top: 100px !important; }                          /* #3134 padding 48->100 */
  body.single-branding-design section.wb-concept .section-head h2 { font-size: 14px; }                       /* #3135 h2 18->14 */
  body.single-branding-design section.sd-intro { padding-top: 100px !important; }                            /* #3136 padding 48->100 */
  body.single-branding-design section.gp-spec { padding-top: 100px !important; }                             /* #3137 padding 48->100 */
  body.single-branding-design section.gp-spec .gp-spec-body p { font-size: 14px; line-height: 28px; }        /* #3138 p 15->14 / lh36->28 zen-p */
  body.single-branding-design section.sd-pricing { padding-top: 100px !important; }                          /* #3139 padding 48->100 */
  body.single-branding-design section.gp-faq .gp-faq-item dt { font-size: 17px; }                            /* #3140 dt 15->17 zen-dt */
  body.single-branding-design section.gp-faq .gp-faq-item dd { line-height: 28px; }                          /* #3141 dd lh30.8->28 zen-dd */
  body.single-branding-design .bd-intro-body { padding: 0; }                                                 /* #3158 SP 左右余白 20->0 全bd-intro */
  body.single-branding-design section.gp-faq { padding-top: 100px !important; }                              /* #3159 padding 48->100 */
}


/* 2026-06-21 websupport #3004-#3018 branding-design/tabloid/photo-movie SP */
@media (max-width: 900px) {
  body.post-type-archive-branding-design .bd-hero-inner { margin-top: 120px; }                       /* #3010 */
  body.post-type-archive-branding-design .bd-grid { gap: 60px; }                                     /* #3012 */
  body.postid-418 section.wb-concept { padding-top: 100px !important; }                               /* #3013 */
  body.postid-418 section.wb-concept article .wb-point-num { margin-bottom: 10px; }                   /* #3014 全article */
  body.postid-418 section.sd-intro { padding-top: 0 !important; }                                     /* #3015 */
  body.postid-418 section.gp-spec { padding-top: 100px !important; }                                  /* #3016 */
  body.postid-418 section.sd-pricing { padding-top: 100px !important; }                               /* #3017 */
  body.postid-418 section.gp-faq { padding-top: 100px !important; padding-bottom: 100px !important; }  /* #3018 */
  body.page-id-16697 .sd-mv .breadcrumb { margin-bottom: 60px; }                                      /* #3004 */
  body.page-id-16697 .pm-block figure img { aspect-ratio: 4 / 3 !important; object-fit: cover; }       /* #3005/#3008 */
  body.page-id-16697 .pm-block .pm-title { border-bottom: 0; }                                        /* #3006 全block */
  body.page-id-16697 .pm-block .pm-lede { font-size: 22px; }                                          /* #3007 全block */
}

/* 2026-06-24 websupport #3160-#3162 photo-movie SP */
@media (max-width: 900px) {
  body.page-id-16697 .pm-block .pm-en { font-size: 40px; }                                            /* #3160 50->40 zen-block */
  body.page-id-16697 .pm-block .pm-title { padding-bottom: 0; }                                       /* #3161 padding-bottom 24->0 zen-block */
  body.page-id-16697 section.pm-block { padding-top: 100px !important; }                              /* #3162 padding 48->100 zen-block */
}

/* 2026-06-24 websupport #3171-#3181 /service/operation/（page-id-16694）SP */
@media (max-width: 900px) {
  body.page-id-16694 section.sd-pricing { padding-top: 100px !important; }                                  /* #3171 padding 48->100 */
  body.page-id-16694 .op-spot-title { font-size: 24px; line-height: 48px; }                                 /* #3172/#3268 34->30->24 / lh->48（全op-spot-title） */
  body.page-id-16694 .op-plan-block .op-block-h4 { font-size: 20px; line-height: 36px; }                     /* #3173/#3269 24->20 / lh->36（両op-plan-block見出し） */
  body.page-id-16694 .op-plan-block { padding-left: 0; padding-right: 0; margin-bottom: 100px; }             /* #3175 L/R20->0 ＋ #3177 margin150->100（全op-plan-block） */
  body.page-id-16694 .pr-plans { gap: 40px; }                                                                /* #3176 gap20->40（全pr-plans） */
  body.page-id-16694 .sd-pricing > .container { margin-bottom: 100px; }                                      /* #3179 container 下margin150->100 */
  body.page-id-16694 .sd-pricing > .container > div:nth-of-type(6) .op-block-h4 { font-size: 20px; line-height: 38px; }  /* #3178 24->20 / lh48->38（WEB修正スポットの全h4） */
  body.page-id-16694 .op-anchors { grid-template-columns: 1fr; }                                            /* #3267 SP 1列4行 */
  body.page-id-16694 .op-anchors a { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 16px 20px; }  /* #3267 ボタン化（横並び） */
  body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table th { padding: 25px 0 5px 0; }                                  /* #3270/#3283/#3286 padding 25 0 5 0（全th） */
  body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table .op-strat-price { padding: 0 0 15px 0; }                       /* #3271/#3282 padding 0 0 15 0（全price） */
  body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table .op-strat-desc { padding: 0 0 25px 0; }                        /* #3272/#3285 padding 0 0 25 0（全desc） */
  body.page-id-16694 .op-plan-block .op-block-h4 { margin-bottom: 20px; padding-bottom: 20px; }               /* #3277 mb16->20 / pb10->20（両プラン見出し） */
  body.page-id-16694 .op-spot-lead-strong { margin-bottom: 60px; }                                           /* #3279 mb28->60 */
  body.page-id-16694 .sd-pricing > .container > div:nth-of-type(6) .op-block-h4:not(:first-of-type) { margin-top: 60px; }  /* #3280 mt40->60（WEB修正スポットのカテゴリ間） */
  body.page-id-16694 .op-case-title { font-size: 14px; }                                                     /* #3281 13->14（全op-case-title） */
  body.page-id-16694 .op-cases { margin-top: 60px; }                                                          /* #3426 mt40->60（この要素のみ） */
  body.page-id-16694 .op-spot-block:not(:last-of-type) { margin-bottom: 100px; }                             /* 社長指示 op-spot-block 下margin 100（最後=#strategyは:last-of-type 0を維持） */
  body.page-id-16694 #spot-pricing { margin-bottom: 100px; }                                                 /* 同上・ID指定#2199(150)をSPで上書き */
  body.page-id-16694 #diagnosis { padding-top: 100px; padding-bottom: 100px; }                              /* #3181 padding 48/160 -> 100/100 */
}

/* 2026-06-25 websupport #3429-#3433 /service/advertising-operation/（page-id-16685）SP。toc-sec採番→安定クラスにマップ：1=sd-intro-split / 2=sd-intro-center(非split) / 4=sd-pricing / 5=sd-faq。各「この要素のみ」。 */
@media (max-width: 900px) {
  body.page-id-16685 .sd-intro-split .section-head h2 br { display: none; }                                  /* #3429 toc-sec-1 h2 改行を外す */
  body.page-id-16685 section.sd-intro-split > .container { margin-bottom: 40px; }                            /* #3430/#3441 下margin80->40（#1903の80を特異度合わせ＋後勝ちで上書き） */
  body.page-id-16685 .sd-intro-center:not(.sd-intro-split) > .container { padding-bottom: 40px; }            /* #3431 toc-sec-2 container 下padding120->40 */
  body.page-id-16685 section.sd-pricing { padding-top: 60px; }                                               /* #3432 toc-sec-4 上padding48->60 */
  body.page-id-16685 section.sd-faq { padding-top: 100px; padding-bottom: 100px; }                           /* #3433/#3442 上下padding48->80->100 */
}

/* 2026-06-24 #3180 #strategy 表をスマホで「見出し/価格/説明」3段化。本文で説明を .op-strat-desc セルに分離。PC=grid で現状の2列を維持／SP=flex で source順(見出し→価格→説明)に縦積み。 */
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table tbody tr {
  display: grid; grid-template-columns: 1fr auto; column-gap: 20px;
  border-bottom: 1px solid var(--c-line);
}
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table tbody th,
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table tbody td { border-bottom: 0; }
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table tbody th { grid-column: 1; grid-row: 1; }
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table .op-strat-price { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table .op-strat-desc {
  grid-column: 1; grid-row: 2;
  text-align: left; font-family: inherit; font-weight: 400; font-size: 12px;
  color: var(--c-sub); white-space: normal; letter-spacing: 0; padding-top: 0;
}
body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table .op-strat-desc small { font-size: 12px; color: var(--c-sub); }
@media (max-width: 900px) {
  body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table tbody tr { display: flex; flex-direction: column; }
  body.page-id-16694 :is(#strategy, #spot-pricing) .op-spot-table .op-strat-price { text-align: left; }
}

/* 2026-06-21 websupport #3009 制作カテゴリー一覧をSPでセレクトボックス化 */
.bd-sidebar-select { display: none; }
@media (max-width: 900px) {
  body.post-type-archive-branding-design .bd-sidebar-list { display: none; }
  body.post-type-archive-branding-design .bd-sidebar-select {
    display: block; width: 100%; margin-top: 12px;
    padding: 13px 40px 13px 16px; font-size: 15px; line-height: 1.4;
    font-family: inherit; color: var(--c-black); background-color: #fff;
    border: 1px solid var(--c-line); border-radius: 4px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%23101010%27 stroke-width=%271.4%27 fill=%27none%27/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
  }
}

/* 2026-06-21 #3027/#3028 pm-figure 自体を4:3に（前回imgのみ→箱が4/5で効かず）*/
@media (max-width: 900px) {
  body.page-id-16697 .pm-block .pm-figure { aspect-ratio: 4 / 3 !important; }
}

/* 2026-06-26 websupport #3443-#3449 concents(16688)/spot-consulting(16701) SP。toc採番→安定クラス。既存 #1914/#1916/#2202 と同セレクタで後勝ち上書き。 */
@media (max-width: 900px) {
  /* --- concents (16688) --- */
  body.page-id-16688 section.sd-pricing { padding-top: 100px; }                              /* #3445 toc-sec-3 上48->100 */
  body.page-id-16688 section.sd-pricing > .container { margin-bottom: 100px; }               /* #3446 toc-sec-3 container 下160->100（#1914上書き） */
  /* sd-philosophy（concents固有）見出し/本文。全ページ指定だが.sd-philosophyはconcentsのみ */
  body.page-id-16688 .sd-philosophy .section-head h2 { font-size: 16px; }                    /* #3443 20->16（#1912上書き） */
  body.page-id-16688 .sd-philosophy-body .reveal p { font-size: 14px; line-height: 28px; }   /* #3444 15->14/lh28 */
  /* --- spot-consulting (16701) --- */
  body.page-id-16701 .sd-intro-center:not(.sd-intro-split) > .container { margin-bottom: 20px; }  /* #3447 toc-sec-2 container 下160->20（#1916上書き） */
  body.page-id-16701 section.sd-faq { padding-top: 100px; }                                  /* #3448 toc-sec-5 上48->100 */
  body.page-id-16701 section.sd-faq > .container { margin-bottom: 100px; }                   /* #3449 toc-sec-5 container 下150->100（#2202上書き） */
}

/* #3738 web-branding/recruit(page-16659) のみ wb-pillars-grid 下余白 160->0（両viewport・この要素のみ） */
body.page-id-16659 .wb-pillars-grid { padding-bottom: 0; }


/* 2026-06-27 websupport #3826 recruit(web-branding) SP: #toc-sec-3 上padding 48->100 */
@media (max-width: 767px) {
  body.page-id-16659 #toc-sec-3 { padding-top: 100px; }
}


/* 2026-06-27 websupport #3852 web-branding SP: p.wb-spec-lead 15->14 / lh33->28 */
@media (max-width: 767px) {
  body.page-id-16656 .wb-spec-lead { font-size: 14px; line-height: 28px; }
}


/* 2026-06-30 websupport #4096 SP: gp-faq dt 17->16 / 行間30.6->28（全ページ） */
@media (max-width: 767px) {
  .gp-faq-item dt { font-size: 16px; line-height: 28px; }
}


/* 2026-06-30 websupport #4093-#4095 SP: .section-head.center h2 18->16 / 字間3.2px->2px（service-detail内の18px指定を上書き） */
@media (max-width: 767px) {
  .section-head.center h2,
  .section-head.center.is-revealed h2 { font-size: 16px !important; letter-spacing: 2px; }
}