/* ============================================================
   Lift Forward — style.css

   Type scale  : Major Third (×1.25)
                 0.75rem / 0.875rem / 1rem / 1.25rem / 1.5rem
                 + clamp() for display headings
   Units       : rem for fonts & spacing / px for borders & fixed UI
   Borders     : 4箇所のみ（header下・CONCEPTアクセント・SERVICE区切り・footer上）
   Web fonts   : Lusitana(400) + Noto Sans JP(400,700) のみ
   ============================================================ */


/* ── Variables ─────────────────────────── */

:root {
  --black   : #111111;
  --white   : #ffffff;
  --gray    : #a0a0a0;
  --text    : #333333;
  --muted   : #666666;

  --header-h: 72px;
  --pad-x   : 3rem;       /* 48px */
  --max-w   : 1080px;
  --sec-py  : 5.5rem;     /* ~88px */
}

@media (max-width: 899px) {
  :root {
    --header-h: 56px;
    --pad-x   : 1.25rem;  /* 20px */
    --sec-py  : 3.5rem;   /* 56px */
  }
}


/* ── Reset ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, figure {
  margin: 0; padding: 0;
}

ul, ol  { list-style: none; }
img     { display: block; max-width: 100%; }
a       { color: inherit; text-decoration: none; }

h1, h2, h3 { font-size: inherit; font-weight: inherit; }


/* ── Base ──────────────────────────────── */

body {
  font-family   : 'Inter', 'Noto Sans JP', sans-serif;
  font-size     : 1rem;          /* 16px */
  line-height   : 1.8;
  color         : var(--text);
  background    : var(--white);
  -webkit-font-smoothing: antialiased;
}

body.is-fixed { overflow: hidden; }


/* ── Visibility ────────────────────────── */

.is-pc { display: block; }
.is-sp { display: none;  }

@media (max-width: 899px) {
  .is-pc { display: none;  }
  .is-sp { display: block; }
}

/* fade-in: JS が .scroll-in を付与するが非表示にはしない */
.fade-in, .scroll-in { opacity: 1; transform: none; }


/* ── Display type ──────────────────────── */

/*
  Major Third スケール（×1.25）
  display-lg : clamp(3rem, 5.5vw, 4.5rem)  = 48–72px
  display-sm : clamp(2rem, 4vw,   3.5rem)  = 32–56px
*/

.heading--1 {
  font-family   : 'Barlow', sans-serif;
  font-size     : clamp(2.75rem, 5.5vw, 4.25rem);
  font-weight   : 600;
  line-height   : 1.05;
  letter-spacing: 0.05em;
  color         : var(--black);
}

.heading--2 {
  font-family   : 'Barlow', sans-serif;
  font-size     : clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight   : 500;
  letter-spacing: 0.06em;
  color         : var(--black);
  padding-bottom: 0.625rem;
  border-bottom : 1px solid var(--gray);
  display       : inline-block;
}


/* ── Header ────────────────────────────── */

.header {
  position      : fixed;
  top           : 0; left: 0; right: 0;
  height        : var(--header-h);
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  padding       : 0 var(--pad-x);
  background    : var(--white);
  border-bottom : 1px solid rgba(0,0,0,0.08);  /* ① header下 */
  z-index       : 100;
}

.header__logo img {
  height: 2.75rem;   /* 44px */
  width : auto;
}

/* Nav — PC */
.header__menu-list { display: flex; gap: 1.75rem; }

.header__menu-item a {
  font-family   : 'Inter', sans-serif;
  font-size     : 0.75rem;     /* 12px */
  font-weight   : 400;
  letter-spacing: 0.1em;
  position      : relative;
}

.header__menu-item a::after {
  content   : '';
  position  : absolute;
  bottom    : -2px; left: 0;
  width     : 0; height: 1px;
  background: var(--black);
  transition: width 0.25s ease;
}
.header__menu-item a:hover::after { width: 100%; }

/* Hamburger — SP */
.header__menu-btn { display: none; }

@media (max-width: 899px) {
  .header__logo img { height: 2rem; }

  .header__menu-btn {
    display : block;
    position: relative;
    width: 1.625rem; height: 1rem;   /* 26×16px */
    cursor  : pointer;
    z-index : 301;
  }
  .header__menu-btn::before,
  .header__menu-btn::after {
    content   : '';
    position  : absolute;
    left      : 0;
    width     : 100%; height: 1px;
    background: var(--black);
    transition: transform 0.3s ease, background 0.3s ease;
  }
  .header__menu-btn::before { top: 3px; }
  .header__menu-btn::after  { top: 13px; }

  .header__menu-btn.is-open::before,
  .header__menu-btn.is-open::after { background: var(--white); }
  .header__menu-btn.is-open::before { transform: translateY(5px)  rotate(45deg);  }
  .header__menu-btn.is-open::after  { transform: translateY(-5px) rotate(-45deg); }

  /* SP overlay menu */
  .header__menu {
    position  : fixed; inset: 0;
    background: var(--black);
    display   : flex;
    align-items: center;
    padding   : 0 var(--pad-x);
    opacity   : 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index   : 300;
  }
  .header__menu.is-open { opacity: 1; visibility: visible; }

  .header__menu-list { flex-direction: column; gap: 1.25rem; }

  .header__menu-item a {
    color      : var(--white);
    font-size  : 1.5rem;
    font-weight: 300;
  }
  .header__menu-item a::after { background: var(--white); }
}


/* ── MV / Hero ─────────────────────────── */

.mv {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  height               : 58vh;
  min-height           : 380px;
  max-height           : 520px;
  margin-top           : var(--header-h);
  overflow             : hidden;
}

.mv__content {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  padding        : 3.5rem var(--pad-x);
}

.mv__photo {
  background: url(/img/mv_pc_01.jpg) center / cover no-repeat;
}

.mv__text {
  margin-top    : 0.625rem;   /* 10px */
  font-size     : 0.875rem;   /* 14px */
  font-weight   : 400;
  letter-spacing: 0.04em;
  line-height   : 1.6;
  color         : var(--muted);
}

@media (max-width: 899px) {
  .mv {
    display   : block;
    position  : relative;
    height    : 72vw;
    min-height: 300px;
    max-height: 440px;
  }
  .mv__photo {
    background-image: url(/img/mv_sp_01.jpg);
    position: absolute; inset: 0;
    height  : 100%;
  }
  .mv__content {
    position: absolute; inset: 0;
    z-index : 1;
    display : flex;
    flex-direction : column;
    justify-content: center;
    padding : 1.75rem var(--pad-x);
    background: transparent;
  }
  .heading--1 { font-size: 2.25rem; }
  .mv__text   { margin-top: 0.5rem; font-size: 0.75rem; }
}


/* ── Section wrapper (共通) ────────────── */

.concept,
.service,
.works,
.company {
  max-width: calc(var(--max-w) + var(--pad-x) * 2);
  margin   : 0 auto;
  padding  : var(--sec-py) var(--pad-x);
}


/* ── CONCEPT ───────────────────────────── */

.concept__title {
  margin-top    : 1rem;
  font-size     : 1.125rem;   /* 18px */
  font-weight   : 700;
  line-height   : 1.65;
  color         : var(--black);
}

.concept__text {
  margin-top: 1rem;
  max-width : 40rem;   /* ~640px */
  font-size : 0.9375rem;   /* 15px */
  line-height: 1.9;
  color     : var(--text);
}

@media (max-width: 899px) {
  .concept__title { font-size: 1.0625rem; }   /* 17px */
  .concept__text  { font-size: 0.875rem; }    /* 14px */
}


/* ── SERVICE ───────────────────────────── */

.service__content {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 0 2.5rem;
  margin-top           : 1rem;
}

.service__item {
  padding-top: 1.25rem;
}

.service__title {
  font-size  : 1.0625rem;   /* 17px */
  font-weight: 700;
  color      : var(--black);
}

.service__title::after {
  content       : attr(data-title);
  display       : block;
  margin-top    : 0.375rem;
  font-family   : 'Inter', sans-serif;
  font-size     : 0.6875rem;   /* 11px */
  font-weight   : 400;
  letter-spacing: 0.12em;
  color         : var(--gray);
}

.service__text {
  margin-top : 0.875rem;
  font-size  : 0.8125rem;   /* 13px */
  line-height: 1.9;
  color      : var(--text);
}

@media (max-width: 899px) {
  .service__content { grid-template-columns: 1fr; }
  .service__item + .service__item { margin-top: 2rem; }
}


/* ── WORKS ─────────────────────────────── */

.works__content {
  display        : grid;
  grid-template-columns: repeat(2, 1fr);
  gap            : 2.5rem 3rem;
  margin-top     : 1.5rem;
}

.works__item {}

.works__title-block {
  display              : grid;
  grid-template-columns: auto 1fr;
  grid-template-rows   : auto auto;
  gap                  : 0 0.875rem;
}

.works__num {
  grid-row     : 1 / 3;
  align-self   : start;
  padding-top  : 0.125rem;
  font-family  : 'Inter', sans-serif;
  font-size    : 0.8125rem;   /* 13px */
  letter-spacing: 0.04em;
  color        : var(--black);
  white-space  : nowrap;
}
.works__num::after { content: ' /'; }

.works__subtitle {
  grid-row     : 2; grid-column: 2;
  font-size    : 0.6875rem;   /* 11px */
  font-weight  : 700;
  color        : var(--gray);
  letter-spacing: 0.04em;
}

.works__title {
  grid-row     : 1; grid-column: 2;
  font-size    : 1rem;
  font-weight  : 700;
  color        : var(--black);
  line-height  : 1.4;
}

.works__text {
  margin-top : 1rem;
  font-size  : 0.8125rem;   /* 13px */
  line-height: 1.9;
  color      : var(--text);
}

.works__period { display: none; }

@media (max-width: 899px) {
  .works__content { grid-template-columns: 1fr; gap: 2rem; }
}


/* ── COMPANY ───────────────────────────── */

.company__table {
  display              : grid;
  grid-template-columns: 7.5rem 1fr;   /* 120px */
  margin-top           : 2.5rem;
}

.company__table dt,
.company__table dd {
  padding     : 0.875rem 0;
  font-size   : 0.9375rem;   /* 15px */
  line-height : 1.7;
}

.company__table dt {
  font-weight  : 700;
  color        : var(--black);
  padding-right: 1.25rem;
}

.company__table dd { color: var(--text); }

@media (max-width: 899px) {
  .company__table { grid-template-columns: 5rem 1fr; }
  .company__table dt,
  .company__table dd { font-size: 0.875rem; }
}


/* ── CONTACT ───────────────────────────── */

.contact { padding: 0; }

.contact a {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 3.25rem var(--pad-x);   /* 52px */
  background     : var(--black);
  transition     : opacity 0.2s;
}
.contact a:hover { opacity: 0.85; }

.contact__heading { color: var(--white); }

.contact__text {
  margin-top    : 0.875rem;
  font-size     : 0.9375rem;
  color         : rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}

@media (max-width: 899px) {
  .contact a     { padding: 2.5rem var(--pad-x); }
  .contact__text { font-size: 0.8125rem; }
}


/* ── Footer ────────────────────────────── */

.footer { border-top: 1px solid rgba(0,0,0,0.1); }   /* ④ footer上 */

.footer__inner {
  max-width: calc(var(--max-w) + var(--pad-x) * 2);
  margin   : 0 auto;
  padding  : 1.5rem var(--pad-x);
  display  : flex;
  align-items: center;
  gap      : 1.5rem;
}

.footer__logo { height: 1.625rem; width: auto; }

.footer__menu { display: flex; gap: 1.25rem; }

.footer__menu-item a {
  font-family   : 'Inter', sans-serif;
  font-size     : 0.6875rem;   /* 11px */
  letter-spacing: 0.1em;
  color         : var(--muted);
  transition    : color 0.2s;
}
.footer__menu-item a:hover { color: var(--black); }

.footer__copyright {
  margin-left   : auto;
  font-size     : 0.6875rem;
  color         : var(--gray);
  letter-spacing: 0.04em;
}

.spacer { display: none; }

@media (max-width: 899px) {
  .footer__inner    { flex-wrap: wrap; gap: 0.75rem; }
  .footer__copyright { width: 100%; margin-left: 0; }
}


/* ── Privacy ───────────────────────────── */

.privacy {
  max-width : calc(var(--max-w) + var(--pad-x) * 2);
  margin    : var(--header-h) auto 0;
  padding   : 4rem var(--pad-x) 6rem;
}

.privacy__heading {
  font-family   : 'Inter', sans-serif;
  font-size     : 2rem;
  font-weight   : 300;
  letter-spacing: 0.06em;
}

.privacy__text {
  margin-top : 1.75rem;
  font-size  : 0.875rem;
  line-height: 1.9;
}

.privacy__link {
  display      : inline-block;
  margin-top   : 1.5rem;
  font-size    : 0.875rem;
  font-weight  : 700;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  transition   : opacity 0.2s;
}
.privacy__link:hover { opacity: 0.6; }