/* =====================================================
   AG CORPORATE SITE
===================================================== */

:root {

  --black: #090909;
  --dark: #101010;
  --dark-2: #151515;

  --white: #ffffff;
  --off-white: #f5f5f2;

  --text: #111111;
  --gray: #777777;
  --light-gray: #e5e5e1;

  --electric: #e6d800;

  --max: 1440px;

  --header: 88px;

  --ease: cubic-bezier(.22,.61,.36,1);

}


/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {

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

  color: var(--text);

  background: var(--white);

  line-height: 1.8;

  overflow-x: hidden;

}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}


/* =====================================================
   COMMON
===================================================== */

.container {

  width:
    min(
      calc(100% - 80px),
      var(--max)
    );

  margin-inline: auto;

}

.section {

  position: relative;

  padding:
    150px
    0;

  overflow: hidden;

}

.eyebrow {

  display: flex;

  align-items: center;

  gap: 12px;

  color: #777;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .18em;

}

.eyebrow span {

  display: block;

  width: 28px;

  height: 1px;

  background: var(--electric);

}

.section-heading {

  position: relative;

  max-width: 900px;

}

.section-heading h2 {

  margin-top: 25px;

  font-size:
    clamp(
      42px,
      6vw,
      82px
    );

  line-height: 1.15;

  letter-spacing: -.06em;

  font-weight: 400;

}

.section-heading h2 strong {
  font-weight: 700;
}

.section-heading > p {

  max-width: 620px;

  margin-top: 28px;

  color: #777;

  font-size: 14px;

}

.section-heading.light {
  color: white;
}

.section-heading.light .eyebrow {
  color: #666;
}

.section-heading.light > p {
  color: #999;
}


/* =====================================================
   LOADER
===================================================== */

.loader {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: grid;

  place-items: center;

  background: var(--black);

  transition:
    opacity .7s var(--ease),
    visibility .7s;

}

.loader.hide {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}

.loader-inner {

  width:
    min(
      320px,
      70vw
    );

  text-align: center;

}

.loader-logo {

  color: white;

  font-size: 60px;

  font-weight: 800;

  letter-spacing: -.08em;

}

.loader-progress {

  height: 1px;

  margin: 20px 0;

  background: #333;

  overflow: hidden;

}

.loader-progress span {

  display: block;

  width: 0;

  height: 100%;

  background: var(--electric);

  animation:
    loaderProgress
    1.4s
    var(--ease)
    forwards;

}

.loader p {

  color: #555;

  font-size: 8px;

  letter-spacing: .25em;

}

@keyframes loaderProgress {

  to {
    width: 100%;
  }

}


/* =====================================================
   HEADER
===================================================== */

.header {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: var(--header);

  z-index: 1000;

  color: white;

  transition:
    background .4s var(--ease),
    color .4s var(--ease),
    box-shadow .4s var(--ease);

}

.header.scrolled {

  color: var(--black);

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 1px 0 rgba(0,0,0,.08);

}

.header-inner {

  width:
    min(
      calc(100% - 80px),
      1600px
    );

  height: 100%;

  margin-inline: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.header-logo {

  width: 100px;

  flex-shrink: 0;

}

.header-logo img {

  width: 100%;

  max-height: 45px;

  object-fit: contain;

  object-position: left center;

}

.desktop-nav {

  display: flex;

  align-items: center;

  gap: 30px;

}

.desktop-nav > a {

  position: relative;

  display: flex;

  flex-direction: column;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .12em;

}

.desktop-nav small {

  color: var(--electric);

  font-size: 7px;

  line-height: 1;

}

.desktop-nav > a:not(.header-contact)::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -8px;

  height: 1px;

  background: currentColor;

  transform:
    scaleX(0);

  transform-origin: right;

  transition:
    transform .4s var(--ease);

}

.desktop-nav > a:hover::after {

  transform:
    scaleX(1);

  transform-origin: left;

}

.header-contact {

  padding:
    11px
    18px;

  border:
    1px solid currentColor;

}


/* =====================================================
   MENU BUTTON
===================================================== */

.menu-button {

  display: none;

  width: 44px;
  height: 44px;

  border: 0;

  background: transparent;

  color: currentColor;

  cursor: pointer;

  position: relative;

}

.menu-button span {

  position: absolute;

  left: 8px;
  right: 8px;

  height: 1px;

  background: currentColor;

  transition:
    transform .4s var(--ease);

}

.menu-button span:first-child {
  top: 17px;
}

.menu-button span:last-child {
  top: 26px;
}

.menu-button.open span:first-child {

  transform:
    translateY(4.5px)
    rotate(45deg);

}

.menu-button.open span:last-child {

  transform:
    translateY(-4.5px)
    rotate(-45deg);

}


/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 900;

  visibility: hidden;

  pointer-events: none;

}

.mobile-menu-background {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(230,216,0,.08),
      transparent 28%
    ),
    #080808;

  opacity: 0;

  transition:
    opacity .5s var(--ease);

}

.mobile-menu-inner {

  position: relative;

  height: 100%;

  padding:
    130px
    40px
    30px;

  color: white;

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .5s var(--ease),
    transform .5s var(--ease);

}

.mobile-menu.open {

  visibility: visible;

  pointer-events: auto;

}

.mobile-menu.open .mobile-menu-background {

  opacity: 1;

}

.mobile-menu.open .mobile-menu-inner {

  opacity: 1;

  transform: none;

}

.mobile-label {

  margin-bottom: 25px;

  color: #555;

  font-size: 8px;

  letter-spacing: .2em;

}

.mobile-menu nav a {

  display: flex;

  align-items: baseline;

  gap: 15px;

  padding:
    11px
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,.1);

  font-size:
    clamp(
      28px,
      8vw,
      48px
    );

  font-weight: 700;

  letter-spacing: -.04em;

}

.mobile-menu nav small {

  color: var(--electric);

  font-size: 8px;

}

.mobile-menu-bottom {

  position: absolute;

  left: 40px;
  right: 40px;
  bottom: 30px;

  display: flex;

  justify-content: space-between;

  color: #444;

  font-size: 8px;

  letter-spacing: .15em;

}


/* =====================================================
   HERO
===================================================== */

.hero {

  position: relative;

  min-height: 100svh;

  background: var(--black);

  color: white;

  overflow: hidden;

}

.hero-image {

  position: absolute;

  inset: -4%;

  background:
    url(
      "./image/top.png"
    )
    center / cover
    no-repeat;

  transform: scale(1.05);

  animation:
    heroImage
    1.7s
    var(--ease)
    forwards;

}

@keyframes heroImage {

  to {
    transform: scale(1);
  }

}

.hero-dark {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.72) 38%,
      rgba(0,0,0,.3) 72%,
      rgba(0,0,0,.15) 100%
    );

}


/* =====================================================
   HERO ELECTRICAL ELEMENTS
===================================================== */

.hero-electric {

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

}


/*
  左側の文字エリアには
  電気ラインを配置しない
*/

.electric-route {

  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.13),
      transparent
    );

  transform-origin: right;

}

.route-a {

  width: 34%;

  right: 0;

  top: 26%;

  transform:
    rotate(-13deg);

}

.route-b {

  width: 27%;

  right: 3%;

  top: 69%;

  transform:
    rotate(12deg);

}

.route-c {

  width: 20%;

  right: 8%;

  top: 47%;

  transform:
    rotate(-4deg);

}

.electric-route span {

  position: absolute;

  left: 0;

  top: -2px;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--electric);

  box-shadow:
    0 0 12px
    rgba(230,216,0,.8);

  animation:
    electricity
    4s
    linear
    infinite;

}

.route-b span {
  animation-delay: 1.2s;
}

.route-c span {
  animation-delay: 2.1s;
}

@keyframes electricity {

  from {
    left: 0;
  }

  to {
    left: 100%;
  }

}

.electric-node {

  position: absolute;

  width: 7px;
  height: 7px;

  border:
    1px solid
    var(--electric);

  transform:
    rotate(45deg);

  background:
    rgba(230,216,0,.08);

}

.node-a {

  right: 26%;

  top: 25%;

}

.node-b {

  right: 11%;

  top: 68%;

}

.node-c {

  right: 25%;

  top: 47%;

}


/* =====================================================
   HERO MAIN LIGHT LINE
===================================================== */

/*
  ★ 文字に被らないように
  右側だけを通る
*/

.hero-light-line {

  position: absolute;

  z-index: 3;

  right: 0;

  top: 62%;

  width: 57%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.08),
      rgba(255,255,255,.22),
      transparent
    );

  overflow: hidden;

}

.hero-light-line span {

  position: absolute;

  left: -20%;

  top: -2px;

  width: 18%;

  height: 5px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(230,216,0,.35),
      var(--electric),
      transparent
    );

  box-shadow:
    0 0 12px
    rgba(230,216,0,.4);

  animation:
    lightFlow
    4.5s
    linear
    infinite;

}

@keyframes lightFlow {

  from {
    left: -20%;
  }

  to {
    left: 120%;
  }

}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content {

  position: relative;

  z-index: 5;

  width:
    min(
      calc(100% - 80px),
      var(--max)
    );

  min-height: 100svh;

  margin-inline: auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-top: 8vh;

}

.hero-eyebrow {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 25px;

  color: #aaa;

  font-size: 9px;

  letter-spacing: .2em;

  opacity: 0;

  transform:
    translateY(20px);

  animation:
    heroFade
    .8s
    .4s
    var(--ease)
    forwards;

}

.hero-eyebrow span {

  width: 30px;

  height: 1px;

  background: var(--electric);

}

.hero h1 {

  max-width: 780px;

  opacity: 0;

  transform:
    translateY(25px);

  animation:
    heroFade
    .9s
    .6s
    var(--ease)
    forwards;

}

.hero-title-jp {

  display: block;

  font-size:
    clamp(
      48px,
      7vw,
      96px
    );

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -.07em;

}

.hero-title-en {

  display: block;

  margin-top: 22px;

  color:
    rgba(255,255,255,.35);

  font-size:
    clamp(
      8px,
      .9vw,
      12px
    );

  line-height: 1.7;

  letter-spacing: .22em;

  font-weight: 600;

}

.hero-text {

  margin-top: 38px;

  color:
    rgba(255,255,255,.75);

  font-size: 14px;

  line-height: 2;

  opacity: 0;

  transform:
    translateY(20px);

  animation:
    heroFade
    .8s
    .9s
    var(--ease)
    forwards;

}

@keyframes heroFade {

  to {

    opacity: 1;

    transform: none;

  }

}

.hero-scroll {

  position: absolute;

  left: 0;

  bottom: 42px;

  display: flex;

  align-items: center;

  gap: 13px;

  color: rgba(255,255,255,.5);

  font-size: 8px;

  letter-spacing: .18em;

}

.scroll-line {

  width: 42px;

  height: 1px;

  background:
    var(--electric);

}

.hero-meta {

  position: absolute;

  right: 30px;

  bottom: 40px;

  z-index: 6;

  display: flex;

  flex-direction: column;

  gap: 6px;

  color: rgba(255,255,255,.3);

  font-size: 7px;

  letter-spacing: .2em;

}

.hero-corner {

  position: absolute;

  right: 30px;

  top: 50%;

  z-index: 6;

  color: rgba(255,255,255,.18);

  font-size: 8px;

  letter-spacing: .2em;

}


/* =====================================================
   TECHNICAL GRID
===================================================== */

.technical-grid {

  position: absolute;

  inset: 0;

  opacity: .45;

  background-image:
    linear-gradient(
      rgba(0,0,0,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.035) 1px,
      transparent 1px
    );

  background-size:
    60px 60px;

  pointer-events: none;

}


/* =====================================================
   ABOUT
===================================================== */

.about {

  background: var(--off-white);

}

.about-grid {

  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;

  gap: 100px;

  margin-top: 100px;

  align-items: center;

}

.about-copy {

  max-width: 620px;

}

.about-lead {

  font-size: 23px;

  font-weight: 700;

  line-height: 1.7;

  margin-bottom: 28px;

}

.about-copy p:not(.about-lead) {

  color: #666;

  font-size: 14px;

  margin-top: 17px;

}

.about-photo {

  position: relative;

}

.image-frame {

  overflow: hidden;

  aspect-ratio: 1.25 / 1;

}

.image-frame img {

  height: 100%;

  object-fit: cover;

  transition:
    transform 1s var(--ease);

}

.about-photo:hover img {

  transform:
    scale(1.04);

}

.photo-caption {

  position: absolute;

  left: -25px;

  bottom: -25px;

  width: 220px;

  padding: 20px;

  background: var(--black);

  color: white;

  display: flex;

  flex-direction: column;

  gap: 6px;

  font-size: 8px;

  letter-spacing: .15em;

}

.photo-caption span:first-child {

  color: var(--electric);

}

.about-fields {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  margin-top: 100px;

  border-top:
    1px solid
    #d9d9d4;

}

.field-item {

  padding:
    30px
    20px
    10px
    0;

  border-right:
    1px solid
    #d9d9d4;

}

.field-item:not(:first-child) {

  padding-left: 30px;

}

.field-item:last-child {

  border-right: 0;

}

.field-item span {

  color: #999;

  font-size: 8px;

  letter-spacing: .2em;

}

.field-item strong {

  display: block;

  margin-top: 12px;

  font-size:
    clamp(
      25px,
      3vw,
      38px
    );

  letter-spacing: -.05em;

}

.field-item p {

  margin-top: 4px;

  color: #777;

  font-size: 11px;

}


/* =====================================================
   SERVICES
===================================================== */

.services {

  background: var(--dark);

  color: white;

}

.service-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  margin-top: 90px;

  border-top:
    1px solid
    rgba(255,255,255,.13);

  border-bottom:
    1px solid
    rgba(255,255,255,.13);

}

.service-card {

  position: relative;

  min-height: 430px;

  padding:
    38px;

  border-right:
    1px solid
    rgba(255,255,255,.13);

  overflow: hidden;

  transition:
    background .4s var(--ease);

}

.service-card:last-child {

  border-right: 0;

}

.service-card:hover {

  background:
    rgba(255,255,255,.035);

}

.service-number {

  color: #555;

  font-size: 9px;

  letter-spacing: .15em;

}

.service-icon {

  position: absolute;

  top: 35px;

  right: 35px;

  width: 52px;

  height: 52px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.14);

}

.service-icon svg {

  width: 26px;

  height: 26px;

  fill: none;

  stroke:
    var(--electric);

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.service-body {

  margin-top: 105px;

}

.service-body > span {

  color: #666;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .2em;

}

.service-body h3 {

  margin-top: 10px;

  font-size: 29px;

  letter-spacing: -.04em;

}

.service-body p {

  max-width: 330px;

  margin-top: 18px;

  color: #999;

  font-size: 13px;

}

.card-line {

  position: absolute;

  left: 38px;

  right: 38px;

  bottom: 40px;

  height: 1px;

  background: rgba(255,255,255,.1);

  overflow: hidden;

}

.card-line span {

  display: block;

  width: 0;

  height: 100%;

  background: var(--electric);

  transition:
    width .8s var(--ease);

}

.service-card:hover .card-line span {

  width: 100%;

}


/* =====================================================
   PROJECTS
===================================================== */

.projects {

  background: white;

}

.project-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 70px 30px;

  margin-top: 95px;

}

.project-main {

  grid-column:
    span 2;

}

.project-image {

  overflow: hidden;

  aspect-ratio: 1.55 / 1;

  background: #ddd;

}

.project-main .project-image {

  aspect-ratio: 2.3 / 1;

}

.project-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform 1s var(--ease);

}

.project:hover .project-image img {

  transform:
    scale(1.05);

}

.project-info {

  padding-top: 18px;

}

.project-info span {

  color: #888;

  font-size: 8px;

  letter-spacing: .16em;

}

.project-info h3 {

  margin-top: 7px;

  font-size: 25px;

  letter-spacing: -.04em;

}

.project-info p {

  color: #777;

  font-size: 11px;

}


/* =====================================================
   NEWS
===================================================== */

.news {

  background: var(--off-white);

}

.news-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

}

.news-head h2 {

  margin-top: 20px;

  font-size:
    clamp(
      50px,
      8vw,
      100px
    );

  line-height: .9;

  letter-spacing: -.07em;

}

.news-head > p {

  color: #888;

  font-size: 11px;

}

.news-list {

  margin-top: 65px;

  border-top:
    1px solid
    #d8d8d3;

}

.news-item {

  display: grid;

  grid-template-columns:
    120px
    150px
    1fr
    30px;

  align-items: center;

  gap: 20px;

  min-height: 95px;

  border-bottom:
    1px solid
    #d8d8d3;

  transition:
    padding .4s var(--ease);

}

.news-item:hover {

  padding-left: 15px;

}

.news-item time {

  color: #888;

  font-size: 10px;

}

.news-item > span {

  color: #999;

  font-size: 8px;

  letter-spacing: .15em;

}

.news-item h3 {

  font-size: 14px;

  font-weight: 600;

}

.news-item b {

  color: var(--electric);

  font-size: 18px;

}


/* =====================================================
   REPRESENTATIVE MESSAGE
===================================================== */

.representative {

  background: var(--dark);

  color: white;

}

.representative-grid {

  position: absolute;

  inset: 0;

  opacity: .2;

  background-image:
    linear-gradient(
      90deg,
      transparent 49.9%,
      rgba(255,255,255,.08) 50%,
      transparent 50.1%
    );

}

.representative-layout {

  display: grid;

  grid-template-columns:
    200px
    1fr;

  gap: 100px;

}

.representative-label {

  display: flex;

  flex-direction: column;

  gap: 70px;

}

.representative-label .eyebrow {

  color: #666;

}

.representative-index {

  color: #444;

  font-size: 9px;

  line-height: 1.7;

  letter-spacing: .2em;

}

.representative-content {

  max-width: 800px;

}

.representative-kicker {

  color: var(--electric);

  font-size: 10px;

  letter-spacing: .15em;

}

.representative-content h2 {

  margin-top: 22px;

  font-size:
    clamp(
      48px,
      7vw,
      90px
    );

  line-height: 1.1;

  letter-spacing: -.07em;

}

.representative-content h2 strong {

  font-weight: 700;

}

.representative-text {

  max-width: 650px;

  margin-top: 45px;

}

.representative-text p {

  color: #999;

  font-size: 14px;

  margin-top: 20px;

}

.representative-sign {

  margin-top: 60px;

  display: flex;

  flex-direction: column;

  gap: 3px;

}

.representative-sign span {

  font-size: 13px;

}

.representative-sign small {

  color: #555;

  font-size: 8px;

}


/* =====================================================
   QUALIFICATIONS
===================================================== */

.qualifications {

  background: white;

}

.qualification-heading {

  max-width: 800px;

}

.qualification-heading h2 {

  margin-top: 25px;

  font-size:
    clamp(
      42px,
      6vw,
      80px
    );

  line-height: 1.15;

  letter-spacing: -.06em;

}

.qualification-heading > p {

  margin-top: 25px;

  color: #777;

  font-size: 14px;

}

.qualification-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;

  margin-top: 80px;

}

.qualification-card {

  position: relative;

  min-height: 300px;

  padding: 28px;

  background: var(--off-white);

  border:
    1px solid
    #deded9;

  overflow: hidden;

}

.qualification-top {

  display: flex;

  justify-content: space-between;

  color: #999;

  font-size: 8px;

  letter-spacing: .14em;

}

.qualification-top i {

  color: var(--electric);

  font-style: normal;

}

.qualification-name {

  margin-top: 65px;

  min-height: 55px;

  font-size: 16px;

  font-weight: 600;

  line-height: 1.6;

}

.qualification-number {

  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-top: 30px;

}

.qualification-number strong {

  font-size: 65px;

  line-height: .9;

  letter-spacing: -.08em;

}

.qualification-number span {

  color: #888;

  font-size: 8px;

  letter-spacing: .14em;

}

.qualification-bottom {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  background: #ddd;

}

.qualification-bottom span {

  display: block;

  width: 40%;

  height: 100%;

  background: var(--electric);

}

.qualification-note {

  margin-top: 20px;

  color: #999;

  font-size: 10px;

}


/* =====================================================
   SLOGAN
===================================================== */

.slogans {

  background: var(--off-white);

}

.slogan-title h2 {

  margin-top: 22px;

  font-size:
    clamp(
      55px,
      8vw,
      110px
    );

  line-height: .9;

  letter-spacing: -.08em;

}

.slogan-list {

  margin-top: 95px;

}

.slogan {

  display: grid;

  grid-template-columns:
    90px
    1fr;

  gap: 35px;

  padding: 42px 0;

  border-top:
    1px solid
    #d8d8d3;

}

.slogan:last-child {

  border-bottom:
    1px solid
    #d8d8d3;

}

.slogan > span {

  color: var(--electric);

  font-size: 10px;

  letter-spacing: .15em;

}

.slogan h3 {

  font-size:
    clamp(
      25px,
      3vw,
      38px
    );

  letter-spacing: -.05em;

}

.slogan p {

  max-width: 650px;

  margin-top: 8px;

  color: #777;

  font-size: 13px;

}


/* =====================================================
   RECRUIT
===================================================== */

.recruit {

  min-height: 650px;

  display: flex;

  align-items: center;

  color: white;

  background: var(--black);

}

.recruit-background {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.95),
      rgba(0,0,0,.55)
    ),
    url(
      "https://www.ag-inc.net/image/18.png"
    )
    center / cover
    no-repeat;

  opacity: .7;

}

.recruit-content {

  position: relative;

  max-width: 850px;

}

.recruit-content h2 {

  margin-top: 25px;

  font-size:
    clamp(
      48px,
      7vw,
      90px
    );

  line-height: 1.1;

  letter-spacing: -.07em;

}

.recruit-content p {

  max-width: 600px;

  margin-top: 30px;

  color: #999;

  font-size: 14px;

}

.outline-button {

  color: #080808;

  display: inline-flex;

  align-items: center;

  gap: 50px;

  background-color: white;

  margin-top: 45px;

  padding:
    17px
    24px;

  border:
    1px solid
    rgba(255,255,255,.3);

  font-size: 9px;

  letter-spacing: .14em;

  transition:
    background .4s,
    color .4s;

}

.outline-button span {

  color: var(--electric);

  font-size: 18px;

}

.outline-button:hover {

  color: var(--black);

  background: yellow;

}


/* =====================================================
   COMPANY
===================================================== */

.company {

  background: white;

}

.company-layout {

  display: grid;

  grid-template-columns:
    .7fr
    1.3fr;

  gap: 100px;

}

.company-table {

  border-top:
    1px solid
    #ddd;

}

.company-row {

  display: grid;

  grid-template-columns:
    150px
    1fr;

  gap: 30px;

  padding: 27px 0;

  border-bottom:
    1px solid
    #ddd;

}

.company-row span {

  color: #999;

  font-size: 8px;

  letter-spacing: .17em;

}

.company-row strong {

  font-size: 14px;

  font-weight: 600;

}


/* =====================================================
   MAP
===================================================== */

.map {

  position: relative;

}

.map-frame {

  position: relative;

  height: 540px;

}

.map-frame iframe {

  display: block;

  width: 100%;

  height: 100%;

  border: 0;



}

.map-card {

  position: absolute;

  left: 60px;

  bottom: 50px;

  width: 350px;

  padding: 30px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.12);

}

.map-card span {

  color: var(--electric);

  font-size: 9px;

  letter-spacing: .15em;

}

.map-card strong {

  display: block;

  margin-top: 3px;

  font-size: 30px;

  letter-spacing: -.05em;

}

.map-card p {

  margin-top: 12px;

  color: #777;

  font-size: 11px;

}


/* =====================================================
   CONTACT
===================================================== */

.contact {

  background: var(--dark);

  color: white;

}

.contact-circuit {

  position: absolute;

  right: -100px;

  top: 60px;

  width: 520px;

  height: 520px;

  border:
    1px solid
    rgba(230,216,0,.08);

  border-radius: 50%;

}

.contact-circuit::before,
.contact-circuit::after {

  content: "";

  position: absolute;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius: 50%;

}

.contact-circuit::before {

  inset: 70px;

}

.contact-circuit::after {

  inset: 145px;

}

.contact-layout {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 100px;

}

.contact-title h2 {

  margin-top: 25px;

  font-size:
    clamp(
      50px,
      7vw,
      100px
    );

  line-height: .95;

  letter-spacing: -.08em;

}

.contact-body {

  align-self: end;

}

.contact-body > p {

  max-width: 520px;

  color: #999;

  font-size: 14px;

}

.contact-list {

  margin-top: 55px;

  border-top:
    1px solid
    rgba(255,255,255,.12);

}

.contact-item {

  display: grid;

  grid-template-columns:
    70px
    1fr
    30px;

  align-items: center;

  gap: 20px;

  padding: 24px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.12);

  transition:
    padding .4s var(--ease);

}

.contact-item:hover {

  padding-left: 15px;

}

.contact-item span {

  color: #555;

  font-size: 8px;

  letter-spacing: .16em;

}

.contact-item strong {

  font-size: 16px;

  font-weight: 500;

}

.contact-item b {

  color: var(--electric);

  font-size: 18px;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

  background: white;

  border-top:
    1px solid
    #ddd;

  padding:
    80px
    0
    25px;

}

.footer-top {

  display: grid;

  grid-template-columns:
    1.3fr
    1fr
    1fr;

  gap: 80px;

}

.footer-brand img {

  width: 90px;

  max-height: 45px;

  object-fit: contain;

  object-position: left;

}

.footer-brand p {

  margin-top: 22px;

  color: #999;

  font-size: 8px;

  line-height: 1.8;

  letter-spacing: .16em;

}

.footer-nav {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 12px;

}

.footer-nav a {

  color: #555;

  font-size: 9px;

  letter-spacing: .13em;

  transition:
    color .3s;

}

.footer-nav a:hover {

  color: var(--black);

}

.footer-company strong {

  font-size: 12px;

}

.footer-company p {

  margin-top: 14px;

  color: #777;

  font-size: 10px;

  line-height: 1.9;

}

.footer-bottom {

  display: flex;

  justify-content: space-between;

  margin-top: 80px;

  padding-top: 20px;

  border-top:
    1px solid
    #ddd;

  color: #aaa;

  font-size: 7px;

  letter-spacing: .14em;

}


/* =====================================================
   REVEAL
===================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);

}

.reveal.visible {

  opacity: 1;

  transform: none;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .about-grid {

    gap: 60px;

  }

  .service-grid {

    grid-template-columns: 1fr;

  }

  .service-card {

    border-right: 0;

    border-bottom:
      1px solid
      rgba(255,255,255,.13);

  }

  .service-card:last-child {

    border-bottom: 0;

  }

  .qualification-grid {

    grid-template-columns:
      repeat(2,1fr);

  }

  .company-layout {

    grid-template-columns: 1fr;

  }

  .contact-layout {

    grid-template-columns: 1fr;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

  :root {
    --header: 72px;
  }

  .container,
  .header-inner,
  .hero-content {

    width:
      calc(100% - 40px);

  }

  .section {

    padding:
      95px
      0;

  }

  .hero-content {

    padding-top: 70px;

  }

  .hero-title-jp {

    font-size:
      clamp(
        44px,
        12vw,
        70px
      );

  }

  .hero-title-en {

    font-size: 7px;

    letter-spacing: .15em;

  }

  .hero-text {

    font-size: 12px;

  }


  /*
    スマホではさらに右側に限定
  */

  .hero-light-line {

    width: 38%;

    top: 64%;

  }

  .route-a {

    width: 28%;

  }

  .route-b {

    width: 24%;

  }

  .route-c {

    width: 20%;

  }

  .hero-meta,
  .hero-corner {

    display: none;

  }


  .about-grid {

    grid-template-columns: 1fr;

    margin-top: 65px;

  }

  .about-photo {

    margin-top: 15px;

  }

  .photo-caption {

    left: 15px;

    bottom: -15px;

  }

  .about-fields {

    grid-template-columns: 1fr;

    margin-top: 75px;

  }

  .field-item,
  .field-item:not(:first-child) {

    padding:
      25px
      0;

    border-right: 0;

    border-bottom:
      1px solid
      #d9d9d4;

  }

  .field-item:last-child {

    border-bottom: 0;

  }


  .service-grid {

    margin-top: 65px;

  }

  .service-card {

    min-height: 370px;

    padding: 30px 20px;

  }

  .service-icon {

    right: 20px;

    top: 30px;

  }

  .card-line {

    left: 20px;

    right: 20px;

    bottom: 30px;

  }


  .project-grid {

    grid-template-columns: 1fr;

    margin-top: 65px;

  }

  .project-main {

    grid-column: auto;

  }

  .project-main .project-image,
  .project-image {

    aspect-ratio: 1.3 / 1;

  }


  .news-head {

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

  }

  .news-item {

    grid-template-columns:
      95px
      1fr
      25px;

    gap: 10px;

    padding:
      20px
      0;

  }

  .news-item > span {

    display: none;

  }


  .representative-layout {

    grid-template-columns: 1fr;

    gap: 50px;

  }

  .representative-label {

    gap: 0;

  }

  .representative-index {

    display: none;

  }


  .qualification-grid {

    grid-template-columns: 1fr;

    margin-top: 60px;

  }


  .slogan-list {

    margin-top: 65px;

  }

  .slogan {

    grid-template-columns:
      45px
      1fr;

    gap: 15px;

    padding:
      35px
      0;

  }


  .company-row {

    grid-template-columns:
      100px
      1fr;

    gap: 15px;

  }


  .map-frame {

    height: 450px;

  }

  .map-card {

    left: 20px;

    right: 20px;

    bottom: 20px;

    width: auto;

  }


  .contact-layout {

    gap: 60px;

  }

  .contact-item {

    grid-template-columns:
      55px
      1fr
      20px;

    gap: 8px;

  }

  .contact-item strong {

    font-size: 13px;

  }


  .footer-top {

    grid-template-columns: 1fr;

    gap: 45px;

  }

  .footer-bottom {

    flex-direction: column;

    gap: 8px;

    margin-top: 50px;

  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 500px) {

  .mobile-menu-inner {

    padding:
      105px
      20px
      30px;

  }

  .mobile-menu-bottom {

    left: 20px;

    right: 20px;

  }

  .header-logo {

    width: 85px;

  }

  .hero-eyebrow {

    font-size: 7px;

    letter-spacing: .12em;

  }

  .hero-title-jp {

    font-size: 44px;

  }

  .hero-title-en {

    margin-top: 18px;

  }

  .hero-text {

    margin-top: 27px;

  }

  .hero-scroll {

    bottom: 25px;

  }

  .section-heading h2 {

    font-size: 43px;

  }

  .representative-content h2 {

    font-size: 46px;

  }

  .qualification-number strong {

    font-size: 75px;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}