/* ============================================================
   waco. — freelance web designer (botanical / refined)
   既存パレットを踏襲しつつ、余白・階層・装飾を再設計
   ============================================================ */

:root{
  /* base palette */
  --cream:     #f7f3ea;
  --cream-2:   #efe8d8;
  --paper:     #fbf8f1;
  --sand:      #e8ddc8;
  --sage:      #8b9a7b;
  --sage-soft: #b5c0a5;
  --sage-dark: #5e6d4d;
  --forest:    #2e3a26;
  --terra:     #a67b5b;
  --terra-dk:  #8a6243;
  --ink:       #22251f;
  --ink-soft:  #5e5a4f;
  --ink-mute:  #8b8877;
  --line:      #ddd6c3;
  --line-soft: #ece5d2;

  /* type */
  --font-serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-serif-jp: "Noto Serif JP", "Yu Mincho", serif;
  --font-sans-jp:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;

  /* misc */
  --radius:   14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(46, 58, 38, .05);
  --shadow:    0 16px 40px rgba(46, 58, 38, .08);
  --shadow-lg: 0 30px 80px rgba(46, 58, 38, .12);
  --container: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans-jp);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.8;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--sage-soft); color: var(--forest); }

.container{
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* subtle paper texture overlay (very light) */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(rgba(110,125,92,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .6;
  mix-blend-mode: multiply;
}

/* ============================================================
   Header
============================================================ */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(247, 243, 234, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(221, 214, 195, .5);
}
.header-inner{
  display:flex; justify-content:space-between; align-items:center;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--forest); }
.brand-mark{ display:inline-flex; }
.brand-text{
  font-family: var(--font-serif-en);
  font-size: 1.7rem;
  letter-spacing: .01em;
  font-weight: 500;
  line-height: 1;
}
.brand-text .dot{ color: var(--terra); }
.nav{ display:flex; align-items:center; gap: 30px; font-size:.88rem; }
.nav a{
  color: var(--ink-soft);
  transition: color .2s var(--ease);
  position: relative;
  padding: 4px 0;
  letter-spacing: .06em;
}
.nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--forest);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .35s var(--ease);
}
.nav a:not(.nav-cta):hover{ color: var(--forest); }
.nav a:not(.nav-cta):hover::after{ transform: scaleX(1); transform-origin: left center; }
.nav a.nav-cta{
  margin-left: 10px;
  padding: 9px 20px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  color: var(--forest) !important;
  font-size: .82rem;
  letter-spacing: .1em;
  transition: all .3s var(--ease);
}
.nav-cta:hover{
  background: var(--forest);
  color: var(--cream) !important;
}

/* Hamburger button */
.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  padding: 0; margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 120;
}
.nav-toggle-bar{
  display: block;
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.nav-toggle-bar:nth-child(1){ top: 14px; }
.nav-toggle-bar:nth-child(2){ top: 20px; }
.nav-toggle-bar:nth-child(3){ top: 26px; }
/* open state: morph into X */
body.is-nav-open .nav-toggle-bar:nth-child(1){ top: 20px; transform: rotate(45deg); }
body.is-nav-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
body.is-nav-open .nav-toggle-bar:nth-child(3){ top: 20px; transform: rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display: block; }

  /* モバイルでは nav をフルスクリーンのドロワーに変換 */
  .nav{
    position: fixed;
    top: 0; right: 0;
    width: min(82%, 320px);
    height: 100vh;
    background: var(--paper);
    box-shadow: -8px 0 30px rgba(46, 58, 38, .12);
    padding: 90px 28px 40px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    font-size: 1rem;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    z-index: 110;
    overflow-y: auto;
  }
  body.is-nav-open .nav{ transform: translateX(0); }
  /* ブラウザリサイズ中はドロワーのスライドアニメを一時停止（ちらつき防止） */
  body.is-resizing .nav{ transition: none !important; }

  /* ドロワー内の各リンク */
  .nav a{
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-soft);
    letter-spacing: .08em;
  }
  .nav a:not(.nav-cta)::after{ display: none; }
  .nav a.nav-cta{
    margin: 14px 0 0;
    text-align: center;
    padding: 14px 20px;
    border-radius: 999px;
  }

  /* 背景オーバーレイ（常に存在させて opacity だけ transition する） */
  body::before{
    content: "";
    position: fixed; inset: 0;
    background: rgba(34, 37, 31, .38);
    z-index: 105;
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s var(--ease);
  }
  body.is-nav-open::before{
    opacity: 1;
    pointer-events: auto;
  }
  body.is-nav-open{ overflow: hidden; }
  /* メニュー展開時はヘッダーを最前面に。背景は変えず、再描画のちらつきを防ぐ */
  body.is-nav-open .site-header{ z-index: 115; }
}

/* ============================================================
   Hero — reimagined with asymmetric editorial feel
============================================================ */
.hero{
  position: relative;
  padding: 70px 0 140px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(181, 192, 165, .28), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(166, 123, 91, .12), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream-2) 100%);
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
}
/* ヒーロー全面にプロフィール写真を配置（ふわっとフェードイン） */
.hero-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/hero-illust.jpg");
  background-repeat: no-repeat;
  /* PC・モバイル共通の画像。125% で人物をアップ気味に */
  background-position: right bottom;
  background-size: 125%;
  opacity: .42;
  filter: grayscale(.25) contrast(1.02) brightness(1.02);
  /* 一連の演出の最後に背景がふわっと浮かび上がる */
  animation: heroBgFocusIn 2s cubic-bezier(.22, .68, .35, 1) 5s both;
}
@keyframes heroBgFocusIn{
  from {
    opacity: 0;
    filter: grayscale(.25) contrast(1.02) brightness(1.02) blur(10px);
  }
  to {
    opacity: .42;
    filter: grayscale(.25) contrast(1.02) brightness(1.02) blur(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg::before{ animation: none; }
}
/* モバイルでは「上に拡張済みの専用画像」を使い、自然に上部にスペースができる構図に */
/* タブレット (641-900) のヒーロー背景：人物を右端に寄せ、下にシフト */
@media (min-width: 641px) and (max-width: 900px){
  .hero-bg::before{
    background-size: auto 175%;
    /* right -200px で人物を右端に、bottom -200px で 200px 下にシフト */
    background-position: right -200px bottom -200px;
  }
}
@media (max-width: 640px){
  .hero-bg::before{
    inset: 0;
    /* PC と同じ画像（base から継承）。サイズだけモバイル用に大きめに */
    background-size: auto 125%;
    /* X: 69%（71% → 約 20px 右）／Y: 88%（100% → 約 20px 下） */
    background-position: 69% 88%;
  }
}

/* モバイル時のみ表示する改行 */
.br-mobile{ display: none; }
@media (max-width: 640px){
  .br-mobile{ display: inline; }
}
.hero-bg .leaf{
  position:absolute;
  /* 背景と同じタイミングでふわっとフェードイン → そのあと sway を継続 */
  animation:
    heroLeafIn 2s ease-out 5s backwards,
    sway 14s ease-in-out infinite;
  transform-origin: top center;
  z-index: 1; /* 背面のプロフィール写真より前面に */
  /* 白いソフトグローで写真の上でも輪郭がしっかり見える */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9))
          drop-shadow(0 0 4px rgba(255, 255, 255, .55));
}
@keyframes heroLeafIn{
  from { opacity: 0; }
}
/* 5枚のうち2枚を白系ストロークに切り替えて、色の変化を出す */
.hero-bg .leaf-3 path,
.hero-bg .leaf-5 path{
  stroke: #fbf8f1; /* paper のクリーム白 */
}
@keyframes sway{
  0%,100%{ transform: rotate(var(--rot, 0deg)) translateY(0); }
  50%{ transform: rotate(calc(var(--rot, 0deg) + 3deg)) translateY(-6px); }
}
/* 5枚の葉：四隅 + 下中央右。それぞれ十分な距離を取り重なりを回避 */
.leaf-1{ --rot: 20deg;  width: 300px; top: -130px;   right: -200px; opacity: .78; }
.leaf-2{ --rot: -30deg; width: 260px; bottom: -60px; left: -100px;  opacity: .72; animation-delay: -4s; }
.leaf-3{ --rot: 55deg;  width: 160px; top: 38%;     right: -110px; opacity: .62; animation-delay: -8s; }
.leaf-4{ --rot: -55deg; width: 140px; top: -150px;  left: -80px;    opacity: .62; animation-delay: -6s; }
.leaf-5{ --rot: 35deg;  width: 110px; bottom: 60px; right: 60%;     opacity: .55; animation-delay: -10s; }
@media (max-width: 720px){
  /* モバイルでは狭いため2枚に絞る */
  .leaf-3, .leaf-4, .leaf-5{ display: none; }
  .leaf-1{ width: 160px; top: -170px; right: -80px; }
  .leaf-2{ width: 200px; bottom: -30px; left: -60px; }
}

.hero-inner{
  position:relative;
  z-index: 2;
}
.hero-copy{
  max-width: 620px;
  margin: 0;
  text-align: left;
}

.hero-meta{
  display:flex; align-items:center; justify-content: flex-start; gap: 14px;
  margin-bottom: 26px;
}
.hero-meta .dash{
  flex: 0 0 48px; height: 1px; background: var(--terra); opacity:.7;
}
.hero-meta .eyebrow{ margin: 0; }

.eyebrow{
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--terra);
  letter-spacing: .2em;
  font-size: .88rem;
  margin: 0 0 12px;
  text-transform: none;
}
.eyebrow-en{
  font-family: var(--font-serif-en);
  font-style: normal;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--terra);
}

.hero-title{
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.5;
  color: var(--forest);
  margin: 0 0 30px;
  letter-spacing: .04em;
}
/* タイトルを 1 行ずつ右側からスライドイン（さらにゆったり） */
.hero-title .line{
  display: block;
  animation: heroTitleSlide 1.8s cubic-bezier(.22, .68, .35, 1) both;
}
.hero-title .line:nth-child(1){ animation-delay: 1.9s; }
.hero-title .line:nth-child(2){ animation-delay: 2.6s; }
.hero-title .line:nth-child(3){ animation-delay: 3.3s; }
@keyframes heroTitleSlide{
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ヒーロー：背景・タイトル以外の文字を最初にふわっと表示（0.5倍速） */
.hero-meta,
.hero-cta,
.hero-signals{
  animation: heroTextFadeUp 1.2s cubic-bezier(.22, .68, .35, 1) .5s both;
}
@keyframes heroTextFadeUp{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-title .line,
  .hero-meta,
  .hero-cta,
  .hero-signals{ animation: none; }
}
.hero-title em{
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
  padding: 0 .08em;
}
/* 日本語ハイライト：色だけ変えて、斜体や font-family は適用しない */
.hero-title .hero-accent{
  color: var(--terra);
  font-weight: 500;
}
.hero-title .accent-underline{
  background-image: linear-gradient(transparent 72%, rgba(166, 123, 91, .25) 72%);
  padding: 0 .1em;
}
.hero-lead{
  display: none;
  color: var(--ink-soft);
  margin: 0 0 36px;
  font-size: 1rem;
  max-width: 34em;
  line-height: 2;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content: flex-start; }
/* タブレットの狭いゾーン（〜770px）以下ではボタンを縦に 2 行で並べる */
@media (max-width: 770px){
  .hero-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}
.hero-signals{
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 520px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-signal{
  text-align: center;
}
.hero-signal .num{
  display:block;
  font-family: var(--font-serif-en);
  font-size: 1.8rem;
  color: var(--forest);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.hero-signal .num sup{ font-size: .6em; color: var(--terra); margin-left: 2px; }
.hero-signal .label{
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .12em;
}

/* ============================================================
   Buttons
============================================================ */
.btn{
  display: inline-flex;
  align-items: center; gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size:.92rem;
  letter-spacing:.06em;
  font-family: inherit;
  transition: all .3s var(--ease);
  border: 1px solid transparent;
  cursor:pointer;
  position: relative;
}
.btn .arrow{
  display:inline-block;
  transition: transform .3s var(--ease);
}
.btn:hover .arrow{ transform: translateX(4px); }
.btn-primary{
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.btn-primary:hover{
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn-ghost{
  background: transparent;
  border-color: var(--forest);
  color: var(--forest);
}
.btn-ghost:hover{
  background: var(--forest);
  color: var(--cream);
}
.btn-text{
  background: transparent;
  border: none;
  color: var(--forest);
  padding: 10px 0;
  border-bottom: 1px solid var(--forest);
  border-radius: 0;
  letter-spacing: .12em;
  font-size: .82rem;
}
.btn-text:hover{ color: var(--terra); border-color: var(--terra); }
.btn-block{ width:100%; padding: 17px; justify-content: center; white-space: nowrap; }

/* ヒーローのボタンは黒すぎない、少し明るめの暗緑に */
.hero-cta .btn-primary{
  background: #4d5d40;
  border-color: #4d5d40;
}
.hero-cta .btn-primary:hover{
  background: var(--sage-dark);
  border-color: var(--sage-dark);
}
.hero-cta .btn-ghost{
  border-color: #4d5d40;
  color: #4d5d40;
}
.hero-cta .btn-ghost:hover{
  background: #4d5d40;
  color: var(--cream);
}
/* タブレット〜モバイル（〜900px）でヒーローボタンを少し小さく */
@media (max-width: 900px){
  .hero-cta .btn{
    padding: 12px 22px;
    font-size: .82rem;
    gap: 8px;
  }
}

/* ============================================================
   Section common
============================================================ */
.section{ padding: 130px 0; position:relative; }
.section-head{ text-align:center; max-width: 760px; margin: 0 auto 70px; }
.section-num{
  display:block;
  font-family: var(--font-serif-en);
  font-size: .85rem;
  letter-spacing: .4em;
  color: var(--terra);
  margin-bottom: 16px;
}
.section-head h2{
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--forest);
  margin: 4px 0 22px;
  letter-spacing: .08em;
  line-height: 1.5;
}
.section-head h2 .en{
  display:block;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: .55em;
  color: var(--terra);
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-weight: 400;
}
.section-lead{
  color: var(--ink-soft);
  margin:0;
  font-size: .95rem;
  line-height: 2;
}

/* decorative divider */
.divider-leaf{
  display:flex; justify-content:center;
  margin: 0 auto 24px;
  color: var(--sage);
}

/* ============================================================
   Services
============================================================ */
.section-services{ background: var(--cream); }
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px){ .cards{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.card{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 42px 34px 36px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display: flex; flex-direction: column;
}
.card::before{
  content:"";
  position:absolute; top: 0; left: 34px; right: 34px;
  height: 2px;
  background: var(--line-soft);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--sage-soft);
}
.card:hover::before{ transform: scaleX(1); }
.card-icon{
  color: var(--sage-dark);
  margin-bottom: 22px;
  width: 56px; height: 56px;
  display:flex; align-items:center; justify-content:center;
  background: var(--line-soft);
  border-radius: 50%;
}
.card-tag{
  font-family: var(--font-serif-en);
  font-size: .72rem;
  letter-spacing: .26em;
  color: var(--terra);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card h3{
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 1.22rem;
  color: var(--forest);
  margin: 0 0 14px;
  letter-spacing: .04em;
}
.card-desc{ color: var(--ink-soft); font-size:.92rem; margin: 0 0 22px; line-height: 1.9; }
.card-list{
  list-style:none; padding:0; margin: 0 0 28px;
  font-size: .86rem; color: var(--ink-soft);
  flex: 1;
}
.card-list li{
  position:relative; padding-left: 22px; margin-bottom: 8px;
  line-height: 1.7;
}
.card-list li::before{
  content:""; position:absolute; left:0; top:.65em;
  width: 12px; height:1px;
  background: var(--sage-dark);
}
.card-price{
  font-family: var(--font-serif-en);
  font-size: 1rem;
  color: var(--ink-soft);
  margin:0; padding-top: 20px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: baseline; gap: 6px;
}
.card-price .from{
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.card-price .amount{
  font-size: 2rem;
  font-weight: 500;
  color: var(--forest);
  letter-spacing: .02em;
}
.card-price .unit{
  font-size: .85rem;
  color: var(--ink-mute);
  margin-left: auto;
}
.card-highlight{
  background: linear-gradient(180deg, var(--paper) 0%, #f0e9d7 100%);
  border-color: var(--terra);
  box-shadow: var(--shadow-sm);
}
.card-highlight .card-icon{
  background: rgba(166, 123, 91, .12);
  color: var(--terra-dk);
}
.card-badge{
  position:absolute; top: -12px; right: 28px;
  background: var(--terra); color: var(--paper);
  padding: 5px 16px; border-radius: 999px;
  font-size: .7rem; letter-spacing: .18em;
  box-shadow: 0 6px 16px rgba(138, 98, 67, .25);
}

/* ============================================================
   Works — editorial gallery
============================================================ */
.section-works{
  background: var(--cream-2);
  position: relative;
}
.section-works::after{
  content:"";
  position:absolute;
  top: 10%; left: -60px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--sage-soft) 0%, transparent 70%);
  opacity: .3;
  pointer-events:none;
}

.works-filter{
  display:flex; justify-content:center; gap: 8px; flex-wrap:wrap;
  margin-bottom: 48px;
}
.works-filter button{
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.works-filter button:hover{ border-color: var(--forest); color: var(--forest); }
.works-filter button.is-active{
  background: var(--forest); color: var(--cream); border-color: var(--forest);
}

.works-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.work-card{
  display:block;
  background: var(--paper);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.work-card:focus-visible{
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

@media (max-width: 960px){
  .works-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .works-grid{ grid-template-columns: 1fr; }
}

.work-card:not([aria-disabled="true"]):hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 38px -14px rgba(46,58,38,.28);
  border-color: var(--terra);
}
.work-card:not([aria-disabled="true"]):hover .work-thumb::before{
  opacity: 1;
}
.work-thumb::before{
  content: "View →";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-serif-en);
  font-size: .82rem;
  letter-spacing: .2em;
  color: var(--cream);
  background: rgba(30,40,24,.55);
  padding: 10px 22px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}

/* Disabled / placeholder card (e.g. banner card) */
.work-card[aria-disabled="true"]{
  cursor: default;
  opacity: .72;
}
.work-card[aria-disabled="true"] .work-thumb::before{
  content: "Coming soon";
  opacity: 1;
  background: rgba(90,80,70,.55);
}
.work-thumb{
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.work-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgba(255,255,255,.06) 22px 23px
    );
  pointer-events: none;
}
.work-thumb-label{
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: var(--font-serif-en);
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  background: rgba(46,58,38,.4);
  padding: 4px 10px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.work-meta{ padding: 22px 24px 26px; }
.tag{
  display:inline-block;
  font-family: var(--font-serif-en);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--terra);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.work-meta h3{
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--forest);
  margin: 0 0 6px;
  letter-spacing: .03em;
  line-height: 1.5;
}
.work-meta p{ margin: 0; color: var(--ink-soft); font-size:.84rem; }
.work-meta .arrow{
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-serif-en);
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--sage-dark);
  transition: transform .3s var(--ease);
}
.work-card:hover .work-meta .arrow{ transform: translateX(4px); color: var(--terra); }

.works-footer{
  text-align:center; margin-top: 54px;
}

/* ============================================================
   Process — vertical timeline
============================================================ */
.section-process{ background: var(--cream); }
.steps{
  list-style:none; padding:0; margin:0;
  display: grid; gap: 24px;
  max-width: 860px; margin-inline:auto;
  position: relative;
}
.steps::before{
  content:"";
  position: absolute;
  left: 48px; top: 24px; bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sage-soft) 8%, var(--sage-soft) 92%, transparent);
}
@media (max-width: 600px){ .steps::before{ left: 32px; } }

.step{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px 28px 110px;
  position:relative;
  transition: all .3s var(--ease);
}
.step:hover{
  border-color: var(--sage-soft);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}
.step-num{
  position:absolute; left: 30px; top: 26px;
  font-family: var(--font-serif-en);
  font-size: 2.2rem;
  color: var(--terra);
  letter-spacing: .02em;
  font-style: italic;
  background: var(--paper);
  padding: 4px 8px;
  z-index: 1;
}
.step-duration{
  display:inline-block;
  font-family: var(--font-serif-en);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--sage-dark);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.step h3{
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--forest);
  margin: 0 0 8px;
  letter-spacing: .04em;
}
.step p{ margin:0; color: var(--ink-soft); font-size:.9rem; line-height: 1.9; }

@media (max-width: 600px){
  .step{ padding: 24px 22px 24px 74px; }
  .step-num{ left: 14px; font-size: 1.7rem; }
}

/* ============================================================
   Pricing — visual cards with transparency
============================================================ */
.section-pricing{
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 960px){ .pricing-grid{ grid-template-columns: repeat(2, 1fr); max-width: 760px; } }
@media (max-width: 640px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 480px; } }

.price-card{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 42px 34px 38px;
  display: flex; flex-direction: column;
  transition: all .4s var(--ease);
}
.price-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.is-featured{
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
  box-shadow: var(--shadow-lg);
}
.price-card.is-featured .price-tag{ color: var(--sage-soft); }
.price-card.is-featured .price-amount{ color: var(--cream); }
.price-card.is-featured .price-desc,
.price-card.is-featured .price-includes li{ color: rgba(247, 243, 234, .78); }
.price-card.is-featured .price-includes li::before{ background: var(--sage-soft); }
.price-card.is-featured .price-divider{ border-color: rgba(247, 243, 234, .18); }
.price-card.is-featured .price-unit{ color: rgba(247, 243, 234, .6); }

.price-tag{
  font-family: var(--font-serif-en);
  font-size: .78rem;
  letter-spacing: .28em;
  color: var(--terra);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.price-title{
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 6px;
  letter-spacing: .04em;
}
.price-desc{
  font-size: .86rem;
  color: var(--ink-soft);
  margin: 0 0 26px;
  line-height: 1.8;
}
.price-display{
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 22px;
}
.price-display .price-suffix{
  font-family: var(--font-serif-jp);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--forest);
  letter-spacing: 0;
  margin-left: 2px;
}
.price-card.is-featured .price-suffix{ color: var(--cream); }
.price-amount{
  font-family: var(--font-serif-en);
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--forest);
  line-height: 1;
  letter-spacing: .01em;
}
.price-amount .yen{ font-size: .55em; margin-right: 4px; vertical-align: .22em; color: var(--terra); }
.price-unit{
  font-family: var(--font-serif-en);
  font-size: .85rem;
  color: var(--ink-mute);
  letter-spacing: .1em;
  margin-left: 4px;
}
.price-divider{
  border: none;
  border-top: 1px dashed var(--line);
  margin: 8px 0 22px;
}
.price-includes{
  list-style: none; padding: 0; margin: 0 0 28px;
  font-size: .88rem;
  flex: 1;
}
.price-includes li{
  padding: 8px 0 8px 26px;
  position: relative;
  color: var(--ink-soft);
  line-height: 1.6;
}
.price-includes li::before{
  content:"";
  position:absolute; left:0; top: 14px;
  width: 14px; height: 1px;
  background: var(--sage-dark);
}
.price-includes li.muted{ opacity: .45; text-decoration: line-through; }
.price-featured-badge{
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--terra);
  color: var(--paper);
  padding: 6px 20px;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(138, 98, 67, .3);
}

/* add-ons row */
.addons{
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 1060px;
  margin-inline: auto;
}
/* タブレット帯：ラベルを上段フル幅・下段にaddon 3つ横並び */
@media (max-width: 960px){
  .addons{ grid-template-columns: 1fr 1fr 1fr; }
  .addons-label{ grid-column: 1 / -1; }
  .addons > *{ border-right: 1px solid var(--line); }
  .addons > *:last-child{ border-right: none; }
}
@media (max-width: 720px){
  .addons{ grid-template-columns: 1fr; }
  .addons > *{ border-right: none !important; border-bottom: 1px solid var(--line); }
  .addons > *:last-child{ border-bottom: none; }
}
.addons-label{
  padding: 24px 30px;
  background: var(--forest);
  color: var(--cream);
  display: flex; align-items: center; gap: 14px;
}
.addons-label .en{
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--sage-soft);
  font-size: 1.1rem;
}
.addon{
  padding: 22px 26px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.addon:last-child{ border-right: none; }
.addon .addon-name{
  font-size: .88rem;
  color: var(--ink);
  font-weight: 500;
}
.addon .addon-price{
  font-family: var(--font-serif-en);
  color: var(--terra);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.addon .addon-note{
  font-size: .76rem;
  color: var(--ink-mute);
}

.pricing-note{
  text-align:center; color: var(--ink-soft);
  font-size:.84rem; margin-top: 34px;
  max-width: 640px; margin-inline: auto;
  line-height: 1.9;
}

/* FAQ */
.faq{
  max-width: 760px; margin: 80px auto 0;
  display: grid; gap: 14px;
}
.faq-head{
  text-align:center;
  font-family: var(--font-serif-jp);
  color: var(--forest);
  font-size: 1.2rem;
  margin: 0 0 26px;
  letter-spacing: .06em;
}
.faq-item{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s;
}
.faq-item[open]{ border-color: var(--sage-soft); }
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 26px;
  position: relative;
  font-size: .94rem;
  color: var(--forest);
  font-weight: 500;
  letter-spacing: .04em;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::before{
  content: "Q";
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--terra);
  margin-right: 14px;
  font-size: 1.1rem;
}
.faq-item summary::after{
  content: "";
  position: absolute;
  right: 26px; top: 50%;
  width: 14px; height: 1px;
  background: var(--forest);
  transform: translateY(-50%);
  transition: transform .3s var(--ease);
}
.faq-item summary::marker{ display: none; }
.faq-wrap::after{ display:none; }
.faq-item[open] summary::after{ transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-body{
  padding: 0 26px 22px 56px;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.9;
}
.faq-body::before{
  content: "A.";
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--sage-dark);
  margin-right: 10px;
  font-size: 1rem;
}

/* ============================================================
   About
============================================================ */
.section-about{ background: var(--cream); }
.about-inner{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1060px;
  margin-inline: auto;
}
@media (max-width: 880px){
  .about-inner{ grid-template-columns: 1fr; gap: 40px; }
  .about-visual{ max-width: 320px; margin-inline: auto; }
}
.about-visual{ position: relative; }
.about-visual::before{
  content:"";
  position:absolute;
  top: 20px; left: 20px;
  width: 100%; height: 100%;
  border: 1px solid var(--terra);
  border-radius: var(--radius);
  z-index: 0;
}
.about-frame{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  z-index: 1;
}
.about-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像をさらに右にずらして表示（左寄りを見せる＝右がトリミングされる） */
  object-position: 2% 28%;
  display: block;
}
.about-text h2{
  font-family: var(--font-serif-jp);
  font-weight: 400;
  color: var(--forest);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 4px 0 22px; /* 他セクション（.section-head h2）と同じリズム */
  letter-spacing: .06em;
  line-height: 1.5;
}
.about-text .en-label{
  /* 他セクションの .en と同じ見た目に揃える */
  display: block;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: .55em;
  color: var(--terra);
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-weight: 400;
}
.about-text p{ color: var(--ink-soft); margin: 0 0 16px; font-size: .95rem; }
.about-sign{
  margin-top: 24px;
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--sage-dark);
  font-size: 1.3rem;
}
.about-skills{
  list-style: none; padding: 24px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 28px;
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  font-size:.88rem;
  color: var(--ink);
}
@media (max-width: 520px){ .about-skills{ grid-template-columns: 1fr; } }
.about-skills li{
  padding-left: 22px; position:relative;
  line-height: 1.6;
}
.about-skills li::before{
  content:"✦"; position:absolute; left:0; color: var(--terra); top: 2px;
}

/* ============================================================
   Contact — warm invitation
============================================================ */
.section-contact{
  background:
    radial-gradient(ellipse at 10% 20%, rgba(181, 192, 165, .3), transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(166, 123, 91, .18), transparent 55%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--sand) 100%);
  position: relative;
  overflow: hidden;
}
.contact-inner{ max-width: 960px; margin-inline: auto; position: relative; z-index: 2; }
.contact-layout{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 880px){ .contact-layout{ grid-template-columns: 1fr; gap: 30px; } }

.contact-side h3{
  font-family: var(--font-serif-jp);
  color: var(--forest);
  font-size: 1.25rem;
  margin: 0 0 14px;
  letter-spacing: .06em;
  line-height: 1.6;
}
.contact-side p{
  color: var(--ink-soft);
  font-size: .92rem;
  margin: 0 0 28px;
  line-height: 1.9;
}
/* フォーム一本化のご案内ブロック */
.contact-note{
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.9;
}
.contact-note p{
  margin: 0 0 10px;
}
.contact-note p:last-child{ margin-bottom: 0; }
.contact-note strong{ color: var(--forest); font-weight: 500; }
.contact-note-sub{
  font-size: .8rem;
  color: var(--ink-mute);
  margin-top: 6px !important;
}

.contact-form{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 42px 38px;
  display: grid; gap: 20px;
  box-shadow: var(--shadow);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
.contact-form label{
  display:block;
  font-size:.78rem;
  color: var(--ink-soft);
  letter-spacing: .14em;
  font-family: var(--font-serif-en);
  text-transform: uppercase;
}
.contact-form label .jp{
  font-family: var(--font-sans-jp);
  letter-spacing: .04em;
  text-transform: none;
  font-size: .88rem;
  color: var(--ink);
  margin-right: 6px;
}
.contact-form label span.req{ color: var(--terra); margin-left: 4px; }
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  font: inherit;
  font-family: var(--font-sans-jp);
  font-size: .94rem;
  color: var(--ink);
  transition: all .25s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--sage-dark);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(139, 154, 123, .15);
}
.contact-form textarea{ resize: vertical; min-height: 140px; }
.contact-budget{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.contact-budget label{
  margin: 0;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  text-align: center;
  cursor: pointer;
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: none;
  font-family: var(--font-sans-jp);
  transition: all .2s var(--ease);
}
.contact-budget input{ display: none; }
.contact-budget input:checked + label,
.contact-budget label:has(input:checked){
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.contact-budget label:hover{ border-color: var(--sage-dark); }
/* 「まだ決まっていない」だけ文字を少し小さめに */
.contact-budget label.budget-undecided{ font-size: .72rem; letter-spacing: .02em; }

/* ============================================================
   Sticky CTA (mobile-friendly quick jump)
============================================================ */
.sticky-cta{
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all .4s var(--ease);
}
.sticky-cta.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.sticky-cta a{
  background: var(--forest);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .08em;
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .3s var(--ease);
}
.sticky-cta a:hover{ background: var(--sage-dark); transform: translateY(-2px); }

/* ============================================================
   Footer
============================================================ */
.site-footer{
  background: var(--forest);
  color: #cfc8b3;
  padding: 80px 0 36px;
  position: relative;
}
.footer-inner{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  text-align:left;
}
@media (max-width: 760px){
  .footer-inner{ grid-template-columns: 1fr; text-align: center; gap: 36px; }
}
.footer-brand .brand-text{ color: var(--cream); font-size: 1.9rem; }
.footer-brand .brand-text .dot{ color: var(--terra); }
.footer-brand p{ margin: 10px 0 0; font-size:.88rem; opacity:.72; line-height: 1.9; max-width: 24em; }
.footer-heading{
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--sage-soft);
  font-size: .95rem;
  letter-spacing: .16em;
  margin: 0 0 18px;
}
.footer-nav,
.footer-contact{
  display: flex; flex-direction: column; gap: 10px;
  font-size: .88rem;
}
.footer-nav a{ color: #cfc8b3; transition: color .2s; letter-spacing: .04em; }
.footer-nav a:hover{ color: var(--cream); }
.footer-contact li{ list-style: none; line-height: 1.8; }
.footer-contact a:hover{ color: var(--cream); }
.footer-bottom{
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid rgba(207, 200, 179, .14);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 760px){ .footer-bottom{ justify-content: center; text-align: center; } }
.copyright{
  font-family: var(--font-serif-en);
  font-size:.78rem; letter-spacing:.14em;
  margin:0; opacity:.6;
}
.footer-small{
  font-size: .76rem;
  color: rgba(207, 200, 179, .6);
  letter-spacing: .08em;
}

/* ============================================================
   Tweaks panel
============================================================ */
.tweaks-panel{
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
  font-size: .86rem;
  width: 260px;
  display: none;
}
.tweaks-panel.is-open{ display: block; }
.tweaks-panel h4{
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--forest);
  margin: 0 0 14px;
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.tweaks-row{
  display:flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  gap: 10px;
}
.tweaks-row:first-of-type{ border-top: none; }
.tweaks-row label{
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.tweaks-row .swatches{ display:flex; gap: 6px; }
.tweaks-row .swatches button{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform .2s;
}
.tweaks-row .swatches button:hover{ transform: scale(1.1); }
.tweaks-row .swatches button.is-active{
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.tweaks-row select{
  font: inherit;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: .82rem;
  color: var(--ink);
}

/* reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }


/* ============================================================
   Mobile fixes（≤ 640px）
   PC表示の値は変更しない。モバイル表示のみ上書き。
============================================================ */
@media (max-width: 640px){

  /* --- 全体：セクション頭の余白を圧縮 --- */
  .section{ padding: 70px 0; }
  .hero{ padding: 44px 0 60px; }

  /* --- Hero タイトル：キャッチコピーを1行に収める --- */
  .hero-title{
    font-size: 1.55rem;
    line-height: 1.7;
    letter-spacing: .02em;
    margin-bottom: 24px;
  }
  .hero-title em{ padding: 0 .04em; }

  /* --- Hero リード文：モバイルでは左揃え・さらに小さく --- */
  .hero-lead{
    text-align: left;
    font-size: .82rem;
    line-height: 1.9;
    max-width: 100%;
    margin: 0 0 28px;
  }

  /* --- 全セクションのリード文のみ左揃え（ナンバー/英語表記/h2 は中央のまま） --- */
  .section-lead{ text-align: left; }

  /* --- Services 等の card-icon：上下空白を圧縮 --- */
  .card-icon{
    margin-top: -4px;
    margin-bottom: 12px;
  }

  /* --- Hero meta（est.ラベル）も幅に合わせて縮小 --- */
  .hero-meta{ gap: 10px; margin-bottom: 20px; }
  .hero-meta .dash{ flex-basis: 28px; }
  .hero-meta .eyebrow-en{ font-size: .68rem; letter-spacing: .2em; }

  /* --- Hero signals：ラベル崩れ解消（num を縮小） --- */
  .hero-signals{
    gap: 8px;
    margin-top: 36px;
    padding-top: 20px;
    max-width: 100%;
  }
  .hero-signal .num{
    font-size: 1rem;
    letter-spacing: 0;
  }
  .hero-signal .num sup{ font-size: .55em; }
  .hero-signal .label{
    font-size: .66rem;
    letter-spacing: .06em;
    line-height: 1.5;
  }

  /* --- Works filter：1列に収まるように --- */
  .works-filter{
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 36px;
  }
  .works-filter button{
    padding: 7px 12px;
    font-size: .74rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  /* --- Pricing note：左揃え --- */
  .pricing-note{
    text-align: left;
    max-width: 100%;
    margin-inline: 0;
    font-size: .82rem;
  }

  /* --- About プロフィール画像：モバイル時は小さく --- */
  .about-visual{ max-width: 220px; }

  /* --- About：モバイル時のみ、見出し部だけ中央・本文は左寄せ --- */
  .about-text{ text-align: center; }         /* section-num / h2 / en-label を中央に */
  .about-text h2{ font-size: 1.4rem; line-height: 1.5; }
  .about-text p{ text-align: left; }          /* 本文段落は左寄せに戻す */
  .about-skills{ text-align: left; }          /* スキル箇条書きも左寄せ */
}

/* ============================================================
   Work Detail Pages — /works/*.html
   実績詳細ページ共通スタイル（案A：個別HTMLページ）
============================================================ */
.work-detail{
  background: var(--cream);
  padding-bottom: 100px;
}

/* Hero section of detail page */
.work-hero{
  padding: 60px 0 20px;
  position: relative;
  overflow: hidden;
}
.work-hero::before,
.work-hero::after{
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(139, 154, 123, .18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.work-hero::before{ top: -60px; left: -80px; }
.work-hero::after{
  bottom: -60px; right: -80px;
  background: radial-gradient(circle at 70% 70%, rgba(196, 118, 74, .14), transparent 60%);
}
/* 詳細ページ右上の葉っぱ装飾（PC のみ・文字に被らない位置） */
.work-hero-leaves{
  position: absolute;
  top: 0; right: 0;
  width: 280px; height: 360px;
  pointer-events: none;
  z-index: 0;
}
.work-hero .container{ position: relative; z-index: 1; }
.work-hero-leaves .leaf{
  position: absolute;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9))
          drop-shadow(0 0 4px rgba(255, 255, 255, .55));
  animation: sway 14s ease-in-out infinite;
  transform-origin: top center;
}
.work-hero-leaves .leaf-1{
  --rot: 25deg;
  width: 200px; top: -90px; right: -30px;
  opacity: .55;
}
.work-hero-leaves .leaf-2{
  --rot: 60deg;
  width: 140px; top: 60px; right: -50px;
  opacity: .42;
  animation-delay: -8s;
}
@media (max-width: 900px){
  .work-hero-leaves{ display: none; }
}

/* Breadcrumbs */
.breadcrumbs{
  font-size: .8rem;
  color: var(--ink-mute);
  margin-bottom: 34px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-serif-en);
  letter-spacing: .04em;
}
.breadcrumbs a{
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.breadcrumbs a:hover{ color: var(--forest); }
.breadcrumbs .sep{
  color: var(--sage-soft);
  font-style: italic;
}
.breadcrumbs .current{ color: var(--forest); font-weight: 500; }

/* Work head (category + title) */
.work-hero-head{
  max-width: 840px;
}
.work-category{
  display: inline-block;
  padding: 4px 14px;
  background: var(--terra);
  color: var(--cream);
  font-size: .7rem;
  letter-spacing: .14em;
  font-family: var(--font-serif-en);
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 22px;
}
.work-title{
  font-family: var(--font-serif-jp);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--forest);
  margin: 0 0 16px;
  letter-spacing: .02em;
}
.work-title .en{
  display: block;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: .5em;
  color: var(--terra);
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-weight: 400;
}
.work-lead{
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.9;
  max-width: 640px;
}

/* Main visual mockup */
.work-visual{
  padding: 40px 0 10px;
}
.work-mockup{
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(46, 58, 38, .22);
}
.work-mockup-label{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-serif-en);
  font-style: italic;
  letter-spacing: .16em;
  font-size: 1.4rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
/* スクリーンリーダー専用：視覚的には非表示・読み上げのみ */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Live demo CTA (under mockup) */
.work-demo-cta{
  margin-top: 22px;
  text-align: center;
}
.work-demo-cta .btn{
  min-width: 240px;
  justify-content: center;
}
.work-demo-cta .btn .arrow{
  font-size: .95em;
  display: inline-block;
  transition: transform .3s var(--ease);
}
.work-demo-cta .btn:hover .arrow{
  transform: translate(3px, -3px);
}
.work-demo-note{
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
}

/* Body: 2-column layout (article + sticky meta card) */
.work-body{
  padding: 80px 0 60px;
}
.work-body-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px){
  .work-body-inner{ grid-template-columns: 1fr; gap: 40px; }
}

/* Article blocks */
.work-article{ display: flex; flex-direction: column; gap: 52px; }
.work-block{}
.block-label{
  display: inline-block;
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--terra);
  font-size: .88rem;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.block-title{
  font-family: var(--font-serif-jp);
  font-size: 1.3rem;
  color: var(--forest);
  font-weight: 500;
  margin: 0 0 18px;
  letter-spacing: .04em;
}
.work-block p{
  font-size: .96rem;
  line-height: 2.0;
  color: var(--ink);
  margin: 0 0 14px;
}
.work-bullets, .work-scope{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.work-bullets li, .work-scope li{
  position: relative;
  padding-left: 22px;
  font-size: .96rem;
  line-height: 1.9;
  color: var(--ink);
}
.work-bullets li::before{
  content: "";
  position: absolute;
  left: 2px; top: .75em;
  width: 10px; height: 1px;
  background: var(--terra);
}
.work-scope li::before{
  content: "🌿";
  position: absolute;
  left: 0; top: 0;
  font-size: .9em;
  filter: saturate(.7);
}

/* Meta card (side) */
.work-meta-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  position: sticky;
  top: 100px;
}
.work-meta-card h3{
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 1rem;
  color: var(--terra);
  margin: 0 0 18px;
  letter-spacing: .08em;
  font-weight: 500;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.work-meta-card dl{
  margin: 0;
  display: grid;
  gap: 14px;
}
.work-meta-card dt{
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .1em;
  font-weight: 500;
  margin-bottom: 4px;
}
.work-meta-card dd{
  margin: 0;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.7;
}
@media (max-width: 900px){
  .work-meta-card{ position: static; }
}

/* Notice (fictional disclosure) */
.work-notice{
  padding: 16px 0 40px;
}
.work-notice p{
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px;
  background: rgba(196, 118, 74, .06);
  border-left: 2px solid var(--terra);
  border-radius: 4px;
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* Bottom back-to-list button */
.work-footer-nav{
  text-align: center;
  padding: 20px 0 10px;
}
.work-footer-nav .btn{
  min-width: 240px;
  justify-content: center;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .work-hero{ padding: 40px 0 10px; }
  .work-body{ padding: 50px 0 40px; }
  .work-article{ gap: 40px; }
  .work-title{ font-size: 1.5rem; }
  .breadcrumbs{ font-size: .72rem; margin-bottom: 24px; }
  .work-meta-card{ padding: 22px 20px 20px; }
}