@charset "utf-8";

:root {
  --color-text: #202124;
  --color-text-sub: #5f6368;
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;

  --lh-heading: 1.1;
  --lh-body: 1.9;
  --lh-caption: 1.6;

  --ls-heading: -0.04em;
  --ls-body: 0.02em;
  --ls-caption: 0.04em;
}

html {
  font-size: 62.5%;
}

body * {
  box-sizing: border-box;
}

body {
  color: var(--color-text);
  background: var(--color-bg);

  font-family: "Inter", "Noto Sans JP", sans-serif;

  font-size: 1.8rem;
  font-weight: 400;

  line-height: 1.75;
  letter-spacing: 0.02em;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

a {
  /* color: #333; */
  color: inherit;
  text-decoration: underline;
}

/* ========================================
Layout
======================================== */

.l-container {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: 4.8rem;
}

.l-container--narrow {
  width: min(100%, 960px);
  margin-inline: auto;
  padding-inline: 4.8rem;
}

.l-container--full {
  width: 100%;
}

.l-section {
  padding-block: 16rem;
}

.l-section--gray {
  background: var(--color-bg-alt);
}

.l-section--harf-gray {
  background: linear-gradient(to bottom, var(--color-bg-alt) 35%, transparent 36%, transparent 100%);
}

.l-section--black {
  --color-text: #ffffff;
  --color-text-sub: rgba(255, 255, 255, 0.7);
  --color-bg: #202124;

  color: var(--color-text);
  background: var(--color-bg);
}

/* ========================================
Component
======================================== */

.c-headingLv2 {
  margin-bottom: 4.8rem;

  font-size: 6.4rem;
  font-weight: 700;

  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.c-headingLv3 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.c-body {
  max-width: 68rem;

  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.c-body p + p {
  margin-top: 2.4rem;
}

.c-caption {
  margin-top: 1.2rem;

  color: var(--color-text-sub);

  font-size: 1.4rem;
  font-weight: 400;

  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}

/* ========================================
Utilities
======================================== */

.u-mt-24 {
  margin-top: 2.4rem !important;
}

.u-p-0 {
  padding: 0 !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

/* ========================================
Project Hero
======================================== */

.p-hero {
  min-height: 100svh;

  display: flex;
  align-items: center;
}

.p-hero__eyebrow {
  color: var(--color-text-sub);

  font-size: 1.4rem;
  font-weight: 500;

  line-height: 1.4;
  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.p-hero__title {
  margin-top: 2.4rem;

  font-size: 16rem;
  font-weight: 700;

  line-height: 0.92;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.p-hero__lead {
  max-width: 72rem;
  margin-top: 4rem;

  color: #3c4043;

  font-size: 2rem;
  font-weight: 400;

  line-height: 1.7;
  letter-spacing: 0.01em;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

[data-js="hero-fadein"] {
  animation: fadeIn 1.2s ease forwards;
}

/* ========================================
Feature
======================================== */

.p-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 8rem;
  align-items: start;
}

/* ========================================
Photo Grid
======================================== */

.p-photoGrid {
  display: grid;
  gap: 3.2rem;
}

.p-photoGrid--ver01 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(11, 1fr);
}

.p-photoGrid--ver02 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

/* ========================================
Plan List
======================================== */

.p-plan-list {
  margin: 1rem 0;
  list-style: none;
  counter-reset: plan;
  padding: 0;
}

.p-plan-list li {
  counter-increment: plan;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.p-plan-list li::before {
  content: "Plan" counter(plan, decimal-leading-zero) ". ";
  font-weight: bold;
}

.p-plan-list li + li {
  margin-top: 2.4rem;
}

/* ========================================
Stats
======================================== */

.p-statList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.8rem;
}

.p-stat__value {
  font-size: 16rem;
  font-weight: 700;

  line-height: 0.9;
  letter-spacing: -0.08em;
}

.p-stat__label {
  margin-top: 1.2rem;

  color: var(--color-text-sub);

  font-size: 1.5rem;
  font-weight: 400;

  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ========================================
article
======================================== */
.p-article {
  max-width: 84rem;
}

.p-article__title {
  margin-bottom: 4rem;

  font-size: 4.8rem;
  font-weight: 700;

  line-height: 1.1;
  letter-spacing: -0.04em;
}

/* ========================================
Contact
======================================== */

.p-contact {
  text-align: center;
}

.p-contact__title {
  font-size: 6.4rem;
  font-weight: 700;

  line-height: 1;
  letter-spacing: -0.04em;
}

.p-contact__mail {
  display: inline-block;

  margin-top: 3.2rem;

  font-size: 2rem;
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ========================================
Timetable
======================================== */
.p-timetable {
  margin: 5.4rem 0 0;
}

.p-timetable__list {
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 0;
  border-left: 1px solid #ddd;
}

.p-timetable__item {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 3.2rem;
  position: relative;
  padding: 0 0 4.8rem 3.2rem;
}

.p-timetable__item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #111;
}

.p-timetable__date {
  font-size: 1.4rem;
  color: #333;
}

.p-timetable__content p {
  margin-top: 0.5rem;
}

/* ========================================
Responsive
======================================== */

@media (min-width: 769px) {
  .p-photoGrid--ver01 figure:first-child {
    grid-row: span 10 / span 10;
  }

  .p-photoGrid--ver01 figure:nth-child(2) {
    grid-row: span 5 / span 5;
    grid-column-start: 2;
    grid-row-start: 2;
  }

  .p-photoGrid--ver01 figure:nth-child(3) {
    grid-row: span 5 / span 5;
    grid-column-start: 2;
    grid-row-start: 7;
  }

  .p-photoGrid--ver02 figure:first-child {
    grid-row: span 10 / span 10;
  }

  .p-photoGrid--ver02 figure:nth-child(2) {
    grid-row: span 9 / span 9;
    grid-column-start: 2;
    grid-row-start: 2;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 1.6rem;
  }

  .l-container,
  .l-container--narrow {
    padding-inline: 2.4rem;
  }

  .l-section {
    padding-block: 10rem;
  }

  .c-headingLv2 {
    font-size: 4rem;
  }

  .c-headingLv3 {
    font-size: 1.6rem;
  }

  .c-caption {
    font-size: 1.3rem;
  }

  .p-hero__title {
    font-size: 6.5rem;
  }

  .p-hero__lead {
    font-size: 1.8rem;
  }

  .p-feature {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .p-photoGrid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }

  .p-statList {
    grid-template-columns: 1fr;
  }

  .p-stat__value {
    font-size: 10rem;
  }

  .p-timetable {
    margin: 4.8rem 0 0;
  }

  .p-timetable__list {
    margin: 2.8rem 0 0;
  }

  .p-timetable__item {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.2rem;
    padding: 0 0 2.4rem 1.6rem;
  }

  .p-timetable__content p {
    margin-top: 0.4rem;
  }

  .p-timetable__date {
    font-size: 1.2rem;
  }

  .p-timeline__year {
    font-size: 2.54rem;
  }

  .p-contact__title {
    font-size: 4rem;
  }
}