@charset "UTF-8";
/* ==========================================================================
   株式会社KARMA — Corporate Site
   Design tokens per KARMA_implementation_spec.md §2 / §3 / §4
   No blue. No green. No pure white. No border-radius. No box-shadow. No bold.
   ========================================================================== */

:root{
  /* ---- Color ---- */
  --color-black:      #0A0A0A;
  --color-white:      #F4F3F1;
  --color-charcoal:   #2C2C2C;
  --color-ash:        #8A8A8A;
  --color-line:       #DEDCD8;
  --color-line-dark:  #2A2A2A;
  --color-gold:       #C8A45C;
  --color-gold-hover: #B08F49;

  /* ---- Font ---- */
  --font-serif-en: 'Cormorant Garamond', 'Cormorant', Didot, 'Times New Roman', serif;
  --font-serif-ja: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-sans-ja:  'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 800px;
  --gutter: 24px;

  /* ---- Type scale (SP → PC) ---- */
  --fs-hero:  clamp(40px, 8.6vw, 88px);
  --fs-h2:    clamp(24px, 3.2vw, 36px);
  --fs-label: clamp(11px, 0.95vw, 12px);
  --fs-h3:    clamp(18px, 1.8vw, 22px);
  --fs-body:  clamp(15px, 1.1vw, 16px);
  --fs-cap:   clamp(12px, 1vw, 13px);
  --fs-num:   clamp(40px, 5.4vw, 64px);
  --fs-btn:   14px;

  /* ---- Spacing (8px base) ---- */
  --space-section: clamp(80px, 10.5vw, 160px);
  --space-heading: clamp(32px, 3.4vw, 48px);
  --space-gap:     clamp(32px, 3.4vw, 48px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.76,0,.24,1);
}

@media (min-width:1024px){ :root{ --gutter:40px; } }

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; border-radius:0; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
:where(*){ border-radius:0 !important; box-shadow:none !important; }

::selection{ background:var(--color-gold); color:var(--color-black); }

body{
  font-family:var(--font-sans-ja);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.9;
  letter-spacing:.06em;
  color:var(--color-charcoal);
  background:var(--color-white);
  overflow-x:hidden;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}

/* Focus ring — gold 1px, never removed (§7) */
:focus-visible{ outline:1px solid var(--color-gold); outline-offset:4px; }

/* ==========================================================================
   Smooth scroll shell
   ========================================================================== */
.smooth-wrapper{ position:fixed; inset:0; overflow:hidden; z-index:1; }
.smooth-content{ will-change:transform; }
body:not(.has-smooth) .smooth-wrapper{ position:static; overflow:visible; }
body:not(.has-smooth) .smooth-content{ transform:none !important; }

/* ==========================================================================
   Overlays: grain / progress / transition / cursor
   ========================================================================== */
.grain{
  position:fixed; inset:-120%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

.scroll-progress{
  position:fixed; top:0; left:0; height:1px; width:100%; z-index:9100;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--color-gold); pointer-events:none;
}

/* 初期状態で画面を覆っておく（読み込み時のチラつき防止）。JSが読み込み後に上方向へ抜く */
.page-wipe{
  position:fixed; inset:0; z-index:9500; pointer-events:none;
  background:var(--color-black);
  transform:scaleY(0); transform-origin:50% 100%;
}
.js .page-wipe{ transform:scaleY(1); }
.page-wipe.is-in{ transform:scaleY(1); transform-origin:50% 100%; transition:transform .7s var(--ease-io); }
.page-wipe.is-out{ transform:scaleY(0); transform-origin:50% 0; transition:transform .7s var(--ease-io); }

.cursor,.cursor-dot{
  position:fixed; top:0; left:0; z-index:9600; pointer-events:none;
  mix-blend-mode:difference; border-radius:0;
  opacity:0; transition:opacity .4s linear;
}
.cursor{ width:40px; height:40px; margin:-20px 0 0 -20px; border:1px solid var(--color-white);
  transition:opacity .4s linear, width .4s var(--ease-out), height .4s var(--ease-out), margin .4s var(--ease-out); }
.cursor-dot{ width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--color-white); }
body.cursor-ready .cursor,body.cursor-ready .cursor-dot{ opacity:1; }
body.cursor-hover .cursor{ width:72px; height:72px; margin:-36px 0 0 -36px; }
@media (hover:none),(max-width:1023px){ .cursor,.cursor-dot{ display:none; } }

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{ display:none; }
.js .preloader{
  position:fixed; inset:0; z-index:9800; background:var(--color-black);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.preloader__mark{ width:34px; color:var(--color-white); opacity:0; animation:preMark .5s var(--ease-out) forwards; }
@keyframes preMark{ 0%{opacity:0; transform:translateY(14px)} 60%{opacity:1; transform:translateY(0)} 100%{opacity:1; transform:translateY(0)} }
.preloader__bar{ margin-top:28px; width:120px; height:1px; background:var(--color-line-dark); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:100%; background:var(--color-gold); transform:scaleX(0); transform-origin:0 50%; animation:preBar .9s var(--ease-io) forwards; }
@keyframes preBar{ to{ transform:scaleX(1); } }
.preloader.is-done{ transform:translateY(-101%); transition:transform .6s var(--ease-io); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container{ width:100%; max-width:calc(var(--container) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:var(--container-narrow); margin-inline:auto; }
.section{ padding-block:var(--space-section); position:relative; }
.section--light{ background:var(--color-white); color:var(--color-charcoal); }
.section--dark{ background:var(--color-black); color:var(--color-white); }
.section--dark p{ color:#C9C7C3; }

.rule{ height:1px; background:var(--color-line); border:0; }
.section--dark .rule{ background:var(--color-line-dark); }

/* ==========================================================================
   Typography
   ========================================================================== */
.label{
  font-family:var(--font-serif-en); font-size:var(--fs-label); font-weight:400;
  letter-spacing:.35em; line-height:1; text-transform:uppercase; color:var(--color-ash);
  display:inline-flex; align-items:center; gap:14px;
}
.label::before{ content:""; width:28px; height:1px; background:var(--color-gold); display:block; }
.label--center{ justify-content:center; }

.h2{
  font-family:var(--font-serif-ja); font-size:var(--fs-h2); font-weight:400;
  letter-spacing:.14em; line-height:1.6; color:var(--color-black);
  margin-top:20px; word-break:keep-all;
}
.section--dark .h2{ color:var(--color-white); }

.h3{
  font-family:var(--font-serif-ja); font-size:var(--fs-h3); font-weight:400;
  letter-spacing:.10em; line-height:1.7; color:var(--color-black);
}
.section--dark .h3{ color:var(--color-white); }

.lead,.body{ font-size:var(--fs-body); line-height:1.9; letter-spacing:.06em; font-weight:300; }
.caption{ font-size:var(--fs-cap); line-height:1.8; letter-spacing:.08em; color:var(--color-ash); font-weight:300; }
.en{ font-family:var(--font-serif-en); font-weight:300; letter-spacing:.22em; }
.num{ font-family:var(--font-serif-en); font-size:var(--fs-num); font-weight:300; letter-spacing:.04em; line-height:1; color:var(--color-gold); }
.center{ text-align:center; }
.sect-head{ margin-bottom:var(--space-heading); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-bg:transparent; --btn-fg:var(--color-black); --btn-bd:var(--color-black);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:16px;
  min-height:64px; padding:0 40px; overflow:hidden;
  font-family:var(--font-sans-ja); font-size:var(--fs-btn); font-weight:400;
  letter-spacing:.18em; line-height:1; text-align:center;
  color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd);
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out);
  isolation:isolate;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--color-black);
  transform:scaleY(0); transform-origin:50% 100%; transition:transform .5s var(--ease-io);
}
.btn:hover::before{ transform:scaleY(1); transform-origin:50% 0; }
.btn:hover{ color:var(--color-white); }
.btn__arrow{ display:block; width:22px; height:1px; background:currentColor; position:relative; transition:width .45s var(--ease-out); }
.btn__arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.btn:hover .btn__arrow{ width:34px; }

.btn--gold{ --btn-bg:var(--color-gold); --btn-fg:var(--color-black); --btn-bd:var(--color-gold); }
.btn--gold::before{ background:var(--color-gold-hover); }
.btn--gold:hover{ color:var(--color-black); border-color:var(--color-gold-hover); }

.btn--ghost-light{ --btn-fg:var(--color-white); --btn-bd:#4A4A4A; }
.btn--ghost-light::before{ background:var(--color-white); }
.btn--ghost-light:hover{ color:var(--color-black); border-color:var(--color-white); }

.btn--wide{ width:100%; max-width:400px; }

/* Text link */
.tlink{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-serif-en);
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--color-black); }
.section--dark .tlink{ color:var(--color-white); }
.tlink span{ position:relative; padding-bottom:6px; }
.tlink span::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease-io); }
.tlink:hover span::after{ transform:scaleX(1); transform-origin:0 50%; }
.tlink i{ display:block; width:18px; height:1px; background:currentColor; transition:transform .45s var(--ease-out); }
.tlink:hover i{ transform:translateX(6px); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter); height:96px;
  transition:height .5s var(--ease-out), background-color .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom:1px solid transparent; color:var(--color-white); mix-blend-mode:normal;
}
.header.is-compact{ height:72px; background:rgba(10,10,10,.86); backdrop-filter:blur(10px); border-bottom-color:var(--color-line-dark); }
.header.is-light{ color:var(--color-black); }
.header.is-light.is-compact{ background:rgba(244,243,241,.9); border-bottom-color:var(--color-line); }
.header.is-hidden{ transform:translateY(-100%); transition:transform .6s var(--ease-io), height .5s var(--ease-out), background-color .5s var(--ease-out); }
.header{ transform:translateY(0); }

/* Logo — 提供ロゴのワードマーク（タグラインは可読サイズを確保できるFVのみで使用） */
.logo{ display:block; line-height:0; }
.logo__img{
  display:block; width:150px; aspect-ratio:1152/133;
  background:no-repeat center center/contain url("wordmark-white.png");
}
.header.is-light .logo__img{ background-image:url("wordmark-black.png"); }
@media (max-width:1023px){ .logo__img{ width:120px; } }

.footer .logo__img{ width:clamp(180px,20vw,220px); }

.nav{ display:flex; align-items:center; gap:34px; }
.nav__link{ font-size:12px; letter-spacing:.14em; font-weight:400; position:relative; padding-block:6px; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease-io); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__cta{ min-height:44px; padding:0 26px; border:1px solid currentColor; font-size:11px; letter-spacing:.18em;
  display:inline-flex; align-items:center; transition:background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out); }
.nav__cta:hover{ background:var(--color-gold); border-color:var(--color-gold); color:var(--color-black); }
@media (max-width:1279px){ .nav{ display:none; } }

.burger{ width:44px; height:44px; display:none; align-items:center; justify-content:center; position:relative; z-index:2; }
.burger i{ position:absolute; left:11px; width:22px; height:1px; background:currentColor; transition:transform .5s var(--ease-io), opacity .3s linear, width .4s var(--ease-out); }
.burger i:nth-child(1){ transform:translateY(-4px); }
.burger i:nth-child(2){ transform:translateY(4px); width:14px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:rotate(28deg); }
.burger[aria-expanded="true"] i:nth-child(2){ transform:rotate(-28deg); width:22px; }
@media (max-width:1279px){ .burger{ display:flex; } }

/* Fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:7900; background:var(--color-black); color:var(--color-white);
  display:flex; flex-direction:column; justify-content:center; padding:120px var(--gutter) 56px;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-io); visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list{ display:flex; flex-direction:column; gap:4px; max-width:var(--container); margin-inline:auto; width:100%; }
.menu__item{ overflow:hidden; border-bottom:1px solid var(--color-line-dark); }
.menu__link{ display:flex; align-items:baseline; gap:20px; padding:18px 0;
  transform:translateY(110%); transition:transform .9s var(--ease-io), opacity .6s linear; opacity:0; }
.menu.is-open .menu__link{ transform:translateY(0); opacity:1; }
.menu__en{ font-family:var(--font-serif-en); font-size:11px; letter-spacing:.3em; color:var(--color-ash); width:150px; flex:none; }
.menu__ja{ font-family:var(--font-serif-ja); font-size:clamp(20px,4.4vw,30px); font-weight:400; letter-spacing:.12em; transition:color .4s linear; }
.menu__link:hover .menu__ja{ color:var(--color-gold); }
.menu__foot{ max-width:var(--container); margin:48px auto 0; width:100%; display:flex; flex-wrap:wrap; gap:24px 40px; }
@media (max-width:640px){ .menu__en{ display:none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:var(--color-black); color:var(--color-white); overflow:hidden; }

/* 背景：ソーラーパネルの実写（企画書§5-3のトーンに合わせ彩度を落とし済み） */
.hero__bg{
  position:absolute; inset:-6%;
  background-repeat:no-repeat; background-position:center center; background-size:cover;
  background-image:url("hero-panel.jpg");
  background-image:image-set(url("hero-panel.webp") type("image/webp"), url("hero-panel.jpg") type("image/jpeg"));
  opacity:.58; will-change:transform;
}
/* スクリム：中央を沈ませてロゴの視認性を確保しつつ、下端は次セクションの黒へ繋ぐ */
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 46% at 50% 46%, rgba(10,10,10,.66) 0%, rgba(10,10,10,.34) 52%, rgba(10,10,10,0) 100%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.10) 24%, rgba(10,10,10,.20) 60%, rgba(10,10,10,.82) 90%, var(--color-black) 100%);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.4; }
.hero__inner{ position:relative; z-index:2; text-align:center; padding-inline:var(--gutter); width:100%; }

.hero__logo{ width:min(520px,78vw); margin:0 auto; line-height:0; }
.hero__logo img{ width:100%; height:auto; }
.js .hero__logo img{
  clip-path:inset(0 100% 0 0); transform:translateY(14px);
  transition:clip-path 1.7s var(--ease-io), transform 1.7s var(--ease-out); }
.hero__logo.is-in img{ clip-path:inset(0 0 0 0); transform:none; }

.hero__tag{ margin-top:30px; font-family:var(--font-serif-en); font-size:clamp(9px,1.1vw,12px);
  letter-spacing:.35em; text-indent:.35em; color:#BDB9B2; overflow:hidden; }
.hero__tag i{ display:block; font-style:normal; }
.js .hero__tag i{ transform:translateY(110%); }
.hero__rule{ width:1px; height:56px; background:var(--color-gold); opacity:.5; margin:40px auto 0; }
.js .hero__rule{ height:0; }

.scroll-cue{ position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px; }
.scroll-cue span{ font-family:var(--font-serif-en); font-size:9px; letter-spacing:.34em; color:var(--color-ash); }
.scroll-cue i{ display:block; width:1px; height:48px; background:var(--color-line-dark); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:0; width:1px; height:16px; background:var(--color-gold);
  animation:cueDrop 2.4s var(--ease-io) infinite; }
@keyframes cueDrop{ 0%{transform:translateY(-16px)} 60%{transform:translateY(48px)} 100%{transform:translateY(48px)} }

/* ==========================================================================
   Concept (day → night gradient, spec §5-1 Section 2)
   ========================================================================== */
/* 黒→白の遷移は「文字が終わったあと」に固定する。
   セクション本体は黒のままにして、下端に高さの決まったグラデーション帯を敷く。 */
.concept{
  position:relative; background:var(--color-black); isolation:isolate;
  padding-top:calc(var(--space-section) * 1.2);
  padding-bottom:calc(var(--space-section) * 0.6 + var(--concept-fade));
  --concept-fade:clamp(220px, 34vh, 380px);
}
.concept::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1;
  height:var(--concept-fade); pointer-events:none;
  background:linear-gradient(180deg,
    rgba(244,243,241,0) 0%,
    rgba(244,243,241,.05) 22%,
    rgba(244,243,241,.28) 52%,
    rgba(244,243,241,.72) 82%,
    var(--color-white) 100%);
}
.concept > .container{ position:relative; z-index:1; }
.concept .label{ color:#9C9A96; }
.concept .h2{ color:var(--color-white); }
.concept__body{ color:#DAD8D4; }
.concept__mark{ width:26px; margin:0 auto var(--space-heading); color:var(--color-white); opacity:.9; }

/* ==========================================================================
   Service cards
   ========================================================================== */
.cards{ display:grid; grid-template-columns:1fr; gap:var(--space-gap); }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
/* PCでは折り返さず4カラム。列幅を確保するためガップを詰める */
@media (min-width:1024px){ .cards{ grid-template-columns:repeat(4,1fr); gap:28px; } }
@media (min-width:1280px){ .cards{ gap:36px; } }
.card{ border-top:1px solid var(--color-line); padding-top:32px; }
.card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.card__no{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.24em; color:var(--color-gold); }
.card__mark{ width:13px; color:var(--color-ash); transition:color .4s linear, transform .6s var(--ease-out); }
.card:hover .card__mark{ color:var(--color-gold); transform:translateY(-4px); }
.card__figure{ margin:28px 0 26px; overflow:hidden; background:#EDEBE7; aspect-ratio:4/3; }
.card__figure picture{ display:block; width:100%; height:100%; }
.card__figure svg,.card__figure img{ display:block; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out); }
.card:hover .card__figure svg,.card:hover .card__figure img{ transform:scale(1.05); }
.card__en{ font-family:var(--font-serif-en); font-size:11px; letter-spacing:.3em; color:var(--color-ash); }
.card__title{ font-family:var(--font-serif-ja); font-size:var(--fs-h3); font-weight:400; letter-spacing:.1em; margin:12px 0 18px; color:var(--color-black); }
.card__text{ font-size:var(--fs-body); line-height:1.9; }
.card__foot{ margin-top:26px; }

/* ==========================================================================
   Promise
   ========================================================================== */
.promise{ display:flex; flex-direction:column; }
.promise__item{ display:grid; grid-template-columns:1fr; gap:20px 56px; padding-block:clamp(40px,4.6vw,64px); border-top:1px solid var(--color-line); }
.promise__item:last-child{ border-bottom:1px solid var(--color-line); }
@media (min-width:768px){ .promise__item{ grid-template-columns:180px 1fr; align-items:start; } }
.promise__title{ font-family:var(--font-serif-ja); font-size:var(--fs-h3); font-weight:400; letter-spacing:.1em; color:var(--color-black); margin-bottom:16px; }

/* ==========================================================================
   Works
   ========================================================================== */
.works{ display:grid; grid-template-columns:1fr; gap:var(--space-gap); }
@media (min-width:768px){ .works{ grid-template-columns:repeat(3,1fr); } }
.work__figure{ overflow:hidden; aspect-ratio:3/2; background:#E9E7E3; }

/* 施工写真が入るまでの仮置き。写真が用意でき次第 .work__figure に差し替えます */
.work__ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; aspect-ratio:3/2; min-height:190px; padding:24px; text-align:center;
  border:1px solid var(--color-line); background-color:#EDEBE7;
  background-image:repeating-linear-gradient(45deg, rgba(138,138,138,0) 0 11px, rgba(138,138,138,.08) 11px 12px);
}
.work__ph-mark{ display:block; width:22px; height:22px; margin-bottom:16px; color:var(--color-ash); opacity:.45; }
.work__ph-label{ display:block; font-family:var(--font-serif-en); font-size:11px;
  letter-spacing:.3em; text-indent:.3em; line-height:1.6; color:var(--color-ash); }
.work__ph-note{ display:block; margin-top:10px; font-size:11px; letter-spacing:.12em;
  line-height:1.8; color:var(--color-ash); }
.work__figure picture{ display:block; width:100%; height:100%; }
.work__figure svg,.work__figure img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out); }
.work:hover .work__figure svg,.work:hover .work__figure img{ transform:scale(1.06); }
.work__meta{ margin-top:20px; display:flex; gap:18px; font-family:var(--font-serif-en); font-size:11px; letter-spacing:.24em; color:var(--color-ash); }
.work__title{ font-family:var(--font-serif-ja); font-size:var(--fs-h3); font-weight:400; letter-spacing:.1em; color:var(--color-black); margin-top:12px; }
.work__spec{ margin-top:14px; font-size:var(--fs-cap); color:var(--color-ash); letter-spacing:.08em; }

/* ==========================================================================
   Column article
   ========================================================================== */
.article__meta{ display:flex; align-items:center; gap:20px; padding-bottom:22px;
  border-bottom:1px solid var(--color-line); }
.article__date{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.18em; color:var(--color-ash); }
.article__cat{ font-size:11px; letter-spacing:.16em; color:var(--color-charcoal);
  border:1px solid var(--color-line); padding:6px 12px; }
.article__lead{ margin-top:var(--space-heading); font-size:clamp(16px,1.4vw,18px);
  line-height:2.1; letter-spacing:.06em; color:var(--color-black); }
.article__note{ margin-top:var(--space-heading); padding:20px 24px;
  border:1px solid var(--color-line); background:#EFEDEA;
  font-size:var(--fs-cap); line-height:1.9; color:var(--color-charcoal); }
.article__sources{ margin-top:32px; padding-top:24px; border-top:1px solid var(--color-line); }
.article__sources-h{ font-family:var(--font-serif-en); font-size:11px; letter-spacing:.3em;
  text-indent:.3em; color:var(--color-ash); }
.article__sources ul{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.article__sources li{ font-size:var(--fs-cap); line-height:1.8; }
.article__sources a{ color:var(--color-charcoal); border-bottom:1px solid var(--color-line);
  padding-bottom:2px; transition:border-color .4s linear, color .4s linear; }
.article__sources a:hover{ color:var(--color-black); border-color:var(--color-gold); }

/* 太字は使わない。強調はゴールドの細い下線で行う */
.prose strong{ font-weight:400; color:var(--color-black);
  border-bottom:1px solid var(--color-gold); padding-bottom:1px; }

/* 記事タイトルは長くなるため、ページヘッダーの文字サイズを抑える */
.pagehead__ja--article{ font-size:clamp(19px,2.4vw,28px); line-height:1.7; max-width:900px; }

/* ==========================================================================
   Partner（施工パートナー紹介）
   ========================================================================== */
.partner{ display:grid; grid-template-columns:1fr; gap:var(--space-gap); align-items:start; }
@media (min-width:1024px){ .partner{ grid-template-columns:32% 1fr; gap:72px; } }
.partner__mark{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; aspect-ratio:3/2; padding:24px; text-align:center;
  border:1px solid var(--color-line); background:#EFEDEA; }
.partner__mark picture{ display:block; width:min(240px,74%); }
.partner__mark img{ width:100%; height:auto; object-fit:contain; }
.partner__en{ font-family:var(--font-serif-en); font-weight:300;
  font-size:clamp(17px,2.1vw,24px); letter-spacing:.26em; text-indent:.26em; color:var(--color-black); }
.partner__ja{ font-size:12px; letter-spacing:.14em; color:var(--color-ash); }

.works__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; }
@media (max-width:640px){ .works__foot{ flex-direction:column; align-items:stretch; } }

/* 施工パートナーへの導線 */
.partner-link{
  display:inline-flex; align-items:center; gap:18px;
  padding:20px 28px; border:1px solid var(--color-line);
  background:#EFEDEA; color:var(--color-black);
  transition:border-color .45s var(--ease-out), background-color .45s var(--ease-out);
}
.partner-link:hover{ border-color:var(--color-gold); background:#EAE7E2; }
.partner-link__mark{ flex:none; width:18px; height:18px; color:var(--color-gold); }
.partner-link__text{ display:flex; flex-direction:column; gap:5px; }
.partner-link__en{ font-family:var(--font-serif-en); font-size:10px; letter-spacing:.32em;
  text-indent:.32em; line-height:1; color:var(--color-ash); }
.partner-link__ja{ font-size:14px; letter-spacing:.1em; line-height:1.4; }
.partner-link__arrow{ flex:none; width:22px; height:1px; background:var(--color-charcoal);
  position:relative; transition:transform .45s var(--ease-out); }
.partner-link__arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid var(--color-charcoal); border-right:1px solid var(--color-charcoal); transform:rotate(45deg); }
.partner-link:hover .partner-link__arrow{ transform:translateX(6px); }
@media (max-width:640px){ .partner-link{ justify-content:space-between; } }

/* ==========================================================================
   Flow
   ========================================================================== */
.flow{ display:grid; grid-template-columns:1fr; gap:0; position:relative; }
@media (min-width:1024px){ .flow{ grid-template-columns:repeat(5,1fr); } }
.flow__step{ position:relative; padding:32px 0 32px 32px; border-left:1px solid var(--color-line); }
@media (min-width:1024px){ .flow__step{ padding:36px 28px 0 0; border-left:0; border-top:1px solid var(--color-line); } }
.flow__step::before{ content:""; position:absolute; left:-3px; top:38px; width:5px; height:5px; background:var(--color-gold); }
@media (min-width:1024px){ .flow__step::before{ left:0; top:-3px; } }
.flow__no{ font-family:var(--font-serif-en); font-size:12px; letter-spacing:.3em; color:var(--color-gold); }
.flow__name{ font-family:var(--font-serif-ja); font-size:16px; font-weight:400; letter-spacing:.1em; color:var(--color-black); margin-top:14px; }
.flow__text{ font-size:var(--fs-cap); color:var(--color-ash); margin-top:12px; line-height:1.9; }

/* ==========================================================================
   Column list
   ========================================================================== */
.posts{ border-top:1px solid var(--color-line); }
.post{ display:grid; grid-template-columns:1fr; gap:8px 32px; padding-block:28px; border-bottom:1px solid var(--color-line); position:relative; }
@media (min-width:768px){ .post{ grid-template-columns:120px 150px 1fr auto; align-items:center; gap:32px; } }
.post__date{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.16em; color:var(--color-ash); }
.post__cat{ font-size:11px; letter-spacing:.16em; color:var(--color-charcoal); border:1px solid var(--color-line); padding:6px 12px; justify-self:start; }
.post__title{ font-size:var(--fs-body); letter-spacing:.06em; color:var(--color-black); transition:color .4s linear; }
.post:hover .post__title{ color:var(--color-gold); }
.post__arrow{ width:20px; height:1px; background:var(--color-line); position:relative; transition:transform .5s var(--ease-out), background-color .4s linear; }
.post:hover .post__arrow{ transform:translateX(8px); background:var(--color-gold); }
@media (max-width:767px){ .post__arrow{ display:none; } }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ background:var(--color-black); color:var(--color-white); padding-block:var(--space-section); position:relative; overflow:hidden; }
.cta__mark{ position:absolute; left:50%; top:50%; width:min(58vw,560px); transform:translate(-50%,-50%);
  color:var(--color-white); opacity:.028; pointer-events:none; }
.cta__inner{ position:relative; z-index:1; text-align:center; }
.cta__buttons{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:var(--space-heading); }
.cta__note{ margin-top:26px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--color-black); color:var(--color-white); padding-top:clamp(64px,7vw,110px); border-top:1px solid var(--color-line-dark); }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:56px; }
@media (min-width:1024px){ .footer__grid{ grid-template-columns:1fr auto; gap:80px; } }
.footer__info{ margin-top:32px; font-size:var(--fs-cap); color:#A5A29E; line-height:2; letter-spacing:.08em; }
.footer__tel{ font-family:var(--font-serif-en); font-size:24px; letter-spacing:.14em; color:var(--color-white); display:inline-block; margin-top:14px; }
.footer__nav{ display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); gap:14px 56px; }
.footer__nav a{ font-size:var(--fs-cap); letter-spacing:.1em; color:#A5A29E; transition:color .35s linear; }
.footer__nav a:hover{ color:var(--color-gold); }
.footer__bottom{ margin-top:clamp(56px,6vw,90px); padding-block:26px; border-top:1px solid var(--color-line-dark); text-align:center;
  font-family:var(--font-serif-en); font-size:12px; letter-spacing:.2em; color:var(--color-ash); }

/* ==========================================================================
   Page header (lower pages)
   ========================================================================== */
.pagehead{ min-height:200px; background:var(--color-black); color:var(--color-white);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:120px var(--gutter) 56px; position:relative; overflow:hidden; }
@media (min-width:1024px){ .pagehead{ min-height:320px; } }
.pagehead__mark{ position:absolute; right:-4%; top:50%; width:min(40vw,340px); transform:translateY(-50%);
  color:var(--color-white); opacity:.03; }
.pagehead__en{ font-family:var(--font-serif-en); font-size:var(--fs-label); letter-spacing:.35em; color:var(--color-ash); text-transform:uppercase; }
.pagehead__ja{ font-family:var(--font-serif-ja); font-size:var(--fs-h2); font-weight:400; letter-spacing:.14em; margin-top:18px; }

.crumbs{ background:var(--color-white); border-bottom:1px solid var(--color-line); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:10px; padding-block:16px; font-size:12px; letter-spacing:.08em; color:var(--color-ash); }
.crumbs a{ transition:color .35s linear; }
.crumbs a:hover{ color:var(--color-gold); }
.crumbs li+li::before{ content:"／"; margin-right:10px; color:var(--color-line); }

/* ==========================================================================
   Prose / definition list / faq / form
   ========================================================================== */
.prose h2,
.prose h3{ font-family:var(--font-serif-ja); font-size:var(--fs-h3); font-weight:400; letter-spacing:.1em; color:var(--color-black); margin-top:clamp(48px,5vw,72px); }
.prose h2:first-child,
.prose h3:first-child{ margin-top:0; }
.prose p{ margin-top:24px; }
.prose ul{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.prose li{ position:relative; padding-left:26px; }
.prose li::before{ content:""; position:absolute; left:0; top:.72em; width:10px; height:10px;
  background:var(--color-gold);
  -webkit-mask:url("mark-black.png") no-repeat center/contain;
  mask:url("mark-black.png") no-repeat center/contain; }

.dl{ border-top:1px solid var(--color-line); }
.dl__row{ display:grid; grid-template-columns:1fr; gap:6px; padding-block:24px; border-bottom:1px solid var(--color-line); }
@media (min-width:768px){ .dl__row{ grid-template-columns:30% 70%; gap:0; } }
.dl__row dt{ font-family:var(--font-serif-ja); font-weight:400; letter-spacing:.1em; color:var(--color-black); }
.dl__row dd{ font-size:var(--fs-body); }

.acc{ border-top:1px solid var(--color-line); }
.acc__item{ border-bottom:1px solid var(--color-line); }
.acc__btn{ width:100%; display:flex; align-items:flex-start; gap:20px; text-align:left; padding-block:26px; }
.acc__q{ font-family:var(--font-serif-en); font-size:14px; letter-spacing:.2em; color:var(--color-gold); flex:none; line-height:1.9; }
.acc__t{ flex:1; font-size:var(--fs-body); letter-spacing:.06em; color:var(--color-black); }
.acc__ic{ flex:none; width:14px; height:14px; position:relative; margin-top:.6em; }
.acc__ic::before,.acc__ic::after{ content:""; position:absolute; left:0; top:6px; width:14px; height:1px; background:var(--color-charcoal); transition:transform .5s var(--ease-io); }
.acc__ic::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__ic::after{ transform:rotate(0); }
.acc__panel{ overflow:hidden; height:0; transition:height .6s var(--ease-io); }
.acc__inner{ display:flex; gap:20px; padding-bottom:30px; }
.acc__a{ font-family:var(--font-serif-en); font-size:14px; letter-spacing:.2em; color:var(--color-ash); flex:none; line-height:1.9; }

.form{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--color-line); }
.field{ display:grid; grid-template-columns:1fr; gap:12px; padding-block:28px; border-bottom:1px solid var(--color-line); }
@media (min-width:768px){ .field{ grid-template-columns:32% 1fr; gap:32px; align-items:start; } }
.field__label{ font-family:var(--font-serif-ja); font-weight:400; letter-spacing:.1em; color:var(--color-black); display:flex; align-items:center; gap:12px; padding-top:14px; }
.req{ font-size:10px; letter-spacing:.14em; color:var(--color-gold); border:1px solid var(--color-gold); padding:3px 7px; line-height:1; }
.input,.textarea,.select{ width:100%; padding:14px 16px; border:1px solid var(--color-line); background:#EFEDEA;
  font-size:var(--fs-body); letter-spacing:.06em; color:var(--color-charcoal);
  transition:border-color .4s var(--ease-out), background-color .4s var(--ease-out); }
.input:focus,.textarea:focus,.select:focus{ border-color:var(--color-gold); background:#F4F3F1; outline:none; }
.textarea{ min-height:170px; resize:vertical; }
.select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232C2C2C'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px; padding-right:44px; }
.choices{ display:flex; flex-wrap:wrap; gap:12px 26px; padding-top:12px; }
.choice{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-body); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice i{ width:16px; height:16px; border:1px solid var(--color-ash); display:block; position:relative; transition:border-color .3s linear, background-color .3s linear; }
.choice input:checked + i{ border-color:var(--color-gold); background:var(--color-gold); }
.choice input:checked + i::after{ content:""; position:absolute; left:4px; top:1px; width:6px; height:11px; border-right:1px solid var(--color-black); border-bottom:1px solid var(--color-black); transform:rotate(42deg); }
.choice input:focus-visible + i{ outline:1px solid var(--color-gold); outline-offset:3px; }
.err{ display:none; margin-top:10px; padding-left:14px; border-left:1px solid var(--color-charcoal);
  font-size:var(--fs-cap); color:var(--color-charcoal); letter-spacing:.08em; }
.field.is-invalid .err{ display:block; }
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{ border-color:var(--color-charcoal); }
/* ハニーポット（スパム対策・人間には見えない） */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__note{ padding:18px 20px; border:1px solid var(--color-line); font-size:var(--fs-cap); color:var(--color-charcoal); margin-bottom:40px; }
.form__submit{ margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:20px; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{ overflow:hidden; border-block:1px solid var(--color-line-dark); background:var(--color-black); padding-block:26px; }
.marquee__track{ display:flex; gap:64px; width:max-content; animation:marquee 38s linear infinite; }
.marquee__track{ align-items:center; }
.marquee__track span{ font-family:var(--font-serif-en); font-size:clamp(20px,3vw,36px); font-weight:300;
  letter-spacing:.3em; color:#232323; white-space:nowrap; }
.marquee__mark{ width:12px; flex:none; color:var(--color-gold); opacity:.55; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* Stat row */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 24px; }
@media (min-width:768px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat__num{ font-family:var(--font-serif-en); font-size:var(--fs-num); font-weight:300; letter-spacing:.04em; line-height:1; color:var(--color-gold); }
.stat__unit{ font-size:16px; letter-spacing:.1em; margin-left:6px; }
.stat__label{ margin-top:16px; font-size:var(--fs-cap); letter-spacing:.14em; color:var(--color-ash); }

/* Message / portrait block */
.message{ display:grid; grid-template-columns:1fr; gap:var(--space-gap); align-items:start; }
@media (min-width:1024px){ .message{ grid-template-columns:38% 1fr; gap:80px; } }
.portrait{ aspect-ratio:3/4; background:#E9E7E3; overflow:hidden; }
.portrait picture{ display:block; width:100%; height:100%; }
.portrait svg,.portrait img{ width:100%; height:100%; object-fit:cover; }
.sign{ margin-top:36px; font-family:var(--font-serif-ja); font-size:var(--fs-h3); font-weight:400; letter-spacing:.14em; color:var(--color-black); }

/* Map */
.map{ width:100%; aspect-ratio:16/7; border:1px solid var(--color-line); filter:grayscale(100%) contrast(1.05); }

/* ==========================================================================
   Reveal animation primitives
   ========================================================================== */
.js [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; }

[data-mask]{ overflow:hidden; display:block; }
.js [data-mask] > .mask-i{ display:block; transform:translateY(105%); transition:transform 1s var(--ease-io); }
[data-mask].is-in > .mask-i{ transform:translateY(0); }

[data-split] .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.js [data-split] .word > i{ display:inline-block; font-style:normal; transform:translateY(105%); opacity:0;
  transition:transform 1s var(--ease-io), opacity .7s linear; }
[data-split].is-in .word > i{ transform:translateY(0); opacity:1; }

.js [data-line]{ transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s var(--ease-io); }
[data-line].is-in{ transform:scaleX(1); }
.js [data-line-v]{ transform:scaleY(0); transform-origin:50% 0; transition:transform 1.2s var(--ease-io); }
[data-line-v].is-in{ transform:scaleY(1); }

.js [data-clip]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease-io); }
[data-clip].is-in{ clip-path:inset(0 0 0 0); }

[data-parallax]{ will-change:transform; }

/* ==========================================================================
   prefers-reduced-motion (§4)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal],[data-mask] > .mask-i,[data-split] .word > i,.hero__tag i{ opacity:1 !important; transform:none !important; }
  .hero__logo img{ clip-path:none !important; transform:none !important; }
  [data-line],[data-line-v]{ transform:none !important; }
  [data-clip]{ clip-path:none !important; }
  .grain,.marquee__track,.scroll-cue i::after{ animation:none !important; }
  .cursor,.cursor-dot,.grain{ display:none !important; }
  .preloader,.page-wipe{ display:none !important; }
}

/* Utility */
.mt-s{ margin-top:20px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:var(--space-heading); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── めぐるでんき ロゴロックアップ ───────────────────────── */
.brandmark{ margin:0 0 clamp(28px,4vw,44px); }
.brandmark svg{ display:block; width:clamp(150px,17vw,196px); height:auto; }
.brandmark svg text{ font-weight:700; }
.brandmark--row svg{ width:clamp(190px,22vw,248px); }

/* ── 事業内容カード：めぐるでんきのロゴ面 ─────────────────── */
.card__figure--logo{ background:var(--color-white); border:1px solid var(--color-line); }
.card__logo{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:14% 16%; }
.card__logo svg{ width:100%; height:auto; max-height:100%; object-fit:contain;
  transition:transform 1.1s var(--ease-out); }
.card:hover .card__logo svg{ transform:scale(1.04); }
.card__logo svg text{ font-weight:700; }