@charset "UTF-8";
/* ============================================================
   AoideProduction HP リニューアル仮実装（ネイビー案・B案）
   FLOCSS: Foundation → Layout → Object (Component / Project / Utility)
   libsass 互換のため @use ではなく @import を使用（スキル既定）
   ============================================================ */
/* ============================================================
   Foundation / variables — デザイントークン
   原本: ChatGPT生成デザイン画像 (1024x1536) からピクセルサンプリング
   ============================================================ */
:root {
  /* color — 2026-09-03 配色刷新 v2（基準: アクセント #989e49）
     redesign-skill「グレーは 1 つの色相で統一」に従い、全ニュートラルをオリーブ色相(≈64°)で温めたグレージュ系に揃える。
     暗い帯（#6F6F71 無彩色）はオリーブと衝突したため廃止 → 帯は淡い生成り、暗面なし（CTA は生成り地の白カード＝案4・フッターは生成り濃）。
     コントラストは WCAG AA を機械計算で担保（#989e49 に白文字は 2.9:1 で不可 → オリーブ地の文字は必ず墨） */
  --color-accent: #989e49;
  /* オリーブ: ライン・アイコン・バッジ地・チェック・強調ボーダー（非テキスト用途） */
  --color-accent-hover: #7f8439;
  /* 主ボタン hover（アクセントの一段濃） */
  --color-accent-text: #6a6f2f;
  /* オリーブ濃: 白地/グレージュ地の小文字（キッカー・アウトラインボタン・hover）白 5.4:1 / 帯 4.7:1 */
  --color-accent-light: #e4e6b8;
  /* オリーブ淡: #202020 上の文字（フッタータグライン）12.7:1 */
  --color-accent-soft: #f1f2e2;
  /* オリーブ 10% ティント: hover 面・強調カード上部 */
  --color-primary: #262623;
  /* 主ボタン・見出し: オリーブ寄りの墨 */
  --color-primary-hover: #3f3f38;
  /* 主ボタン hover */
  --color-heading: #262623;
  /* 見出し */
  --color-text: #52524a;
  /* 本文 白 7.9:1 / 帯 6.9:1 */
  --color-text-muted: #75756a;
  /* 日付・注釈 白 4.6:1 */
  --color-bg: #ffffff;
  --color-bg-alt: #faf8f2;
  /* 帯: Service / Price / Blog / CTA のフォールバック色（2026-09-04 から和紙テクスチャ img/bg-washi.webp を敷く） */
  --color-bg-soft: #f7f7f1;
  /* FV 下地・淡い面 */
  --color-border: #dcdcd0;
  /* 罫線（オリーブ寄り） */
  --color-footer-bg: #eeede3;
  /* フッター背景: 生成り濃（2026-09-03 B案採用・帯 #faf8f2 より一段濃く） */
  --color-footer-text: #52524a;
  /* フッター文字（本文と同じ墨グレー・7.4:1） */
  --color-white: #ffffff;
  /* font */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
  /* motion（2026-09-04 アニメーション統一。expo-out 系で「すっと止まる」動き） */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.35s;
  --dur: 0.6s;
  --dur-slow: 0.9s;
  /* effect */
  --shadow-card: 0 0.4rem 1.6rem rgba(58, 60, 34, 0.10);
  /* オリーブ墨ティント */
  --shadow-card-hover: 0 0.8rem 2.4rem rgba(58, 60, 34, 0.18);
  --radius-sm: 0.4rem;
  /* 4px */
  --radius-md: 0.8rem;
  /* 8px */
}

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

html {
  font-size: 62.5%;
  /* 1rem = 10px */
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
  /* 80px 固定ヘッダー分 */
}

body {
  margin: 0;
}

h1, h2, h3, h4, p, figure, blockquote, address {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

:focus {
  outline: none;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
*::before,
*::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Foundation / base */
body {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  /* 14px */
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-heading);
}

/* Layout / container */
.l-container {
  width: 100%;
  max-width: 120rem;
  /* 1200px + 左右padding */
  margin-inline: auto;
  padding-inline: 2rem;
  /* 20px */
}

@media (min-width: 768px) {
  .l-container {
    padding-inline: 3rem;
    /* 30px */
  }
}

@media (min-width: 1080px) {
  .l-container {
    padding-inline: 4rem;
    /* 40px */
  }
}

.l-main {
  padding-top: 7rem;
  /* 70px 固定ヘッダー分 */
}

/* Layout / header */
@keyframes header-in {
  from {
    opacity: 0;
    transform: translateY(-0.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  animation: header-in var(--dur) var(--ease-out) both;
  background: var(--color-white);
  box-shadow: 0 0.1rem 0.6rem rgba(58, 60, 34, 0.1);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 124rem;
  /* 1240px */
  margin-inline: auto;
  height: 7rem;
  /* 70px */
  padding-inline: 2rem;
}

@media (min-width: 1080px) {
  .l-header__inner {
    padding-inline: 3rem;
    /* 30px */
  }
}

.l-header__brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  /* SP: ハンバーガー分を除いた残り幅にロゴを収める */
}

@media (min-width: 1080px) {
  .l-header__brand {
    flex: none;
  }
}

.l-header__logo {
  display: block;
  width: 100%;
  max-width: 36rem;
  /* 360px = 高さ60px時のロゴ幅 (1024x171 = 6:1) */
  height: auto;
}

@media (min-width: 1080px) {
  .l-header__logo {
    width: auto;
    height: 6rem;
    /* 60px ブランドロゴ高（2026-09-03 オーナー指示・28px→60px） */
  }
}

.l-header__nav {
  display: none;
}

@media (min-width: 1080px) {
  .l-header__nav {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    /* 32px */
  }
}

.l-header__list {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  /* 28px */
}

.l-header__link {
  position: relative;
  padding-block: 0.4rem;
  /* 下線ぶんの余白 */
  font-family: var(--font-serif);
  font-size: 1.4rem;
  /* 14px */
  font-weight: 500;
  color: var(--color-heading);
  transition: color var(--dur-fast) var(--ease-out);
}

.l-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.l-header__link:hover {
  color: var(--color-accent-text);
}

.l-header__link:hover::after {
  transform: scaleX(1);
}

.l-header__cta {
  font-size: 1.4rem;
  /* 14px */
}

.l-header__hamburger {
  display: flex;
  flex: none;
  /* ロゴ拡大時に縮まない */
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  /* 7px */
  width: 4.4rem;
  /* 44px */
  height: 4.4rem;
  /* 44px */
  padding: 1rem;
}

@media (min-width: 1080px) {
  .l-header__hamburger {
    display: none;
  }
}

.l-header__hamburger-line {
  display: block;
  width: 100%;
  height: 0.2rem;
  /* 2px */
  background: var(--color-heading);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-line:nth-child(1) {
  transform: translateY(0.9rem) rotate(45deg);
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-line:nth-child(3) {
  transform: translateY(-0.9rem) rotate(-45deg);
}

.l-header__menu {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 0.8rem 2rem 2rem;
}

.l-header__menu[hidden] {
  display: none;
}

@media (min-width: 1080px) {
  .l-header__menu {
    display: none;
  }
}

.l-header__menu-link {
  padding: 1.2rem 0;
  /* 12px */
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  /* 16px */
  font-weight: 500;
  color: var(--color-heading);
}

/* Layout / footer */
.l-footer {
  background: var(--color-footer-bg);
  /* 生成り濃 #eeede3（2026-09-04 紙テクスチャ2種を試した後、色で確定） */
  color: var(--color-footer-text);
  padding-top: 5.6rem;
  /* 56px */
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  /* 40px */
}

@media (min-width: 1080px) {
  .l-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 6rem;
    /* 60px */
  }
}

.l-footer__logo {
  line-height: 0;
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ロゴ列の幅の中で中央揃え（2026-09-04 オーナー指示） */
  text-align: center;
}

.l-footer__logo-img {
  display: block;
  width: auto;
  height: 10rem;
  /* 100px（2026-09-04 オーナー指示・64px→100px）。768x271 ロゴ → 幅約283px */
}

.l-footer__tagline {
  color: var(--color-accent-text);
  margin-top: 0.6rem;
  /* 6px */
  font-size: 1.2rem;
  /* 12px */
  letter-spacing: 0.08em;
}

.l-footer__sns {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  /* 16px */
  margin-top: 2rem;
  /* 20px */
}

.l-footer__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  /* 32px */
  height: 3.2rem;
  /* 32px */
  color: var(--color-heading);
  transition: color 0.25s ease;
}

.l-footer__sns-link:hover {
  color: var(--color-accent-text);
}

.l-footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  /* 32px */
}

@media (min-width: 768px) {
  .l-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Contact 列削除で 3 列（2026-09-04） */
    gap: 4rem;
    /* 40px */
  }
}

@media (min-width: 1080px) {
  .l-footer__nav {
    grid-template-columns: repeat(3, auto);
    gap: 6.4rem;
    /* 64px */
  }
}

.l-footer__heading {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  /* 15px */
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 1.4rem;
  /* 14px */
}

.l-footer__links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* 10px */
  font-size: 1.3rem;
  /* 13px */
}

.l-footer__link {
  transition: color 0.25s ease;
}

.l-footer__link:hover {
  color: var(--color-accent-text);
}

.l-footer__copyright {
  margin-top: 4.8rem;
  /* 48px */
  padding: 2rem;
  /* 20px */
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 1.1rem;
  /* 11px */
}

/* Object / component / button */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  /* 8px */
  font-family: var(--font-sans);
  font-size: 1.4rem;
  /* 14px */
  font-weight: 500;
  line-height: 1.2;
  padding: 1.2rem 2.4rem;
  /* 12px 24px */
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* 矢印が右へ滑る */
.c-btn__arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

.c-btn:hover .c-btn__arrow {
  transform: translateX(0.4rem);
  /* 4px */
}

/* 主ボタン: アクセント #989e49 地（2026-09-03 オーナー指示・ヘッダー/FV/料金プラン）。
   白文字は 2.9:1 で WCAG AA 未満のため 600 ウェイトで視認性を補う */
.c-btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  font-weight: 600;
}

.c-btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: 0 0.6rem 1.6rem rgba(152, 158, 73, 0.32);
  /* オリーブの淡い影が下に出る */
  transform: translateY(-0.1rem);
}

.c-btn--outline {
  background: transparent;
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}

.c-btn--outline:hover {
  background: var(--color-accent-soft);
}

.c-btn--white {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.25);
}

.c-btn--white:hover {
  background: var(--color-accent-soft);
}

.c-btn:active {
  transform: scale(0.98);
  /* redesign: 押下フィードバック */
}

.c-btn--lg {
  font-size: 1.5rem;
  /* 15px */
  padding: 1.5rem 3.2rem;
  /* 15px 32px */
}

.c-btn--sm {
  font-size: 1.2rem;
  /* 12px */
  padding: 0.8rem 1.6rem;
  /* 8px 16px */
  max-width: 16rem;
  /* 160px */
  width: 100%;
  /* カード内溢れ防止 */
}

.c-btn__arrow {
  font-family: var(--font-sans);
}

.c-icon {
  display: block;
  flex: none;
}

/* Object / component / section-head — セクション見出し（中央寄せ・線＋英字キッカー） */
.c-section-head {
  text-align: center;
  margin-bottom: 4rem;
  /* 40px */
}

.c-section-head__kicker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* 6px */
  font-family: var(--font-serif);
  font-size: 1.3rem;
  /* 13px */
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
}

.c-section-head__kicker::before {
  content: "";
  display: block;
  width: 0.1rem;
  /* 1px 縦線 */
  height: 1.6rem;
  /* 16px */
  background: var(--color-accent);
  transform-origin: top;
  transition: transform var(--dur) var(--ease-out) 0.25s;
  /* 見出し本体の登場に少し遅れて伸びる */
}

/* JS 有効時のみ: 登場前は縦線を畳み、登場で上から伸ばす（JS 無効なら常に表示） */
.js .c-section-head.js-reveal .c-section-head__kicker::before {
  transform: scaleY(0);
}

.js .c-section-head.is-revealed .c-section-head__kicker::before {
  transform: scaleY(1);
}

.c-section-head__title {
  margin-top: 0.8rem;
  /* 8px */
  font-size: 2.2rem;
  /* 22px */
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-wrap: balance;
  /* redesign: 孤立ワード防止 */
}

@media (min-width: 768px) {
  .c-section-head__title {
    font-size: 2.8rem;
    /* 28px */
  }
}

/* Object / component / cards — service / work / plan / voice / blog の各カード */
/* --- サービスカード --- */
.c-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  /* 12px */
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 3.2rem 2rem;
  /* 32px 20px */
  text-align: center;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* hover: 上辺にアクセント線が左から伸びる */
.c-service-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.3rem;
  /* 3px */
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.c-service-card:hover {
  transform: translateY(-0.4rem);
  /* -4px */
  box-shadow: var(--shadow-card-hover);
}

.c-service-card:hover::after {
  transform: scaleX(1);
}

.c-service-card__icon {
  display: inline-flex;
  color: var(--color-accent);
  transition: transform var(--dur) var(--ease-out);
}

.c-service-card:hover .c-service-card__icon {
  transform: translateY(-0.3rem);
  /* -3px アイコンが少し浮く */
}

.c-service-card__title {
  font-size: 1.6rem;
  /* 16px */
  line-height: 1.5;
}

/* サービスカードのリンク化（2026-09-06 オーナー指示・仮リンク /homepage/）: タイトル内のアンカーを ::after でカード全面に広げる（card は position:relative 済み） */
.c-service-card__link {
  color: inherit;
  text-decoration: none;
}

.c-service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.c-service-card:has(.c-service-card__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.c-service-card__text {
  font-size: 1.3rem;
  /* 13px */
  line-height: 1.8;
  text-align: left;
}

/* --- 制作実績カード --- */
.c-work-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  /* redesign: 枠線+影の二重装飾をやめ影のみに */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.c-work-card:hover {
  transform: translateY(-0.4rem);
  /* -4px */
  box-shadow: var(--shadow-card-hover);
}

/* hover: サムネがゆっくり寄る + タイトルがオリーブに */
.c-work-card__thumb {
  overflow: hidden;
}

.c-work-card__thumb img {
  transition: transform var(--dur-slow) var(--ease-out);
}

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

.c-work-card__title {
  transition: color var(--dur-fast) var(--ease-out);
}

.c-work-card:hover .c-work-card__title {
  color: var(--color-accent-text);
}

.c-work-card__link {
  display: block;
  height: 100%;
  color: inherit;
}

.c-work-card__thumb img {
  width: 100%;
  aspect-ratio: 2 / 1;
  /* 原本 約225x110 */
  object-fit: cover;
}

.c-work-card__body {
  padding: 1.6rem 1.8rem 2rem;
  /* 16px 18px 20px */
}

.c-work-card__category {
  font-size: 1.1rem;
  /* 11px */
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.c-work-card__title {
  margin-top: 0.4rem;
  /* 4px */
  font-size: 1.6rem;
  /* 16px */
  line-height: 1.5;
}

.c-work-card__text {
  margin-top: 0.6rem;
  /* 6px */
  font-size: 1.25rem;
  /* 12.5px */
  line-height: 1.7;
}

/* --- 料金カード（redesign: 全幅3タワー・CTA下端固定） --- */
.c-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  /* 12px */
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 3.2rem 2.4rem 2.8rem;
  /* 32px 24px 28px */
  text-align: center;
  min-width: 0;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.c-plan-card:hover {
  transform: translateY(-0.4rem);
  /* -4px */
  box-shadow: var(--shadow-card-hover);
}

.c-plan-card--featured:hover {
  box-shadow: 0 1.2rem 3.2rem rgba(152, 158, 73, 0.22);
  /* 人気カードはオリーブの淡い影 */
}

.c-plan-card--featured {
  border-top: 0.4rem solid var(--color-accent);
  /* 高さ差でなく色で強調 */
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, #ffffff 40%);
}

.c-plan-card__badge {
  position: absolute;
  top: -1.2rem;
  /* -12px */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-primary);
  /* オリーブ地は #202020 文字（白は 2.9:1 で不可） */
  font-size: 1.2rem;
  /* 12px */
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.6rem;
  /* 6px 16px */
  border-radius: 9999px;
}

.c-plan-card__name {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  /* 18px */
  line-height: 1.4;
}

.c-plan-card__for {
  font-size: 1.3rem;
  /* 13px */
  line-height: 1.7;
}

.c-plan-card__price {
  font-family: var(--font-serif);
  font-size: 3rem;
  /* 30px */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  white-space: nowrap;
  margin-top: 0.4rem;
  /* 4px */
  flex: 1;
  /* CTAを下端に押し下げる（内容量差の吸収） */
}

.c-plan-card__price-note {
  font-size: 1.5rem;
  /* 15px */
  color: var(--color-text);
}

.c-plan-card__cta {
  max-width: 20rem;
  /* 200px */
  width: 100%;
  margin-top: 0.8rem;
  /* 8px */
}

/* --- ブログカード（2026-09-03 オーナー指示: 行表示→カード型） --- */
.c-blog-item {
  min-width: 0;
}

.c-blog-item__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.c-blog-item__link:hover {
  transform: translateY(-0.4rem);
  /* -4px */
  box-shadow: var(--shadow-card-hover);
}

.c-blog-item__link:hover .c-blog-item__thumb {
  transform: scale(1.04);
}

.c-blog-item__link:hover .c-blog-item__title {
  color: var(--color-accent-text);
}

.c-blog-item__thumb {
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.c-blog-item__body {
  min-width: 0;
  padding: 1.6rem 1.8rem 2rem;
  /* 16px 18px 20px */
}

.c-blog-item__date {
  font-size: 1.2rem;
  /* 12px */
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.c-blog-item__title {
  margin-top: 0.6rem;
  /* 6px */
  font-family: var(--font-sans);
  font-size: 1.4rem;
  /* 14px */
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-heading);
  transition: color var(--dur-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .c-blog-item__title {
    font-size: 1.5rem;
    /* 15px */
  }
}

/* --- かかりつけプラン（横長カード・2026-09-03 オーナー指示） --- */
.c-plan-card--care {
  text-align: left;
  align-items: stretch;
  gap: 2rem;
  /* 20px */
  padding: 2.8rem 2.4rem;
  /* 28px 24px */
}

@media (min-width: 768px) {
  .c-plan-card--care {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    /* 40px */
    padding: 3.2rem 4rem;
    /* 32px 40px */
  }
}

.c-plan-card__main {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* 8px */
  flex: none;
}

@media (min-width: 768px) {
  .c-plan-card__main {
    width: 26rem;
    /* 260px */
  }
}

/* SP は縦積みなので本文ブロック（説明・価格・契約条件）を中央揃え。PC の横並びは左揃えのまま（2026-09-06 オーナー指示） */
.c-plan-card--care .c-plan-card__main {
  text-align: center;
}

@media (min-width: 768px) {
  .c-plan-card--care .c-plan-card__main {
    text-align: left;
  }
}

.c-plan-card--care .c-plan-card__price {
  flex: none;
  margin-top: 0;
}

.c-plan-card__terms {
  font-size: 1.2rem;
  /* 12px */
  line-height: 1.7;
  color: var(--color-text-muted);
}

.c-plan-card__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem 2rem;
  /* 8px 20px */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.4rem;
  /* 14px */
  line-height: 1.7;
}

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

.c-plan-card__feature {
  position: relative;
  padding-left: 2rem;
  /* 20px */
}

.c-plan-card__feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 1.2rem;
  /* 12px */
  height: 0.6rem;
  /* 6px */
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: translateY(-60%) rotate(-45deg);
}

.c-plan-card--care .c-plan-card__cta {
  margin-top: 0.8rem;
  /* 8px */
  max-width: 100%;
}

@media (min-width: 768px) {
  .c-plan-card--care .c-plan-card__cta {
    max-width: 20rem;
    /* 200px */
  }
}

/* Object / project / hero — FV。左テキスト・右写真、淡ブルーの水彩調背景 */
.p-hero {
  position: relative;
  /* フルワイド写真の基準（inner ではなく帯本体） */
  overflow: hidden;
  background: linear-gradient(115deg, #f9f9f4 0%, #f1f1e8 45%, #e8e8dc 100%);
  /* オリーブ寄りの淡い下地（配色刷新 v2） */
}

.p-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.2rem;
  /* 32px */
  max-width: 128rem;
  /* 1280px */
  margin-inline: auto;
  padding: 4.8rem 2rem;
  /* 48px 20px */
  box-sizing: border-box;
  min-height: calc(100vh - 7rem);
  /* 1画面高 − 固定ヘッダー70px (2026-09-03 オーナー指示) */
  min-height: calc(100svh - 7rem);
  /* SPのアドレスバー分を考慮 */
}

@media (min-width: 768px) {
  .p-hero__inner {
    display: block;
    padding: 0 3rem;
    /* テキスト側のみ。写真は右端裁ち落とし */
  }
}

@media (min-width: 1080px) {
  .p-hero__inner {
    padding-left: 5rem;
    /* 50px 原本実測 テキスト左 約64/1024 */
  }
}

.p-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  /* 24px */
}

@media (min-width: 768px) {
  .p-hero__body {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    /* 640px メイン/サブを 1 行に収める（2026-09-04 オーナー指示・旧 460px） */
    padding-block: 7rem 7rem;
    /* 縦センター相当 */
    justify-content: center;
    min-height: calc(100vh - 7rem);
    /* 帯と同じ1画面高で縦センター */
    min-height: calc(100svh - 7rem);
    box-sizing: border-box;
  }
}

.p-hero__title {
  font-size: 2.6rem;
  /* 26px SP で 12 文字を 1 行に（2026-09-04・旧 32px） */
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .p-hero__title {
    font-size: 3.8rem;
    /* 38px */
  }
}

@media (min-width: 1080px) {
  .p-hero__title {
    font-size: 4.4rem;
    /* 44px 原本実測 約42px */
  }
}

.p-hero__sub {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  /* 13px SP で 23 文字を 1 行に（2026-09-04・旧 16px） */
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-accent-text);
  margin-top: -0.8rem;
  /* 見出しに寄せる */
}

@media (min-width: 768px) {
  .p-hero__sub {
    font-size: 1.9rem;
    /* 19px */
  }
}

.p-hero__lead {
  font-size: 1.4rem;
  /* 14px */
  line-height: 2.1;
}

@media (min-width: 768px) {
  .p-hero__lead {
    font-size: 1.5rem;
    /* 15px */
  }
}

/* 背景動画フルワイド（2026-09-03 オーナー指示: Adobe Stock 564536810 和紙テクスチャ+筆ストローク・10秒ループ・無音）
   帯全幅・全高に敷き、テキスト側に薄い生成りベールを重ねて可読性を保つ。prefers-reduced-motion 時は JS で停止しポスター表示 */
.p-hero__body {
  position: relative;
  z-index: 1;
}

.p-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.p-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: center;
}

.p-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* SP: 全面に薄い生成りベール */
  background: rgba(249, 249, 244, 0.35);
}

@media (min-width: 768px) {
  .p-hero__photo::after {
    /* PC: 左テキスト側だけ少し白く */
    background: linear-gradient(90deg, rgba(249, 249, 244, 0.55) 0%, rgba(249, 249, 244, 0.4) 30%, rgba(249, 249, 244, 0) 55%);
  }
}

/* 読み込み時の登場（2026-09-04）: 見出し→サブ→補足→ボタン の順に 0.15s 刻みで立ち上がる。
   CSS アニメーションなので JS 無効でも最終状態（表示）に収束する */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateX(-1.6rem);
  }
  /* 左 16px から（「ふわっと」= 移動量を抑え、フェード主体に） */
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2026-09-04 オーナー指示: もう少しなめらかにゆっくり、左からフェードイン
   2.2s・sine 系の柔らかいイージング（急加速しない）・0.35s 刻み（同日「もう少しゆっくり」で 1.6s/0.25s → 2.2s/0.35s） */
.p-hero__body > * {
  animation: hero-in 2.2s cubic-bezier(0.33, 1, 0.68, 1) both;
  /* ease-out cubic: 早めに動き出してゆっくり収まる */
}

/* 2026-09-05 オーナー指示: メイン→サブ 1.35s、サブ→補足→ボタン は各 0.85s（0.35s から +0.5s） */
.p-hero__body > :nth-child(1) {
  animation-delay: 0.2s;
}

.p-hero__body > :nth-child(2) {
  animation-delay: 1.55s;
}

.p-hero__body > :nth-child(3) {
  animation-delay: 2.4s;
}

.p-hero__body > :nth-child(4) {
  animation-delay: 3.25s;
}

/* Object / project / service — 3カード（2026-09-06 WordPress・コンテンツ制作を非表示化。以前は5カード） */
.p-service {
  background: var(--color-bg);
  /* 2026-09-04 和紙帯と入替（白） */
  padding-block: 5.6rem;
  /* 56px */
}

@media (min-width: 768px) {
  .p-service {
    padding-block: 6.4rem;
    /* 64px — 原本比 帯高 288px */
  }
}

.p-service__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  /* 16px */
}

@media (min-width: 768px) {
  .p-service__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    /* 20px 原本実測 約20px。3カードのため 1080px 以上も 3 列のまま */
  }
}

/* Object / project / works — 白帯・4カード */
.p-works {
  background: var(--color-bg-alt);
  /* 生成り #faf8f2（2026-09-04 和紙→色に戻し） */
  padding-block: 5.6rem;
  /* 56px */
}

@media (min-width: 768px) {
  .p-works {
    padding-block: 6.4rem;
    /* 64px */
  }
}

.p-works__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  /* 16px */
}

@media (min-width: 768px) {
  .p-works__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    /* 20px */
  }
}

@media (min-width: 1080px) {
  .p-works__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4rem;
    /* 24px 原本実測 約20-25px */
  }
}

.p-works__more {
  margin-top: 3.2rem;
  /* 32px */
  text-align: center;
}

/* Object / project / info — Price / Testimonial / Blog（各1カラム・縦積み）
   2026-09-03 redesign: 3カラム帯を廃止し、生成り(#faf8f2)/白の交互リズムで全幅セクション化 */
/* --- Price --- */
.p-price {
  background: var(--color-bg);
  /* 2026-09-04 和紙帯と入替（白） */
  padding-block: 5.6rem 6.4rem;
  /* 56px / 下やや広め（光学調整） */
}

@media (min-width: 768px) {
  .p-price {
    padding-block: 6.4rem 7.2rem;
    /* 64px 72px */
  }
}

.p-price__lead {
  font-size: 1.4rem;
  /* 14px */
  text-align: center;
  margin-top: -1.6rem;
  /* 見出しとの距離を詰める */
  margin-bottom: 3.2rem;
  /* 32px */
}

.p-price__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* 20px */
  max-width: 92rem;
  /* 920px 3カード上限 */
  margin-inline: auto;
  align-items: stretch;
}

@media (min-width: 768px) {
  .p-price__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    /* 24px */
  }
}

/* --- Price: かかりつけプラン（3プラン下・2026-09-03） --- */
.p-price__care {
  max-width: 92rem;
  /* 920px 3カードと同幅 */
  margin: 4.8rem auto 0;
  /* 48px */
}

@media (min-width: 768px) {
  .p-price__care {
    margin-top: 5.6rem;
    /* 56px */
  }
}

.p-price__care-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  /* 20px */
  line-height: 1.4;
  text-align: center;
  color: var(--color-heading);
  margin-bottom: 2rem;
  /* 20px */
}

@media (min-width: 768px) {
  .p-price__care-title {
    font-size: 2.4rem;
    /* 24px */
  }
}

.p-price__care-lead {
  font-size: 1.4rem;
  /* 14px */
  text-align: center;
  margin-top: -0.8rem;
  margin-bottom: 2rem;
  /* 20px */
}

/* --- Testimonial --- */
.p-voice {
  background: var(--color-bg-alt);
  /* 生成り #faf8f2（2026-09-04 和紙→色に戻し） */
  padding-block: 5.6rem 6.4rem;
}

@media (min-width: 768px) {
  .p-voice {
    padding-block: 6.4rem 7.2rem;
  }
}

.p-voice__quote-block {
  position: relative;
  max-width: 72rem;
  /* 720px 読み幅を絞る */
  margin-inline: auto;
  text-align: center;
  padding-top: 3.2rem;
  /* 32px 引用符ぶん */
}

.p-voice__quote-block::before {
  content: "\201C";
  /* “ */
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 9.6rem;
  /* 96px */
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out) 0.3s, transform var(--dur-slow) var(--ease-out) 0.3s;
}

/* JS 有効時: 引用符は本文の後からふわっと降りてくる */
.js .p-voice__quote-block.js-reveal::before {
  opacity: 0;
  transform: translate(-50%, -0.8rem);
}

.js .p-voice__quote-block.is-revealed::before {
  opacity: 0.35;
  transform: translate(-50%, 0);
}

.p-voice__quote {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  /* 17px */
  font-weight: 500;
  line-height: 2.1;
  color: var(--color-heading);
}

@media (min-width: 768px) {
  .p-voice__quote {
    font-size: 2rem;
    /* 20px */
  }
}

.p-voice__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  /* 12px */
  margin-top: 2.8rem;
  /* 28px */
}

.p-voice__photo {
  width: 7.2rem;
  /* 72px */
  height: 7.2rem;
  /* 72px */
  object-fit: cover;
  object-position: top;
  border-radius: 1.6rem;
  /* squircle 調 */
  box-shadow: var(--shadow-card);
}

.p-voice__name {
  font-size: 1.4rem;
  /* 14px */
  line-height: 1.8;
  color: var(--color-text);
}

.p-voice__link {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: opacity 0.25s ease;
}

.p-voice__link:hover {
  opacity: 0.7;
}

/* --- Blog --- */
.p-blog {
  background: var(--color-bg);
  /* 2026-09-04 和紙帯と入替（白） */
  padding-block: 5.6rem 6.4rem;
}

@media (min-width: 768px) {
  .p-blog {
    padding-block: 6.4rem 7.2rem;
  }
}

.p-blog__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* 20px */
  max-width: 100rem;
  /* 1000px */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-blog__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    /* 24px */
  }
}

.p-blog__more {
  margin-top: 3.2rem;
  /* 32px */
  text-align: center;
}

/* Object / project / cta — 案4（2026-09-03 オーナー採用）: 生成り地に白カードを影で浮かせ、CTA を独立した塊として見せる。
   フッター（生成り濃 #eeede3）と同じ明るいトーンで終わる構成。旧: 写真帯 → 深オリーブ単色帯 → 本案 */
.p-cta {
  background: var(--color-bg);
  /* 2026-09-04 和紙帯と入替（白） */
  padding-block: 4.8rem;
  /* 48px */
}

@media (min-width: 768px) {
  .p-cta {
    padding-block: 6.4rem;
    /* 64px */
  }
}

.p-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  /* 24px */
  text-align: center;
  background: var(--color-white);
  border-radius: 1.2rem;
  /* 12px カードはコンテナより一段大きい角丸 */
  box-shadow: 0 0.8rem 2.8rem rgba(58, 60, 34, 0.12);
  padding: 3.2rem 2rem;
  /* 32px 20px */
}

@media (min-width: 768px) {
  .p-cta__inner {
    padding: 3.2rem 4rem;
    /* 32px 40px */
  }
}

@media (min-width: 1080px) {
  .p-cta__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 4rem;
    /* 40px */
  }
}

.p-cta__lead-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  /* 16px */
}

@media (min-width: 1080px) {
  .p-cta__lead-group {
    flex-direction: row;
    gap: 2.4rem;
    /* 24px */
  }
}

.p-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 6.4rem;
  /* 64px 原本実測 */
  height: 6.4rem;
  /* 64px */
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  /* オリーブ円に墨アイコン */
  box-shadow: 0 0.3rem 1rem rgba(58, 60, 34, 0.18);
}

.p-cta__title {
  font-size: 2rem;
  /* 20px */
  color: var(--color-heading);
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .p-cta__title {
    font-size: 2.4rem;
    /* 24px 原本実測 */
  }
}

.p-cta__note {
  margin-top: 0.6rem;
  /* 6px */
  font-size: 1.3rem;
  /* 13px */
  color: var(--color-text);
}

.p-cta__btn {
  flex: none;
}

/* Object / project / pagetop — TOPへ戻るボタン（2026-09-06 オーナー指示）
   SWELL の固定ボタン（.p-fixBtnWrap / .c-fixBtn・カスタマイザー「表示する（円形）」）と同じ見た目・挙動を
   単独テンプレート側で再現する。値は Local の SWELL 2.17.0 build/css/main.css から転記:
   52x52px・白地・1px 枠 --color_main・border-radius 50%（円形設定）・opacity .75→hover 1・
   右下 2.5em(=40px)・スクロール後に data-scrolled=true でフェードイン・hover で main 色地+白アイコン */
.p-fixBtnWrap {
  position: fixed;
  right: 4rem;
  /* SWELL: right:2.5em (=40px) */
  bottom: 4rem;
  /* SWELL: bottom:2.5em (=40px) */
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: calc(env(safe-area-inset-bottom) * 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

html[data-scrolled="true"] .p-fixBtnWrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-fixBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  /* 52px */
  height: 5.2rem;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  /* SWELL「表示する（円形）」 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: var(--color-accent);
  cursor: pointer;
  opacity: 0.75;
  overflow: hidden;
  transition: all 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.c-fixBtn:hover {
  opacity: 1;
  background: var(--color-accent);
  /* SWELL .hov-bg-main:hover */
  color: var(--color-white);
}

.c-fixBtn__icon {
  display: block;
  width: 2rem;
  /* SWELL .c-fixBtn__icon font-size:20px */
  height: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  .p-fixBtnWrap,
.c-fixBtn {
    transition: none;
  }
}

/* Object / utility */
.u-br-pc {
  display: none;
}

@media (min-width: 768px) {
  .u-br-pc {
    display: inline;
  }
}

.u-br-sp {
  display: inline;
}

@media (min-width: 768px) {
  .u-br-sp {
    display: none;
  }
}

/* redesign: スクロール登場（JS が html に .js を付けた時のみ有効 = JS 無効環境で消えない） */
.js .js-reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  /* 24px */
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

/* CTA カードはわずかに拡大しながら出る */
.js .p-cta__inner.js-reveal {
  transform: translateY(2.4rem) scale(0.985);
}

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

@media (prefers-reduced-motion: reduce) {
  .js .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}