@charset "UTF8";

:root {
  /* Noto Sans CJK JP */
  --noto: noto-sans-cjk-jp, sans-serif;
  /* DNP 秀英角ゴシック銀 Std */
  --gin: dnp-shuei-gothic-gin-std, sans-serif;
  /* DNP 秀英角ゴシック金 Std */
  --kin: dnp-shuei-gothic-kin-std, sans-serif;
  /* 凸版文久見出しゴシック Std */
  --bun: toppan-bunkyu-midashi-go-std, sans-serif;
  --themecolor: #000;
}

body {
  font-family: var(--noto);
  font-weight: 500;
  /* 14px */
  font-size: .875rem;
  color: var(--themecolor);
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  body {
    /* 16px */
    font-size: 1rem;
  }
}

img {
  max-width: 100%;
}

a {
  color: var(--themecolor);
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ===========================================
 * Firstview
 * ======================================== */

.firstview {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 4fr 2fr;
  grid-template-rows: 4fr 2fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
}

.section {
  width: 100%;
}

.mv {
  height: calc(4 / 6 * 100dvh);
  position: relative;
}

.mv_loop {
  height: 100%;
}

.loop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  overflow: hidden;
}

.loop_image {
  width: auto;
  height: 100%;
  max-width: unset;

  &:first-child {
    -webkit-animation: slide1 150s -75s linear infinite;
    animation: slide1 150s -75s linear infinite;
  }

  &:last-child {
    -webkit-animation: slide2 150s linear infinite;
    animation: slide2 150s linear infinite;
  }
}

@-webkit-keyframes slide1 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slide1 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@keyframes slide2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

.mv_band {
  height: 100%;
}

.band {
  color: #fff;
  background: #000;
  position: absolute;
  top: 0;
  left: 6%;
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: center;
  align-content: center;
  gap: 4%;
  padding: 2em 1em 1em 1.5em;
}

.band_head {
  font-family: var(--bun);
  /* 22px */
  font-size: 1.375rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  white-space: nowrap;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.band_body {
  font-family: var(--gin);
  /* 11px */
  font-size: 0.6875rem;
  line-height: 2;
  letter-spacing: 0.1em;
  white-space: nowrap;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.wrapper--1200px {
  width: 100%;
  max-width: 1200px;
  padding-inline: 4%;
  margin-inline: auto;
}

.catch__text {
  /* 21px */
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  text-align: center;
  margin-bottom: 30px;
}

.catch__logo {
  width: 95px;
  display: block;
  margin-inline: auto;
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  .band {
    padding: 2em 4.5em 1em 5em;
  }

  .band_head {
    /* 34px */
    font-size: 2.125rem;
  }

  .band_body {
    /* 16px */
    font-size: 1rem;
  }

  .catch__text {
    /* 44px */
    font-size: 2.75rem;
  }

  .catch__logo {
    width: 130px;
  }
}

@media screen and (min-width: 767px) and (max-height: 930px) {
  .firstview {
    height: unset;
  }

  .mv {
    height: 100dvh;
  }
}

/* Firstview end */
/* ======================================== */


/* ===========================================
 * What
 * ======================================== */

.what {
  padding-block: 25px 35px;
}

.section-title {
  text-align: center;
  margin-bottom: 25px;
}

.section-title__main {
  /* 26px */
  font-size: 1.625rem;
  font-weight: 900;
}

.section-title__sub {
  /* 16px */
  font-size: 1rem;
}

.section__desc {
  line-height: 1.8;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

.what__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3.5% 1fr 3.5% 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5%;
  margin-block: 20px 30px;
}

.what__item {
  position: relative;
}

.what__image {}

.what__caption {
  color: #fff;
  /* 11px */
  font-size: 0.6875rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding-inline: 1em;
  margin: auto;
}

.sp-only {}

.more-button {
  /* 18px */
  font-size: 1.125rem;
  width: 100%;
  display: block;
  text-align: center;
  border: 1px solid #000;
  padding: 1em;
  margin-inline: auto;
  -webkit-transition: background .3s;
  -o-transition: background .3s;
  transition: background .3s;

  &:hover {
    color: #fff;
    background: #000;
  }
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  .what {
    padding-block: 55px 65px;
  }

  .section-title {
    margin-bottom: 40px;
  }

  .section-title__main {
    /* 50px */
    font-size: 3.125rem;
  }

  .section-title__sub {
    /* 24px */
    font-size: 1.5rem;
    line-height: 1;
  }

  .what__list {
    margin-block: 80px 70px;
  }

  .what__caption {
    /* 20px */
    font-size: 1.25rem;
  }

  .sp-only {
    display: none;
  }

  .more-button {
    width: 750px;
    padding: 1.5em;
  }
}

/* What end */
/* ======================================== */


/* ===========================================
 * Why
 * ======================================== */

.why {
  padding-block: 25px 50px;
}

.line-button {
  /* 18px */
  font-size: 1.125rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  gap: 1em;
  background: #000;
  border: 1px solid #fff;
  padding: .6em;
  margin-top: 50px;
  margin-inline: auto;
  -webkit-transition: border .3s, -webkit-filter .3s;
  transition: border .3s, -webkit-filter .3s;
  -o-transition: filter .3s, border .3s;
  transition: filter .3s, border .3s;
  transition: filter .3s, border .3s, -webkit-filter .3s;

  &:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
}

.line-button__icon {
  width: 35px;
  aspect-ratio: 1 / 1;
}

.line-button__text {
  color: #fff;
  line-height: 1;
}

/* 767px ---------------------------------- */


@media screen and (min-width: 767px) {
  .why {
    padding-block: 55px 190px;
  }

  .line-button {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em;
    margin-top: 35px;
  }
}

/* Why end */
/* ======================================== */


/* ===========================================
 * Voice
 * ======================================== */

.voice {
  background: #595757;
  padding-block: 40px 25px;
}

.section-title--white {
  color: #fff;
  margin-bottom: 50px;
}

.section__desc--white {
  color: #fff;
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  .voice {
    background: #595757;
    padding-block: 45px 55px;
  }

  .comingsoon {
    font-size: 2rem;
  }
}

/* Voice end */
/* ======================================== */


/* ===========================================
 * Outline
 * ======================================== */

.outline {
  padding-block: 80px 45px;
}

.wrapper--863px {
  width: 100%;
  max-width: 863px;
  padding-inline: min(4%, 30px);
  margin-inline: auto;
}

.section__desc--left {
  text-align: left;
  word-break: normal;
}

.company {
  padding-block: 80px 0;
}

.company__table {
  width: 100%;
  border-collapse: collapse;
}

.company__tr:not(:last-of-type) {
  border-bottom: 1px solid #000;
}

.company__th,
.company__td {
  /* 13px */
  font-size: .8125rem;
  text-align: left;
  padding-block: 0.6em;
}

.company__th {
  width: 6em;
  -moz-text-align-last: justify;
  text-align-last: justify;
  vertical-align: top;
  padding-right: 1.5em;
  white-space: nowrap;
}

.name {
  display: inline-block;
  width: auto;
  height: 0.97em;
  vertical-align: middle;
  translate: 0 -0.15em;
}

.company__tel {
  position: relative;
  padding-left: 1.5em;

  &::before {
    position: absolute;
    top: 4px;
    left: 0;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../image/icon_phone.svg) no-repeat center / contain;
  }
}

.company__email {
  display: block;
  position: relative;
  padding-left: 1.5em;

  &::before {
    position: absolute;
    top: 4px;
    left: 0;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../image/icon_mail.svg) no-repeat center / contain;
  }
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  .outline {
    padding-block: 150px 150px;
  }

  .company {
    padding-block: 80px 30px;
  }

  .company__th,
  .company__td {
    /* 15px */
    font-size: 0.9375rem;
    padding-block: 1em;
  }

  .company__th {
    padding-right: 2.5em;
  }

  .company__email {
    display: inline;
    margin-left: 1em;
  }
}

/* Outline end */
/* ======================================== */

/* ===========================================
 * Footer
 * ======================================== */

.footer {
  background: #000;
  padding-block: 20px;
}

.footer__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 79px 25px 1fr;
  grid-template-columns: 79px 1fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 25px;
}

.footer__logo {
  width: 100%;
}

.info__name {
  color: #fff;
  /* 15px */
  font-size: 0.9375rem;
  line-height: 1;
  margin-bottom: 10px;
}

.info__address,
.info__contact-info {
  color: #fff;
  /* 13px */
  font-size: .8125rem;
}

.info__address {
  margin-bottom: 8px;
}

.info__tel {
  color: #fff;
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  .footer {
    padding-block: 50px;
  }

  .footer__inner {
    -ms-grid-columns: 130px 25px 1fr;
    grid-template-columns: 130px 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 25px;
  }

  .info__name {
    font-family: var(--kin);
    /* 20px */
    font-size: 1.25rem;
    margin-top: 40px;
  }

  .info__address,
  .info__contact-info {
    font-family: var(--kin);
    /* 15px */
    font-size: 0.9375rem;
    line-height: 1.8;
  }

  .info__address {
    margin-bottom: 0;
  }
}

/* Footer end */
/* ======================================== */


/* ===========================================
 * Service
 * ======================================== */

.service {
  padding-bottom: 45px;
}

.service__image {
  width: 100%;
  margin-bottom: 35px;
}

.wrapper--763px {
  width: 100%;
  max-width: 763px;
  padding-inline: min(4%, 30px);
  margin-inline: auto;
}

.service__message {
  margin-bottom: 85px;
}

.service__logo {
  width: 95px;
  display: block;
  margin-inline: auto;
  margin-bottom: 35px;
}

.service__text {
  /* 21px */
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 85px;
}

.service__list {}

.service__item {
  margin-bottom: 90px;
}

.service__title {
  /* 18px */
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.service__desc {
  line-height: 2;
}

/* 767px ---------------------------------- */

@media screen and (min-width: 767px) {
  .service {
    padding-bottom: 200px;
  }

  .service__image {
    margin-bottom: 80px;
  }

  .service__logo {
    margin-bottom: 130px;
  }

  .service__text {
    /* 35px */
    font-size: 2.1875rem;
    margin-bottom: 130px;
  }

  .service__list {
    margin-bottom: 160px;
  }

  .service__item {
    margin-bottom: 110px;
  }

  .service__title {
    /* 26px */
    font-size: 1.625rem;
    text-align: left;
  }
}