:root {
  /* ===== ブランドカラー：赤・白の2色のみ ===== */
  --red:    #d40000;   /* ブランドレッド（背景・基調色） */
  --white:  #ffffff;

  --serif: "Frank Ruhl Libre", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", serif;
  --sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1); /* ゆっくり減速する上質なイージング */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.2vw, 1.125rem); /* 基準フォント 14→18px */
  color: var(--white);

  line-height: 1.85;
  letter-spacing: .04em;
  overflow-x: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { padding: 0 clamp(24px, 5vw, 96px); }

/* ===== Intro（ロゴを中央表示 → フェードアウト） ===== */
#intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s var(--ease);
}
#intro.hide { opacity: 0; pointer-events: none; }
#intro img {
  width: clamp(180px, 22vw, 300px); height: auto;
  animation: introLogo .8s var(--ease) both;
}
@keyframes introLogo { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ===== Header ===== */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.brand { display: flex; align-items: center; }
.brand .logo { height: clamp(22px, 2.4vw, 30px); width: auto; }
.menu { display: flex; align-items: center; gap: 34px; }
.menu a { font-size: 0.8125rem; font-weight: 700; letter-spacing: .16em; color: var(--white); }

/* ===== Shared section bits ===== */
section { padding: clamp(90px, 13vw, 170px) 0; }

/* 大見出し（Frank Ruhl Libre）— ヒーローと各セクションタイトル共通 */
.en-head, #hero h1 {
  font-family: var(--serif); font-weight: 400; line-height: 1.0;
  font-size: clamp(3.5rem, 11vw, 11.25rem); letter-spacing: .01em;
  color: var(--white);
}
.en-head { margin-bottom: 40px; } /* セクションタイトル下の余白を全セクション統一 */
.lead { line-height: 2.0; }
/* リード見出し（Aboutの一文）とサービス見出しは同サイズ */
.about-headline, .svc-row h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 700; line-height: 1.45; }
.about-headline { margin-bottom: 24px; }

/* ===== Hero ===== */
#hero {
  min-height: calc(100vh - 78px); /* 100vh − ヘッダー高 */
  display: flex; flex-direction: column; justify-content: center; /* PC：上下中央 */
  padding: 60px 0;
}
#hero h1 { overflow: visible; } /* マスクは行（word）単位でかける */
#hero h1 .word { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.14em; } /* 行ごとにマスク＋ディセンダー確保、行間を詰める */

/* ===== Service ===== */
.svc-list { margin-top: 56px; display: grid; gap: 22px; }
.svc-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 40px; align-items: center;
  padding: 34px 0;
}
.svc-no { font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 400; line-height: 1; color: var(--white); }
.svc-row p { line-height: 1.95; margin-top: 10px; }

/* ===== Company ===== */
.ctable { width: 100%; border-collapse: collapse; }
.ctable th, .ctable td { text-align: left; padding: 18px 8px; line-height: 1.9; vertical-align: top; color: var(--white); }
.ctable th { width: 260px; font-weight: 700; letter-spacing: .08em; }

/* ===== Contact ===== */
#contact { text-align: center; }
#contact .lead { margin: 0 auto 40px; transition-delay: .06s; }
#contact .mail,
#contact .tel {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.125rem, 3vw, 1.75rem); color: var(--white); letter-spacing: .02em;
}
#contact .tel { margin-top: 14px; }

/* ===== Footer ===== */
footer { color: var(--white); padding: 40px 0; }
.copy { font-size: 0.75rem; letter-spacing: .06em; }

/* ===== Scroll reveal ===== */
/* 通常要素：せり上がり＋フェード＋わずかなブラー */
.reveal {
  opacity: 0; transform: translateY(36px); filter: blur(8px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.7s var(--ease);
}
.reveal.show { opacity: 1; transform: none; filter: none; }

/* 見出し：マスクから1文字ずつせり上がる */
.reveal-line { overflow: hidden; }
.reveal-line .word { display: inline-block; white-space: nowrap; } /* 単語内では改行しない */
.reveal-line .char { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.reveal-line.show .char { transform: none; }

/* 連続要素のstagger（時間差で出現） */
.svc-row:nth-child(2) { transition-delay: .1s; }
.svc-row:nth-child(3) { transition-delay: .2s; }
.about-headline { transition-delay: .06s; }
#about .lead { transition-delay: .14s; }
#contact .mail { transition-delay: .14s; }
#contact .tel  { transition-delay: .22s; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .menu a:not(:last-child) { display: none; }
  .svc-row { grid-template-columns: 64px 1fr; padding: 22px 0; gap: 18px; }
  .ctable th { width: 120px; }
  .ctable th, .ctable td { padding: 16px 6px; }
}

/* ===== dot bg ===== */
.dot-bg {
    width: 100%;
    height: 100%;
    background: url(images/dot.svg);
    background-size: 2px;
    position: relative;
}

/* ===== dot bg ===== */
#red-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 102%;
    height: 100vh;
    background: var(--red);
    z-index: -2;
}

/* ===== video bg ===== */
#video-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 102%;
    height: 100vh;
    z-index: -1;
}

#video-wrap video {
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
     object-fit: cover;
    -o-object-position: center;
     object-position: center;
}