@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP&display=swap');


:root {
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  --color-black: #231815;
  --color-white: #ffffff;
  --color-base: #f8f8f8;
  --color-gray: #ddd;
  --color-theme: #00a9c9;
  --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.15), -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08), -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), inset -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1), -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2);
}



/* ======================================================================
   module
====================================================================== */
.mt20 {
  margin-block-start: 20px;
}

.mt60 {
  margin-block-start: 60px;
}

.mt70 {
  margin-block-start: 70px;
}

.mt100 {
  margin-block-start: 100px;
}

.mt150 {
  margin-block-start: 150px;
}

.mb150 {
  margin-block-end: 150px;
}


@media screen and (width <=767px) {
  .mt60 {
    margin-block-start: 30px;
  }

  .mt70 {
    margin-block-start: 35px;
  }

  .mt100 {
    margin-block-start: 50px;
  }

  .mt150 {
    margin-block-start: 75px;
  }

  .mb150 {
    margin-block-end: 75px;
  }
}


/* ======================================================================
   br
====================================================================== */
.newLine {
  display: block;
}

@media screen and (width <=767px) {
  .newLine {
    display: none;
  }
}

/* ======================================================================
   white
====================================================================== */
.white {
  color: var(--color-white);
}


/* ======================================================================
   black
====================================================================== */
.black {
  color: var(--color-black);
}


/* ======================================================================
   textShadow
====================================================================== */
.textShadow {
  text-shadow: 0 0 10px rgba(0, 0, 0, .6);
}


/* ======================================================================
   textCenter
====================================================================== */
.textCenter {
  text-align: center;
  line-height: 2;
}

@media screen and (width <=767px) {
  .textCenter {
    text-align: justify;
  }
}


/* ======================================================================
   body
====================================================================== */
body {
  inline-size: 100%;
  block-size: auto;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans";
  font-weight: 400;
  line-height: 1.5;
  color: #231815;
  word-break: break-all;
  letter-spacing: 1;
}


@media screen and (width <=767px) {
  body {
    font-size: 14px;
  }
}


/* ======================================================================
   h1
====================================================================== */
h1 {
  font-size: 50px;
  color: var(--color-white);
  text-align: center;
  font-family: "YuMincho", serif;
  font-weight: 400;
}


@media screen and (width <=767px) {
  h1 {
    font-size: 26px;
    z-index: 10;
  }
}


/* ======================================================================
   technologyTitle
====================================================================== */
.technologyTitle {
  font-size: 50px;
  text-align: center;
  z-index: 10;
  margin-block-start: 160px;
  font-family: "YuMincho", serif;
}


@media screen and (width <=767px) {
  .technologyTitle {
    font-size: 22px;
    z-index: 10;
  }
}


/* ======================================================================
   locationTitle
====================================================================== */
.locationTitle {
  font-size: 30px;
  text-align: center;
  z-index: 10;
  writing-mode: vertical-rl;
  margin-inline: 150px 75px;
  color: var(--color-white);
  min-inline-size: 185px;
  font-family: "YuMincho", serif;
}


@media screen and (width <=767px) {
  .locationTitle {
    font-size: 23px;
    z-index: 10;
  }
}


/* ======================================================================
   staffTitle
====================================================================== */
.staffTitle {
  font-size:25px;
  text-align: center;
  color: var(--color-black);
  padding-block-end: 50px;
  font-weight: 500;
  font-family: "YuMincho", serif;
}


@media screen and (width <=767px) {
  .locationTitle {
    font-size: 23px;
    z-index: 10;
  }
}



/* ======================================================================
   cvTitle
====================================================================== */
.cvTitle {
  font-size: 30px;
  text-align: center;
  color: var(--color-white);
  padding-block: 150px 50px;
  font-weight: bold;
  font-family: "YuMincho", serif;
}


@media screen and (width <=767px) {
.cvTitle {
    width: 80%;
    font-size: 25px;
    padding-block: 0;
    z-index: 10;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -15%);
}
}


/* ======================================================================
   ul ol
====================================================================== */
ul,
ol {
  margin: 0;
  padding: 0;

  & li {
    list-style-type: none;
  }
}


/* ======================================================================
   img
====================================================================== */
img {
  max-inline-size: 100%;
  vertical-align: bottom;
}


/* ======================================================================
   inner
====================================================================== */
.inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin: 0 auto;
}

@media screen and (width <=767px) {
  .inner {
    inline-size: 100%;
    block-size: auto;
    padding-inline:8.2%;
  }
}



/* ======================================================================
   #secFv
====================================================================== */
#secFv {
  position: relative;
  inline-size: 100%;
  block-size: auto;

  & img {
    inline-size: 100%;
  }
}


/* ======================================================================
   #secCta
====================================================================== */
#secCta {
  display: none;
}


@media screen and (width <=767px) {
  #secCta {
    display: block;
    inline-size: 100%;
    block-size: 80px;
    background: var(--color-gold);
    display: grid;
    place-items: center;

    & a {
      position: relative;
      color: var(--color-white);
      text-decoration: none;
		font-size: 18px;
      font-weight: normal;
      letter-spacing: 1px;
      font-family: "Hiragino Mincho ProN", serif;

      &::after {
        content: url(../img/cv/allow_right.svg);
        display: inline-block;
        position: absolute;
        top: -15%;
        right: -25%;
        inline-size: 25px;
      }
    }
  }
}


/* ======================================================================
   #secDesign
====================================================================== */
#secDesign {
  position: relative;
  inline-size: 100%;
  block-size: auto;
  background: url(../img/design/secDesign_bg.webp) center / cover no-repeat;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    inline-size: 210px;
    block-size: auto;
    content: url(../img/design/secDesign_bg_text.svg);
  }

  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    inline-size: 1px;
    block-size: 75px;
    background-color: var(--color-white);
    z-index: 10;
  }
}


@media screen and (width <=767px) {
  #secDesign {

    &::before {
      inline-size: 105px;
      block-size: auto;
    }
  }
}



/* ======================================================================
   #secTechnology
====================================================================== */
#secTechnology {
  position: relative;
  inline-size: 100%;
  block-size: auto;

  &::before {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -3%);
    display: inline-block;
    inline-size: 800px;
    block-size: auto;
    content: url(../img/technology/secTechnology_bg_text.webp);
  }

  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    inline-size: 1px;
    block-size: 75px;
    background-color: var(--color-black);
    z-index: 10;
  }
}


@media screen and (width <=767px) {
  #secTechnology {

    &::before {
      top: 10%;
      left: 50%;
      transform: translate(-50%, -10%);
      inline-size: 100%;
      block-size: auto;
      content: url(../img/technology/secTechnology_bg_text_sp.webp);
      text-align: center;
    }
  }
}



/* ======================================================================
   #secLocation
====================================================================== */
#secLocation {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  background: url(../img/location/secLocation_bg.webp) center / cover no-repeat;

  &::before {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, -2%);
    display: inline-block;
    inline-size: auto;
    block-size: 220px;
    content: url(../img/location/secLocation_bg_text.webp);
  }

  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    inline-size: 1px;
    block-size: 75px;
    background-color: var(--color-white);
    z-index: 10;
  }
}


@media screen and (width <=767px) {
  #secLocation {

    &::before {
      top: 10%;
      left: 50%;
      transform: translate(-50%, -10%);
      inline-size: 100%;
      block-size: auto;
      content: url(../img/location/secLocation_bg_text_sp.webp);
      text-align: center;
    }
  }
}



/* ======================================================================
   #secEnvironment
====================================================================== */
#secEnvironment {
  inline-size: 100%;
  background: #aeb5b5;
}


/* ======================================================================
   #secStaff
====================================================================== */
#secStaff {
  position: relative;
  inline-size: 100%;

  &::after {
    position: absolute;
    top: -150px;
    left: 50%;
    content: "";
    inline-size: 1px;
    block-size: 75px;
    background-color: var(--color-black);
    z-index: 10;
  }

  & img {
    inline-size: 100%;
  }
}


@media screen and (width <=767px) {
  #secStaff {
    position: relative;

    &::after {
      position: absolute;
      top: -105px;
      left: 50%;
    }
  }
}


/* ======================================================================
   #secCv
====================================================================== */
#secCv {
  position: relative;
  inline-size: 100%;
  block-size: 100vh;
  background: url(../img/cv/cv_bg.webp) center / cover no-repeat;

  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    inline-size: 1px;
    block-size: 75px;
    background-color: var(--color-white);
    z-index: 10;
  }
}

@media screen and (width <=767px) {
  #secCv {
    position: relative;
    inline-size: 100%;
    block-size: 85vh;
    background: #000028;

    & .spImg {
      inline-size: 100%;
      block-size: 39vh;
      background: url(../img/cv/cv_bg_sp.webp) center / cover no-repeat;
    }
  }
}







/* ======================================================================
   #footer
====================================================================== */
footer {
  background: var(--color-black);
  padding-block: 70px 50px;

  & img {
    block-size: 140px;
  }

  & .logo {
    display: grid;
    place-items: center;

    & img {
      block-size: 20px;
    }
  }
}


@media screen and (width <=767px) {
  footer {
    padding-block: 35px 15px;

    & img {
      display: block;
      margin: 0 auto;
      block-size: 100px;
    }

    & .logo {

      & img {
        block-size: 15px;
      }
    }
  }
}