/* ============================================================
   terasu.css  — Abad HP
   terasu-dental.com のデザインシステムに完全準拠
   色・タイポ・余白・ブロブアニメを最初から書き直したクリーンCSS

   terasu テーマ CSS から抽出した値を使用
   文章・写真は Abad 独自のものに差し替え済み
   ============================================================ */

/* ─── 0. 変数（terasu-dental.com テーマCSS由来） ─────────── */
:root {
  /* 5色のブロブカラー（KV から各セクション共通） */
  --c-yellow:  #ffe02b;
  --c-pink:    #e8005b;
  --c-green:   #73d23c;
  --c-purple:  #b189ff;
  --c-teal:    #2fcdd7;
  --c-peach:   #ffaf91;

  /* 背景・文字 */
  --c-bg:      #eae6dc;
  --c-bg-alt:  #f5f5f5;
  --c-bg-white:#ffffff;
  --c-text:    #000000;
  --c-text-sub:#050505;
  --c-border:  #e3e3e3;
  --c-muted:   #707070;

  /* radius */
  --radius-btn: 3rem;
  --radius-card: 2rem;

  /* wrapper */
  --wrapper-w: min(90%, 100rem);

  /* transition */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ─── 1. ベースリセット ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;          /* 1rem = 10px */
  scroll-behavior: smooth;
  background: var(--c-bg);
  min-width: 320px;
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .35s var(--ease); }
a:hover { opacity: .75; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
p { margin: 0; }

/* ─── 2. レイアウト ──────────────────────────────────────── */
.l-wrapper {
  width: var(--wrapper-w);
  margin-inline: auto;
  position: relative;
}
.l-page {
  /* hidden だとセクションまたぎの装飾SVGが境界で切れる */
  overflow: visible;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 16px; top: 16px; width: auto; height: auto;
  padding: 1rem 1.4rem; background: #fff; border-radius: 8px; z-index: 9999;
}

/* ─── 3. ヘッダー ────────────────────────────────────────── */
.l-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 8rem;
  display: flex;
  align-items: center;
  background: rgba(234, 230, 220, .94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow .25s var(--ease);
}
.l-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
.l-header__inner {
  width: var(--wrapper-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
/* ロゴ */
.l-header__logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.2rem;
  padding: .2rem 1.4rem;
  border-radius: .8rem;
  background: var(--c-text-sub);
  border: 1px solid var(--c-text-sub);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  opacity: 1 !important;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.l-header__logo a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* ナビ */
.l-header__nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.l-header__list {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.l-header__list a:hover { opacity: .7; }

/* ヘッダーCTAボタン — c-btn-blob の小型版 */
.l-header__cv .c-btn-blob {
  min-width: 15rem;
  height: 4.2rem;
  font-size: 1.35rem;
  padding: 0 2rem;
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: var(--c-text-sub);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.l-header__cv .c-btn-blob__blobs span { background: var(--c-text-sub); }
.l-header__cv .c-btn-blob:hover { color: #fff; border-color: var(--c-text-sub); }

/* ハンバーガー */
.l-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.l-hamburger span {
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--c-text-sub);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s;
}

/* ドロワー */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.45);
}
.mobile-drawer.is-open { display: block; }
.drawer-panel {
  position: absolute;
  top: 0; right: 0;
  width: min(88vw, 36rem);
  height: 100%;
  background: var(--c-bg);
  overflow-y: auto;
  padding: 2.4rem 2rem;
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.2rem;
}
.drawer-close {
  background: none;
  border: none;
  font-size: 2.4rem;
  cursor: pointer;
  color: var(--c-text-sub);
  padding: .4rem;
}
.drawer-links li + li { margin-top: .4rem; }
.drawer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.drawer-links .arrow::after { content: "→"; }

/* キャンペーンバナー */
.campaign-banner {
  background: var(--c-yellow) !important;
  color: var(--c-text-sub) !important;
  padding: 1.1rem 2rem;
  text-align: center;
  font-size: 1.3rem;
  border-bottom: none !important;
}
.campaign-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
  max-width: var(--wrapper-w);
  margin: 0 auto;
}
.campaign-banner-tag {
  background: var(--c-pink) !important;
  color: #fff !important;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .1em;
  padding: .5rem 1.2rem;
  border-radius: .6rem;
}
.campaign-banner-head { display: block; font-weight: 700; font-size: 1.4rem; margin-bottom: .2rem; }
.campaign-banner-detail { font-size: 1.3rem; }
.campaign-banner-strong { color: var(--c-pink); font-weight: 900; }
/* キャンペーンバナーボタン — c-btn-blob バリアント */
.campaign-banner-btn.c-btn-blob {
  min-width: 18rem;
  height: 5rem;
  font-size: 1.4rem;
  padding: 0 2.4rem;
  background: var(--c-text-sub);
  border-color: var(--c-text-sub);
  color: #fff;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.campaign-banner-btn.c-btn-blob .c-btn-blob__blobs span { background: var(--c-yellow); }
.campaign-banner-btn.c-btn-blob:hover { color: var(--c-text-sub); border-color: var(--c-text-sub); }

/* ─── 4. タイポグラフィ ─────────────────────────────────── */

/* セクション英字ラベル（terasu: Damion 5.5rem） */
.c-ttl-en {
  font-family: "Damion", cursive;
  font-weight: 400;
  font-size: clamp(4rem, 6vw, 5.5rem);
  letter-spacing: .01em;
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: .2em;
  display: inline-block;
  color: var(--c-text-sub);
}

/* セクション見出し */
.c-ttl {
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: .12em;
  line-height: 1.5;
  color: var(--c-text-sub);
}

.c-ttl-wrap {
  text-align: center;
  margin-bottom: 4rem;
}
.c-ttl-wrap.--left { text-align: left; }

/* リード文 */
.c-lead {
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 4rem;
}

/* ボディテキスト */
.c-text-body {
  font-size: 1.6rem;
  letter-spacing: .1em;
  font-weight: 500;
  line-height: 2.2em;
  text-align: center;
}
.c-text-body.--left { text-align: left; }

/* ─── 5. ボタン（terasu の c-btnBlob を完全再現） ────────── */
/* SVG filter for blob button goo effect */
.goo-filter { position: absolute; width: 0; height: 0; }

.c-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}
.c-btn-wrap.--left { justify-content: flex-start; }

.c-btn-blob {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 22rem;
  height: 5.6rem;
  padding: 0 3rem;
  border: 1px solid var(--c-text-sub);
  border-radius: var(--radius-btn);
  background: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  overflow: hidden;
  transition: color .3s var(--ease);
  text-decoration: none;
  color: var(--c-text-sub);
}
.c-btn-blob:hover { opacity: 1; color: #fff; }
.c-btn-blob__inner {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: var(--radius-btn);
}
.c-btn-blob__blobs {
  position: relative;
  display: block;
  height: 100%;
  filter: url("#goo");
}
.c-btn-blob__blobs span {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  background: var(--c-text-sub);
  border-radius: 100%;
  transform: translate3d(0, 150%, 0) scale(1.7);
  transition: transform .45s var(--ease);
}
.c-btn-blob__blobs span:nth-child(1) { left: 0;    transition-delay: 0s; }
.c-btn-blob__blobs span:nth-child(2) { left: 25%;  transition-delay: .06s; }
.c-btn-blob__blobs span:nth-child(3) { left: 50%;  transition-delay: .12s; }
.c-btn-blob__blobs span:nth-child(4) { left: 75%;  transition-delay: .18s; }
.c-btn-blob:hover .c-btn-blob__blobs span {
  transform: translate3d(0, 0, 0) scale(1.7);
}

/* ─── 6. 共通アニメーション ─────────────────────────────── */
/* KV ブロブ：大きめの浮遊（「動いてる」と一目で分かる振幅） */
@keyframes kvBlobFloat1 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(48px, -72px) rotate(4deg) scale(1.06); }
  66%  { transform: translate(72px, -36px) rotate(5.5deg) scale(1.08); }
  100% { transform: translate(52px, -58px) rotate(4.5deg) scale(1.07); }
}
@keyframes kvBlobFloat2 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  35%  { transform: translate(-62px, 52px) rotate(-4.5deg) scale(1.06); }
  70%  { transform: translate(-82px, 28px) rotate(-6deg) scale(1.09); }
  100% { transform: translate(-58px, 48px) rotate(-5deg) scale(1.075); }
}
@keyframes kvBlobFloat3 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%  { transform: translate(58px, 68px) rotate(5deg) scale(1.07); }
  100% { transform: translate(42px, 88px) rotate(6.5deg) scale(1.09); }
}
@keyframes kvBlobFloat4 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-55px, -70px) rotate(-5deg) scale(1.08); }
  100% { transform: translate(-78px, -42px) rotate(-6.5deg) scale(1.095); }
}
@keyframes kvBlobFloat5 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(68px, 58px) rotate(4deg) scale(1.07); }
  100% { transform: translate(48px, 82px) rotate(5.5deg) scale(1.09); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes slideUp {
  from { opacity: 0; transform: translate(0, 100px); }
  to   { opacity: 1; transform: translate(0, 0);     }
}

/* ScrollReveal: .rv は初期非表示、.in で表示 */
.rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ─── 7. KV / ファーストビュー ──────────────────────────── */
.p-kv {
  position: relative;
  height: 68rem;
  /* overflow: hidden を外してブロブが隣セクションへはみ出せるようにする */
  background: var(--c-bg);
}

/* 5色ブロブ：KV に絶対配置（ベタ塗り・子SVGに透明を掛けない） */
.kv-bg {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.kv-bg .kv-bg__float svg,
.kv-bg .kv-bg__float .hand-blob,
.kv-bg path {
  opacity: 1;
  fill-opacity: 1;
  stroke-opacity: 1;
}

/* 有機シルエット：SVG マスクを data URI 直指定（file://・Safari で var(url) が死ぬのを避ける） */
.hand-blob {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 822 / 614;
  background-color: var(--hand-blob-color, var(--c-yellow));
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  overflow: visible;
}
.hand-blob--o1 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M70%2060C130%2015%20260%2010%20330%2055%20400%20100%20395%20190%20330%20245%20265%20300%20120%20305%2055%20250%20-10%20195%2015%20105%2070%2060z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M70%2060C130%2015%20260%2010%20330%2055%20400%20100%20395%20190%20330%20245%20265%20300%20120%20305%2055%20250%20-10%20195%2015%20105%2070%2060z%27%2F%3E%3C%2Fsvg%3E");
}
.hand-blob--o2 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M55%2095C95%2040%20210%2025%20295%2060%20385%2095%20400%20185%20345%20250%20290%20315%20145%20300%2080%20240%2015%20180%2020%20135%2055%2095z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M55%2095C95%2040%20210%2025%20295%2060%20385%2095%20400%20185%20345%20250%20290%20315%20145%20300%2080%20240%2015%20180%2020%20135%2055%2095z%27%2F%3E%3C%2Fsvg%3E");
}
.hand-blob--o3 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M110%2040C195%205%20310%2020%20355%20100%20400%20180%20345%20275%20250%20295%20155%20315%2035%20275%2025%20170%2015%2085%2055%2065%20110%2040z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M110%2040C195%205%20310%2020%20355%20100%20400%20180%20345%20275%20250%20295%20155%20315%2035%20275%2025%20170%2015%2085%2055%2065%20110%2040z%27%2F%3E%3C%2Fsvg%3E");
}
.hand-blob--o4 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M65%20115C90%2050%20200%2030%20285%2065%20370%20100%20385%20215%20315%20265%20245%20315%20115%20305%2050%20235%20-15%20165%2040%20145%2065%20115z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M65%20115C90%2050%20200%2030%20285%2065%20370%20100%20385%20215%20315%20265%20245%20315%20115%20305%2050%20235%20-15%20165%2040%20145%2065%20115z%27%2F%3E%3C%2Fsvg%3E");
}
.hand-blob--o5 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M50%20100C115%2035%20245%2028%20320%2088%20395%20148%20375%20255%20285%20280%20195%20305%2075%20285%2030%20195%20-15%20115%2025%20110%2050%20100z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M50%20100C115%2035%20245%2028%20320%2088%20395%20148%20375%20255%20285%20280%20195%20305%2075%20285%2030%20195%20-15%20115%2025%20110%2050%20100z%27%2F%3E%3C%2Fsvg%3E");
}
/* 写真4参照：左にくびれのある豆形（実績ブリッジ用・色は HTML 側の変数） */
.hand-blob--ref4 {
  aspect-ratio: 100 / 120;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20120%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M42%2C15C56%2C6%2C74%2C10%2C82%2C26C88%2C40%2C80%2C52%2C66%2C54C50%2C58%2C36%2C75%2C31%2C98C26%2C130%2C40%2C168%2C68%2C176C96%2C184%2C124%2C170%2C138%2C140C152%2C100%2C138%2C52%2C110%2C32C92%2C18%2C68%2C12%2C42%2C15Z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20120%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M42%2C15C56%2C6%2C74%2C10%2C82%2C26C88%2C40%2C80%2C52%2C66%2C54C50%2C58%2C36%2C75%2C31%2C98C26%2C130%2C40%2C168%2C68%2C176C96%2C184%2C124%2C170%2C138%2C140C152%2C100%2C138%2C52%2C110%2C32C92%2C18%2C68%2C12%2C42%2C15Z%27%2F%3E%3C%2Fsvg%3E");
}
.kv-bg .kv-bg__float .hand-blob {
  width: 100%;
  height: auto;
}
/* スクロール用 transform は外側 .kv-bg、ゆらぎアニメは内側 .kv-bg__float（競合防止） */
.kv-bg__float {
  width: 100%;
  height: auto;
  will-change: transform;
}
.kv-bg02 .kv-bg__float { animation: kvBlobFloat2 22s ease-in-out 0.5s infinite alternate; }
.kv-bg03 .kv-bg__float { animation: kvBlobFloat3 20s ease-in-out 1s infinite alternate; }
.kv-bg04 .kv-bg__float { animation: kvBlobFloat4 18s ease-in-out 1.5s infinite alternate; }
.kv-bg05 .kv-bg__float { animation: kvBlobFloat5 24s ease-in-out 2s infinite alternate; }
/* bg02: ピンク — 左上 */
.kv-bg02 {
  left: -22rem;
  top: -2rem;
  width: 44rem;
}
/* bg03: 緑 — 左下・更新セクション上部まで */
.kv-bg03 {
  left: -10rem;
  bottom: -8rem;
  width: 52rem;
}
/* bg04: 紫 — 右中央 */
.kv-bg04 {
  right: -16rem;
  top: 18rem;
  width: 42rem;
}
/* bg05: ティール — 右下（縮小版：他セクションへ過剰侵食を防ぐ） */
.kv-bg05 {
  right: -20rem;
  top: 28rem;
  width: 62rem;
}

/* イラスト（常時1枚） */
.kv-illust {
  position: absolute;
  right: -7rem;
  top: 4rem;
  width: 78rem;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.kv-illust img { width: 100%; height: auto; }
.kv-illust__before { position: relative; }

/* KV テキストブロック */
.kv-inner {
  position: absolute;
  top: 43%;
  left: calc(50% - 50rem);
  transform: translateY(-50%);
  z-index: 3;
}
.kv-en {
  font-family: "Damion", cursive;
  font-weight: 400;
  font-size: 8.2rem;
  letter-spacing: .01em;
  line-height: 1;
  margin-bottom: 2.8rem;
  color: var(--c-text-sub);
}
.kv-ja {
  font-size: 3.3rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.6;
  margin-bottom: 2.2rem;
  color: var(--c-text-sub);
}
.kv-lead {
  font-size: 1.6rem;
  letter-spacing: .16em;
  line-height: 2.5;
  color: var(--c-text-sub);
  margin-bottom: 3.6rem;
}
.kv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/* ─── 8. セクション共通 ──────────────────────────────────── */
.p-section {
  position: relative;
  padding: 10rem 0;
  overflow: visible;
}
/* 背景ブロブ（各セクションに散らす装飾）— ベタ塗り・半透明にしない */
@keyframes sDecoDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(52px, -68px) rotate(6deg) scale(1.1); }
  100% { transform: translate(-44px, 56px) rotate(-5deg) scale(1.07); }
}
/* 右端ブロブ：大きく振れても画面外に出にくい振幅 */
@keyframes sDecoDriftTight {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-12px, -18px) rotate(2.5deg) scale(1.04); }
  100% { transform: translate(10px, 14px) rotate(-2deg) scale(1.025); }
}
.s-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  animation: sDecoDrift 28s ease-in-out infinite alternate;
}
.s-deco:nth-of-type(2n) {
  animation-duration: 34s;
  animation-delay: -4s;
}
.s-deco:nth-of-type(3n) {
  animation-duration: 24s;
  animation-delay: -2s;
}
.s-deco.hand-blob {
  height: auto;
}
/* 右寄せブロブ：端に寄せ＋弱めアニメ（見切れ防止） */
.s-deco.hand-blob.s-deco--safe-right {
  left: auto;
  right: max(0.6rem, env(safe-area-inset-right, 0px));
  animation-name: sDecoDriftTight;
}
.hand-blob--mirror {
  transform: scaleX(-1);
}
.s-deco path {
  fill-opacity: 1;
  stroke-opacity: 1;
}
.p-section > .l-wrapper { position: relative; z-index: 1; }
/* 実績スライダーは装飾ブロブより必ず前面 */
.p-section > .p-works__scroll {
  position: relative;
  z-index: 2;
}
/* SVG blob decorations */
.svg-blob {
  position: absolute;
  pointer-events: none;
  line-height: 0;
}
.svg-blob svg {
  width: 100%;
  height: auto;
  display: block;
}
#about .about-blob-right {
  width: min(32rem, 42vw);
  right: -10rem;
  top: 1rem;
  z-index: 0;
  opacity: .92;
}
#benefits .benefits-blob-yellow,
#benefits .benefits-blob-teal {
  width: min(30rem, 38vw);
  top: -11rem;
  z-index: 0;
  opacity: .92;
}
#benefits .benefits-blob-yellow {
  width: min(72rem, 91.2vw);
  right: -2rem;
}
#benefits .benefits-blob-teal { left: -8rem; }
#pricing .pricing-blob-teal {
  width: min(56rem, 68vw);
  left: -10rem;
  top: 14rem;
  z-index: 0;
  opacity: .88;
}

/* セクション境界ブリッジ（装飾をセクションまたぎで重ねる） */
.p-deco-bridge {
  position: relative;
  height: 0;
  /* 本文より手前に出さない（#works 直後などで文字の下に色が乗るのを防ぐ） */
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
@keyframes bridgeBlobDrift {
  0%   { transform: translateX(-50%) translate(0, 0) scale(1); }
  100% { transform: translateX(-50%) translate(-56px, 48px) scale(1.1); }
}
.p-deco-bridge__blobs {
  position: absolute;
  left: 50%;
  width: min(100%, 92rem);
  min-height: 26rem;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
  animation: bridgeBlobDrift 36s ease-in-out infinite alternate;
}
/* （旧）after-white ブリッジは HTML から撤去 — ブロブは #about 内で白地へはみ出す */
.p-deco-bridge--cream-to-white.p-deco-bridge--works-blobs .p-deco-bridge__blobs {
  min-height: clamp(18rem, 24vw, 24rem);
  top: clamp(-8rem, -10vw, -6rem);
  width: 100vw;
  animation: none;
}
.p-deco-bridge__hand {
  position: absolute;
  aspect-ratio: 822 / 614;
}
.p-deco-bridge__hand.hand-blob--ref4 {
  aspect-ratio: 100 / 120;
}
.p-deco-bridge--after-cream .p-deco-bridge__blobs {
  top: clamp(-12rem, -14vw, -8rem);
}
.p-deco-bridge--testimonials-founder {
  z-index: 0;
}
.p-deco-bridge--testimonials-founder .p-deco-bridge__blobs {
  min-height: clamp(30rem, 38vw, 42rem);
  top: clamp(-10rem, -12vw, -7rem);
  width: min(100%, 110rem);
  animation: none;
}
.p-deco-bridge--testimonials-founder .bridge-blob-pink {
  width: min(30rem, 40vw);
  left: -10rem;
  top: -2rem;
  opacity: .9;
}
.p-deco-bridge--testimonials-founder .bridge-blob-yellow {
  width: min(66rem, 90vw);
  right: -18rem;
  top: 5rem;
  opacity: .9;
}

/* セクション: 白地 */
.p-section.--white {
  background: #fff;
}
/* About */
#pain.p-section {
  overflow: visible;
}
#about.p-section {
  position: relative;
  background: var(--c-bg);
}
#about.p-section > .l-wrapper {
  position: relative;
  z-index: 2;
}
#benefits.p-section.--white {
  background: linear-gradient(180deg, var(--c-bg) 0%, rgba(255, 255, 255, 0.65) 14%, #fff 24%);
}
#works.p-section.--white {
  background: linear-gradient(180deg, rgba(234, 230, 220, 0.35) 0%, #fff 16%);
}
/* セクション: 薄グレー */
.p-section.--soft {
  background: var(--c-bg-alt);
}

/* ─── 9. Updates（お知らせ風セクション） ─────────────────── */
.p-updates {
  padding: 8rem 0;
}
.p-updates__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.p-updates__list { margin-top: 2.4rem; }
.p-updates__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.5rem;
}
.p-updates__item time { color: var(--c-muted); font-size: 1.3rem; white-space: nowrap; }

/* ファーストガイド */
.c-first-guide {
  border: 1px solid var(--c-border);
  border-radius: 1.6rem;
  padding: 2.8rem 2.4rem;
  background: #fff;
}
.c-first-guide__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.4rem;
  line-height: 1.5;
}
.c-first-guide__body {
  font-size: 1.5rem;
  line-height: 2.1;
}
.c-pink { color: var(--c-pink); font-weight: 700; }

/* ─── 10. Works 自動スライド ─────────────────────────────── */
/* 詳細スタイルは section 27 に移動（CSS animationベース） */
.p-works__item {
  flex: 0 0 auto;
  width: clamp(30rem, 34vw, 44rem);
  margin: 0;
}

/* デュアルフレーム（PC + SP） */
.wk-dual {
  position: relative;
  width: 100%;
  height: 28rem;
  margin-bottom: 1.8rem;
}
/* PC枠 */
.wk-pc {
  position: absolute;
  right: 0; top: 0;
  width: 80%;
  height: 23rem;
  border: 1.5px solid #d0d0cc;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
}
.wk-pc-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.2rem;
  background: linear-gradient(180deg, #f5f5f2, #ececea);
  border-bottom: 1px solid #dcdcd8;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 1rem;
  z-index: 2;
}
.wk-pc-bar span {
  width: .8rem; height: .8rem;
  border-radius: 50%;
}
.wk-pc-bar span:nth-child(1) { background: #ff6159; }
.wk-pc-bar span:nth-child(2) { background: #ffbd2e; }
.wk-pc-bar span:nth-child(3) { background: #28c941; }
.wk-pc .wk-screen {
  position: absolute;
  top: 2.2rem; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: calc(100% - 2.2rem);
  background-size: cover;
  background-position: top center;
}
/* SP枠（iPhone風） */
.wk-sp {
  position: absolute;
  left: .6rem; bottom: -1rem;
  width: 12rem;
  height: 25rem;
  border: 2px solid #1a1a18;
  border-radius: 2.4rem;
  overflow: hidden;
  background: #1a1a18;
  box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.14);
  z-index: 3;
  padding: .6rem .5rem;
}
.wk-sp .wk-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  background-size: cover;
  background-position: top center;
}
.wk-sp-notch {
  position: absolute;
  top: 1rem; left: 50%;
  transform: translateX(-50%);
  width: 5.2rem; height: 1.4rem;
  background: #0a0a08;
  border-radius: 999px;
  z-index: 4;
}
.wk-sp-home {
  position: absolute;
  bottom: .6rem; left: 50%;
  transform: translateX(-50%);
  width: 4.4rem; height: .4rem;
  background: rgba(255,255,255,.8);
  border-radius: 999px;
  z-index: 4;
}
.wk-screen {
  background-size: cover;
  background-position: top center;
}
.wk-blank {
  background: linear-gradient(135deg, #f4f4f2, #e8e8e4) !important;
}
.wk-sp .wk-blank {
  background: linear-gradient(160deg, #f0f0ec, #e0e0dc) !important;
}
/* 実績画像 */
.wk-blessed-pc { background-image: url("../img/work-blessed.jpg"); }
.wk-blessed-sp { background-image: url("../img/work-zion-sp.png"); background-position: top center; }
.wk-zion-pc    { background-image: url("../img/work-zion.jpg"); }
.wk-zion-sp    { background-image: url("../img/work-blessed-sp-new.png"); background-position: top center; }
.wk-beauty-pc  { background-image: url("../img/work-beauty-pc.png"); background-position: top center; }
.wk-beauty-sp  { background-image: url("../img/work-beauty-sp.png"); background-position: top center; }
.wk-hairsalon-pc { background-image: url("../img/work-hairsalon-pc.png"); background-position: top center; }
.wk-hairsalon-sp { background-image: url("../img/work-hairsalon-sp.png"); background-position: top center; }
.wk-bakery-pc  { background-image: url("../img/work-bakery-pc.png"); background-position: top center; }
.wk-bakery-sp  { background-image: url("../img/work-bakery-sp.png"); background-position: top center; }
.wk-music-pc   { background-image: url("../img/work-music-pc.png"); background-position: top center; }
.wk-music-sp   { background-image: url("../img/work-music-sp.png"); background-position: top center; }
.wk-recording-pc { background-image: url("../img/work-recording-pc.png"); background-position: top center; }
.wk-recording-sp { background-image: url("../img/work-recording-sp.png"); background-position: top center; }

.wk-cap {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: center;
}
.wk-cap__industry {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-sub);
}

/* ─── 11. About セクション ───────────────────────────────── */
.p-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: center;
}
.p-about__text { order: 1; }
.p-about__visual { order: 2; }
.p-about__visual svg { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.08)); }
.p-about__visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.08)); }

/* ─── 12. サービス/ベネフィット（Way of being 相当） ───────── */
.p-services__menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 5rem;
}
.p-services__item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 3.6rem 2.4rem 3rem;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.p-services__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.p-services__num {
  font-family: "Damion", cursive;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--c-teal);
  margin-bottom: 1.6rem;
}
.p-services__icon {
  width: 9.6rem;
  height: 9.6rem;
  margin: 0 auto 2rem;
  display: grid;
  place-items: center;
}
.p-services__icon svg { width: 100%; height: auto; }
.p-services__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: none;
}
.p-services__title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.p-services__body {
  font-size: 1.4rem;
  color: var(--c-muted);
  line-height: 2;
}

/* ─── 13. Promise カード ─────────────────────────────────── */
.p-promise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
.p-promise__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 5rem 2.4rem 3rem;
}
.p-promise__num {
  position: absolute;
  top: 2.4rem; left: 2.4rem;
  font-family: "Damion", cursive;
  font-size: 3rem;
  color: var(--c-pink);
  line-height: 1;
}
.p-promise__card h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.p-promise__card p {
  font-size: 1.4rem;
  color: var(--c-muted);
  line-height: 2;
}

/* ─── 14. Problems カード ────────────────────────────────── */
.p-problems__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 2.4rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.07);
  margin-top: 4rem;
}
.p-problems__card {
  padding: 3.6rem 2.8rem 3.2rem;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  position: relative;
}
.p-problems__card:nth-child(3n)  { border-right: 0; }
.p-problems__card:nth-last-child(-n+3) { border-bottom: 0; }
.p-problems__card::before {
  content: attr(data-num);
  display: block;
  font-family: "Damion", cursive;
  font-size: 3rem;
  color: var(--c-teal);
  line-height: 1;
  margin-bottom: 1.4rem;
}
.p-problems__card h3 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.p-problems__card p {
  font-size: 1.4rem;
  color: var(--c-muted);
  line-height: 2;
  margin: 0;
}

/* ─── 15. 料金プラン ─────────────────────────────────────── */
.p-pricing__block {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 2rem;
  padding: 3.6rem;
  margin-bottom: 2.4rem;
}
.p-pricing__block-label {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--c-border);
}
.p-pricing__badge {
  padding: .6rem 1.4rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--c-text-sub);
  color: #fff;
}
.p-pricing__badge.--pink   { background: var(--c-pink); }
.p-pricing__badge.--teal   { background: var(--c-teal); }
.p-pricing__badge.--green  { background: var(--c-green); }
.option-grid-2, .option-grid-3 {
  display: grid;
  gap: 1.6rem;
}
.option-grid-2 { grid-template-columns: repeat(2, 1fr); }
.option-grid-3 { grid-template-columns: repeat(3, 1fr); }
.option-item {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 1.4rem;
  padding: 2.4rem 2rem;
  transition: background .3s, transform .3s;
}
.option-item:hover { background: #fff; transform: translateY(-2px); }
.option-item h4 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.2rem; }
.option-price  { font-size: 2.4rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: .8rem; }
.option-item p { font-size: 1.4rem; color: var(--c-muted); line-height: 2; }
.option-case {
  display: block;
  margin-top: 1rem;
  padding: .8rem 1.2rem;
  background: #fffbe8;
  border: 1px solid #e8d000;
  border-radius: .8rem;
  font-size: 1.2rem;
  color: #6b5b00;
  line-height: 1.8;
}

/* おすすめセット */
.p-pricing__recommend {
  position: relative;
  background: #fff;
  border: 2px solid var(--c-pink) !important;
  border-radius: 2rem;
  padding: 4.8rem 3.6rem 3.6rem;
  margin-bottom: 2.4rem;
  box-shadow: 0 20px 50px rgba(232,0,91,.1);
}
.pricing-pack-illust {
  position: absolute;
  right: -16rem;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(18rem, 24vw, 30rem);
  pointer-events: none;
  z-index: 0;
  animation: kvBlobFloat4 12s ease-in-out .4s infinite alternate;
}
.pricing-pack-illust img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1100px) {
  .pricing-pack-illust {
    right: -8rem;
    width: clamp(14rem, 20vw, 22rem);
  }
}
@media (max-width: 920px) {
  .pricing-pack-illust {
    display: none;
  }
}
.p-pricing__recommend-badge {
  position: absolute;
  top: -1.4rem; left: 3.6rem;
  background: var(--c-pink);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  padding: .6rem 2rem;
  border-radius: 999px;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.4rem;
}
.pricing-table th,
.pricing-table td {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.5rem;
  text-align: left;
}
.pricing-table th { font-weight: 700; color: var(--c-muted); padding-right: 2rem; }
.pricing-table .ptbl-check {
  font-weight: 700;
  color: var(--c-teal);
}
.pricing-table-total th,
.pricing-table-total td { font-weight: 900; border-bottom: 0; }
.pricing-table-total strong { font-size: 2.8rem; }
.price-strike { text-decoration: line-through; color: var(--c-muted); font-weight: 400; font-size: 1.4rem; margin-right: 1rem; }
.price-note   { font-size: 1.3rem; color: var(--c-muted); }

/* ─── 16. お客様の声 ─────────────────────────────────────── */
.p-testimonials__layout {
  display: grid;
  grid-template-columns: 34rem 1fr;
  gap: 7.2rem;
  align-items: flex-start;
}
.p-testimonials__illust img {
  width: 100%;
  max-width: 32rem;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.08));
}
.p-testimonials__title { text-align: left; margin-bottom: 3rem; }
.voice-grid { display: flex; flex-direction: column; gap: 2rem; }
.voice-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 3.2rem 2.8rem;
}
.voice-quote {
  font-family: "Damion", cursive;
  font-size: 4.8rem;
  line-height: 1;
  color: var(--c-pink);
  opacity: .3;
  margin-bottom: -.6rem;
}
.voice-body {
  font-size: 1.4rem;
  line-height: 2.1;
  color: var(--c-muted);
  margin-bottom: 2rem;
}
.voice-footer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.voice-avatar {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: var(--c-bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.voice-name { font-size: 1.4rem; font-weight: 700; }
.voice-meta { font-size: 1.2rem; color: var(--c-muted); }

/* ─── 17. プロフィール ───────────────────────────────────── */
.p-founder__inner {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 6rem;
  align-items: center;
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 2.4rem;
  padding: 4.8rem;
}
.p-founder__inner .founder-text {
  position: relative;
  z-index: 1;
}
.founder-avatar-blob {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fef3c7;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
  display: grid;
  place-items: center;
}
.founder-avatar-blob svg { width: 90%; }
.founder-name { font-size: 2.4rem; font-weight: 700; margin-bottom: 1.6rem; }
.founder-name small { font-size: 1.4rem; font-weight: 400; color: var(--c-muted); margin-left: .8rem; }
.founder-text p { font-size: 1.5rem; line-height: 2.1; color: var(--c-muted); }
.founder-tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.pill {
  padding: .5rem 1.4rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--c-bg);
}

/* ─── 18. FAQ ────────────────────────────────────────────── */
.faq-list { max-width: 80rem; margin: 4rem auto 0; }
.faq-list details {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 1.4rem;
  margin-bottom: 1.2rem;
}
.faq-list summary {
  padding: 2rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-teal);
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] summary { background: rgba(46,205,215,.06); border-radius: 1.4rem 1.4rem 0 0; }
.faq-content { padding: 0 2.4rem 2rem; font-size: 1.4rem; color: var(--c-muted); line-height: 2.1; }

/* ─── 19. ブログ ─────────────────────────────────────────── */
.blog-panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 3.6rem;
  max-width: 80rem;
  margin: 4rem auto 0;
}
.blog-feed-loading, .blog-feed-empty { color: var(--c-muted); font-size: 1.4rem; }
.blog-feed-list { margin-top: 2rem; }
.blog-feed-item {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.5rem;
}
.blog-feed-item a:hover { color: var(--c-pink); }
.blog-themes-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .8rem; }

/* ─── 20. CTA ────────────────────────────────────────────── */
/* 詳細スタイルは section 29 に移動（白地＋黒テキストデザイン） */

/* ─── 21. サイドタブ（LINE/フォーム） ────────────────────── */
.contact-side-tabs {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  z-index: 950;
  transform: none;
  padding-right: env(safe-area-inset-right, 0px);
}
/* ─── サイドタブ共通 ────────────────────────────────────── */
.contact-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  white-space: nowrap;
  width: 4.4rem;
  height: 12rem;          /* 旧 10rem の 20% 増し */
  border-radius: 1rem 0 0 1rem;
  box-shadow: -3px 2px 10px rgba(0,0,0,.2);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  opacity: 1 !important;
  transition: box-shadow .25s ease, color .3s var(--ease);
}
.contact-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  border-radius: inherit;
}
/* テキスト span を ::before より前面に */
.contact-tab span {
  position: relative;
  z-index: 1;
}
.contact-tab:hover {
  box-shadow: -5px 2px 14px rgba(0,0,0,.28);
}
.contact-tab:hover::before {
  transform: translateY(0);
}
/* LINE タブ */
.contact-tab--line { background: #06c755; }
.contact-tab--line::before { background: #019a3f; }
/* フォームタブ */
.contact-tab--form { background: var(--c-text-sub); }
.contact-tab--form::before { background: var(--c-teal); }
.contact-tab--form:hover { color: var(--c-text-sub); }

/* ─── 21b. 料金セクション イラスト ──────────────────────── */
.pricing-illust {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* PCイラスト：右上に配置、下のセクションへまたがる */
.pricing-illust--pc {
  right: -6rem;
  top: -4rem;
  width: clamp(28rem, 38vw, 52rem);
  animation: none;
  overflow: visible;
}
/* SPイラスト：左下に配置、前のセクションへまたがる */
.pricing-illust--sp {
  left: -4rem;
  bottom: -12rem;         /* 次セクションへまたがる */
  width: clamp(18rem, 24vw, 32rem);
  animation: kvBlobFloat3 10s ease-in-out 1s infinite alternate;
  overflow: visible;
}
.pricing-illust svg {
  overflow: visible;
}
.pricing-illust img {
  width: 100%;
  height: auto;
  display: block;
}
/* ─── 22. フッター ───────────────────────────────────────── */
.l-footer {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  padding: 5.6rem 0 3.2rem;
  color: var(--c-text-sub);
}
.l-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
}
.l-footer__logo a {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--c-text-sub);
  opacity: 1 !important;
  text-decoration: none;
}
.l-footer__logo .brand-text {
  display: block;
}
.l-footer__logo .brand-text strong {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .04em;
  padding-bottom: .5rem;
  border-bottom: 2.5px solid var(--c-teal);
}
.l-footer__logo .brand-kana {
  display: inline-block;
  margin-left: .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-muted);
  vertical-align: middle;
}
.l-footer__logo .brand-text > span {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-muted);
  margin-top: .2rem;
}
.l-footer__logo .brand-mark {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--c-text-sub);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 900;
}
.l-footer__msg { font-size: 1.4rem; color: var(--c-muted); line-height: 1.9; margin-top: 1.2rem; }
.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  font-size: 1.4rem;
  font-weight: 700;
}
.l-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  font-size: 1.2rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
  padding-top: 2.4rem;
  margin-bottom: 2rem;
}
.l-footer__copyright {
  font-family: "Damion", cursive;
  font-size: 1.4rem;
  color: var(--c-muted);
  text-align: center;
}

/* ─── 23. レスポンシブ ───────────────────────────────────── */
@media screen and (max-width: 1110px) {
  .p-kv { height: 58rem; }
  .kv-en { font-size: 7rem; }
  .kv-inner { left: calc(50% - 44rem); }
  .kv-illust { width: 62rem; right: -12rem; }
  .kv-bg05 { width: 52rem; }
  .kv-bg04 { width: 30rem; }
  .p-about__inner { gap: 5rem; }
}

@media screen and (max-width: 900px) {
  .l-hamburger { display: flex; }
  .l-header__list, .l-header__cv { display: none; }
  .p-kv { height: calc(159vw - 8rem); }
  .kv-en { font-size: 10vw; margin-bottom: 4vw; }
  .kv-ja { font-size: 5.6vw; margin-bottom: 2vw; }
  .kv-lead { font-size: 2.5vw; display: none; }
  .kv-inner { left: 6rem; top: 48%; }
  .kv-bg05 { width: 70vw; }
  .kv-bg04 { right: -15vw; top: 78vw; width: 36.5vw; }
  .kv-bg03 { left: -14rem; bottom: -6vw; width: 52vw; }
  .kv-bg02 { left: -27rem; width: 42.5vw; }
  .kv-illust { width: 76vw; right: -8vw; top: -10vw; }
  .kv-actions { display: none; }
  .p-section { padding: 7rem 0; }
  .p-about__inner { grid-template-columns: 1fr; gap: 3.6rem; }
  .p-about__visual { order: 1; max-width: 36rem; margin: 0 auto; }
  .p-about__text   { order: 2; }
  .p-services__menu { grid-template-columns: 1fr 1fr; }
  .p-promise__grid { grid-template-columns: 1fr 1fr; }
  .p-problems__grid { grid-template-columns: 1fr 1fr; }
  .p-problems__card:nth-child(3n)  { border-right: 1px solid var(--c-border); }
  .p-problems__card:nth-child(2n)  { border-right: 0; }
  .p-problems__card:nth-last-child(-n+3) { border-bottom: 1px solid var(--c-border); }
  .p-problems__card:nth-last-child(-n+2) { border-bottom: 0; }
  .p-updates__inner { grid-template-columns: 1fr; gap: 3rem; }
  .p-testimonials__layout { grid-template-columns: 1fr; gap: 3.6rem; }
  .p-founder__inner { grid-template-columns: 1fr; gap: 3.2rem; padding: 3.2rem; }
  .founder-avatar-blob { max-width: 16rem; margin: 0 auto; }
  .l-footer__inner { grid-template-columns: 1fr; }
  .p-cta { padding: 6rem 3rem; border-radius: 1.8rem; }
  .option-grid-3 { grid-template-columns: 1fr; }
  .pricing-table th { font-size: 1.3rem; }
}

@media screen and (max-width: 768px) {
  .p-services__menu { grid-template-columns: 1fr; }
  .p-promise__grid  { grid-template-columns: 1fr; }
  .p-problems__grid { grid-template-columns: 1fr; }
  .p-problems__card:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .p-problems__card:last-child   { border-bottom: 0; }
  .option-grid-2 { grid-template-columns: 1fr; }
  .kv-en { font-size: 11.5vw; }
  .kv-inner { left: 4rem; top: 42%; }
  .wk-dual { height: 22rem; }
  .wk-pc { height: 18rem; }
  .wk-sp { width: 10rem; height: 21rem; }
  .p-pricing__block { padding: 2.6rem 2rem; }
  .p-pricing__recommend { padding: 3.8rem 2.4rem 2.8rem; }
}

@media screen and (max-width: 414px) {
  .kv-lead { font-size: 10px; }
  .kv-en { font-size: 13vw; }
  .wk-dual { height: 19rem; }
  .wk-pc { height: 16rem; }
  .wk-sp { width: 9rem; height: 18.5rem; }
}

/* ─── 24. SVGブロブ overflow:visible 一括修正 ───────────── */
/* SVG は デフォルト overflow:hidden → パスがviewBox外に出ると直線で切れる */
/* すべての装飾ブロブに visible を付与してクリップを防止 */
.s-deco { overflow: visible; }
.kv-bg .kv-bg__float svg,
.kv-bg .kv-bg__float .hand-blob { overflow: visible; }

/* ─── 25. ヘッダーロゴ（透過PNGを使うので blend-mode 不要） ── */
.header-logo-img {
  height: clamp(8.4rem, 4.2vw, 9.6rem);
  width: auto;
  display: block;
  mix-blend-mode: normal;
  flex-shrink: 0;
}

/* ─── 26. フッターロゴ画像 ─────────────────────────────── */
.footer-logo-img {
  height: clamp(7.2rem, 3.6vw, 8.4rem);
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* ─── 27. Works 自動スライド（CSS animation に切替） ──────── */
@keyframes worksScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(var(--works-loop-distance, 50%) * -1)); }
}
.p-works__scroll {
  overflow: hidden;
  padding: 2rem 0 4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.p-works__scroll::-webkit-scrollbar { display: none; }
.p-works__track {
  display: flex;
  gap: 4rem;
  padding: 1.2rem 5vw 2rem;
  width: max-content;
  --works-loop-distance: 50%;
  --works-loop-duration: 32s;
  animation: worksScroll var(--works-loop-duration) linear infinite;
  will-change: transform;
}
/* ホバー・タッチでも自動スクロールは止めない（実績帯の常時ループ） */

/* ─── 28. SP実サイトプレビュー（iframe・390px相当を縮小表示） ─ */
.wk-sp .wk-screen--live {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: #0a0a08;
  background-image: none;
  background-size: auto;
}
.wk-sp-live {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.wk-sp-live__frame {
  width: 390px;
  height: 844px;
  border: 0;
  transform: scale(0.268);
  transform-origin: top left;
  pointer-events: auto;
}
@media screen and (max-width: 768px) {
  .wk-sp-live__frame {
    transform: scale(0.238);
  }
}
@media screen and (max-width: 414px) {
  .wk-sp-live__frame {
    transform: scale(0.218);
  }
}
.wk-sp-live__open {
  position: absolute;
  right: 0.4rem;
  bottom: 2.2rem;
  left: 0.4rem;
  z-index: 2;
  display: block;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.35rem 0.4rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-text-sub);
  pointer-events: auto;
  opacity: 1 !important;
}
.wk-sp-live__open:hover {
  opacity: 0.88 !important;
}

/* ─── 29. CTA セクション（白地＋黒テキスト） ────────────── */
.p-cta {
  background: #fff;
  color: var(--c-text-sub);
  border: 2px solid var(--c-text-sub);
  border-radius: 2.8rem;
  margin: 4rem auto 8rem;
  max-width: min(94%, 128rem);
  padding: 8rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.p-cta .c-ttl-en { color: var(--c-teal); }
.p-cta .c-ttl    { color: var(--c-text-sub); }
.p-cta p         { color: var(--c-muted); font-size: 1.5rem; margin: 1.6rem 0 3.6rem; }
.p-cta .c-btn-blob {
  background: var(--c-text-sub);
  border-color: var(--c-text-sub);
  color: #fff;
}
.p-cta .c-btn-blob__blobs span { background: var(--c-teal); }
.p-cta .c-btn-blob:hover { color: var(--c-text-sub); }
/* CTA 装飾ブロブ */
.p-cta .cta-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  height: auto;
  animation: sDecoDrift 32s ease-in-out infinite alternate;
}
.p-cta > * { position: relative; z-index: 1; }

/* ─── 30. フッター内お問い合わせボタン — c-btn-blob の小型版 ── */
.l-footer__nav .l-footer__contact-btn.c-btn-blob {
  min-width: 14rem;
  height: 4rem;
  font-size: 1.3rem;
  padding: 0 1.8rem;
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: var(--c-text-sub);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.l-footer__nav .l-footer__contact-btn.c-btn-blob .c-btn-blob__blobs span { background: var(--c-text-sub); }
.l-footer__nav .l-footer__contact-btn.c-btn-blob:hover { color: #fff; border-color: var(--c-text-sub); }

/* ─── 31. コンタクトページ ──────────────────────────────── */
.p-contact-hero { padding: 6rem 0 3.6rem; }

.p-contact-line {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 3rem 3.2rem;
  margin-bottom: 3.2rem;
}
.p-contact-line__lead {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.6rem;
}
.p-contact-line__call {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.8;
}
.p-contact-line__call svg { flex-shrink: 0; margin-top: .2rem; }
.p-contact-line__call strong { display: block; }
.p-contact-line__call-sub { font-size: 1.3rem; color: var(--c-muted); }

.p-contact-form {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 3.6rem 3.2rem;
}
.p-contact-form h3 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .8rem;
}
.p-contact-form__lead {
  font-size: 1.4rem;
  color: var(--c-muted);
  line-height: 1.9;
  margin-bottom: 2.8rem;
}

.p-field { margin-bottom: 2rem; }
.p-field label {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .8rem;
}
.p-field .p-required {
  font-size: 1.1rem;
  color: #fff;
  background: var(--c-pink);
  border-radius: 4px;
  padding: .2rem .6rem;
  margin-left: .8rem;
  vertical-align: middle;
}
.p-field input,
.p-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 1rem;
  padding: 1.2rem 1.6rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  outline: none;
}
.p-field input:focus,
.p-field textarea:focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(47,205,215,.18);
}
.p-field textarea { resize: vertical; min-height: 14rem; }
.p-field--hint {
  font-size: 1.25rem;
  color: var(--c-muted);
  margin-top: .6rem;
  line-height: 1.7;
}
.p-field.hp-field { display: none; }

.p-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 3.2rem;
}

.p-contact-complete {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.p-contact-complete__msg {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 1.6rem;
}
.p-contact-complete__hint {
  font-size: 1.5rem;
  color: var(--c-muted);
  margin-bottom: 3.2rem;
}

@media (max-width: 680px) {
  .p-contact-form { padding: 2.4rem 1.8rem; }
  .p-contact-line { padding: 2.4rem 1.8rem; }
  .p-form-actions { flex-direction: column; }
  .p-form-actions .c-btn-blob { width: 100%; justify-content: center; }
}

/* ─── 30. 下層ページ共通レイアウト ──────────────────────── */

/* ページヒーロー */
.p-page-hero {
  padding: 7rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.p-page-hero__breadcrumb {
  font-size: 1.3rem;
  color: var(--c-muted);
  margin-bottom: 2rem;
}
.p-page-hero__breadcrumb a { color: var(--c-muted); }
.p-page-hero__breadcrumb a:hover { opacity: .7; }
.p-page-hero h1 {
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .1em;
  color: var(--c-text-sub);
  margin: 0 0 2rem;
}
.p-page-hero p {
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin: 0 0 1.2rem;
}
.p-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 3.6rem;
}

/* プロセス（ステップ）タイムライン */
.p-timeline {
  max-width: 90rem;
  margin: 0 auto;
  border-top: 1px solid var(--c-border);
}
.p-step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 2rem;
  align-items: start;
  padding: 3rem 0;
  border-bottom: 1px solid var(--c-border);
}
.p-step__num {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--c-text-sub);
  padding-top: .3rem;
}
.p-step__body {
  display: grid;
  grid-template-columns: clamp(14rem, 22%, 22rem) minmax(0, 1fr);
  gap: .6rem 2.8rem;
  align-items: start;
}
.p-step__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--c-text-sub);
  margin: 0;
}
.p-step__desc {
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin: 0;
}

/* カード（2列グリッド） */
.p-card-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.p-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 3rem 2.8rem;
}
.p-card__kicker {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.p-card h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--c-text-sub);
  margin: 0 0 1.6rem;
}
.p-card ul {
  display: grid;
  gap: .8rem;
}
.p-card ul li {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: .06em;
  color: var(--c-muted);
  padding-left: 1.4rem;
  position: relative;
}
.p-card ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-text-sub);
}

@media (max-width: 900px) {
  .p-step {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0 1.4rem;
    padding: 2.4rem 0;
  }
  .p-step__num { font-size: 1.6rem; }
  .p-step__body {
    grid-template-columns: 1fr;
    gap: .4rem;
  }
  .p-step__title { font-size: 1.8rem; }
  .p-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .p-page-hero { padding: 4rem 0 3rem; }
  .p-page-hero h1 { font-size: clamp(2.3rem, 7vw, 3.2rem); }
  .p-page-hero__actions { flex-direction: column; }
  .p-page-hero__actions .c-btn-blob { width: 100%; justify-content: center; }
  .p-step__desc { font-size: 1.5rem; line-height: 2; }
}

/* ─── 30. prefers-reduced-motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kv-bg02 .kv-bg__float,
  .kv-bg03 .kv-bg__float,
  .kv-bg04 .kv-bg__float,
  .kv-bg05 .kv-bg__float { animation: none !important; }
  .s-deco,
  .p-deco-bridge__blobs,
  .p-cta .cta-blob { animation: none !important; }
  .pricing-illust--pc, .pricing-illust--sp { animation: none !important; }
  .pricing-pack-illust { animation: none !important; }
  .p-works__track { animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}