/* =========================================================
   CRAFIT HOUSE — 2026 concept LP
   Values extracted from Figma REST API (frame "Desktop-3", 1440×7608).
   Mobile-first with reflow; desktop matches the design 1:1.
========================================================= */

:root {
  --white:   #FFFFFF;
  --gray-1:  #F0F0F0;   /* About bg */
  --gray-2:  #E7E8EA;   /* Works / Footer bg */
  --gray-3:  #D9D9D9;   /* Event bg, quote pill */
  --lav:     #E0E4EE;   /* gallery quote dot */
  --accent:  #2B3338;
  --text:    #000000;
  --gray-txt:#727272;   /* event card text */

  --font-ja: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --font-en: "Josefin Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en-weight: 300;

  --maxw: 1440px;
  --gutter: clamp(20px, 6.25vw, 90px);   /* 90px @1440 = design left margin */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-ja);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- shared type (px values from Figma) ---------- */
.eyebrow {                             /* section labels — 20px Zen Kurenaido */
  font-family: var(--font-en);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 350;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: clamp(14px, 1.5vw, 22px);
}
.ja-heading {                          /* 24px / lh36 YuMincho weight500 */
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}
.body-text {                           /* 12px / lh20 (1.667) / ls-0.36 (-0.03em) YuMincho */
  font-family: var(--font-ja);
  font-size: clamp(0.8rem, 0.9vw, 0.8125rem);
  line-height: 1.667;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.667em;              /* one blank line between paragraphs */
}

/* ---------- pill "Read more ——" (130×36, thin border) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-weight: 350;
  font-size: 0.875rem;               /* 14px */
  line-height: 1;
  color: var(--text);
  padding: 10px 22px;
  border: 1px solid #CACACA;
  border-radius: 999px;
  background: transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.pill__line { width: 20px; height: 1px; background: currentColor; display: inline-block; }
.pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill--fill { background: var(--gray-3); border-color: var(--gray-3); }

/* ---------- blank photo placeholder (image not provided) ---------- */
.ph-blank { background: linear-gradient(135deg, #dcdee1, #d3d5d8); }

/* =========================================================
   HEADER  (Frame 5: 1440×100, inner pad 80px, nav 20px light)
========================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s, box-shadow .3s;
}
.header__inner {
  max-width: var(--maxw); margin-inline: auto;
  height: 60px;
  padding-inline: clamp(20px, 5.5vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
}
.header__logo { display: block; }
.logo-img { height: 52px; width: auto; }        /* design 241×85 → ~42 tall */
.logo-img--black { display: none; }

.gnav__list { display: flex; gap: clamp(16px, 1.4vw, 20px); list-style: none; }
.gnav__list a {
  font-family: var(--font-en);
  font-weight: 350;
  font-size: clamp(0.95rem, 1.25vw, 1.25rem);   /* 20px @1440 */
  color: #E7E8EA;
  transition: opacity .2s;
}
.gnav__list a:hover { opacity: .6; }

.header__right { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }

.hamburger {
  width: 34px; height: 22px; margin-left: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: 0; cursor: pointer; z-index: 110;
}
.hamburger span { display: block; height: 1px; width: 100%; background: #E7E8EA; transition: transform .3s, opacity .3s, background .3s; }

/* mobile drawer */
@media (max-width: 767px) {
  .gnav {
    position: fixed; inset: 0 0 0 auto;
    width: min(80vw, 320px); background: var(--accent);
    transform: translateX(100%); transition: transform .35s ease;
    display: flex; align-items: center; z-index: 105;
  }
  .gnav.is-open { transform: translateX(0); }
  .gnav__list { flex-direction: column; gap: 30px; padding-inline: 44px; }
  .gnav__list a { color: #fff !important; font-size: 1.1rem; }
  body.nav-open { overflow: hidden; }
  body.nav-open .hamburger span { background: #fff; }
  body.nav-open .hamburger span:nth-child(1) { transform: translateY(10.25px) rotate(45deg); }
  body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
  body.nav-open .hamburger span:nth-child(3) { transform: translateY(-10.25px) rotate(-45deg); }
}

/* scrolled state → semi-transparent white band, dark text */
.header.is-scrolled { background: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 14px rgba(0,0,0,.06); }
.header.is-scrolled .gnav__list a { color: var(--text); }
.header.is-scrolled .hamburger span { background: var(--text); }

/* =========================================================
   HERO  (Frame 7: 1440×800, title 96px @ left85 top~176)
========================================================= */
.hero { position: relative; height: 100svh; min-height: 560px; }
.hero__bg { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.04) 45%, rgba(0,0,0,.14));
}
.hero__copy { position: absolute; left: clamp(20px, 5.9vw, 85px); top: 22%; z-index: 2; }
@media (max-width: 767px) { .hero__copy { top: 45%; } }
.hero__title {
  font-family: var(--font-ja); font-weight: 500; color: #fff;
  font-size: clamp(3.2rem, 6.67vw, 6rem);        /* 96px @1440 */
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* scroll indicator */
.hero__scroll {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero__scroll-text {
  font-family: var(--font-en);
  font-weight: 350;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.8);
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* =========================================================
   Section shell
========================================================= */
.inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* =========================================================
   ABOUT  (bg #F0F0F0; photo 599×800 left @x90, text @x966 w474)
========================================================= */
.about { background: var(--gray-1); padding: clamp(56px, 6vw, 80px) 0; }
.about__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px);
}
.photo-card { position: relative; width: 100%; max-width: 460px; }
.photo-card__img { width: 100%; aspect-ratio: 599 / 800; background-size: cover; background-position: center; }
.detail-btn {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; padding: 13px 28px; border-radius: 999px;
  font-family: var(--font-ja); font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: .06em; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.detail-btn__icon { display: inline-flex; }
.sns-mini { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 8px; }
.sns-mini__dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--c);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.about__text { max-width: 474px; }
/* exact vertical rhythm from Figma (shared by About & Works):
   eyebrow→heading ~19px, heading→body ~96px, body paragraphs one blank line,
   body→Read more ~39px */
.about__text .eyebrow,
.works__text .eyebrow,
.voice__text .eyebrow,
.contact__text .eyebrow  { margin-bottom: clamp(12px, 1.3vw, 19px); }
.about__text .ja-heading,
.works__text .ja-heading,
.voice__text .ja-heading,
.contact__text .ja-heading { margin-bottom: clamp(44px, 6.6vw, 94px); }
.about__text .pill,
.works__text .pill,
.voice__text .pill       { margin-top: clamp(12px, 1.3vw, 18px); }

/* =========================================================
   WORKS  (bg #E7E8EA; text @x170, 3 staggered 600×400 images)
========================================================= */
.works { background: var(--gray-2); padding: clamp(56px, 8vw, 130px) 0; overflow: hidden; }
.works__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px);
}
.works__text { max-width: 474px; padding-right: var(--gutter); }
.works__gallery { position: relative; width: 100%; display: flex; flex-direction: column; gap: 0; }
.works__img { width: 100%; aspect-ratio: 600 / 400; background-size: cover; background-position: center; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.works__img.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   GALLERY  (bg #F0F0F0; horizontal header + carousel 600×400 cards)
========================================================= */
.gallery { background: var(--gray-1); padding: clamp(48px, 6vw, 90px) 0; }
.gallery__head {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: 24px; margin-bottom: clamp(36px, 4vw, 56px);
}
.gallery__more { align-self: flex-start; }
.gallery__head .ja-heading { margin-bottom: 0; }
.gallery__head-right .body-text:last-child { margin-bottom: 0; }

.gallery__slider { position: relative; }

.gallery__btn-wrap {
  display: none;
  justify-content: flex-end;
  gap: 10px;
  padding-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  margin-top: 20px;
}
@media (min-width: 768px) { .gallery__btn-wrap { display: flex; } }

.gallery__btn {
  width: 44px; height: 44px;
  border: 1px solid rgba(0,0,0,0.2); background: transparent;
  border-radius: 50%;
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  color: var(--text); letter-spacing: 0;
}
.gallery__btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.gallery__btn:disabled { opacity: 0.25; cursor: default; }

.gallery__track {
  display: flex; gap: 30px;
  overflow-x: auto; padding-bottom: 0;
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gcard { flex: 0 0 auto; width: min(600px, 78vw); scroll-snap-align: start; }
@media (max-width: 767px) {
  .gcard { width: 76vw; }
  .gcard__title, .gcard__desc { text-align: left; }
}
.gcard__img-wrap { overflow: hidden; width: 100%; aspect-ratio: 3 / 2; }
.gcard__img-wrap--blank { background: linear-gradient(135deg, #dcdee1, #d3d5d8); }
.gcard__img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.6s ease; }
.gcard:hover .gcard__img { transform: scale(1.05); }
.gcard__title { font-family: var(--font-ja); font-size: 0.8125rem; text-align: right; margin-top: 14px; letter-spacing: -.02em; }
.gcard__desc { font-family: var(--font-ja); font-size: 0.75rem; color: var(--text); text-align: right; margin-top: 4px; letter-spacing: -.02em; }
/* quote row: circle (社員の顔写真) 83px + gap 22px + bar (コメント) 51px tall.
   circle is taller than the bar; bar text centred. Figma: circle x117, bar x222→639 */
.gcard__quote {
  display: flex; align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  margin-top: clamp(22px, 3vw, 40px);
  padding-left: clamp(10px, 1.5vw, 27px);
  padding-right: clamp(18px, 3.4vw, 51px);
}
.gcard__quote-dot {
  flex: 0 0 auto;
  width: clamp(58px, 5.8vw, 83px); height: clamp(58px, 5.8vw, 83px);
  border-radius: 50%; background: var(--lav);
  background-size: cover; background-position: center;   /* 顔写真をあとで設定 */
}
.gcard__quote-pill {
  flex: 1; min-height: clamp(44px, 3.5vw, 51px);
  display: flex; align-items: center; justify-content: center;
  background: var(--lav); border-radius: 999px;
  padding: 8px 20px;
  font-family: var(--font-ja); font-size: 0.8rem; color: var(--text);
  line-height: 1.4; text-align: center; letter-spacing: -.03em;
  white-space: normal; overflow: visible;
}

/* =========================================================
   EVENT  (bg #D9D9D9; 3 cards 420×702, text #727272)
========================================================= */
.event { background: var(--gray-2); padding: clamp(48px, 6vw, 90px) 0 clamp(56px, 7vw, 110px); }
.event__head {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.event__head .ja-heading { margin-bottom: 0; }
.event__more-wrap {
  display: flex; justify-content: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.event__track {
  display: flex; gap: 18px;
  overflow-x: auto; padding-bottom: 10px;
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  -webkit-overflow-scrolling: touch;
}
.event__track::-webkit-scrollbar { height: 6px; }
.event__track::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; }
.ecard { flex: 0 0 auto; width: min(290px, 68vw); scroll-snap-align: start; background: transparent; border: 1px solid rgba(255,255,255,0.8); padding: 16px; transition: transform 0.35s ease, box-shadow 0.35s ease; cursor: pointer; }
.ecard:hover { transform: translateY(-10px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); }
.ecard__img { width: 100%; aspect-ratio: 368 / 460; background-size: cover; background-position: center; }
.ecard__title { font-family: var(--font-ja); font-weight: 500; font-size: clamp(1rem,1.4vw,1.25rem); text-align: center; margin-top: 24px; color: var(--gray-txt); letter-spacing: .04em; }
.ecard__desc  { font-family: var(--font-ja); font-size: 0.875rem; text-align: center; margin-top: 12px; color: var(--gray-txt); }
.ecard__date  { font-family: var(--font-en); font-weight: 350; font-size: clamp(1rem,1.4vw,1.25rem); text-align: center; margin-top: 12px; color: var(--gray-txt); letter-spacing: .04em; }

/* =========================================================
   OWNER'S VOICE  (bg white; photo left @x92, text right @x792)
========================================================= */
.voice { background: var(--white); padding: clamp(56px, 7vw, 100px) 0; overflow: hidden; }   /* clips the deco graphic where it bleeds past the section */
.voice__inner {
  position: relative;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px);
}
.voice__photo { max-width: 460px; order: 1; position: relative; z-index: 2; }
.voice__right { position: relative; z-index: 2; order: 3; }
.voice__text { max-width: 474px; }
/* Mobile: deco is a simple in-flow graphic between photo and text (no room to tuck it under the photo). */
.voice__deco { position: relative; order: 2; width: 100%; max-width: 480px; margin-inline: auto; margin-top: 0; }
.voice__deco-img { width: 100%; height: auto; display: block; }
/* centered at 50% of .voice__deco's own box — since that box is itself centered
   on the Contact photo's midline, this keeps the caption on the same centerline */
.voice__caption { position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%); font-family: var(--font-en); font-weight: 350; font-size: clamp(0.9rem,1.1vw,1.1rem); color: #000; white-space: nowrap; }

/* =========================================================
   CONTACT  (bg white; text left, body indented, small pills; photo right)
========================================================= */
.contact { background: var(--white); padding: clamp(48px, 6vw, 90px) 0 clamp(36px, 4vw, 60px); }
.contact__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column-reverse; gap: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(44px, 5vw, 72px);
}
.contact__text { flex: 1; }
.contact__body { margin: 0 0 clamp(28px, 3.5vw, 44px); padding-left: clamp(0px, 6vw, 97px); }
.contact__buttons { display: flex; flex-wrap: wrap; gap: 20px; padding-left: clamp(0px, 3vw, 45px); }
.contact__buttons .pill { font-family: var(--font-ja); }
.contact__photo { flex: 1; width: 100%; aspect-ratio: 600 / 403; }

.sns { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: 18px; }
.sns__link {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-en); font-weight: 350; font-size: clamp(1rem,1.25vw,1.25rem);
  padding-bottom: 14px; border-bottom: 1px solid #d5d5d5;
  max-width: 420px; margin-left: auto; width: 100%;
}
.sns__arrow { font-size: 1.2rem; color: #555; }

/* =========================================================
   FOOTER  (bg #E7E8EA; logo+addr left @x132, nav right @x1259)
========================================================= */
.footer { background: var(--gray-2); padding: clamp(48px, 6vw, 80px) 0 24px; }
.footer__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: 36px;
}
.footer__logo { height: 180px; width: auto; margin-bottom: 28px; margin-left: -35px; }
.footer__offices { display: flex; flex-direction: column; gap: 20px; }
.footer__offices address {
  font-style: normal; font-family: var(--font-ja);
  font-size: clamp(0.9rem, 1.15vw, 1.15rem); line-height: 1.7; color: var(--text);
}
.footer__offices strong { font-weight: 350; }
.footer__nav { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-en); font-weight: 350; font-size: clamp(1rem,1.25vw,1.25rem); }
.footer__nav a { transition: opacity .2s; }
.footer__nav a:hover { opacity: .6; }
.footer__bottom {
  max-width: var(--maxw); margin: clamp(36px, 5vw, 60px) auto 0; padding-inline: var(--gutter);
  display: flex; gap: 12px; justify-content: center; align-items: center;
  font-size: 0.875rem; letter-spacing: -.03em; color: var(--text);
}
.footer__privacy { font-family: var(--font-ja); white-space: nowrap; }
.footer__copy { font-family: var(--font-en); font-weight: 350; letter-spacing: 0; white-space: nowrap; }

/* =========================================================
   TABLET ≥ 768px
========================================================= */
@media (min-width: 768px) {
  /* photo left @~42%, text block flush right (x966→1440 in the 1440 comp),
     the wide middle gap is intentional whitespace */
  .about__inner { flex-direction: row; align-items: center; gap: 0; }
  .photo-card { flex: 0 0 41.6%; }          /* 599/1440 */
  .about__text { flex: 0 0 auto; width: min(474px, 40%); margin-left: auto; }

  /* text left (x170), 3 images 600×400 cascading right, stacked with no gap */
  .works__inner { flex-direction: row; align-items: flex-start; gap: 0; }
  .works__text { flex: 0 0 30%; padding-top: 4px; padding-left: clamp(0px, 2vw, 30px); }
  .works__gallery { flex: 1; align-items: flex-start; padding-right: var(--gutter); }
  .works__img { width: 70%; }                  /* ≈600px of gallery col */
  .works__img--1 { margin-left: 3%; }          /* x515 → ~36% vw */
  .works__img--2 { margin-left: 9%; }          /* x572 → ~40% vw */
  .works__img--3 { margin-left: 17%; }         /* x639 → ~44% vw */

  /* heading | body | Read more grouped left; pill aligned with the last body line */
  .gallery__head { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: clamp(36px, 4.5vw, 74px); }
  .gallery__head-left, .gallery__head-right { flex: 0 0 auto; }
  .gallery__more { align-self: flex-end; flex: 0 0 auto; }

  .voice__inner { flex-direction: row; align-items: flex-start; gap: clamp(40px, 6vw, 90px); }
  .voice__photo { flex: 0 0 38%; }
  .voice__right { flex: 1; }
  /* deco slides in behind the photo (z-index 1 vs photo/text z-index 2): its left
     side is covered by the photo, it emerges from under the photo's right edge
     and continues into the text column, then gets clipped by .voice's overflow:hidden */
  /* left:72% + translateX(-50%) centers the graphic exactly on the Contact
     section photo's horizontal center, measured live at 72% of viewport width */
  .voice__deco {
    position: absolute; z-index: 1;
    left: 72%; top: 90%; transform: translate(-50%, -50%);
    width: min(42%, 460px); max-width: none; margin: 0;
  }

  .contact__inner { flex-direction: row; align-items: center; }
  .contact__text { flex: 0 0 46%; }
  .contact__photo { flex: 1; }

  .footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer__nav { text-align: right; padding-top: 61px; }
  .footer__bottom { justify-content: flex-end; }
}

/* =========================================================
   DESKTOP ≥ 1024px
========================================================= */