/* Nadena Design Original - main stylesheet */

:root {
  --color-bg: #f7f7f7;
  --color-text: #161616;
  --color-muted: #474747;
  --color-accent: #cfaf6d;
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --font-serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-serif-alt: "Libre Bodoni", Georgia, "Times New Roman", serif;
  --page-gutter: 20px;
  --container-max: 1520px;
  --container-max-wide: 1760px;
  --header-gutter: 20px;
  --gap: clamp(20px, 5vw, 60px);
  --measure-body: 48rem;  /* 通常の長文本文の読み幅（約768px） */
  --measure-lead: 58rem;  /* Lead（本文への導入文）の最大幅（約928px） */

  /* Section Vertical Rhythm：Section単位の外側の上下余白（内部のTypography間隔は含まない）。
     clamp()でMobile〜Desktopへ自然に可変する3段階のSpacing System。
     目安：通常=120-150px／Editorial・Major=150-180px／大きな場面転換=160-200px（いずれもDesktop時）。 */
  --space-section-y: clamp(72px, 5vw + 60px, 144px);
  --space-section-y-lg: clamp(80px, 7vw + 62px, 176px);
  --space-section-y-xl: clamp(88px, 8vw + 64px, 200px);

  /* Nadena Typography 2.0 — Integer Design Tokens
     人間が管理するfont-sizeは小数を使わず、ブレークポイントごとの
     整数値で段階的に定義する（429px以下を基準値とし、430/768/960/1280pxで再定義）。 */
  --fs-hero-kicker: 48px;         /* TOP Hero（Design with STRATEGY.等）最大級Display */
  --fs-section-kicker: 32px;      /* 各ページ共通の基本Display kicker */
  --fs-section-kicker-lg: 32px;   /* TOP Our Process等、一段大きいDisplay */
  --fs-section-kicker-xl: 40px;   /* About/Contact CTA等、最大級Display */
  --fs-our-service-heading: 36px; /* Service一覧「Our Service」相互リンク見出し */
  --fs-about-h2: 30px;            /* TOP About Nadena Design見出し */
  --fs-page-h1: 28px;             /* About/Service一覧/Works/Contact/Blog一覧/Blog個別/汎用固定ページ H1 */
  --fs-service-h1: 28px;          /* Service詳細5ページ H1（SPで不必要な改行を減らすため28pxへ調整） */
  --fs-section-h2: 30px;          /* Service詳細ページ内の主要セクションH2（WHY/PHILOSOPHY/VALUE等） */
  --fs-h3: 16px;                  /* 統一する通常H3（プロセス・FAQ等、役割が同じ小見出し） */
  --fs-capability-title: 18px;    /* Capabilities：デザイン要素としての見出し */
}

@media (min-width: 430px) {
  :root {
    --fs-hero-kicker: 64px;
    --fs-section-kicker: 36px;
    --fs-section-kicker-xl: 48px;
    --fs-our-service-heading: 40px;
  }
}

@media (min-width: 768px) {
  :root {
    --fs-hero-kicker: 96px;
    --fs-section-kicker: 40px;
    --fs-section-kicker-lg: 36px;
    --fs-section-kicker-xl: 54px;
    --fs-our-service-heading: 48px;
    --fs-about-h2: 36px;
  }
}

@media (min-width: 960px) {
  :root {
    --fs-hero-kicker: 120px;
    --fs-section-kicker: 48px;
    --fs-section-kicker-lg: 42px;
    --fs-section-kicker-xl: 64px;
    --fs-our-service-heading: 60px;
    --fs-about-h2: 44px;
    --fs-page-h1: 32px;
    --fs-service-h1: 32px;
    --fs-section-h2: 32px;
    --fs-capability-title: 20px;
  }
}

@media (min-width: 1280px) {
  :root {
    --fs-hero-kicker: 144px;
    --fs-section-kicker: 58px;
    --fs-section-kicker-lg: 50px;
    --fs-section-kicker-xl: 76px;
    --fs-our-service-heading: 70px;
    --fs-about-h2: 54px;
    --fs-page-h1: 36px;
    --fs-service-h1: 36px;
    --fs-section-h2: 36px;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 16px/1.8 var(--font-sans);
}

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

/* スクロール位置に連動した画像モーション演出（main.js） */
.scroll-zoom,
.scroll-parallax {
  transform: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-zoom,
  .scroll-parallax {
    transform: none;
  }
}

a {
  color: inherit;
}

.container,
.container--wide {
  width: min(100% - (var(--page-gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.container--wide {
  --container-max: var(--container-max-wide);
}

/* ==========================================================================
   Section header parts（●ラベル／装飾キッカー／リード文）共通コンポーネント
   ========================================================================== */

.section-label {
  position: relative;
  margin: 0 0 16px;
  padding-left: 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}

.section-label::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.section-kicker {
  margin: 0 0 32px;
  font-family: var(--font-serif-alt);
  font-size: var(--fs-section-kicker);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.section-kicker em {
  font-style: italic;
}

.section-kicker--break em {
  display: block;
}

.section-kicker--lg {
  font-size: var(--fs-section-kicker-lg);
  font-weight: 400;
}

.section-kicker--xl {
  font-size: var(--fs-section-kicker-xl);
  font-weight: 400;
}

.section-intro {
  max-width: 640px;
  margin: 0 0 40px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 40px;
    --header-gutter: 40px;
  }
}

@media (min-width: 1280px) {
  :root {
    --page-gutter: clamp(64px, 4.5vw, 88px);
    --header-gutter: clamp(28px, 2vw, 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .menu-toggle__bar,
  .main-navigation {
    transition: none;
  }
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 1000;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--color-text);
  color: #fff;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  width: auto;
  height: auto;
  clip-path: none;
  overflow: visible;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding-inline: var(--header-gutter);
  background: rgba(247, 247, 247, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-branding img {
  height: 32px;
  width: auto;
}

.site-title {
  margin: 0;
  font-size: 18px;
}

.site-title a {
  text-decoration: none;
}

.menu-toggle {
  position: relative;
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューopen時：ハンバーガー→X */
.menu-toggle.is-open .menu-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ドロワー：右から現れる黒いパネル（現行サイトの実測値を新テーマのレスポンシブ設計へ移植）
   実測：SP時199px/280px viewport（≈71%、max-width:75%由来）、PC時は1024/1440pxいずれも600px固定、bg #111111、
   ul padding 28px 40px、項目14px/700/letter-spacing 2px/uppercase、active #cfaf6d。
   SPは画面幅いっぱい、PCは現行同様600pxの大きな黒い面として右に固定表示する。 */
.main-navigation {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  left: auto;
  width: 100%;
  max-width: 600px;
  visibility: hidden;
  overflow-y: auto;
  background: #111111;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-navigation.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.main-navigation > ul {
  margin: 0;
  padding: 48px 40px 40px;
  list-style: none;
}

.main-navigation > ul > li {
  margin-bottom: 8px;
}

.main-navigation a {
  display: inline-block;
  padding: 14px 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
  color: var(--color-accent);
}

/* active：現在ページのみゴールド（親項目はサブメニューが自動展開されるのみで、色は変えない） */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--color-accent);
}

/* SERVICEの展開chevron（新規ライブラリ・アイコン不使用、CSSのみ） */
.menu-item-has-children {
  position: relative;
}

.menu-item-has-children > a {
  margin-right: 32px;
}

.submenu-toggle {
  all: unset;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px; /* SERVICE行のみの高さ（li全体ではなく最初の行に固定し、展開後のsub-menuに引きずられないようにする） */
  cursor: pointer;
}

.submenu-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.3s ease;
}

.menu-item-has-children.is-expanded > .submenu-toggle::before {
  transform: rotate(-135deg) translate(1px, 1px);
}

.main-navigation .sub-menu {
  overflow: hidden;
  max-height: 0;
  padding-left: 8px;
  list-style: none;
  transition: max-height 0.4s ease;
}

.menu-item-has-children.is-expanded > .sub-menu {
  max-height: 600px;
}

.main-navigation .sub-menu li {
  margin-bottom: 0;
}

.main-navigation .sub-menu a {
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
  color: var(--color-accent);
}

.main-navigation .sub-menu .current-menu-item > a,
.main-navigation .sub-menu .current_page_item > a {
  color: var(--color-accent);
}

@media (min-width: 960px) {
  .site-header__inner {
    min-height: 94px;
  }

  .main-navigation {
    top: 94px;
  }

  .site-branding img {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation .sub-menu {
    transition: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  overflow: hidden;
  padding-block: 40px 0;
}

.hero__kicker {
  margin: 0 0 clamp(24px, 6vw, 56px);
  font-family: var(--font-serif);
  font-size: var(--fs-hero-kicker);
  font-weight: 400;
  line-height: 1.05;
}

.hero__kicker em {
  display: block;
  font-style: italic;
}

.hero__kicker span {
  display: block;
  font-style: normal;
}

.hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

/* TOP Hero H1：Main Headingとしての強さは維持しつつ、太く見えすぎないよう一段軽いweightへ
   （Noto Sans JPは400/500/700のみ読み込み済みのため、実在するweight 500を使用） */
.hero .hero__title {
  max-width: 42rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Nadena Typography 2.0：ページ種別ごとのH1スケール
   日本語の文章的な見出しはletter-spacingを詰め、SPで不要な改行が増えないようにする */
.page-intro .hero__title,
.hero__title--page {
  font-size: var(--fs-page-h1);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-service .page-intro p:not(.page-intro__lead):not(.section-kicker) {
  max-width: 780px; /* PCで横に伸びすぎず、自然に2行になる幅（「成果」等の単語途中で改行されない位置） */
  margin-bottom: 0; /* 本文→key visualの余白はセクションのpadding-bottomで統一 */
  font-size: 15px;
  font-weight: 400;
}

.page-service .page-intro .section-kicker {
  margin-bottom: 16px; /* Title Group：直下のH1（Page Title）と密接に配置（12-18px） */
}

/* Title Group：English Display（.section-kicker）と直下のJapanese Page Titleを密接に配置し、
   Category / H1が「別々の見出し」に見えないようにする。
   About / Works / Contact / Blog一覧（404・archiveは対象外）。 */
.page-about .page-intro .section-kicker,
.page-works .page-intro .section-kicker,
.page-contact .page-intro .section-kicker,
body.blog .page-intro .section-kicker {
  margin-bottom: 16px;
}

/* Main Statement：Category直下に来る「そのページで最初に読ませたい日本語メッセージ」の共通Typography。
   Service Detail（Web/LP/Branding/Graphic/SNS）は.detail-intro内の実際のH1、
   About / Service一覧はH1が既にCategory役のため.page-intro__lead（Lead要素）がMain Statement役を担う。
   HTML見出しの意味（H1/Lead）はSEO上変更せず、Visual Typographyのみ共有する。 */
.detail-intro .hero__title,
.page-about .page-intro__lead,
.page-service .page-intro__lead {
  font-size: var(--fs-service-h1);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* About / Service一覧：Main Statement直下に別のLeadが続かないため、Body側の視覚リズムを崩さない
   よう既存Lead分の余白（32px）とmax-width解除をMain Statement自身に残す */
.page-about .page-intro__lead,
.page-service .page-intro__lead {
  max-width: none;
  margin: 0 0 32px;
}

/* About / Service一覧：H1に別途Japanese Categoryが存在しないため、H1自体をService Detailの
   Japanese Category（.detail-intro__category）と同じTypography Grammarへ。 */

/* 404は今回のスケール変更の対象外（従来サイズを維持） */
body.error404 .hero__title {
  font-size: clamp(22px, 3vw, 26px);
}

/* Blog個別：記事タイトルはページの主役のため、通常Page H1体系に統一 */
body.single .hero__title {
  font-size: var(--fs-page-h1);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero__media {
  margin-top: 30px;
}

@media (min-width: 960px) {
  .hero__media {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-top: clamp(40px, 10vw, 160px);
  }
}

/* ==========================================================================
   Key visual（About／Service一覧／Service詳細ページ共通の全幅バナー）
   ========================================================================== */

.key-visual {
  overflow: hidden;
  width: 100%;
  height: clamp(220px, 32vw, 500px);
}

.key-visual--tall {
  height: clamp(260px, 45vw, 640px);
}

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

/* ==========================================================================
   About
   ========================================================================== */

.about {
  padding-block: var(--space-section-y-lg);
}

.about h2 {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-size: var(--fs-about-h2);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.about h2 em {
  font-style: italic;
}

.about p {
  max-width: var(--measure-body);
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-wrap: pretty;
}

p.about__en {
  max-width: none;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 13px;
  text-wrap: pretty;
}

/* About Editorial Grid：English Copy（Design要素） / Japanese Copy（Reading Text）を
   960px以上で2カラムに分け、English Copyが「翻訳の付け足し」に見えないようにする */
.about__intro-grid {
  display: block;
}

@media (min-width: 960px) {
  .about__intro-grid {
    display: grid;
    grid-template-columns: 43% 1fr;
    gap: 8%;
    align-items: start;
  }

  .about__intro-en {
    padding-top: 6px; /* 日本語1行目とEnglish Copy冒頭のベースラインを近づける */
  }

  .about__intro-en .about__en {
    max-width: 32rem; /* English ColumnをColumn幅いっぱいまで広げない（30-34rem） */
  }

  .about__intro-ja p {
    max-width: 40rem; /* Japanese ColumnをColumn幅いっぱいまで広げない（38-42rem） */
    margin-bottom: 1.1em; /* 2-3 paragraph構成のための段落間（1.0-1.2em） */
  }
}

.about__vision {
  overflow: hidden;
  margin-top: 40px;
}

.about__vision-media {
  margin-bottom: 30px;
}

.about__vision-body p {
  max-width: 42rem;
}

p.about__kicker {
  margin-bottom: 20px;
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

p.about__kicker em {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(16px, 1.4vw, 20px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 24px;
  background: var(--color-text);
  color: #fff;
  border: 1px solid var(--color-text);
  border-radius: 5px;
  box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-decoration: none;
}

.button::after {
  content: "\2192";
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.button:hover::after,
.button:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

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

@media (prefers-reduced-motion: reduce) {
  .blog-card__media img {
    transition: none;
  }
}

@media (min-width: 960px) {
  .about__vision {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-top: 60px;
  }

  .about__vision-media,
  .about__vision-body {
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
  }
}

/* ==========================================================================
   Services (What We Do)
   ========================================================================== */

.services {
  padding-block: var(--space-section-y-lg) var(--space-section-y-xl);
}

/* Front Editorial Head：English Concept（Display要素） / Japanese Intro（Reading Text）を
   960px以上で2カラム化する共通コンポーネント。What We Do / Our Processで再利用する。 */
.front-editorial-head {
  display: block;
}

.front-editorial-head__concept {
  max-width: 38rem;
  margin-bottom: 24px;
}

.front-editorial-head__concept .section-kicker {
  line-height: 1.1;
}

/* Italic句とRoman句を意図的に2行へ分ける（幅依存の偶然の改行にしない） */
.front-editorial-head__concept .section-kicker span {
  display: block;
}

.front-editorial-head__concept::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin-top: 24px;
  background: var(--color-accent);
}

.front-editorial-head__body {
  max-width: 40rem;
  margin: 0;
}

.front-editorial-head__body .section-intro {
  margin-bottom: 1.1em; /* 2 paragraph構成のための段落間 */
}

.front-editorial-head__body .section-intro:last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .front-editorial-head {
    display: grid;
    grid-template-columns: minmax(320px, 45%) 1fr;
    gap: 9%;
    align-items: start;
    margin-bottom: 40px;
  }

  .front-editorial-head__concept {
    margin-bottom: 0;
  }
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.services .button {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.service-card__media {
  margin-bottom: 20px;
  aspect-ratio: 1600 / 950;
  object-fit: cover;
}

.service-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.08vw, 30px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.service-card__subtitle {
  margin: 8px 0 0;
  font-size: 13px;
}

.service-card__text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 2;
  text-wrap: pretty;
}

@media (min-width: 960px) {
  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 71px);
  }
}

/* ==========================================================================
   Works
   ========================================================================== */

.works {
  overflow: hidden;
  padding-block: var(--space-section-y-xl) 0;
  background: #000;
  color: #fff;
}

.works__kicker {
  margin-bottom: 8px;
}

.works__heading {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}

.works__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.works__item {
  display: block;
}

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

.works__item:first-child {
  grid-row: span 2;
}

.works__reel {
  position: relative;
  width: 100%;
  margin-top: 40px;
  aspect-ratio: 4096 / 2160;
  background: #111;
}

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

@media (min-width: 960px) {
  .works__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .works__item:first-child {
    grid-row: auto;
  }
}

/* ==========================================================================
   Our Process
   ========================================================================== */

.process {
  padding-block: var(--space-section-y-xl) var(--space-section-y-lg);
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.process-step__title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.process-step__text {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  text-wrap: pretty;
}

.process-step__text strong {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

@media (min-width: 960px) {
  .process__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 71px);
  }
}

/* ==========================================================================
   Contact CTA
   ========================================================================== */

.contact-cta {
  padding-block: var(--space-section-y-lg);
}

.contact-cta__kicker {
  font-family: var(--font-serif);
  line-height: 1.1;
}

.contact-cta__label {
  margin-bottom: 24px;
}

.contact-cta__body p {
  max-width: 34rem;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.button--primary {
  padding: 18px clamp(32px, 8vw, 64px);
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.button--invert {
  background: #fff;
  color: var(--color-text);
  border-color: #fff;
  margin-bottom: 80px;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 40px;
  border-top: 1px solid #ddd;
}

.site-footer__brand img {
  height: 36px;
  width: auto;
  margin-bottom: 12px;
}

.site-footer__tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  font-size: 13px;
  text-decoration: none;
}

.site-footer__copyright {
  font-size: 12px;
  color: var(--color-muted);
}

@media (min-width: 960px) {
  .contact-cta {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 96px);
  }

  .contact-cta__kicker {
    flex: 0 1 46%;
    min-width: 0;
    margin-bottom: 0;
  }

  .contact-cta__body {
    flex: 0 1 40%;
    min-width: 0;
  }

  .site-footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Page intro（Aboutページ等の導入部）
   ========================================================================== */

.page-intro {
  padding-block: var(--space-section-y) calc(var(--space-section-y) * 0.7);
}

.page-intro__lead {
  max-width: var(--measure-lead);
  margin: 0 0 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

/* ==========================================================================
   Split（画像＋本文の2カラム構成／About下層で共通使用）
   ========================================================================== */

.split {
  overflow: hidden;
  padding-block: var(--space-section-y);
}

.split__media {
  margin-bottom: 30px;
}

.page-intro p:not(.page-intro__lead):not(.section-kicker),
.split__body p:not(.about__en):not(.profile__name),
.page-section__body p:not(.about__en),
.service-block p:not(.service-block__tagline),
.detail-section p:not(.section-lead):not(.plan-row__name):not(.plan-row__subname):not(.plan-row__price):not(.plan-row__tax):not(.section-kicker):not(.value-grid *):not(.item-grid *):not(.faq-item *):not(.process-list *):not(.plan-row *) {
  max-width: var(--measure-body);
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-wrap: pretty;
}

@media (min-width: 960px) {
  .split,
  .detail-split {
    display: flex;
    align-items: center;
    gap: var(--gap);
  }

  .split--reverse {
    flex-direction: row-reverse;
  }

  .split__media,
  .split__body {
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
  }

  .split--profile .split__media {
    flex: 0 1 40%;
    max-width: 40%;
  }

  .split--profile .split__body {
    flex: 1 1 60%;
  }
}

/* ==========================================================================
   Page section（画像なしの単カラムセクション）
   ========================================================================== */

.page-section {
  padding-block: var(--space-section-y);
}

.page-section__body {
  max-width: 720px;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.profile__name {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
}

.profile__name span {
  margin-left: 8px;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Capabilities（What We Offer）
   ========================================================================== */

.capabilities {
  padding-block: var(--space-section-y);
}

.capabilities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.capability__title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-capability-title);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.capability__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.9;
}

.capability__list li {
  position: relative;
  padding-left: 1em;
}

.capability__list li::before {
  content: "-";
  position: absolute;
  left: 0;
}

@media (min-width: 768px) {
  .capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px clamp(24px, 5vw, 60px);
  }
}

@media (min-width: 1200px) {
  .capabilities__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Service nav（Serviceページ使用中）
   ========================================================================== */

.service-nav {
  padding-top: 10px;
  padding-bottom: 32px;
}

.service-nav a {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
  text-decoration: none;
}

.service-nav a.is-active {
  color: var(--color-accent);
  font-weight: 700;
}

/* ==========================================================================
   Service list page（サイドナビ＋コンテンツの2カラム）
   ========================================================================== */

.service-block {
  padding-block: 40px;
  border-top: 1px solid #ddd;
}

.service-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.service-block__title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.service-block__tagline {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 960px) {
  .service-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
  }

  .service-nav {
    position: sticky;
    top: 110px;
    flex: 0 0 200px;
  }

  .service-nav a {
    margin-bottom: 36px;
  }

  .service-content {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ==========================================================================
   Service detail pages（Web/LP/Branding/Graphic/SNS 共通）
   ========================================================================== */

.detail-intro {
  padding-block: var(--space-section-y) calc(var(--space-section-y) * 0.7);
}

/* Title Group：English Display（.section-kicker）と直下のJapanese Categoryを密接に配置（12-18px） */
.detail-intro .section-kicker {
  margin-bottom: 16px;
}

.detail-intro__category,
.page-about .page-intro .hero__title,
.page-service .page-intro .hero__title,
.page-works .page-intro .hero__title,
.page-contact .page-intro .hero__title,
body.blog .page-intro .hero__title {
  margin: 0 0 32px; /* Category → H1（Main Heading）／Lead／Body への階層切替（28-36px） */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-muted);
  letter-spacing: 0.03em;
}

/* Works：Page Label直下にMain Statement/Leadが続かないため、余白はGridまでの
   Editorialな距離（80-120px）で作る。H1自身の余白は打ち消し、.page-intro側で調整する。 */
.page-works .page-intro .hero__title {
  margin-bottom: 0;
}

.page-works .page-intro {
  padding-bottom: 20px;
}

.detail-intro__lead {
  max-width: var(--measure-lead);
  margin: 0 0 32px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}

.detail-intro p:not(.detail-intro__lead):not(.detail-intro__category):not(.section-kicker) {
  max-width: var(--measure-body);
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-wrap: pretty;
}

.detail-section {
  padding-block: var(--space-section-y);
  border-top: 1px solid #ddd;
}

.detail-section:first-of-type {
  border-top: 0;
}

.eyebrow {
  position: relative;
  margin: 0 0 16px;
  padding-left: 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}

.eyebrow::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.section-title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-section-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.section-lead {
  max-width: var(--measure-lead);
  margin: 0 0 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}

.detail-split {
  margin-top: 24px;
}

.value-grid,
.item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}

.value-grid__media {
  margin: 12px 0 16px;
  aspect-ratio: 1600 / 950;
  object-fit: cover;
}

.value-grid__title,
.item-grid__title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
}

.value-grid__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin-top: 10px;
  background: var(--color-accent);
}

.value-grid__text,
.item-grid__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .value-grid,
  .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
}

@media (min-width: 1024px) {
  .value-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .item-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .item-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process-list {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.process-list__title {
  margin: 0 0 8px;
  font-size: var(--fs-h3);
  font-weight: 600;
}

.process-list__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .process-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.faq-item {
  padding-block: 20px;
  border-top: 1px solid #ddd;
}

.faq-item:first-child {
  border-top: 0;
}

.faq-item__question {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
}

.faq-item p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  text-wrap: pretty;
}

.our-service__heading {
  margin: 0 0 40px;
  font-family: var(--font-serif);
  font-size: var(--fs-our-service-heading);
  font-weight: 500;
  text-align: center;
}

.our-service-list {
  display: grid;
  grid-template-columns: 1fr;
}

.our-service-item {
  border-bottom: 1px solid var(--color-accent);
}

.our-service-item:last-child {
  border-bottom: 0;
}

.our-service-link {
  display: block;
  padding: 20px 10px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.25s;
}

.our-service-link:hover,
.our-service-link:focus-visible {
  background-color: var(--color-accent);
}

.service-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  transition: background-color 0.25s, color 0.25s;
}

.our-service-link:hover .service-num,
.our-service-link:focus-visible .service-num {
  background: #fff;
  color: var(--color-accent);
}

.our-service-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}

.our-service-text {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .our-service-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .our-service-item {
    position: relative;
    border-bottom: 0;
  }

  .our-service-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--color-accent);
  }
}

/* ==========================================================================
   Plan row（料金プラン／LP・SNS運用代行ページ等）
   左：プラン名＋料金ボックス／右：説明・詳細・Contact の横長構成
   ========================================================================== */

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 32px;
}

.plan-row {
  padding-top: 40px;
  border-top: 1px solid #ddd;
}

.plan-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.plan-row__box-wrap {
  margin-bottom: 24px;
}

.plan-row__box {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-text);
}

.plan-row__head {
  padding: 10px 16px;
  background: var(--color-text);
  color: #fff;
  text-align: center;
}

.plan-row__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
}

.plan-row__subname {
  margin: 0;
  font-size: 12px;
}

.plan-row__price-wrap {
  padding: 16px;
  background: #fff;
  text-align: center;
}

.plan-row__price {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--color-text);
}

.plan-row__price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-muted);
}

.plan-row__tax {
  margin: 6px 0 0;
  font-size: 11px;
  text-align: right;
  color: var(--color-muted);
}

.plan-row__body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
}

.plan-row__body p strong {
  display: block;
  margin-bottom: 4px;
}

@media (min-width: 960px) {
  .plan-row {
    display: grid;
    grid-template-columns: minmax(220px, 30%) 1fr;
    gap: var(--gap);
    align-items: start;
  }

  .plan-row__box-wrap {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Plan row（料金セクション Editorial Design System）
   現行公開サイトの料金セクションを実測して近づけた見え方。
   料金セクションを囲む<section>に付与する.plan-sectionクラス配下にスコープし、
   このクラスを持たない他ページのplan-row表示には影響しない。
   SNS運用代行・LP制作ページで使用。新しいページへ展開する場合は
   セクションに.plan-sectionクラスを追加するだけでよい。
   ========================================================================== */

.plan-section .section-lead {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ddd;
}

.plan-section .plan-row__box {
  border-radius: 5px;
  border-color: #545454;
}

.plan-section .plan-row__head {
  padding: 15px 0 10px;
  background: #2d2d2d;
}

.plan-section .plan-row__name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
}

.plan-section .plan-row__subname {
  margin-top: 2px;
  font-size: 14px;
}

.plan-section .plan-row__price-wrap {
  padding: 24px 16px;
}

.plan-section .plan-row__price {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
}

.plan-section .plan-row__price .plan-row__price-figure {
  font-size: 1.8em;
  font-weight: 700;
  color: inherit;
}

.plan-section .plan-row__tax {
  font-size: 12px;
  color: var(--color-text);
}

.plan-section .plan-row__intro {
  margin: 0 0 15px;
}

/* 旧サイトの表現へ復帰：説明エリア全体には背景を敷かず、ページ背景(#f7f7f7)の上に
   直接置く。背景色があるのは、実際に色付けされていた行（ハイライト行）だけとし、
   その行のみ白でわずかに浮かせることで「全体がカード化」して見えないようにする。 */
.plan-section .plan-row__body p {
  margin: 0;
  padding: 5px 0 5px 10px;
  font-size: 12px;
  line-height: 2;
}

.plan-section .plan-row__body p strong {
  display: inline;
  margin: 0 4px 0 0;
}

.plan-section .plan-row__highlight {
  background: #fff;
}

.plan-section .plan-row .button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin: 32px 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.plan-section .plan-row .button::after {
  opacity: 1;
  transform: none;
}

.plan-section .plan-row .button:hover,
.plan-section .plan-row .button:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Portfolio grid（Worksページ）
   ========================================================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}

.portfolio-item__media {
  margin-bottom: 12px;
  aspect-ratio: 2400 / 1920;
  object-fit: cover;
}

.portfolio-item__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
}

@media (min-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #ddd;
}

.contact-meta p {
  margin: 0;
  font-size: 15px;
}

@media (min-width: 768px) {
  .contact-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Contact Form 7（フォーム本体はプラグイン任せ、外観のみ調整） */

.contact-form-wrap .wpcf7-form p {
  margin: 0 0 20px;
}

.contact-form-wrap label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap textarea,
.contact-form-wrap select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
}

.contact-form-wrap textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus,
.contact-form-wrap select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.contact-form-wrap .wpcf7-list-item {
  margin: 0 8px 0 0;
}

.contact-form-wrap input[type="submit"] {
  display: inline-block;
  padding: 14px 48px;
  background: var(--color-text);
  color: #fff;
  border: 1px solid var(--color-text);
  border-radius: 5px;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.contact-form-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #c0392b;
}

.contact-form-wrap .wpcf7-response-output {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* ==========================================================================
   Blog（archive / single）
   Nadena Designのブランドサイトに自然に存在するEditorial Blog。
   角丸カード・box-shadowは使わず、Typography／Image／余白で構成する。
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
  margin-top: 32px;
}

.blog-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card__media {
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 16 / 10;
  background: #ececec;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card__link:hover .blog-card__media img,
.blog-card__link:focus-visible .blog-card__media img {
  transform: scale(1.04);
}

.blog-card__meta {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.blog-card__meta .is-accent {
  color: var(--color-accent);
}

.blog-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.blog-card__link:hover .blog-card__title,
.blog-card__link:focus-visible .blog-card__title {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
  }
}

/* Pagination：巨大ボタンではなく矢印＋ページ番号のシンプルな構成 */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  font-family: var(--font-heading);
  font-size: 14px;
}

.pagination a,
.pagination span {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-text);
  text-decoration: none;
}

.pagination a:hover,
.pagination a:focus-visible {
  text-decoration: underline;
}

.pagination .current {
  color: var(--color-accent);
  font-weight: 700;
}

/* Single post */

.entry-header {
  margin-bottom: 32px;
}

.entry-header .eyebrow {
  margin-bottom: 20px;
}

.entry-meta {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-muted);
}

.entry-thumbnail {
  margin: 32px 0 48px;
  background: #ececec;
}

.entry-thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.entry-content {
  max-width: 720px;
  font-family: var(--font-sans);
  overflow-wrap: break-word;
}

/* 特定商取引法ページ等、項目名＋値の対応が明確な箇所向け（見た目のためのtable化はしない） */
.entry-content dl {
  margin: 0 0 32px;
}

.entry-content dt {
  margin: 20px 0 4px;
  font-size: 15px;
  font-weight: 500;
}

.entry-content dt:first-child {
  margin-top: 0;
}

.entry-content dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.entry-content h2 {
  margin: 48px 0 20px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
}

.entry-content h3 {
  margin: 36px 0 14px;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}

.entry-content p {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 24px;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.entry-content li + li {
  margin-top: 8px;
}

.entry-content img {
  margin: 32px 0;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-muted);
}

.entry-content blockquote {
  margin: 32px 0;
  padding-left: 20px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
  font-style: italic;
}

.entry-content blockquote p {
  margin-bottom: 8px;
}

.entry-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content table {
  display: block;
  max-width: 100%;
  margin: 24px 0;
  overflow-x: auto;
  font-size: 14px;
}

@media (min-width: 768px) {
  .entry-content h2 {
    font-size: 30px;
  }
}

/* Editorial Navigation：カテゴリ／前後記事／一覧へ戻る（大きなボタンは使わない） */
.entry-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid #ddd;
  font-size: 13px;
}

.entry-footer__category {
  margin: 0 0 20px;
  color: var(--color-muted);
}

.entry-footer__category a {
  color: var(--color-accent);
  text-decoration: none;
}

.entry-footer__category a:hover,
.entry-footer__category a:focus-visible {
  text-decoration: underline;
}

.entry-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.entry-footer__nav a {
  color: var(--color-text);
  text-decoration: none;
}

.entry-footer__nav a:hover,
.entry-footer__nav a:focus-visible {
  text-decoration: underline;
}

.entry-footer__back a {
  color: var(--color-text);
  text-decoration: none;
}

.entry-footer__back a:hover,
.entry-footer__back a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .entry-footer__nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Legal pages（プライバシーポリシー／利用規約／特定商取引法）専用Typography
   Blog・通常固定ページの.entry-contentには影響させないため、
   body_class()が出力する既存のpage-id-{ID}でスコープする。
   privacy-policy=288, terms-of-use=296, tokusho=1799
   ========================================================================== */

/* ページタイトルH1のみBrand Typography（English Displayと同じSerif）へ。
   本文以下（h2/h3/p/dl等）は既存のゴシックTypographyを維持する。
   288/296は英語タイトルのためLibre Bodoni、1799は日本語タイトルのため
   同じスタックの明朝系フォールバック（Georgia/Times New Roman/serif）へ自然に委ねる。 */
.page-id-288 .hero__title--page,
.page-id-296 .hero__title--page,
.page-id-1799 .hero__title--page {
  font-family: var(--font-serif-alt);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.page-id-288 .entry-content h2,
.page-id-296 .entry-content h2,
.page-id-1799 .entry-content h2 {
  margin-top: 56px;
  font-size: 22px;
}

@media (min-width: 768px) {
  .page-id-288 .entry-content h2,
  .page-id-296 .entry-content h2,
  .page-id-1799 .entry-content h2 {
    font-size: 24px;
  }
}

/* 特定商取引法：dl/dt/dd構造は維持し、項目間の余白のみ広げる */
.page-id-1799 .entry-content dt {
  margin-top: 28px;
}

.page-id-1799 .entry-content dl {
  margin-bottom: 40px;
}

/* ==========================================================================
   Mobile Art Direction — SP Vertical Rhythm
   PCの余白比率をそのまま縮小コピーせず、SPで「呼吸」として気持ちよく感じる量へ
   再設計する。60px/40px系のセクション余白のみを対象に、狭幅では控えめに詰める。
   ========================================================================== */

@media (max-width: 767px) {
  .service-block {
    padding-block: 28px;
  }

  .faq-item {
    padding-block: 16px;
  }

  /* コピーは変えず、意味のまとまりで改行したい箇所にのみ使う汎用ユーティリティ（SP限定） */
  .linebreak-sp {
    display: block;
  }

  /* 日本語の大見出し（Service詳細ページのdetail-section H2）：
     30px見出しに対して行間1.8だと複数行時に文字ブロックが大きく見えるため、1.5へ詰める。
     font-size/weight/letter-spacingは変更しない。 */
  .section-title {
    line-height: 1.5;
  }

  /* 料金カード：価格を1行に収めるための余白調整（数字サイズの存在感は維持） */
  .plan-section .plan-row__price-wrap {
    padding: 24px 12px;
  }

  .plan-section .plan-row__price {
    white-space: nowrap;
  }

  .plan-section .plan-row__price .plan-row__price-figure {
    font-size: 1.4em;
  }
}

/* ==========================================================================
   Ambient Background（TOPページのみのPrototype）
   「背景に色がある」のではなく「白の中に光・空気・気配がある」状態を目指す。
   radial-gradientの柔らかい境界のみで成立させ、filter: blur()は使用しない。
   Black Worksセクションではmain.js側のIntersectionObserverが
   .ambient-bg に .is-dimmed を付与し、opacityを0へフェードする。
   ========================================================================== */

/* Stacking：.ambient-bgは.site-main内の子要素として置かれる（TOPも他ページも共通）。
   .site-mainをisolation:isolateでstacking contextの境界とし、.ambient-bgをその内側で
   負のz-indexへ送ることで、通常flowの本文（見出し・画像・カード等）より確実に背後へ
   まわす。opacityではなくpaint orderそのものを正しくする方針。
   Header（z-index:100）等は.site-mainの外側（兄弟）にあるため無関係に最前面を維持する。 */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.site-main {
  position: relative;
  isolation: isolate;
}

/* TOPの本文ラッパー：isolation境界の内側で正のz-indexを持たせておくことで、
   .ambient-bg（同じ境界内でz-index:-1）より確実に前面に来ることを明示する。 */
.front-page__content {
  position: relative;
  z-index: 1;
}

.ambient-bg.is-dimmed {
  opacity: 0;
}

.ambient-bg__blob {
  position: absolute;
  border-radius: 50%;
}

.ambient-bg__blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ambient-drift 40s ease-in-out infinite;
}

.ambient-bg__reaction {
  position: absolute;
  inset: 0;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.ambient-bg__reaction--mist {
  background: radial-gradient(circle 650px at var(--mouse-x) var(--mouse-y), rgba(151, 190, 196, 0.26) 0%, rgba(151, 190, 196, 0.13) 30%, rgba(151, 190, 196, 0) 70%);
}

.ambient-bg__reaction--sage {
  background: radial-gradient(circle 750px at var(--mouse-x) var(--mouse-y), rgba(163, 181, 154, 0.2) 0%, rgba(163, 181, 154, 0.1) 30%, rgba(163, 181, 154, 0) 70%);
}

.ambient-bg__reaction--champagne {
  background: radial-gradient(circle 700px at var(--mouse-x) var(--mouse-y), rgba(207, 175, 109, 0.14) 0%, rgba(207, 175, 109, 0.06) 30%, rgba(207, 175, 109, 0) 70%);
}

@media (max-width: 767px) {
  .ambient-bg__reaction {
    display: none;
  }
}

.ambient-bg__blob--gold {
  top: -18%;
  left: -14%;
  width: clamp(360px, 44vw, 680px);
  height: clamp(360px, 44vw, 680px);
  --gold-x: 50%;
  --gold-y: 50%;
}

.ambient-bg__blob--gold::before {
  background: radial-gradient(circle at var(--gold-x, 50%) var(--gold-y, 50%), rgba(207, 175, 109, 0.44) 0%, rgba(207, 175, 109, 0.22) 35%, rgba(207, 175, 109, 0) 70%);
  animation-duration: 44s;
}

.ambient-bg__blob--sage {
  top: -14%;
  right: -10%;
  width: clamp(420px, 52vw, 760px);
  height: clamp(420px, 52vw, 760px);
}

.ambient-bg__blob--sage::before {
  background: radial-gradient(circle, rgba(163, 181, 154, 0.48) 0%, rgba(163, 181, 154, 0.24) 35%, rgba(163, 181, 154, 0) 70%);
  animation-duration: 50s;
  animation-delay: -8s;
}

.ambient-bg__blob--mist {
  top: 6%;
  left: 30%;
  width: clamp(360px, 44vw, 660px);
  height: clamp(360px, 44vw, 660px);
}

.ambient-bg__blob--mist::before {
  background: radial-gradient(circle, rgba(151, 190, 196, 0.44) 0%, rgba(151, 190, 196, 0.22) 35%, rgba(151, 190, 196, 0) 70%);
  animation-duration: 40s;
  animation-delay: -25s;
}

.ambient-bg__blob--gray {
  top: 30%;
  right: -18%;
  width: clamp(380px, 46vw, 700px);
  height: clamp(380px, 46vw, 700px);
}

.ambient-bg__blob--gray::before {
  background: radial-gradient(circle, rgba(148, 146, 140, 0.32) 0%, rgba(148, 146, 140, 0.15) 35%, rgba(148, 146, 140, 0) 70%);
  animation-duration: 52s;
  animation-delay: -14s;
}

.ambient-bg__blob--blush {
  bottom: -16%;
  left: 6%;
  width: clamp(380px, 46vw, 700px);
  height: clamp(380px, 46vw, 700px);
}

.ambient-bg__blob--blush::before {
  background: radial-gradient(circle, rgba(214, 176, 176, 0.34) 0%, rgba(214, 176, 176, 0.16) 35%, rgba(214, 176, 176, 0) 70%);
  animation-duration: 38s;
  animation-delay: -18s;
}

.ambient-bg__blob--green {
  bottom: -18%;
  left: 40%;
  width: clamp(340px, 42vw, 620px);
  height: clamp(340px, 42vw, 620px);
}

.ambient-bg__blob--green::before {
  background: radial-gradient(circle, rgba(74, 98, 76, 0.32) 0%, rgba(74, 98, 76, 0.15) 35%, rgba(74, 98, 76, 0) 70%);
  animation-duration: 46s;
  animation-delay: -30s;
}

@keyframes ambient-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(2.5%, -3%) scale(1.06);
    opacity: 0.85;
  }
}

@media (max-width: 767px) {
  .ambient-bg__blob--gold,
  .ambient-bg__blob--sage,
  .ambient-bg__blob--mist,
  .ambient-bg__blob--gray,
  .ambient-bg__blob--blush,
  .ambient-bg__blob--green {
    --reach: 0px;
    width: 62vw;
    height: 62vw;
  }

  .ambient-bg__blob--gold::before {
    background: radial-gradient(circle, rgba(207, 175, 109, 0.33) 0%, rgba(207, 175, 109, 0.17) 35%, rgba(207, 175, 109, 0) 70%);
  }

  .ambient-bg__blob--sage::before {
    background: radial-gradient(circle, rgba(163, 181, 154, 0.36) 0%, rgba(163, 181, 154, 0.18) 35%, rgba(163, 181, 154, 0) 70%);
  }

  .ambient-bg__blob--mist::before {
    background: radial-gradient(circle, rgba(151, 190, 196, 0.33) 0%, rgba(151, 190, 196, 0.17) 35%, rgba(151, 190, 196, 0) 70%);
  }

  .ambient-bg__blob--gray::before {
    background: radial-gradient(circle, rgba(148, 146, 140, 0.24) 0%, rgba(148, 146, 140, 0.11) 35%, rgba(148, 146, 140, 0) 70%);
  }

  .ambient-bg__blob--blush::before {
    background: radial-gradient(circle, rgba(214, 176, 176, 0.26) 0%, rgba(214, 176, 176, 0.12) 35%, rgba(214, 176, 176, 0) 70%);
  }

  .ambient-bg__blob--green::before {
    background: radial-gradient(circle, rgba(74, 98, 76, 0.24) 0%, rgba(74, 98, 76, 0.11) 35%, rgba(74, 98, 76, 0) 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bg__blob,
  .ambient-bg__blob::before {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   Ambient Background — サイト全体のComposition（TOP以外の各ページ）
   色・光り方・pointer reaction・drift animationはTOPと完全に同じ共通定義
   （.ambient-bg__blob--* / ::before / .ambient-bg__reaction--*）を再利用し、
   ページごとに変えるのはblobの位置・サイズ・組み合わせ・全体の強さのみ。
   ========================================================================== */

/* Position（top/right/bottom/left）は全幅共通。サイズは768px未満では既存のSP共通ルール
   （width:62vw / height:62vw、本ファイル内@media (max-width:767px)）をそのまま使わせるため、
   width/heightのみ768px以上（.ambient-bg__blob側のclampサイズ）で上書きする。 */

/* About：Gold / Pale Blue（mist） / Green。左上〜右、下中央へ静かに配置 */
.ambient-bg--about .ambient-bg__blob--gold {
  top: -10%;
  right: auto;
  bottom: auto;
  left: -8%;
}

.ambient-bg--about .ambient-bg__blob--mist {
  top: 15%;
  right: -10%;
  bottom: auto;
  left: auto;
}

.ambient-bg--about .ambient-bg__blob--green {
  top: auto;
  right: auto;
  bottom: -14%;
  left: 38%;
}

/* Service一覧：Blue / Green / Goldを分散。カード背景に強く重ねない */
.ambient-bg--service .ambient-bg__blob--mist {
  top: -8%;
  right: -6%;
  bottom: auto;
  left: auto;
}

.ambient-bg--service .ambient-bg__blob--green {
  top: 22%;
  right: auto;
  bottom: auto;
  left: -10%;
}

.ambient-bg--service .ambient-bg__blob--gold {
  top: auto;
  right: -8%;
  bottom: -12%;
  left: auto;
}

/* Web：Blue / Pale Green中心。図解・本文の視認性を最優先し控えめに */
.ambient-bg--web .ambient-bg__blob--mist {
  top: -10%;
  right: -8%;
  bottom: auto;
  left: auto;
}

.ambient-bg--web .ambient-bg__blob--green {
  top: auto;
  right: auto;
  bottom: -14%;
  left: -8%;
}

/* LP：Gold / Pale Pink / Blueを少し暖かく */
.ambient-bg--lp .ambient-bg__blob--gold {
  top: -8%;
  right: auto;
  bottom: auto;
  left: -6%;
}

.ambient-bg--lp .ambient-bg__blob--blush {
  top: 18%;
  right: -10%;
  bottom: auto;
  left: auto;
}

.ambient-bg--lp .ambient-bg__blob--mist {
  top: auto;
  right: auto;
  bottom: -12%;
  left: 30%;
}

/* Branding：Gold / Pale Pink / Green。Webより情緒的なComposition */
.ambient-bg--branding .ambient-bg__blob--gold {
  top: -10%;
  right: -8%;
  bottom: auto;
  left: auto;
}

.ambient-bg--branding .ambient-bg__blob--blush {
  top: 25%;
  right: auto;
  bottom: auto;
  left: -10%;
}

.ambient-bg--branding .ambient-bg__blob--green {
  top: auto;
  right: 10%;
  bottom: -16%;
  left: auto;
}

/* Graphic：Gold / Pale Blue / Pale Pink。紙・質感を連想するやわらかい構成 */
.ambient-bg--graphic .ambient-bg__blob--gold {
  top: auto;
  right: auto;
  bottom: -12%;
  left: -8%;
}

.ambient-bg--graphic .ambient-bg__blob--mist {
  top: -8%;
  right: -6%;
  bottom: auto;
  left: auto;
}

.ambient-bg--graphic .ambient-bg__blob--blush {
  top: 5%;
  right: auto;
  bottom: auto;
  left: 6%;
}

/* SNS：Pale Blue / Pink / Green。他ページより少し軽やかに（派手にはしない） */
.ambient-bg--sns .ambient-bg__blob--mist {
  top: -10%;
  right: auto;
  bottom: auto;
  left: -8%;
}

.ambient-bg--sns .ambient-bg__blob--blush {
  top: 20%;
  right: -8%;
  bottom: auto;
  left: auto;
}

.ambient-bg--sns .ambient-bg__blob--green {
  top: auto;
  right: auto;
  bottom: -14%;
  left: 10%;
}

/* Works：作品が主役のため、端・余白にのみ小さく感じる程度に抑える */
.ambient-bg--works .ambient-bg__blob--mist {
  top: -10%;
  right: -10%;
  bottom: auto;
  left: auto;
}

.ambient-bg--works .ambient-bg__blob--green {
  top: auto;
  right: auto;
  bottom: -12%;
  left: -10%;
}

/* Contact：Gold / Pale Blue中心。Formの可読性を最優先し落ち着いた配置に */
.ambient-bg--contact .ambient-bg__blob--gold {
  top: -10%;
  right: auto;
  bottom: auto;
  left: -8%;
}

.ambient-bg--contact .ambient-bg__blob--mist {
  top: auto;
  right: -10%;
  bottom: -14%;
  left: auto;
}

/* Blog（一覧・個別共通）：読み物のためかなり控えめ。Hero付近・余白にのみ */
.ambient-bg--blog .ambient-bg__blob--gold {
  top: -8%;
  right: auto;
  bottom: auto;
  left: -6%;
}

.ambient-bg--blog .ambient-bg__blob--mist {
  top: auto;
  right: -8%;
  bottom: -10%;
  left: auto;
}

/* Legal（Privacy / Terms / 特商法 / 汎用固定ページ）：ほぼ気配程度に */
.ambient-bg--legal .ambient-bg__blob--gold {
  top: -8%;
  right: -8%;
  bottom: auto;
  left: auto;
}

/* Works / Blog / Legal：blob構成に加えてAmbient全体の強さも一段弱める */
.ambient-bg--works {
  opacity: 0.45;
}

.ambient-bg--blog {
  opacity: 0.55;
}

.ambient-bg--legal {
  opacity: 0.3;
}

/* サイズは768px以上のみ上書き（767px以下は共通のwidth:62vw/height:62vwへ委ねる） */
@media (min-width: 768px) {
  .ambient-bg--about .ambient-bg__blob--gold {
    width: clamp(300px, 36vw, 560px);
    height: clamp(300px, 36vw, 560px);
  }

  .ambient-bg--about .ambient-bg__blob--mist {
    width: clamp(340px, 40vw, 600px);
    height: clamp(340px, 40vw, 600px);
  }

  .ambient-bg--about .ambient-bg__blob--green {
    width: clamp(280px, 34vw, 520px);
    height: clamp(280px, 34vw, 520px);
  }

  .ambient-bg--service .ambient-bg__blob--mist {
    width: clamp(320px, 38vw, 580px);
    height: clamp(320px, 38vw, 580px);
  }

  .ambient-bg--service .ambient-bg__blob--green {
    width: clamp(300px, 36vw, 540px);
    height: clamp(300px, 36vw, 540px);
  }

  .ambient-bg--service .ambient-bg__blob--gold {
    width: clamp(280px, 34vw, 520px);
    height: clamp(280px, 34vw, 520px);
  }

  .ambient-bg--web .ambient-bg__blob--mist {
    width: clamp(300px, 34vw, 540px);
    height: clamp(300px, 34vw, 540px);
  }

  .ambient-bg--web .ambient-bg__blob--green {
    width: clamp(280px, 32vw, 500px);
    height: clamp(280px, 32vw, 500px);
  }

  .ambient-bg--lp .ambient-bg__blob--gold {
    width: clamp(320px, 38vw, 580px);
    height: clamp(320px, 38vw, 580px);
  }

  .ambient-bg--lp .ambient-bg__blob--blush {
    width: clamp(300px, 36vw, 540px);
    height: clamp(300px, 36vw, 540px);
  }

  .ambient-bg--lp .ambient-bg__blob--mist {
    width: clamp(280px, 32vw, 500px);
    height: clamp(280px, 32vw, 500px);
  }

  .ambient-bg--branding .ambient-bg__blob--gold {
    width: clamp(320px, 38vw, 580px);
    height: clamp(320px, 38vw, 580px);
  }

  .ambient-bg--branding .ambient-bg__blob--blush {
    width: clamp(300px, 36vw, 540px);
    height: clamp(300px, 36vw, 540px);
  }

  .ambient-bg--branding .ambient-bg__blob--green {
    width: clamp(280px, 34vw, 520px);
    height: clamp(280px, 34vw, 520px);
  }

  .ambient-bg--graphic .ambient-bg__blob--gold {
    width: clamp(300px, 36vw, 560px);
    height: clamp(300px, 36vw, 560px);
  }

  .ambient-bg--graphic .ambient-bg__blob--mist {
    width: clamp(320px, 38vw, 580px);
    height: clamp(320px, 38vw, 580px);
  }

  .ambient-bg--graphic .ambient-bg__blob--blush {
    width: clamp(240px, 26vw, 420px);
    height: clamp(240px, 26vw, 420px);
  }

  .ambient-bg--sns .ambient-bg__blob--mist {
    width: clamp(320px, 38vw, 580px);
    height: clamp(320px, 38vw, 580px);
  }

  .ambient-bg--sns .ambient-bg__blob--blush {
    width: clamp(300px, 36vw, 540px);
    height: clamp(300px, 36vw, 540px);
  }

  .ambient-bg--sns .ambient-bg__blob--green {
    width: clamp(280px, 32vw, 500px);
    height: clamp(280px, 32vw, 500px);
  }

  .ambient-bg--works .ambient-bg__blob--mist {
    width: clamp(240px, 26vw, 420px);
    height: clamp(240px, 26vw, 420px);
  }

  .ambient-bg--works .ambient-bg__blob--green {
    width: clamp(220px, 24vw, 380px);
    height: clamp(220px, 24vw, 380px);
  }

  .ambient-bg--contact .ambient-bg__blob--gold {
    width: clamp(300px, 34vw, 540px);
    height: clamp(300px, 34vw, 540px);
  }

  .ambient-bg--contact .ambient-bg__blob--mist {
    width: clamp(280px, 32vw, 500px);
    height: clamp(280px, 32vw, 500px);
  }

  .ambient-bg--blog .ambient-bg__blob--gold {
    width: clamp(240px, 26vw, 420px);
    height: clamp(240px, 26vw, 420px);
  }

  .ambient-bg--blog .ambient-bg__blob--mist {
    width: clamp(220px, 24vw, 380px);
    height: clamp(220px, 24vw, 380px);
  }

  .ambient-bg--legal .ambient-bg__blob--gold {
    width: clamp(200px, 20vw, 320px);
    height: clamp(200px, 20vw, 320px);
  }
}