/* ============================================================
   EN STUDIO WORKS LP — CSS
   方針：タイポグラフィと余白で構成。装飾を最小化。
   PC / スマホ両対応
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  --c-bg:        #f7f6f4;
  --c-surface:   #ffffff;
  --c-ink:       #1c1c1a;
  --c-ink-mid:   #4a4a47;
  --c-ink-faint: #8a8a86;
  --c-rule:      rgba(28,28,26,.1);
  --c-tq:        #3d9c99;
  --c-tq-pale:   #eef6f6;

  --f-sans:  'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-en:    'Cormorant Garamond', Georgia, serif;
  --f-mono:  'DM Mono', 'Courier New', monospace;

  --wrap:     1080px;
  --pad-x:    clamp(1.25rem, 5vw, 3rem);
  --header-h: 60px;

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

/* ---------- Splash ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  will-change: opacity;
}
.splash.is-gone {
  display: none;
  pointer-events: none;
}

/* ロゴフェードイン */
.splash-logo {
  width: clamp(220px, 48vw, 380px);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.splash-logo.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* グリッチ用ラッパー・Canvas */
.splash-logo-wrap {
  position: relative;
  display: inline-block;
}
.splash-glitch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* ---------- SEO Hidden ---------- */
.seo-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-sans);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.9;
  font-feature-settings: 'palt' 1;
  text-rendering: optimizeLegibility;
}

img  { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a  { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; touch-action: manipulation; }
strong { font-weight: 600; }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- Labels & Headings ---------- */
.label {
  display: block;
  font-family: var(--f-en);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-tq);
  margin-bottom: 1rem;
}

.section-h2 {
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink);
  margin-bottom: 2.5rem;
  letter-spacing: .05em;
}
.section-h2-sub {
  font-family: var(--f-en);
  font-size: clamp(.75rem, 1.4vw, .9rem);
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--c-tq);
  margin-left: .8em;
  vertical-align: middle;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-block;
  font-family: var(--f-en);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: #fff;
  background: var(--c-tq);
  padding: .75em 2em;
  border: 1px solid var(--c-tq);
  transition: background .22s var(--ease), color .22s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover {
  background: transparent;
  color: var(--c-tq);
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--f-en);
  font-size: .88rem;
  color: var(--c-ink-mid);
  letter-spacing: .1em;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: .15em;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-text:hover { color: var(--c-tq); border-color: var(--c-tq); }
.btn-full { width: 100%; text-align: center; }


/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 100;
  background: rgba(247,246,244,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-rule);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.06); }

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex-shrink: 0;
  min-width: 0;
}
.logo-en {
  font-family: var(--f-en);
  font-size: clamp(.85rem, 2.2vw, 1rem);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--c-ink);
  white-space: nowrap;
}
.logo-ja {
  font-family: var(--f-sans);
  font-size: clamp(.55rem, 1.3vw, .62rem);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--c-ink-faint);
  white-space: nowrap;
}

.global-nav ul {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
}
.global-nav a {
  display: block;
  font-family: var(--f-en);
  font-size: clamp(.66rem, 1.05vw, .78rem);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-ink-mid);
  padding: .4em .5em;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.global-nav a:hover { color: var(--c-tq); }

/* Hamburger — 2本線 */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 8px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform .28s var(--ease), opacity .28s var(--ease);
  transform-origin: center;
}
/* 2本線でバツ印を作る */
.hamburger.is-open span:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: var(--header-h);
}

/* ---- Ken Burns keyframes ---- */
/* 横写真：左から右へパン＋わずかにズーム */
@keyframes kb-pan-right {
  0%   { transform: scale(1.08) translateX(-3%); }
  100% { transform: scale(1.04) translateX(3%);  }
}
/* 横写真：右から左へパン＋わずかにズーム */
@keyframes kb-pan-left {
  0%   { transform: scale(1.08) translateX(3%);  }
  100% { transform: scale(1.04) translateX(-3%); }
}
/* 縦写真：上から下へ（顔を最初に見せる） */
@keyframes kb-pan-down {
  0%   { transform: scale(1.08) translateY(-3%); }
  100% { transform: scale(1.04) translateY(2%);  }
}
/* ロケーション写真専用：女性を中央に保ちつつ右→左へパン */
@keyframes kb-location {
  0%   { transform: scale(1.1) translateX(5%);  }
  100% { transform: scale(1.05) translateX(-2%); }
}

/* ---- Slideshow layout ---- */
.hero-slide {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  overflow: hidden;
  background: #1a1917;
}

/* 各スライドアイテム：全て同じ位置に重ねる */
.hero-slide__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.hero-slide__item.is-active {
  opacity: 1;
}
.hero-slide__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* デフォルト：左→右パン、スライド表示時間より長めに設定 */
  animation: kb-pan-right 7s ease-in-out infinite alternate;
  will-change: transform;
}

/* スライド1（family2・横）：左→右 */
.hero-slide__item:nth-child(1) img {
  animation: kb-pan-right 7s ease-in-out infinite alternate;
}
/* スライド2（赤ちゃん・縦）：上→下 */
.hero-slide__item:nth-child(2) img {
  object-position: center top;
  animation: kb-pan-down 7s ease-in-out infinite alternate;
}
/* スライド3（ウェディング・縦）：上→下 */
.hero-slide__item:nth-child(3) img {
  object-position: center top;
  animation: kb-pan-down 7s ease-in-out infinite alternate;
}
/* スライド4（family3・横）：右→左 */
.hero-slide__item:nth-child(4) img {
  animation: kb-pan-left 7s ease-in-out infinite alternate;
}

/* 縦写真クラス（portrait）はkb-pan-downを保持 */
.hero-slide__item--portrait img {
  object-position: center top;
  animation: kb-pan-down 7s ease-in-out infinite alternate;
}

/* 下部グラデーション暗幕（文字読みやすさ） */
.hero-slide__scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,0)   70%
  );
}

/* ドットインジケーター */
.hero-slide__dots {
  position: absolute;
  bottom: 1.4rem;
  right: var(--pad-x);
  z-index: 15;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.hero-slide__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.hero-slide__dot.is-active {
  background: rgba(255,255,255,.9);
  transform: scale(1.25);
}

/* 旧モザイク互換クラスを無効化（念のため残す） */
.hero-placeholder, .ph-note { display: none; }

/* ブランドオーバーレイ（左下） */
.hero-overlay-brand {
  position: absolute;
  left: var(--pad-x);
  bottom: 5rem;
  z-index: 15;
  pointer-events: none;
}
.hero-overlay-name {
  font-family: var(--f-en);
  font-size: clamp(.9rem, 1.8vw, 1.1rem);
  letter-spacing: .22em;
  color: rgba(255,255,255,.9);
  line-height: 1.2;
  margin-bottom: .35rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hero-overlay-tagline {
  font-family: var(--f-en);
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.5);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* CTAオーバーレイ（左下・ブランドの下） */
.hero-overlay-cta {
  position: absolute;
  left: var(--pad-x);
  bottom: 2.2rem;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.hero-cta-service {
  color: rgba(255,255,255,.65) !important;
}
.hero-cta-service:hover {
  color: rgba(255,255,255,.9) !important;
}


/* ============================================================
   CONCEPT
   ============================================================ */
.concept {
  padding: 7rem 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

/* ブロック間の区切り線 */
.concept-divider {
  width: 1px;
  height: 4rem;
  background: var(--c-rule);
  margin: 5rem auto;
}

/* 共通ブロック */
.concept-block {
  margin: 0 auto;
}

/* 中央揃えブロック */
.concept-block--center {
  max-width: 640px;
  text-align: center;
}

/* 2カラム分割ブロック */
.concept-block--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
/* PC：revブロックはHTML順（写真→テキスト）を視覚上 テキスト:左・写真:右 に反転 */
.concept-block--rev .concept-split-visual { order: 2; }
.concept-block--rev .concept-split-text   { order: 1; }

.concept-h2 {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  margin-bottom: 2rem;
  letter-spacing: .06em;
  /* 孤立文字（ぶら下がり改行）を防ぐ */
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* 改行禁止ユニット（孤立1文字対策） */
.concept-h2-nowrap {
  white-space: nowrap;
}

.concept-body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.concept-body p {
  font-size: .92rem;
  color: var(--c-ink-mid);
  line-height: 1.9;
  letter-spacing: .03em;
  margin: 0;
}
/* Block1・中央揃え用 */
.concept-body--center {
  text-align: center;
  align-items: center;
}
/* splitブロックのテキスト列も中央揃え */
.concept-split-text .concept-body {
  text-align: center;
  align-items: center;
}
.concept-split-text .concept-h2 {
  text-align: center;
}
.concept-list-text {
  color: var(--c-ink-faint) !important;
  font-size: .85rem !important;
  letter-spacing: .02em;
}
.concept-em {
  font-family: var(--f-serif);
  font-size: 1rem !important;
  font-weight: 500;
  color: var(--c-ink) !important;
  line-height: 2 !important;
  letter-spacing: .05em;
  padding: 1.4rem 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

/* ビジュアルフレーム */
.concept-frame {
  width: 100%;
}
.concept-frame--placeholder {
  aspect-ratio: 4/5;
  background: #e4e2de;
}

/* ============================================================
   CONCEPT SLIDESHOW（For Families）
   ============================================================ */
.concept-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形 */
  overflow: hidden;
  background: #e4e2de;
  cursor: zoom-in;
}

/* 各スライド */
.cs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.cs-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.cs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* プレースホルダー */
.cs-placeholder {
  width: 100%;
  height: 100%;
  background: #e4e2de;
}

/* 左右ボタン */
.cs-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.22);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cs-btn:hover { background: rgba(0,0,0,.42); color: #fff; }
.cs-btn--prev { left: .7rem; }
.cs-btn--next { right: .7rem; }

/* ドットナビ */
.cs-dots {
  position: absolute;
  bottom: .9rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  z-index: 10;
}
.cs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cs-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

/* ============================================================
   CONCEPT SLIDESHOW — ライトボックス
   タップで元のアスペクト比のまま拡大表示
   ============================================================ */
.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(10,10,8,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
.cs-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cs-lightbox-inner {
  position: relative;
  max-width: min(92vw, 1000px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 元のアスペクト比を保持して表示 */
.cs-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 1px;
  opacity: 0;
  transition: opacity .25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.cs-lightbox-img.is-loaded { opacity: 1; }

/* 閉じるボタン */
.cs-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 10;
}
.cs-lightbox-close:hover { color: #fff; }

/* 前後ボタン */
.cs-lightbox-prev,
.cs-lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 10;
}
.cs-lightbox-prev { left: .4rem; }
.cs-lightbox-next { right: .4rem; }
.cs-lightbox-prev:hover,
.cs-lightbox-next:hover { color: #fff; }

/* カウンター */
.cs-lightbox-counter {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-en);
  font-size: .72rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  z-index: 10;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  padding: 7rem 0;
}
.about-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: start;
}
.about-img {
  width: 100%;
}
.about-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-placeholder {
  aspect-ratio: 3/4;
  background: #e4e2de;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: #aaa;
  letter-spacing: .08em;
  width: 100%;
}
.about-name {
  font-family: var(--f-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--c-ink);
  margin: .4rem 0 .2rem;
  letter-spacing: .06em;
}
.about-name-en {
  font-family: var(--f-en);
  font-size: .85rem;
  letter-spacing: .15em;
  color: var(--c-ink-faint);
  margin-bottom: 1.2rem;
}
.about-tagline {
  font-family: var(--f-serif);
  font-style: normal;
  font-size: .92rem;
  color: var(--c-tq);
  margin-bottom: 1.4rem;
  letter-spacing: .06em;
}
/* スマホ専用改行 */
.sp-only { display: none; }
@media (max-width: 560px) {
  .sp-only { display: inline; }
}
.about-bio {
  font-size: .9rem;
  color: var(--c-ink-mid);
  margin-bottom: .9rem;
  line-height: 2.1;
  letter-spacing: .02em;
}
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-rule);
}
.about-links a {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--c-ink-mid);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: .1em;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.about-links a:hover { color: var(--c-tq); border-color: var(--c-tq); }


/* ============================================================
   GENRE (Service)
   ============================================================ */
.genre {
  padding: 7rem 0;
}
.genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.genre-item {
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.genre-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}
.genre-img--placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 4/3;
  background: #e4e2de;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: #aaa;
  letter-spacing: .06em;
  transition: background .3s var(--ease);
  box-sizing: border-box;
}
.genre-item:hover .genre-img--placeholder { background: #d6d3ce; }
/* ── 写真カード（家族写真など） ── */
.genre-item--photo {
  background: transparent;
  overflow: hidden;
}
.genre-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  cursor: pointer;
  display: block;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.genre-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.genre-photo-wrap.is-active img,
.genre-photo-wrap:focus-visible img {
  transform: scale(1.04);
}
/* オーバーレイ：初期状態は完全透明 */
.genre-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem 1.4rem 1.4rem;
  background: linear-gradient(to top, rgba(10,10,8,.72) 0%, rgba(10,10,8,.18) 60%, transparent 100%);
  opacity: 0;
  transition: opacity .38s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}
.genre-photo-wrap.is-active .genre-photo-overlay,
.genre-photo-wrap:focus-visible .genre-photo-overlay {
  opacity: 1;
  pointer-events: auto;
}
.genre-photo-overlay h3 {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  transform: translateY(6px);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94) .05s;
}
.genre-photo-wrap.is-active .genre-photo-overlay h3,
.genre-photo-wrap:focus-visible .genre-photo-overlay h3 {
  transform: translateY(0);
}
.genre-photo-overlay p {
  font-size: .78rem;
  color: rgba(255,255,255,.88);
  line-height: 1.75;
  letter-spacing: .02em;
  transform: translateY(8px);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94) .08s;
}
.genre-photo-wrap.is-active .genre-photo-overlay p,
.genre-photo-wrap:focus-visible .genre-photo-overlay p {
  transform: translateY(0);
}
.genre-photo-link {
  display: inline-block;
  margin-top: .8rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: .1em;
  align-self: flex-start;
  transition: border-color .2s var(--ease);
  transform: translateY(8px);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94) .12s, border-color .2s var(--ease);
}
.genre-photo-wrap.is-active .genre-photo-link,
.genre-photo-wrap:focus-visible .genre-photo-link {
  transform: translateY(0);
}
.genre-photo-link:hover { border-color: #fff; }
/* 写真ごとの表示位置 */
.genre-photo-img--wedding    { object-position: 50% 30%; }
.genre-photo-img--restaurant { object-position: 50% 50%; }

/* ============================================================
   PHOTO POSITION EDITOR UI（?edit=1 モード専用）
   ============================================================ */
#pos-editor-panel {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 9000;
  background: rgba(10, 10, 8, .92);
  color: #fff;
  border-radius: 10px;
  padding: 1.2rem 1.4rem 1rem;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  font-size: .78rem;
  line-height: 1.6;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pos-editor-title {
  font-size: .72rem;
  letter-spacing: .06em;
  color: #3d9c99;
  margin-bottom: .9rem;
  font-weight: 600;
}
.pos-editor-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.pos-editor-label {
  font-size: .68rem;
  color: #aaa;
  flex: 0 0 auto;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-editor-val {
  font-family: 'Courier New', monospace;
  font-size: .75rem;
  color: #f0e6cc;
  background: rgba(255,255,255,.08);
  padding: .15em .5em;
  border-radius: 4px;
  flex: 1;
  min-width: 0;
}
.pos-editor-btn {
  flex: 0 0 auto;
  background: #3d9c99;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: .3em .75em;
  font-size: .68rem;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .2s;
  white-space: nowrap;
}
.pos-editor-btn:hover { background: #2f7d7b; }
.pos-editor-btn--all {
  display: block;
  width: 100%;
  margin-top: .6rem;
  background: rgba(61,156,153,.25);
  border: 1px solid rgba(61,156,153,.5);
  text-align: center;
  padding: .5em;
  font-size: .72rem;
}
.pos-editor-btn--all:hover { background: rgba(61,156,153,.45); }
/* ドラッグ中カーソル */
.genre-photo-wrap { cursor: default; }
.pos-editor--dragging { cursor: grabbing !important; }
.pos-editor--dragging img { transition: none !important; }
/* 編集モードバッジ */
.pos-editor-badge {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(61,156,153,.88);
  color: #fff;
  font-size: .65rem;
  letter-spacing: .06em;
  padding: .25em .8em;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  backdrop-filter: blur(4px);
}
.genre-body {
  padding: 1.4rem 1.2rem 1.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.genre-body h3 {
  font-family: var(--f-serif);
  font-size: .95rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: .6rem;
  letter-spacing: .04em;
}
.genre-body p {
  font-size: .85rem;
  color: var(--c-ink-mid);
  line-height: 2;
  flex: 1;
  letter-spacing: .02em;
}
.genre-link {
  display: inline-block;
  margin-top: .9rem;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--c-tq);
  border-bottom: 1px solid rgba(61,156,153,.3);
  padding-bottom: .1em;
  align-self: flex-start;
  transition: border-color .2s var(--ease);
}
.genre-link:hover { border-color: var(--c-tq); }


/* ============================================================
   WORKS — YouTube サムネイルグリッド
   ============================================================ */
.works {
  padding: 7rem 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.works-lead {
  font-size: .82rem;
  color: var(--c-ink-faint);
  margin-top: -.8rem;
  margin-bottom: 2.4rem;
  letter-spacing: .04em;
}

/* セクション見出し（B案：WEDDING / MV / CORPORATE） */
.yt-sec {
  margin-bottom: 2.8rem;
}
.yt-sec-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--c-rule);
}
.yt-sec-label {
  font-family: var(--f-en);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-tq);
}
.yt-sec-count {
  font-family: var(--f-en);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--c-ink-faint);
}

/* 小さいサムネイルグリッド（index.html Works用） */
.yt-grid-sm {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.yt-grid-sm .yt-thumb {
  aspect-ratio: 16/9;
}
.yt-grid-sm .yt-body {
  display: none;  /* タイトルは非表示、サムネイルのみ */
}
@media (max-width: 640px) {
  .yt-grid-sm {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* グリッド */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 2.4rem;
}

/* 各アイテム */
.yt-item {
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* サムネイル */
.yt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1a1a;
  overflow: hidden;
  flex-shrink: 0;
}
.yt-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}
.yt-thumb-img.is-loaded {
  opacity: 1;
}
.yt-item:hover .yt-thumb-img {
  transform: scale(1.03);
}

/* 再生ボタン */
.yt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.yt-play:hover,
.yt-item:hover .yt-play {
  opacity: 1;
  transform: scale(1.08);
}

/* テキスト */
.yt-body {
  padding: 1rem 1rem 1.3rem;
}
.yt-cat {
  font-family: var(--f-en);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-tq);
  margin-bottom: .4rem;
}
.yt-title {
  font-family: var(--f-serif);
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.6;
  letter-spacing: .04em;
}

/* インライン再生オーバーレイ */
.yt-embed-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
}
.yt-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* View all videos リンク */
.works-view-all-wrap {
  text-align: center;
  margin: 2rem 0 1.6rem;
}
.works-view-all {
  display: inline-block;
  font-family: var(--f-en);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-mid);
  border: 1px solid var(--c-rule);
  padding: .65rem 1.8rem;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.works-view-all:hover {
  color: var(--c-tq);
  border-color: var(--c-tq);
  background: rgba(124,166,160,.04);
}

/* ボトムリンク */
.works-links {
  font-size: .82rem;
  color: var(--c-ink-faint);
  line-height: 2;
  letter-spacing: .03em;
}
.works-links a {
  color: var(--c-ink-mid);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: .1em;
  transition: color .2s var(--ease);
}
.works-links a:hover { color: var(--c-tq); }


/* ============================================================
   CAMPAIGN BANNER
   ============================================================ */
.campaign-banner {
  padding: 5rem 0;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.campaign-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,168,108,.07) 0%, transparent 70%);
  pointer-events: none;
}
.campaign-banner__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 3.5rem clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgba(201,168,108,.2);
}
.campaign-banner__badge {
  display: inline-block;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #c9a86c;
  padding: .3em 1.2em;
  margin-bottom: 1.4rem;
}
.campaign-banner__collab {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: .75rem;
  letter-spacing: .25em;
  color: rgba(201,168,108,.8);
  text-transform: uppercase;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
}
.campaign-banner__collab::before,
.campaign-banner__collab::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: #c9a86c;
  opacity: .4;
}
.campaign-banner__heading {
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 400;
  color: #f0ede8;
  line-height: 1.7;
  letter-spacing: .05em;
  margin-bottom: 1.2rem;
}
.campaign-banner__copy {
  font-size: clamp(.78rem, 1.5vw, .88rem);
  color: #a8a49e;
  line-height: 1.95;
  margin-bottom: 1.8rem;
  letter-spacing: .04em;
}
.campaign-banner__price {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  margin-bottom: 2rem;
}
.campaign-banner__price-old {
  font-size: .82rem;
  color: #5a5754;
  text-decoration: line-through;
}
.campaign-banner__price-new {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 300;
  color: #f5edd8;
  letter-spacing: .03em;
  line-height: 1;
}
.campaign-banner__price-new small {
  font-size: .45em;
  letter-spacing: .12em;
  color: #a8a49e;
  vertical-align: middle;
}
.campaign-banner__price-off {
  display: inline-block;
  font-size: .75rem;
  color: #c9a86c;
  letter-spacing: .1em;
  border: 1px solid rgba(201,168,108,.35);
  padding: .2em .8em;
}
.campaign-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: .82rem;
  letter-spacing: .18em;
  color: #0a0a0a;
  background: #c9a86c;
  padding: .85em 2.5em;
  min-height: 48px;
  border: 1px solid #c9a86c;
  transition: background .22s cubic-bezier(.4,0,.2,1), color .22s cubic-bezier(.4,0,.2,1);
  text-transform: uppercase;
}
.campaign-banner__cta:hover {
  background: transparent;
  color: #c9a86c;
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners {
  padding: 5rem 0;
  background: var(--c-bg);
  border-top: 1px solid rgba(0,0,0,.06);
}
.partners-lead {
  font-size: .85rem;
  color: var(--c-ink-mid);
  line-height: 2;
  letter-spacing: .03em;
  margin-bottom: 2.4rem;
}
.partners-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: .5rem;
}
@media (max-width: 860px) {
  .partners-cards { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 560px) {
  .partners-cards { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@media (max-width: 400px) {
  .partners-cards { grid-template-columns: 1fr; }
}
.partners-pcard {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--c-surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 3px;
  text-decoration: none;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.partners-pcard:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
  border-color: rgba(61,156,153,.35);
}
.partners-pcard__img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: .2rem;
}
.partners-pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}
.partners-pcard:hover .partners-pcard__img img {
  transform: scale(1.04);
}
/* ロゴ表示用（共通） */
.partners-pcard__img--logo {
  background: #ffffff;
}
.partners-pcard__img--logo img {
  object-fit: contain;
  padding: .8rem 1.2rem;
}
.partners-pcard:hover .partners-pcard__img--logo img {
  transform: scale(1.03);
}
/* ロゴ背景除去：mix-blend-mode でベージュ・グレー背景を白に溶け込ませる */
.partners-pcard__img--logo-blend img {
  mix-blend-mode: multiply;
}
.partners-pcard__type {
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--c-tq);
  font-weight: 500;
}
.partners-pcard__name {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: .04em;
  line-height: 1.4;
}
.partners-pcard__desc {
  font-size: .8rem;
  color: var(--c-ink-mid);
  line-height: 1.85;
  letter-spacing: .02em;
  flex: 1;
}
.partners-pcard__arrow {
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--c-tq);
  margin-top: .3rem;
  display: inline-block;
  transition: transform .2s var(--ease);
}
.partners-pcard:hover .partners-pcard__arrow {
  transform: translateX(4px);
}

/* ============================================================
   PRICE (Fee)
   ============================================================ */
.price {
  padding: 7rem 0;
}
.price-note-top {
  font-size: .83rem;
  color: var(--c-ink-faint);
  margin-top: -.5rem;
  margin-bottom: 2.4rem;
  line-height: 1.8;
}
.price-note-sub {
  font-size: .8rem;
  color: var(--c-ink-faint);
  margin-bottom: 1rem;
  line-height: 1.7;
}
.price-category-heading {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-ink);
  margin-bottom: 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--c-rule);
}
/* ニューボーンプラン強調行 */
.price-row--featured td {
  background: var(--c-tq-pale);
}
.price-row--featured td:first-child {
  color: var(--c-tq);
  font-weight: 500;
}
.td-tax {
  font-size: .72rem;
  color: var(--c-ink-faint);
  display: block;
}
.price-caution {
  color: var(--c-ink-faint) !important;
  font-style: italic;
}
/* お問い合わせボックス（広告・その他） */
.price-inquiry-box {
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-tq);
  padding: 1.8rem 2rem;
  margin-bottom: 2.4rem;
  background: var(--c-surface);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.price-inquiry-text {
  font-size: .86rem;
  color: var(--c-ink-mid);
  line-height: 2;
  letter-spacing: .02em;
  flex: 1;
  min-width: 200px;
}
@media (max-width: 560px) {
  .price-inquiry-box {
    padding: 1.4rem 1.2rem;
    gap: 1.2rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .price-inquiry-text { font-size: .83rem; }
}

/* 出張費テーブル */
.price-table--travel {
  min-width: 320px;
  max-width: 480px;
}
.price-table--travel td:first-child {
  width: auto;
  white-space: normal;
  font-family: var(--f-sans);
  font-size: .85rem;
  letter-spacing: 0;
}
.price-table--travel td:last-child {
  font-family: var(--f-sans);
  font-size: .85rem;
  letter-spacing: .02em;
}
.price-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  min-width: 520px;
}
.price-table th,
.price-table td {
  text-align: left;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
  line-height: 1.7;
}
.price-table thead th {
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  border-bottom: 2px solid var(--c-rule);
  padding-bottom: .8rem;
}
.price-table tbody tr:first-child td { border-top: none; }
.price-table td:first-child {
  font-family: var(--f-en);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--c-ink);
  white-space: nowrap;
  width: 120px;
}
.price-table td:nth-child(2) {
  font-family: var(--f-sans);
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--c-ink);
}
.price-table td:last-child {
  font-family: var(--f-sans);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--c-ink);
  white-space: nowrap;
}
.td-note {
  display: block;
  font-size: .72rem;
  color: var(--c-ink-faint);
  margin-top: .25rem;
}
.price-remarks {
  list-style: none;
  margin-bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.price-remarks li {
  font-size: .78rem;
  color: var(--c-ink-faint);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.7;
}
.price-remarks li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-tq);
}


/* ============================================================
   FLOW
   ============================================================ */
.flow {
  padding: 7rem 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.flow-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
}
.flow-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--c-rule);
}
.flow-list li:first-child { border-top: 1px solid var(--c-rule); }
.flow-num {
  font-family: var(--f-mono);
  font-size: .88rem;
  font-weight: 300;
  color: var(--c-ink-faint);
  letter-spacing: .1em;
  margin-bottom: .7rem;
}
.flow-list h3 {
  font-family: var(--f-serif);
  font-size: .95rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: .5rem;
  letter-spacing: .04em;
}
.flow-list p {
  font-size: .87rem;
  color: var(--c-ink-mid);
  line-height: 2;
  letter-spacing: .02em;
  max-width: 36ch;
}


/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 7rem 0;
}
.faq-list {
  max-width: 640px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--c-rule);
}
.faq-item:first-child { border-top: 1px solid var(--c-rule); }
.faq-q button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 0;
  text-align: center;
  font-size: .92rem;
  font-weight: 400;
  color: var(--c-ink);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--f-serif);
  letter-spacing: .03em;
  line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
}
.faq-q button::after {
  content: "+";
  font-family: var(--f-en);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--c-tq);
  transition: transform .25s var(--ease);
  line-height: 1;
}
.faq-q button[aria-expanded="true"]::after {
  transform: rotate(45deg);
}
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s var(--ease), padding .25s var(--ease);
  font-size: .88rem;
  color: var(--c-ink-mid);
  line-height: 2.1;
  letter-spacing: .02em;
  text-align: center;
}
.faq-a.is-open {
  max-height: 1000px;
  padding-bottom: 1.6rem;
}


/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding: 7rem 0;
  background: var(--c-ink);
}
.contact .label { color: var(--c-tq); }
.contact .section-h2 { color: #fff; }

.contact-lead {
  font-family: var(--f-serif);
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 2.1;
  margin-top: -.8rem;
  margin-bottom: 3rem;
  letter-spacing: .05em;
}
.contact-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Info */
.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.contact-detail > div { display: flex; flex-direction: column; gap: .2rem; }
.contact-detail dt {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.contact-detail dd a {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: .1em;
  transition: color .2s var(--ease);
  word-break: break-all;
}
.contact-detail dd a:hover { color: var(--c-tq); }

.contact-smooth-title {
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  margin-bottom: .8rem;
  line-height: 1.7;
}
.contact-smooth-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.contact-smooth-list li {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  padding-left: 1rem;
  position: relative;
  line-height: 1.65;
}
.contact-smooth-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--c-tq);
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.field label {
  font-size: .72rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
}
.req { color: var(--c-tq); margin-left: .2em; }
.field input,
.field select,
.field textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: .9rem;
  padding: .75em .9em;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255,255,255,.2);
  font-size: .8rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-tq);
  background: rgba(255,255,255,.09);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,.3)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9em center;
  padding-right: 2.2em;
  cursor: pointer;
}
.field select option { background: #2a2a28; color: #fff; }
.field textarea { resize: vertical; min-height: 110px; }

.form-note {
  font-size: .68rem;
  color: rgba(255,255,255,.2);
  margin-top: -.5rem;
  text-align: center;
}
.contact .btn-primary {
  background: var(--c-tq);
  border-color: var(--c-tq);
  font-size: .85rem;
  padding: .85em 2em;
}
.contact .btn-primary:hover {
  background: transparent;
  color: var(--c-tq);
}


/* ============================================================
   INSTAGRAM FEED
   ============================================================ */
.insta-feed {
  padding: 7rem 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

/* ヘッダー行：見出し ＋ フォローボタン */
.insta-feed__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.8rem;
}
.insta-feed__header .section-h2 {
  margin-bottom: 0;
}
.insta-feed__follow-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-en);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--c-ink);
  border: 1px solid var(--c-rule);
  padding: .55em 1.1em;
  transition: border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.insta-feed__follow-btn:hover {
  border-color: var(--c-tq);
  color: var(--c-tq);
}

/* 6列グリッド */
.insta-feed__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

/* 各カード */
.insta-card {
  display: block;
  overflow: hidden;
  position: relative;
  background: var(--c-rule);
}
.insta-card__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.insta-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease), opacity .3s;
  opacity: .92;
}
.insta-card:hover .insta-card__img img {
  transform: scale(1.04);
  opacity: 1;
}
/* ホバー時Instagramアイコンオーバーレイ */
.insta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.insta-card:hover::after {
  opacity: 1;
}

/* 下部テキスト */
.insta-feed__note {
  font-size: .75rem;
  color: var(--c-ink-faint);
  text-align: center;
  margin-top: 1.4rem;
  letter-spacing: .03em;
}
.insta-feed__note a {
  color: var(--c-tq);
  border-bottom: 1px solid rgba(61,156,153,.3);
}

/* タブレット: 3列 */
@media (max-width: 860px) {
  .insta-feed__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* スマホ: 3列 */
@media (max-width: 560px) {
  .insta-feed {
    padding: 4.5rem 0;
  }
  .insta-feed__header {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
    text-align: center;
  }
  .insta-feed__header .label,
  .insta-feed__header .section-h2 {
    text-align: center;
  }
  .insta-feed__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* Footer strip */
.footer-strip {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .85rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
}
.footer-strip span {
  font-size: .7rem;
  font-weight: 300;
  letter-spacing: .09em;
  color: rgba(255,255,255,.22);
}

.site-footer {
  padding: 0 0 2.4rem;
  background: #141412;
  overflow: hidden;
}
.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: center;
  text-align: center;
}
.footer-name {
  font-family: var(--f-en);
  font-size: .82rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
}
.footer-nav {
  display: flex;
  gap: .5rem 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-nav a {
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.25);
  transition: color .2s var(--ease);
}
.footer-nav a:hover { color: rgba(255,255,255,.6); }
.footer-copy {
  font-size: .65rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.2);
}


/* ============================================================
   FIXED CTA (モバイル専用)
   ============================================================ */
.fixed-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .75rem 1rem;
  background: rgba(247,246,244,.96);
  border-top: 1px solid var(--c-rule);
  z-index: 90;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fixed-cta .btn-primary {
  width: 100%;
  text-align: center;
  font-size: .88rem;
  padding: .85em 2em;
}


/* ============================================================
   RESPONSIVE — タブレット (≤860px)
   ============================================================ */
@media (max-width: 860px) {
  /* Concept */
  .concept-block--split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* タブレット以下：orderを0に強制リセット（Safari対策） */
  .concept-block--rev .concept-split-visual,
  .concept-block--rev .concept-split-text {
    order: 0 !important;
  }
  .concept-frame--placeholder {
    aspect-ratio: 3/2;
    max-width: 480px;
    margin: 0 auto;
  }
  .concept-divider { margin: 3.5rem auto; }

  /* Header */
  .global-nav { display: none; }
  .hamburger  { display: flex; }

  .global-nav.is-open {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(247,246,244,.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem var(--pad-x);
    z-index: 99;
    overflow-y: auto;
  }
  .global-nav.is-open ul {
    flex-direction: column;
    gap: 0;
  }
  .global-nav.is-open a {
    display: block;
    font-size: 1.05rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--c-rule);
    letter-spacing: .1em;
    /* タップ領域を広くする */
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Hero slide — tablet */
  .hero-slide { min-height: 460px; }
  .hero-overlay-brand { bottom: 4rem; }
  .hero-overlay-cta   { bottom: 1.6rem; }

  /* About */
  .about-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-img  { max-width: 220px; margin: 0 auto; }

  /* Genre */
  .genre-grid { grid-template-columns: repeat(2, 1fr); }

  /* Works / YouTube Grid */
  .yt-grid { grid-template-columns: repeat(2, 1fr); }

  /* Price table — タブレットで少しコンパクトに */
  .price-table { min-width: 460px; }
  .price-table th,
  .price-table td { padding: .9rem .9rem; font-size: .83rem; }
  .price-inquiry-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
  }

  /* Contact */
  .contact-cols { grid-template-columns: 1fr; gap: 2rem; }

  /* Fixed CTA */
  .fixed-cta { display: block; }
  body { padding-bottom: 68px; }
}


/* ============================================================
   RESPONSIVE — スマホ (≤560px)
   ============================================================ */
@media (max-width: 560px) {
  :root {
    --pad-x:    1rem;
    --header-h: 56px;
  }

  /* 全体 padding 調整 */
  .concept  { padding: 4.5rem 0; }
  .about    { padding: 4.5rem 0; }
  .genre    { padding: 4.5rem 0; }
  .works    { padding: 4.5rem 0; }
  .partners { padding: 3.5rem 0; }
  .price    { padding: 4.5rem 0; }
  .flow     { padding: 4.5rem 0; }
  .faq      { padding: 4.5rem 0; }
  .contact  { padding: 4.5rem 0; }

  /* Concept */
  .concept-block--center { text-align: center; }
  .concept-h2 { font-size: 1.25rem; }
  .concept-divider { margin: 2.5rem auto; }
  .concept-em { font-size: .92rem !important; }

  /* Hero slide — mobile */
  .hero-slide {
    height: calc(85vh - var(--header-h));
    min-height: 400px;
  }
  /* スマホ：brand と cta が重ならないよう十分に離す */
  .hero-overlay-brand { bottom: 5.2rem; }
  .hero-overlay-cta   { bottom: 0.8rem; }
  .hero-overlay-name  { font-size: .82rem; }
  .footer-strip { gap: .4rem .7rem; }
  .footer-strip span { font-size: .65rem; }

  /* ---- 共通：見出し・ラベル中央揃え ---- */
  .section-h2   { font-size: 1.25rem; margin-bottom: 1.8rem; text-align: center; }
  .label        { margin-bottom: .7rem; text-align: center; }

  /* About */
  .about-name   { font-size: 1.5rem; }
  .about-inner  { gap: 2rem; }
  .about-img    { max-width: 160px; margin: 0 auto; }
  .about-text   { text-align: center; }
  .about-bio    { font-size: .87rem; }
  .about-links  { justify-content: center; }

  /* Concept */
  .concept-split-text              { text-align: center; }
  .concept-split-text .concept-body { align-items: center; }
  .concept-split-text .concept-h2   { text-align: center; }

  /* Genre (Service) */
  .genre-grid { grid-template-columns: 1fr; }
  .genre-body { padding: 1.1rem 1rem 1.3rem; }
  /* スマホでは常時オーバーレイ表示 */
  .genre-photo-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .genre-photo-overlay h3,
  .genre-photo-overlay p,
  .genre-photo-link {
    transform: translateY(0);
  }
  .genre-photo-wrap { aspect-ratio: 3/4; }

  /* Works / YouTube Grid */
  .yt-grid  { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .yt-body  { padding: .75rem .8rem 1rem; }
  .yt-title { font-size: .82rem; line-height: 1.5; }
  .yt-cat   { font-size: .62rem; }

  /* Works (旧レイアウト互換) */
  .case-item {
    grid-template-columns: 40px 1fr;
    gap: 0 1rem;
  }

  /* Partners */
  .partners-grid              { text-align: center; }
  .partners-pcard             { padding: 1.2rem 1.1rem 1.1rem; }
  .partners-pcard__img        { aspect-ratio: 16/9; }
  .partners-pcard__img--logo img { padding: .6rem .9rem; }
  .partners-pcard__name       { text-align: center; }
  .partners-pcard__type       { text-align: center; }
  .partners-pcard__desc       { text-align: center; }

  /* Flow ― すでに中央揃え済み */
  .flow-list li { padding: 1.6rem 0; }
  .flow-num     { font-size: .85rem; }

  /* Price */
  .price-table          { min-width: 380px; }
  .price-table th,
  .price-table td       { padding: .75rem .6rem; font-size: .8rem; }
  .price-table td:first-child { width: 80px; font-size: .73rem; white-space: normal; }
  .price-table thead th { font-size: .68rem; padding: .6rem .6rem .5rem; }
  .td-note              { font-size: .67rem; }
  .price-category-heading { font-size: .95rem; text-align: center; }
  .price-note-top       { text-align: center; }
  .price-note-sub       { text-align: center; }
  .price-remarks        { text-align: left; } /* 箇条書きは左揃え維持 */
  .price-inquiry-box    { text-align: center; }
  /* price-remarks と 料金相談ボタン を中央揃え */
  .price-remarks-wrap   { display: flex; flex-direction: column; align-items: center; }
  .price-remarks-wrap .price-remarks { width: 100%; max-width: 420px; }
  .price-remarks-wrap .btn-primary   { align-self: center; }

  /* FAQ ― すでに中央揃え済み */
  .faq-q button { font-size: .88rem; padding: 1.1rem 0; min-height: 48px; }
  .faq-a        { font-size: .85rem; }

  /* Contact */
  .contact-lead { font-size: .87rem; text-align: center; }
  .field input,
  .field select,
  .field textarea { font-size: 1rem; /* iOS ズーム防止 */ }
  .contact-cols { gap: 1.8rem; }

  /* Fixed CTA */
  body { padding-bottom: 72px; }
}


/* ============================================================
   RESPONSIVE — 極小 (≤380px)
   ============================================================ */
@media (max-width: 380px) {
  :root { --pad-x: .85rem; }

  .logo-en { font-size: .82rem; letter-spacing: .08em; }
  .logo-ja { display: none; }

  .btn-primary  { font-size: .82rem; }
  .hero-overlay-brand { bottom: 5rem; left: .85rem; }
  .hero-overlay-cta   { bottom: 0.6rem; left: .85rem; gap: .9rem; }
  .hero-overlay-name  { font-size: .78rem; letter-spacing: .14em; }
  .hero-overlay-tagline { font-size: .62rem; }

  /* Genre: 極小端末でオーバーレイのフォント調整 */
  .genre-photo-overlay h3 { font-size: .9rem; }
  .genre-photo-overlay p  { font-size: .73rem; }

  /* Price (極小) */
  .price-table { min-width: 320px; }
  .price-table th,
  .price-table td { padding: .65rem .45rem; font-size: .76rem; }
}