/* ============================================================
   〇〇 Atelier — Hand-poked Tattoo Studio (Demo)
   077 / Dark Maximalism × Editorial Big Type × Handwritten
   ============================================================ */

:root{
  --ink:#050505;
  --ink-2:#0d0c0c;
  --ink-3:#161413;
  --blood:#8b1f1f;
  --blood-deep:#621414;
  --pale:#f0d8d2;
  --bone:#ddd4c5;
  --bone-dim:rgba(221,212,197,.55);
  --bone-faint:rgba(221,212,197,.18);
  --line:rgba(221,212,197,.14);
  --line-soft:rgba(221,212,197,.06);
  --serif:'Old Standard TT', 'Cormorant Garamond', Georgia, serif;
  --sans:'Space Grotesk','Inter',-apple-system,sans-serif;
  --hand:'Caveat','Reenie Beanie',cursive;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  line-height:1.7;
  font-size:15px;
  letter-spacing:.01em;
  overflow-x:hidden;
  cursor:none; /* カーソル追従用（PCのみ） */
}
@media(max-width:900px){ body{cursor:auto;} }

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:opacity .3s,color .3s;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

::selection{background:var(--blood);color:var(--bone);}

/* ─── INK CURSOR ─────────────────────────────────────── */
.ink-cursor{
  position:fixed;left:0;top:0;width:32px;height:32px;
  background:radial-gradient(circle at center, rgba(139,31,31,.55), rgba(139,31,31,.0) 65%);
  border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .15s ease-out, opacity .3s;
  mix-blend-mode:screen;
  filter:blur(.5px);
}
.ink-cursor.is-hover{ transform:translate(-50%,-50%) scale(2); opacity:.75; }
.ink-cursor-dot{
  position:fixed;left:0;top:0;width:5px;height:5px;
  background:var(--blood);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
}
@media(max-width:900px){ .ink-cursor,.ink-cursor-dot{display:none;} }

/* ─── DEMO BAR ─────────────────────────────────────────── */
#demo-bar{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  background:rgba(5,5,5,.98);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:7px 0;
}
.demo-bar-inner{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.7rem;color:rgba(221,212,197,.45);font-family:var(--sans);}
.demo-badge{font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:rgba(139,31,31,.25);color:var(--pale);padding:3px 10px;flex-shrink:0;}
.demo-link{color:var(--pale);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.demo-copy{color:rgba(221,212,197,.18);font-size:.62rem;margin-left:4px;}
@media(max-width:640px){ .demo-copy{display:none;} }

/* ─── CONTAINER ────────────────────────────────────────── */
.container{max-width:1380px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){ .container{padding:0 22px;} }

/* ─── HEADER ───────────────────────────────────────────── */
.site-header{
  position:fixed;top:36px;left:0;right:0;z-index:100;
  padding:18px 0;
  background:rgba(5,5,5,.0);
  transition:background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(5,5,5,.85);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0 32px;}

.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{
  width:38px;height:38px;border:1px solid var(--bone-faint);border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--pale);
}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-en{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--bone);letter-spacing:.02em;}
.brand-jp{font-family:var(--sans);font-size:.55rem;letter-spacing:.32em;color:var(--bone-dim);text-transform:uppercase;margin-top:4px;}

.header-nav{display:flex;align-items:center;gap:32px;}
.header-nav a{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);position:relative;padding:6px 0;}
.header-nav a:hover{color:var(--pale);}
.header-nav a.header-cta{
  background:var(--blood);color:var(--bone);
  padding:11px 22px;border-radius:0;
  letter-spacing:.18em;font-weight:600;
  border:1px solid var(--blood);
  transition:background .3s, color .3s;
}
.header-nav a.header-cta:hover{background:transparent;color:var(--pale);}

.hamburger{display:none;width:34px;height:34px;position:relative;z-index:1100;}
.hamburger span{position:absolute;left:6px;width:22px;height:1px;background:var(--bone);transition:.3s;}
.hamburger span:nth-child(1){top:12px;}
.hamburger span:nth-child(2){top:17px;}
.hamburger span:nth-child(3){top:22px;}
.hamburger.is-active span:nth-child(1){transform:rotate(45deg);top:17px;}
.hamburger.is-active span:nth-child(2){opacity:0;}
.hamburger.is-active span:nth-child(3){transform:rotate(-45deg);top:17px;}

@media(max-width:900px){
  /* 🔴 スマホ時は site-header の backdrop-filter を必ず外す
     （backdrop-filter は containing block を生成し、子の .header-nav の position: fixed が
     site-header box 内に閉じ込められて、スクロール時に部分表示される事故を起こす） */
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-active{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .site-header.is-scrolled{
    background:rgba(5,5,5,.96);
  }
  .site-header.menu-active{background:var(--ink) !important;}

  .header-nav{
    position:fixed;inset:0;
    background:var(--ink);
    flex-direction:column;justify-content:center;align-items:center;
    gap:24px;
    transform:translateY(-100%);
    transition:transform .55s cubic-bezier(.7,0,.3,1);
    z-index:1000;
    pointer-events:none;
  }
  .header-nav.is-open{transform:translateY(0);pointer-events:auto;}
  .header-nav a{font-size:1.5rem;font-family:var(--serif);font-style:italic;letter-spacing:.04em;text-transform:none;color:var(--bone);}
  .header-nav a.header-cta{background:var(--blood);color:var(--bone);padding:14px 32px;}
  .hamburger{display:block;}
}

/* ─── HERO ─────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  padding-top:120px;padding-bottom:80px;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--ink);
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.85) 70%, rgba(5,5,5,1) 100%),
    radial-gradient(ellipse at 70% 35%, #2a1414 0%, #0a0606 55%, #050505 100%);
}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(139,31,31,.04) 8px 9px),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(240,216,210,.025) 8px 9px);
  opacity:.7;
}
.hero-frame{
  position:absolute;inset:36px;border:1px solid var(--bone-faint);z-index:1;pointer-events:none;
}
.hero-frame::before{
  content:'No. 077 — Atelier';
  position:absolute;top:-9px;left:32px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;color:var(--bone-dim);
  background:var(--ink);padding:0 14px;
}
.hero-frame::after{
  content:'EST. MMXIV';
  position:absolute;bottom:-9px;right:32px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;color:var(--bone-dim);
  background:var(--ink);padding:0 14px;
}

.hero-inner{
  position:relative;z-index:2;
  max-width:1380px;margin:0 auto;width:100%;
  padding:0 60px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}

.hero-left{position:relative;}
.hero-eyebrow{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--blood);margin-bottom:36px;
  display:flex;align-items:center;gap:14px;
}
.hero-eyebrow::before{content:"";width:48px;height:1px;background:var(--blood);}

.hero-title{
  font-family:var(--serif);
  font-size:clamp(58px, 8.4vw, 142px);
  line-height:.95;letter-spacing:-.02em;
  color:var(--bone);
  font-weight:400;
  position:relative;
}
.hero-title em{
  font-style:italic;color:var(--pale);
  display:block;
  text-indent:.15em;
}
.hero-title em.with-stroke{
  color:transparent;
  -webkit-text-stroke:1px var(--pale);
}
.hero-script{
  display:inline-block;
  font-family:var(--hand);
  font-size:clamp(26px, 3.2vw, 44px);
  color:var(--blood);
  transform:rotate(-3deg);
  transform-origin:left center;
  letter-spacing:-.01em;
  margin-bottom:18px;
  text-shadow:0 0 18px rgba(139,31,31,.35);
  pointer-events:none;
}

.hero-meta{
  margin-top:48px;
  display:flex;flex-direction:column;gap:14px;
}
.hero-meta-line{
  display:flex;align-items:baseline;gap:18px;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;color:var(--bone-dim);
  border-top:1px solid var(--line);padding-top:14px;
}
.hero-meta-line strong{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--pale);font-weight:400;letter-spacing:.02em;}
.hero-meta-line em{font-style:normal;color:var(--bone);}

.hero-cta-row{margin-top:42px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.hero-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  padding:18px 32px;
  background:var(--blood);color:var(--bone);
  border:1px solid var(--blood);
  transition:background .3s, color .3s, transform .3s;
}
.hero-cta:hover{background:transparent;color:var(--pale);transform:translateY(-2px);}
.hero-cta-ghost{background:transparent;color:var(--bone);border:1px solid var(--bone-faint);}
.hero-cta-ghost:hover{border-color:var(--bone);color:var(--pale);}

.hero-right{
  position:relative;
  aspect-ratio:3/4;
  max-height:78vh;
  overflow:hidden;
}
.hero-photo{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg, rgba(5,5,5,.45) 0%, rgba(5,5,5,.0) 50%, rgba(5,5,5,.55) 100%),
    radial-gradient(ellipse at 35% 40%, #3a1d1d 0%, #150909 60%, #050505 100%);
}
.hero-photo::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 1px, rgba(0,0,0,.18) 1px 2px),
    repeating-linear-gradient(90deg, rgba(240,216,210,.05) 0 1px, transparent 1px 4px);
}
.hero-photo::after{
  content:"";position:absolute;left:50%;top:50%;
  width:65%;height:75%;transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(240,216,210,.18) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(240,216,210,.06) 0 2px, transparent 2px 6px);
  border:1px solid rgba(240,216,210,.12);
}
.hero-photo-caption{
  position:absolute;left:24px;bottom:24px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone);background:rgba(5,5,5,.7);padding:8px 14px;
}
.hero-photo-tag{
  position:absolute;right:0;top:32px;
  writing-mode:vertical-rl;
  font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--pale);
  background:rgba(5,5,5,.55);padding:18px 8px;
}

/* split reveal */
.hero-split{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-split::before,.hero-split::after{
  content:"";position:absolute;left:0;width:100%;background:var(--ink);
  transition:transform 1.4s cubic-bezier(.7,0,.3,1);
}
.hero-split::before{top:0;height:50%;transform:translateY(0);}
.hero-split::after{bottom:0;height:50%;transform:translateY(0);}
.hero-right.is-revealed .hero-split::before{transform:translateY(-100%);}
.hero-right.is-revealed .hero-split::after{transform:translateY(100%);}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:48px;padding:0 22px;}
  .hero-frame{inset:18px;}
  .hero-right{aspect-ratio:4/5;max-height:60vh;}
  .hero-script{margin-bottom:14px;}
}

/* ─── BIG TYPE MARQUEE ────────────────────────────────── */
.marquee{
  background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:32px 0;
  position:relative;
}
.marquee-track{
  display:flex;gap:80px;white-space:nowrap;
  animation:marqueeScroll 38s linear infinite;
  font-family:var(--serif);font-style:italic;font-size:clamp(40px, 6vw, 86px);
  color:transparent;
  -webkit-text-stroke:1px var(--bone-faint);
}
.marquee-track span{flex-shrink:0;}
.marquee-track .star{color:var(--blood);-webkit-text-stroke:0;}
@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ─── SECTION COMMON ─────────────────────────────────── */
.section{padding:140px 0;position:relative;}
.section-tight{padding:90px 0;}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--blood);margin-bottom:24px;
}
.section-eyebrow::before{content:"";width:36px;height:1px;background:var(--blood);}
.section-title{
  font-family:var(--serif);font-size:clamp(40px, 5vw, 78px);
  line-height:1.05;letter-spacing:-.015em;
  color:var(--bone);font-weight:400;
}
.section-title em{font-style:italic;color:var(--pale);}
.section-script{
  font-family:var(--hand);font-size:clamp(28px, 3.4vw, 52px);
  color:var(--blood);transform:rotate(-3deg);display:inline-block;
  margin:18px 0 8px;
}
.section-jp{
  font-family:var(--serif);font-size:.95rem;letter-spacing:.3em;color:var(--bone-dim);
  margin-top:14px;
}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease, transform .9s ease;}
.reveal.show{opacity:1;transform:translateY(0);}
.delay-1{transition-delay:.12s;}
.delay-2{transition-delay:.24s;}
.delay-3{transition-delay:.36s;}
.delay-4{transition-delay:.48s;}

/* ─── JOURNAL TICKER (NEWS) ─────────────────────────── */
.journal{background:var(--ink);position:relative;}
.journal-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:36px;margin-bottom:48px;
}
.journal-head-right{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:.68rem;letter-spacing:.28em;color:var(--bone-dim);text-transform:uppercase;}
.journal-head-right::before{content:"";width:40px;height:1px;background:var(--bone-faint);}
.journal-list{border-top:1px solid var(--line);}
.journal-item{
  display:grid;grid-template-columns:130px 110px 1fr 32px;align-items:center;gap:24px;
  padding:24px 8px;border-bottom:1px solid var(--line);
  transition:background .35s, padding .35s;
}
.journal-item:hover{background:rgba(240,216,210,.025);padding-left:18px;}
.journal-date{font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;color:var(--bone-dim);}
.journal-cat{
  font-family:var(--sans);font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blood);border:1px solid rgba(139,31,31,.45);padding:5px 10px;justify-self:start;
}
.journal-title{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--bone);letter-spacing:.005em;line-height:1.45;}
.journal-arrow{font-family:var(--serif);font-size:1.15rem;color:var(--bone-dim);text-align:right;transition:transform .3s, color .3s;}
.journal-item:hover .journal-arrow{transform:translateX(6px);color:var(--pale);}

@media(max-width:768px){
  .journal-item{grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:8px 16px;}
  .journal-cat{grid-row:1;grid-column:2;}
  .journal-title{grid-row:2;grid-column:1/3;font-size:1rem;}
  .journal-arrow{display:none;}
}

/* ─── ATELIER (ABOUT) ─────────────────────────────── */
.atelier{background:var(--ink-2);}
.atelier-inner{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:start;}
.atelier-photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:
    linear-gradient(160deg, rgba(5,5,5,.4) 0%, rgba(5,5,5,.0) 50%, rgba(5,5,5,.55) 100%),
    radial-gradient(ellipse at 40% 50%, #2a1818 0%, #0d0606 70%);
}
.atelier-photo::before{
  content:"";position:absolute;inset:14px;border:1px solid var(--bone-faint);
}
.atelier-photo::after{
  content:"";position:absolute;left:50%;top:50%;width:55%;height:65%;transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(240,216,210,.16) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(240,216,210,.04) 4px 5px);
  border:1px solid rgba(240,216,210,.12);
}
.atelier-photo-caption{
  position:absolute;left:24px;bottom:24px;
  font-family:var(--hand);font-size:1.5rem;color:var(--blood);transform:rotate(-4deg);
}

.atelier-text{padding-top:24px;}
.atelier-text p{
  margin-top:24px;font-size:.95rem;color:var(--bone-dim);line-height:1.95;letter-spacing:.02em;
}
.atelier-quote{
  margin:42px 0 32px;padding:28px 0 28px 32px;
  border-left:2px solid var(--blood);
  font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--pale);line-height:1.45;
}
.atelier-sign{font-family:var(--hand);font-size:1.7rem;color:var(--bone);transform:rotate(-2deg);display:inline-block;margin-top:16px;}

@media(max-width:900px){ .atelier-inner{grid-template-columns:1fr;gap:48px;} }

/* ─── STYLES (5 disciplines) ────────────────────── */
.styles{background:var(--ink);}
.styles-head{text-align:center;margin-bottom:80px;}
.styles-grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.style-card{
  position:relative;padding:48px 28px 38px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink);
  transition:background .4s;
}
.style-card:hover{background:var(--ink-3);}
.style-num{font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;color:var(--bone-dim);}
.style-name{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--pale);margin-top:18px;letter-spacing:-.005em;}
.style-name-jp{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;color:var(--bone-dim);margin-top:10px;text-transform:uppercase;}
.style-desc{font-size:.85rem;color:var(--bone-dim);margin-top:24px;line-height:1.85;}
.style-tag{
  position:absolute;top:18px;right:18px;
  font-family:var(--hand);font-size:1.1rem;color:var(--blood);transform:rotate(6deg);
}

@media(max-width:1100px){ .styles-grid{grid-template-columns:repeat(2, 1fr);} }
@media(max-width:540px){ .styles-grid{grid-template-columns:1fr;} }

/* ─── PORTFOLIO (Layered Peek) ─────────────────── */
.portfolio{background:var(--ink-2);position:relative;}
.portfolio-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:72px;}
.portfolio-stack{
  display:grid;grid-template-columns:repeat(12, 1fr);gap:24px;
  position:relative;
}
.portfolio-item{
  position:relative;overflow:hidden;
  background:var(--ink-3);
  aspect-ratio:3/4;
}
.portfolio-item:nth-child(1){grid-column:1/span 5;aspect-ratio:3/4;margin-top:60px;}
.portfolio-item:nth-child(2){grid-column:6/span 4;aspect-ratio:1/1;}
.portfolio-item:nth-child(3){grid-column:10/span 3;aspect-ratio:3/5;margin-top:30px;}
.portfolio-item:nth-child(4){grid-column:1/span 4;aspect-ratio:4/5;}
.portfolio-item:nth-child(5){grid-column:5/span 5;aspect-ratio:4/3;margin-top:50px;}
.portfolio-item:nth-child(6){grid-column:10/span 3;aspect-ratio:2/3;}

.portfolio-photo{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 40% 50%, #2a1414 0%, #0a0606 75%);
  transition:transform 1.2s cubic-bezier(.4,0,.2,1);
}
.portfolio-photo::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(240,216,210,.04) 0 2px, transparent 2px 6px);
}
.portfolio-photo::after{
  content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(240,216,210,.14) 0%, transparent 70%);
  border:1px solid rgba(240,216,210,.1);
}
.portfolio-item:hover .portfolio-photo{transform:scale(1.06);}
.portfolio-meta{
  position:absolute;left:16px;bottom:16px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone);
  background:rgba(5,5,5,.7);padding:7px 12px;
}
.portfolio-style{
  position:absolute;top:16px;right:16px;
  font-family:var(--hand);font-size:1.05rem;color:var(--pale);transform:rotate(4deg);
}

@media(max-width:900px){
  .portfolio-stack{grid-template-columns:repeat(6, 1fr);}
  .portfolio-item{aspect-ratio:3/4 !important;margin-top:0 !important;}
  .portfolio-item:nth-child(odd){grid-column:1/span 6;}
  .portfolio-item:nth-child(even){grid-column:1/span 6;}
}

/* ─── PROCESS (Booking Flow) — handwritten scroll ── */
.process{background:var(--ink);position:relative;overflow:hidden;}
.process-inner{position:relative;max-width:980px;margin:0 auto;}
.process-line{
  position:absolute;left:50%;top:80px;bottom:80px;width:1px;background:var(--line);
}
.process-line::before{
  content:"";position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;background:var(--blood);transform:translateX(-50%);
}
.process-step{
  position:relative;display:grid;grid-template-columns:1fr 80px 1fr;gap:40px;align-items:center;margin:80px 0;
}
.process-step:nth-child(odd) .process-text{text-align:right;}
.process-step:nth-child(odd) .process-illust{grid-column:3;}
.process-step:nth-child(odd) .process-text{grid-column:1;}
.process-step:nth-child(even) .process-text{text-align:left;grid-column:3;}
.process-step:nth-child(even) .process-illust{grid-column:1;}
.process-num-circle{
  grid-column:2;width:64px;height:64px;border-radius:50%;border:1px solid var(--bone-faint);
  display:grid;place-items:center;background:var(--ink);justify-self:center;
  font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--pale);
  position:relative;z-index:2;
}
.process-step.active .process-num-circle{border-color:var(--blood);color:var(--pale);background:var(--blood);}
.process-step h3{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--bone);font-weight:400;}
.process-step p{margin-top:14px;font-size:.88rem;color:var(--bone-dim);line-height:1.85;}
.process-script{font-family:var(--hand);font-size:1.6rem;color:var(--blood);transform:rotate(-3deg);display:inline-block;margin-top:14px;}
.process-illust{
  aspect-ratio:5/4;background:var(--ink-3);border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.process-illust::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(139,31,31,.18) 0%, transparent 65%);
}
.process-illust::after{
  content:attr(data-step);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-style:italic;font-size:3.4rem;color:var(--bone-faint);
}

@media(max-width:768px){
  .process-line{left:32px;}
  .process-step{grid-template-columns:64px 1fr;gap:24px;margin:48px 0;}
  .process-step .process-num-circle{grid-column:1;justify-self:start;}
  .process-step .process-text,
  .process-step .process-illust{grid-column:2 !important;text-align:left !important;}
  .process-step .process-illust{margin-top:18px;}
}

/* ─── MARK (Care policy band) ───────────────────── */
.mark{background:var(--ink-3);padding:90px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mark-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px;}
.mark-card{padding:32px 24px;border:1px solid var(--line);background:var(--ink);position:relative;}
.mark-card::before{
  content:attr(data-num);position:absolute;top:14px;right:14px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;color:var(--bone-dim);
}
.mark-card h4{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--pale);margin-bottom:14px;font-weight:400;}
.mark-card p{font-size:.82rem;color:var(--bone-dim);line-height:1.85;}

@media(max-width:900px){ .mark-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:540px){ .mark-grid{grid-template-columns:1fr;} }

/* ─── CTA BAND ──────────────────────────────────── */
.cta-band{
  background:var(--blood-deep);
  padding:120px 0;text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.12) 14px 15px);
}
.cta-band-script{
  font-family:var(--hand);font-size:clamp(36px, 5vw, 72px);
  color:var(--pale);transform:rotate(-3deg);display:inline-block;margin-bottom:18px;position:relative;z-index:1;
}
.cta-band-title{
  font-family:var(--serif);font-size:clamp(48px, 7vw, 110px);
  line-height:1;color:var(--bone);font-weight:400;letter-spacing:-.02em;position:relative;z-index:1;
}
.cta-band-title em{font-style:italic;color:var(--pale);}
.cta-band p{margin:32px 0;font-family:var(--sans);font-size:.78rem;letter-spacing:.28em;color:rgba(240,216,210,.7);text-transform:uppercase;position:relative;z-index:1;}
.cta-band a.cta-btn{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  padding:20px 38px;background:var(--bone);color:var(--ink);
  position:relative;z-index:1;
  transition:background .3s,color .3s;
}
.cta-band a.cta-btn:hover{background:var(--pale);color:var(--blood-deep);}

/* ─── FOOTER ───────────────────────────────────── */
.site-footer{background:var(--ink);padding:90px 0 40px;border-top:1px solid var(--line);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px;}
.footer-brand-en{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--bone);}
.footer-brand-jp{font-family:var(--sans);font-size:.62rem;letter-spacing:.32em;color:var(--bone-dim);text-transform:uppercase;margin-top:8px;}
.footer-info{margin-top:24px;font-size:.78rem;line-height:2;color:var(--bone-dim);}
.footer-script{font-family:var(--hand);font-size:1.5rem;color:var(--blood);transform:rotate(-3deg);display:inline-block;margin-top:24px;}
.footer-col-title{font-family:var(--sans);font-size:.62rem;letter-spacing:.32em;color:var(--bone);text-transform:uppercase;margin-bottom:18px;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:10px;}
.footer-links a{font-size:.84rem;color:var(--bone-dim);}
.footer-links a:hover{color:var(--pale);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:32px;border-top:1px solid var(--line);font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;color:var(--bone-dim);text-transform:uppercase;}

@media(max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;gap:40px;} }
@media(max-width:540px){ .footer-top{grid-template-columns:1fr;} }

/* ─── PAGE HEADER (sub pages) ──────────────────── */
.page-hero{
  position:relative;padding:200px 0 100px;background:var(--ink-2);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 30%, rgba(139,31,31,.22) 0%, transparent 60%);
}
.page-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:end;}
.page-hero-num{
  font-family:var(--serif);font-style:italic;font-size:clamp(80px, 14vw, 220px);
  color:transparent;-webkit-text-stroke:1px var(--bone-faint);
  line-height:.85;
}
.page-hero-text{padding-bottom:18px;}
.page-hero-eyebrow{font-family:var(--sans);font-size:.66rem;letter-spacing:.4em;color:var(--blood);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:14px;}
.page-hero-eyebrow::before{content:"";width:36px;height:1px;background:var(--blood);}
.page-hero h1{
  font-family:var(--serif);font-size:clamp(48px, 6vw, 100px);
  color:var(--bone);font-weight:400;letter-spacing:-.015em;line-height:.98;
}
.page-hero h1 em{font-style:italic;color:var(--pale);}
.page-hero-script{font-family:var(--hand);font-size:1.8rem;color:var(--blood);transform:rotate(-3deg);display:inline-block;margin-top:14px;}

.crumbs{display:flex;align-items:center;gap:10px;margin-top:32px;font-family:var(--sans);font-size:.62rem;letter-spacing:.32em;color:var(--bone-dim);text-transform:uppercase;}
.crumbs a:hover{color:var(--pale);}
.crumbs span{color:var(--blood);}

@media(max-width:768px){
  .page-hero{padding:160px 0 70px;}
  .page-hero-inner{grid-template-columns:1fr;gap:24px;}
}

/* ─── 2-COL PROSE (about etc) ─────────────────── */
.prose-2col{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;}
.prose-2col h2{font-family:var(--serif);font-size:clamp(34px, 4vw, 54px);color:var(--pale);font-weight:400;font-style:italic;margin-bottom:22px;letter-spacing:-.005em;line-height:1.1;}
.prose-2col p{margin-bottom:18px;color:var(--bone-dim);line-height:1.95;font-size:.94rem;}
.prose-image{position:relative;aspect-ratio:4/5;overflow:hidden;}
.prose-image .photo-fill{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 40% 50%, #2a1414 0%, #0a0606 70%);
}
.prose-image .photo-fill::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(240,216,210,.05) 0 2px, transparent 2px 6px);
}
.prose-image-cap{position:absolute;left:18px;bottom:18px;font-family:var(--hand);font-size:1.4rem;color:var(--blood);transform:rotate(-3deg);}

@media(max-width:900px){ .prose-2col{grid-template-columns:1fr;gap:48px;} }

/* ─── BIO TIMELINE ────────────────────────────── */
.bio{background:var(--ink-2);padding:140px 0;border-top:1px solid var(--line);}
.bio-list{max-width:880px;margin:60px auto 0;border-top:1px solid var(--line);}
.bio-row{display:grid;grid-template-columns:140px 1fr;gap:36px;padding:28px 0;border-bottom:1px solid var(--line);}
.bio-year{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--blood);letter-spacing:.04em;}
.bio-event h4{font-family:var(--serif);font-size:1.15rem;color:var(--bone);font-weight:500;margin-bottom:8px;}
.bio-event p{font-size:.88rem;color:var(--bone-dim);line-height:1.85;}

@media(max-width:768px){ .bio-row{grid-template-columns:1fr;gap:8px;} .bio-year{font-size:1.05rem;}}

/* ─── PRICING TABLE ───────────────────────────── */
.price-table{margin-top:60px;border-top:1px solid var(--line);}
.price-row{
  display:grid;grid-template-columns:.6fr 1.5fr .9fr;gap:32px;
  padding:32px 0;border-bottom:1px solid var(--line);align-items:center;
}
.price-style{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--pale);}
.price-style small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;color:var(--bone-dim);margin-top:6px;text-transform:uppercase;}
.price-desc{font-size:.88rem;color:var(--bone-dim);line-height:1.85;}
.price-figure{font-family:var(--serif);font-size:1.4rem;color:var(--bone);text-align:right;}
.price-figure small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;color:var(--bone-dim);margin-top:6px;text-transform:uppercase;}

@media(max-width:768px){ .price-row{grid-template-columns:1fr;gap:8px;} .price-figure{text-align:left;}}

/* ─── PORTFOLIO PAGE GRID ────────────────────── */
.pf-filter{display:flex;gap:8px;margin-bottom:50px;flex-wrap:wrap;}
.pf-filter button{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--line);color:var(--bone-dim);background:transparent;
  transition:all .3s;
}
.pf-filter button.is-active,.pf-filter button:hover{border-color:var(--blood);color:var(--pale);background:rgba(139,31,31,.1);}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pf-card{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-3);}
.pf-photo{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 40% 45%, #2a1414 0%, #0a0606 70%);
  transition:transform 1.0s ease;
}
.pf-photo::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(240,216,210,.05) 0 2px, transparent 2px 7px);
}
.pf-card:hover .pf-photo{transform:scale(1.05);}
.pf-meta{
  position:absolute;left:16px;bottom:16px;right:16px;
  display:flex;justify-content:space-between;align-items:end;
}
.pf-meta-left{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone);background:rgba(5,5,5,.75);padding:6px 11px;}
.pf-meta-right{font-family:var(--hand);font-size:1.1rem;color:var(--pale);transform:rotate(4deg);}

@media(max-width:768px){ .pf-grid{grid-template-columns:1fr 1fr;gap:10px;} }

/* ─── BOOKING FORM ────────────────────────────── */
.booking{background:var(--ink-2);padding:140px 0;border-top:1px solid var(--line);}
.booking-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;}
.booking-aside h3{font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--pale);font-weight:400;line-height:1.15;}
.booking-aside p{margin-top:18px;font-size:.92rem;color:var(--bone-dim);line-height:1.95;}
.booking-script{font-family:var(--hand);font-size:1.6rem;color:var(--blood);transform:rotate(-3deg);display:inline-block;margin-top:32px;}
.booking-aside ul{list-style:none;margin-top:28px;border-top:1px solid var(--line);}
.booking-aside li{padding:14px 0;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--bone-dim);display:flex;gap:14px;}
.booking-aside li::before{content:"〇";color:var(--blood);font-size:.7rem;margin-top:4px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row.full{grid-column:1/-1;}
.form-row label{font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;color:var(--bone-dim);text-transform:uppercase;}
.form-row input,.form-row textarea,.form-row select{
  font-family:var(--sans);font-size:.92rem;
  background:var(--ink);border:1px solid var(--line);color:var(--bone);
  padding:14px 16px;
  transition:border-color .3s, background .3s;
}
.form-row textarea{min-height:140px;resize:vertical;}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--blood);background:var(--ink-3);}
.form-submit{
  margin-top:32px;display:inline-flex;align-items:center;gap:16px;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  padding:20px 40px;background:var(--blood);color:var(--bone);
  border:1px solid var(--blood);transition:.3s;cursor:pointer;
}
.form-submit:hover{background:transparent;color:var(--pale);}
.form-note{margin-top:18px;font-size:.74rem;color:var(--bone-dim);line-height:1.7;}

@media(max-width:900px){ .booking-inner,.form-grid{grid-template-columns:1fr;gap:48px 0;} .form-grid{gap:24px;}}

/* ─── ARTICLE BODY ────────────────────────────── */
.article{padding:100px 0;}
.article-inner{max-width:860px;margin:0 auto;}
.article-meta{display:flex;gap:18px;margin-bottom:24px;font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim);}
.article-meta span:first-child{color:var(--blood);}
.article-inner h1{font-family:var(--serif);font-size:clamp(34px, 4vw, 56px);color:var(--bone);font-weight:400;line-height:1.15;margin-bottom:32px;letter-spacing:-.01em;}
.article-inner h1 em{font-style:italic;color:var(--pale);}
.article-lead{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--pale);line-height:1.7;border-left:2px solid var(--blood);padding-left:24px;margin:32px 0 48px;}
.article-inner h2{font-family:var(--serif);font-size:1.85rem;color:var(--bone);font-weight:400;margin:48px 0 18px;}
.article-inner h2 em{font-style:italic;color:var(--pale);}
.article-inner p{margin-bottom:18px;color:var(--bone-dim);font-size:.96rem;line-height:1.95;}
.article-inner figure{margin:48px 0;}
.article-inner figure .photo-fill{aspect-ratio:16/10;background:radial-gradient(ellipse at 40% 50%, #2a1414 0%, #0a0606 70%);position:relative;overflow:hidden;}
.article-inner figure .photo-fill::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg, rgba(240,216,210,.05) 0 2px, transparent 2px 6px);}
.article-inner figcaption{margin-top:14px;font-size:.78rem;color:var(--bone-dim);font-style:italic;text-align:center;}
.article-back{display:inline-flex;align-items:center;gap:10px;margin-top:60px;font-family:var(--sans);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim);border-bottom:1px solid var(--line);padding-bottom:6px;}
.article-back:hover{color:var(--pale);border-bottom-color:var(--bone);}

/* ─── PRIVACY ─────────────────────────────────── */
.privacy{padding:100px 0;}
.privacy-inner{max-width:860px;margin:0 auto;}
.privacy-inner h2{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--pale);margin:42px 0 14px;font-weight:400;}
.privacy-inner p{color:var(--bone-dim);font-size:.94rem;line-height:1.95;margin-bottom:14px;}
.privacy-inner ul{margin:14px 0 14px 22px;}
.privacy-inner li{color:var(--bone-dim);font-size:.92rem;line-height:1.85;margin-bottom:7px;}

/* ─── RECRUIT (JOIN) ──────────────────────────── */
.join{background:var(--ink);padding:120px 0;}
.join-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.join-aside p{margin-top:18px;font-size:.94rem;color:var(--bone-dim);line-height:1.95;}
.join-positions{margin-top:0;}
.position-card{
  border:1px solid var(--line);padding:32px 28px;margin-bottom:18px;
  background:var(--ink-2);
}
.position-card .ptag{font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;color:var(--blood);text-transform:uppercase;}
.position-card h4{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--pale);margin:14px 0 18px;font-weight:400;}
.position-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;}
.position-card dt{font-family:var(--sans);font-size:.66rem;letter-spacing:.26em;color:var(--bone-dim);text-transform:uppercase;padding-top:4px;}
.position-card dd{font-size:.88rem;color:var(--bone);line-height:1.7;}

@media(max-width:900px){ .join-inner{grid-template-columns:1fr;gap:48px;} }

/* ─── NEWS LIST PAGE ──────────────────────────── */
.news-page{padding:100px 0;}
.news-page-list{border-top:1px solid var(--line);}

/* ─── FAQ accordion ──────────────────────────── */
.faq{margin-top:60px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--bone);
  background:none;
}
.faq-q::after{content:"+";font-family:var(--sans);font-size:1.4rem;color:var(--blood);transition:transform .3s;}
.faq-item.is-open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s;}
.faq-a-inner{padding:0 0 24px;color:var(--bone-dim);line-height:1.95;font-size:.92rem;}
.faq-item.is-open .faq-a{max-height:240px;}

/* generated image bindings 2026-05-03 */
.hero-photo{
  background-image:linear-gradient(135deg, rgba(5,5,5,.48) 0%, rgba(5,5,5,.10) 46%, rgba(5,5,5,.68) 100%),url('../images/hero.jpg');
  background-size:cover;
  background-position:center;
}
.hero-photo::after,.atelier-photo::after{display:none;}
.atelier-photo{
  background-image:linear-gradient(160deg, rgba(5,5,5,.30), rgba(5,5,5,.08) 48%, rgba(5,5,5,.64)),url('../images/atelier-interior.jpg');
  background-size:cover;
  background-position:center;
}
.portfolio-photo,.pf-photo,.prose-image .photo-fill,.article-inner figure .photo-fill{background-size:cover;background-position:center;}
.prose-image.img-about-workbench .photo-fill{background-image:linear-gradient(160deg, rgba(5,5,5,.16), rgba(5,5,5,.62)),url('../images/about-workbench.jpg');}
.prose-image.img-about-hands .photo-fill{background-image:linear-gradient(160deg, rgba(5,5,5,.16), rgba(5,5,5,.62)),url('../images/about-hands.jpg');}
.prose-image.img-atelier-interior .photo-fill{background-image:linear-gradient(160deg, rgba(5,5,5,.16), rgba(5,5,5,.62)),url('../images/atelier-interior.jpg');}
.prose-image.img-studio-entrance .photo-fill{background-image:linear-gradient(160deg, rgba(5,5,5,.16), rgba(5,5,5,.62)),url('../images/studio-entrance.jpg');}
.article-inner figure .photo-fill.img-installation-view{background-image:linear-gradient(160deg, rgba(5,5,5,.16), rgba(5,5,5,.48)),url('../images/installation-view.jpg');}
.portfolio-item:nth-child(1) .portfolio-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.14), rgba(5,5,5,.50)),url('../images/portfolio-07.jpg');}
.portfolio-item:nth-child(2) .portfolio-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.14), rgba(5,5,5,.50)),url('../images/portfolio-02.jpg');}
.portfolio-item:nth-child(3) .portfolio-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.14), rgba(5,5,5,.50)),url('../images/portfolio-04.jpg');}
.portfolio-item:nth-child(4) .portfolio-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.14), rgba(5,5,5,.50)),url('../images/portfolio-15.jpg');}
.portfolio-item:nth-child(5) .portfolio-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.14), rgba(5,5,5,.50)),url('../images/portfolio-11.jpg');}
.portfolio-item:nth-child(6) .portfolio-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.14), rgba(5,5,5,.50)),url('../images/portfolio-08.jpg');}
.pf-card:nth-child(1) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-07.jpg');}
.pf-card:nth-child(2) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-01.jpg');}
.pf-card:nth-child(3) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-04.jpg');}
.pf-card:nth-child(4) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-15.jpg');}
.pf-card:nth-child(5) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-11.jpg');}
.pf-card:nth-child(6) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-08.jpg');}
.pf-card:nth-child(7) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-03.jpg');}
.pf-card:nth-child(8) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-05.jpg');}
.pf-card:nth-child(9) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-09.jpg');}
.pf-card:nth-child(10) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-18.jpg');}
.pf-card:nth-child(11) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-02.jpg');}
.pf-card:nth-child(12) .pf-photo{background-image:linear-gradient(160deg, rgba(5,5,5,.12), rgba(5,5,5,.48)),url('../images/portfolio-12.jpg');}


/* ====================================================
   Visual safety override (2026-05-04 一括強制表示化)
   feedback_pre_upload_visual_check ルール準拠
   JS未発火時/画像非表示を防ぐため、すべての
   reveal系クラスを初期表示OKに強制
==================================================== */
.reveal, .reveal-up, .reveal-fade, .reveal-clip, .reveal-noren,
.scrub-item, .reveal-left, .reveal-right { 
  opacity: 1 !important; 
  transform: none !important; 
  clip-path: inset(0 0 0% 0) !important;
  -webkit-clip-path: inset(0 0 0% 0) !important;
}



/* ====================================================
   スマホ時 contact フォーム強制1カラム化（2026-05-05）
   2カラム表示で入力欄が狭くなる問題
==================================================== */
@media (max-width: 767px) {
    .form-row,
    .form-grid,
    .form-2col,
    .form-pair,
    .input-row,
    .input-grid,
    [class*="form-row"],
    [class*="form-grid"],
    [class*="two-col"] {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form input[type="number"],
    form textarea,
    form select,
    .form-row > input,
    .form-row > textarea,
    .form-row > select,
    .form-row > div,
    .form-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .form-row, .form-grid {
        margin-bottom: 1rem;
    }
}



/* ====================================================
   contact 1カラム化 強化版（2026-05-05・全クラス網羅）
==================================================== */
@media (max-width: 767px) {
    .contact-grid,
    .contact-form,
    .ct-grid,
    .ct-form,
    .booking-form,
    .reserve-form,
    .form-card,
    .form-wrap,
    .form-box,
    [class*="contact-grid"],
    [class*="contact-form"],
    [class*="ct-grid"],
    [class*="ct-form"] {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    .contact-grid > *,
    .contact-form > *,
    .ct-grid > *,
    .ct-form > *,
    .booking-form > *,
    .reserve-form > *,
    .form-card > *,
    .form-wrap > *,
    .form-box > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .ct-budget-grid,
    .ct-field {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
}

/* ====================================================
   スマホ時 2カラム→1カラム化（2026-05-15）
   右文章が縦長になる時
==================================================== */
@media (max-width: 768px) {
  .booking-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ====================================================
   多カラムgrid スマホ最適化（2026-05-15 千尋）
==================================================== */
@media (max-width: 768px) {
  /* 1カラム化（流れ・5カラム以上） */
  .portfolio-stack { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ====================================================
   process-grid（4STEPS）スマホ1カラム化（2026-05-16 一括追加）
==================================================== */
@media(max-width:640px){
  .process-grid{grid-template-columns:1fr !important;margin-top:32px}
  .process-step{padding:26px 20px;border-right:none !important;border-bottom:1px solid currentColor !important}
  .process-step:nth-child(2){border-right:none !important;border-bottom:1px solid currentColor !important}
  .process-step:last-child{border-bottom:none !important}
  .process-step .step-num{margin-bottom:14px}
  .process-step h4{font-size:22px;margin-bottom:10px}
  .process-step p{font-size:13px;line-height:1.78}
}