@charset "UTF-8";

/*
 Theme Name: 日発オートセンター様テーマテンプレート
 Version: 1.0
*/

/*====================
  Common
====================*/

:root {
  --base-font-family: "Noto Sans JP", sans-serif;
  --eg-font-family: "Roboto", sans-serif;

  /* Color */
  --color-base: #1a1a1a;
  --color-bg-base: #f4f6f8;
  --color-secondary: #0f2742;
  --color-accent: #f28c28;
  --color-border: #dbdbdb;

  /* Layout */
  --layout-content-width: 1080px;
  --header-height: 188px;

  /* FontSize */
  --base-font-size: 1.6rem;

  /* Space */
  --section-space-medium: 86px;
  --section-space-large: 120px;

  @media screen and (max-width: 1000px) {
    --header-height: 75px;
  }

  @media screen and (max-width: 800px) {
    --base-font-size: 1.8rem;
    --section-space-medium: 64px;
    --section-space-large: 80px;
  }

  @media screen and (max-width: 600px) {
    --base-font-size: 2rem;
    --header-height: 70px;
  }
}

html {
  font-size: 10px;

  @media screen and (max-width: 800px) {
    font-size: 56.25%;
  }

  @media screen and (max-width: 600px) {
    font-size: 50%;
  }
}

body {
  background-color: var(--color-bg-base);
  font-family: var(--base-font-family);
  font-weight: 400;
  font-size: var(--base-font-size);
  color: var(--color-base);
  letter-spacing: 1px;

  @media screen and (max-width: 600px) {
    overflow-x: hidden;
  }
}

a {
  text-decoration: none;
  transition: all 0.3s;

  @media screen and (min-width: 801px) {
    &:hover {
      opacity: 0.8;
    }
  }
}

/** フォームリセット **/
input,
button,
textarea,
submit {
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* PC（～1001px）、タブレット（1000px～）、スマホ表示設定（600px～） **/
@media screen and (max-width: 1000px) {
  .show-pc {
    display: none !important;
  }
}

@media screen and (min-width: 1001px) and (max-width: 601px) {
  .show-tb {
    display: none !important;
  }
}

@media screen and (min-width: 601px) {
  .show-sp {
    display: none !important;
  }
}

@media screen and (max-width: 600px) {
  .show-pc-tb {
    display: none !important;
  }
}

@media screen and (min-width: 1001px) {
  .show-tb-sp {
    display: none !important;
  }
}

/** コンテンツ幅設定 **/
.bg-blue {
  background-color: var(--color-secondary);
}

.l-container {
  padding-inline: 16px;
  max-width: calc(var(--layout-content-width) + (16px * 2));
  margin-inline: auto;
}

/** リンクボタン **/
.link-btn {
  max-width: 420px;
  width: 100%;

  a {
    display: block;
    background: var(--color-accent);
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    padding: 20px 35px;
    position: relative;

    @media screen and (max-width: 600px) {
      font-size: 18px;
    }

    &::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.0495%209.34075L6.58099%2014.8092L8.20324%2016.4065L16.4065%208.20325L8.20324%200L6.58099%201.59725L12.0495%207.06575H-5.72205e-06V9.34075H12.0495Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
      background-size: 100%;
      background-repeat: no-repeat;
      width: 16px;
      height: 16px;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }

    &:hover {
      color: #fff;
      text-decoration: none;
    }
  }
}

.btn-center {
  margin-inline: auto;
}

.btn-right {
  margin-left: auto;
}

/** タイトル **/
.section-title {
  text-align: center;
  margin-bottom: 48px;

  @media screen and (max-width: 600px) {
    margin-bottom: 35px;
  }

  .title-eg {
    color: var(--color-accent);
    font-family: var(--eg-font-family);
    font-weight: 700;
    font-size: 4rem;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 0;
  }
  .title-text {
    color: var(--color-base);
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
  }
}

.bg-blue {
  .section-title {
    .title-eg {
      color: #fff;
    }
    .title-text {
      color: var(--color-accent);
    }
  }
}

/** アイコン設定 **/
.icon-mail {
  position: relative;

  &::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2213%22%20viewBox%3D%220%200%2016%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1.78375%2013C1.29005%2013%200.869331%2012.8243%200.521599%2012.4729C0.173866%2012.1215%200%2011.6963%200%2011.1974V1.80264C0%201.30371%200.173866%200.878539%200.521599%200.527123C0.869331%200.175708%201.29005%200%201.78375%200H14.2163C14.71%200%2015.1307%200.175708%2015.4784%200.527123C15.8261%200.878539%2016%201.30371%2016%201.80264V11.1974C16%2011.6963%2015.8261%2012.1215%2015.4784%2012.4729C15.1307%2012.8243%2014.71%2013%2014.2163%2013H1.78375ZM8%207.49601L1.78375%203.53416V11.1974H14.2163V3.53416L8%207.49601ZM8%205.76448L14.2163%201.80264H1.78375L8%205.76448ZM1.78375%203.53416V1.80264V11.1974V3.53416Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 18px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: 1px;

    @media screen and (max-width: 1000px) {
      margin-top: -1px;
    }
  }
}
.icon-tel {
  position: relative;

  &::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16.7858%2018C17.1299%2018%2017.4184%2017.8839%2017.651%2017.6516C17.8837%2017.4192%2018%2017.1288%2018%2016.7803V12.7789C18%2012.485%2017.9101%2012.2321%2017.7303%2012.02C17.5504%2011.808%2017.3054%2011.6577%2016.9951%2011.5692L13.7782%2010.902C13.4914%2010.854%2013.2103%2010.8705%2012.9349%2010.9517C12.6596%2011.0327%2012.4271%2011.1661%2012.2375%2011.3519L9.89777%2013.6732C9.33268%2013.3459%208.79253%2012.98%208.27733%2012.5753C7.76196%2012.1706%207.26127%2011.7254%206.77525%2011.2397C6.25287%2010.7338%205.77916%2010.2152%205.35412%209.68405C4.92924%209.15288%204.56159%208.60721%204.25116%208.04702L6.65835%205.69782C6.83558%205.53239%206.95549%205.3386%207.0181%205.11645C7.08054%204.8943%207.08771%204.62358%207.03962%204.3043L6.40964%201.00456C6.35355%200.710701%206.21244%200.469808%205.98631%200.281885C5.76017%200.0939621%205.48814%200%205.17021%200H1.21423C0.867287%200%200.578217%200.116127%200.347029%200.348382C0.115675%200.5808%200%200.871242%200%201.21971C0%203.28213%200.449173%205.31978%201.34752%207.33265C2.24586%209.34553%203.52189%2011.1777%205.17559%2012.829C6.8293%2014.4802%208.66235%2015.7549%2010.6747%2016.6529C12.687%2017.551%2014.724%2018%2016.7858%2018ZM3.20592%205.97262C2.94%205.36387%202.73669%204.74729%202.59599%204.12289C2.45529%203.49849%202.34809%202.86578%202.27439%202.22476H4.39129L4.81414%204.41187L3.20592%205.97262ZM11.9843%2014.7171L13.5926%2013.1212L15.7745%2013.5925V15.7146C15.1256%2015.6579%2014.4848%2015.5438%2013.852%2015.3723C13.2195%2015.2009%2012.5969%2014.9825%2011.9843%2014.7171Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
  }
}

/* テキスト装飾 */
.bold {
  font-weight: bold;
}

.color-orange {
  color: var(--color-accent);
}

/* 追従ボタン */
.floating-contact-button {
  position: fixed;
  right: 0;
  top: 30%;
  width: 48px;
  height: 256px;
  display: none;
  z-index: 100;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-accent);
    color: #fff;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-weight: 700;
    font-size: 20px;
    padding: 12px;
    height: 100%;
    width: 100%;
    letter-spacing: 0.05em;

    &::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.0495%209.34075L6.58099%2014.8092L8.20324%2016.4065L16.4065%208.20325L8.20324%200L6.58099%201.59725L12.0495%207.06575H-5.72205e-06V9.34075H12.0495Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
      background-size: 100%;
      background-repeat: no-repeat;
      width: 16px;
      height: 16px;
      display: block;
      margin-top: 6px;
    }

    &:hover {
      color: #fff;
      text-decoration: none;
    }
  }
}

/** ページトップ **/
.pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;

  @media screen and (max-width: 800px) {
    right: 10px;
    bottom: 70px;
  }

  @media screen and (max-width: 900px) {
    bottom: 90px;
  }

  img {
    display: block;
    width: 60px;

    @media screen and (max-width: 800px) {
      width: 50px;
    }
  }
}

/*====================
  ヘッダー
====================*/
.header {
  background-color: var(--color-secondary);
  border-bottom: 1px solid var(--color-accent);
  position: relative;
  z-index: 900;

  .header-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-left: 40px;

    @media screen and (max-width: 1210px) {
      padding-left: 20px;
    }
    @media screen and (max-width: 1000px) {
      padding: 20px 10px;
    }
    @media screen and (max-width: 600px) {
      padding: 15px 10px;
    }

    .logo {
      margin: 0;

      @media screen and (max-width: 600px) {
        img {
          width: 80px;
        }
      }

      &:has(> .recruit-name),
      &:has(> a > .recruit-name) > a {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24px;
        align-items: center;

        @media screen and (max-width: 600px) {
          column-gap: 10px;
        }
      }

      .recruit-name {
        display: block;
        color: #fff;
        font-weight: 500;
        font-size: 3rem;
        line-height: 1;
        padding-bottom: 25px;

        @media screen and (max-width: 1210px) {
          font-size: 2.6rem;
        }

        @media screen and (max-width: 600px) {
          font-size: 18px;
          padding-bottom: 20px;
        }
      }
    }
  }

  .info-navi {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    max-width: 480px;
    width: 100%;

    @media screen and (max-width: 1000px) {
      position: fixed;
      bottom: 0;
      top: auto;
      left: 0;
      max-width: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;

      &.active {
        opacity: 1;
      }
    }

    > li {
      width: 50%;
    }

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;

      &:hover {
        text-decoration: none;
      }
    }

    .link-contact {
      > a {
        background-color: var(--color-base);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        padding: 25px 10px;

        &:hover {
          text-decoration: none;
        }

        @media screen and (max-width: 1000px) {
          padding-block: 15px;
          font-size: 16px;
        }

        @media screen and (max-width: 600px) {
          .icon-mail::before {
            display: none;
          }
        }

        @media screen and (max-width: 400px) {
          font-size: 15px;
        }
      }
    }
    .link-tel {
      > a {
        background-color: var(--color-accent);
        color: #fff;
        font-size: 2.4rem;
        letter-spacing: 0.03em;
        font-weight: 700;
        font-family: var(--eg-font-family);
        padding: 20px 10px;

        &:hover {
          text-decoration: none;
        }

        @media screen and (max-width: 1000px) {
          padding-block: 15px;
        }

        @media screen and (max-width: 400px) {
          font-size: 17px;
        }
      }
    }
  }

  .header-bottom {
    padding: 0 40px 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    .header-navi {
      grid-column: 2;
      justify-self: center;

      .navi-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 30px;
        margin-bottom: 0;

        a {
          display: block;
          color: #fff;
          font-size: 18px;
          font-weight: 700;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .link-brand-site {
      grid-column: 3;
      text-align: right;
      margin-bottom: 0;

      a {
        color: #fff;
        position: relative;
        padding-right: 23px;

        &::after {
          content: "";
          background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2215%22%20viewBox%3D%220%200%2019%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1.875%2013.125H16.875V5.625H10.3125V1.875H1.875V13.125ZM1.875%2015C1.35938%2015%200.917969%2014.8164%200.550781%2014.4492C0.183594%2014.082%200%2013.6406%200%2013.125V1.875C0%201.35938%200.183594%200.917969%200.550781%200.550781C0.917969%200.183594%201.35938%200%201.875%200H16.875C17.3906%200%2017.832%200.183594%2018.1992%200.550781C18.5664%200.917969%2018.75%201.35938%2018.75%201.875V13.125C18.75%2013.6406%2018.5664%2014.082%2018.1992%2014.4492C17.832%2014.8164%2017.3906%2015%2016.875%2015H1.875Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
          background-size: 100%;
          background-repeat: no-repeat;
          width: 18px;
          height: 15px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

.front-header {
  .header-top {
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    column-gap: 10px;

    .logo {
      padding: 10px 0 10px 20px;
      display: flex;
      align-items: center;

      @media screen and (max-width: 1000px) {
        width: 50%;
        padding-left: 10px;
      }
    }

    .info-navi {
      position: relative;
      top: auto;
      right: auto;

      @media screen and (max-width: 1000px) {
        width: 250px;
        opacity: 1;

        .link-tel {
          width: 100%;
        }
      }

      @media screen and (max-width: 600px) {
        width: 200px;
      }
    }
  }
}

@media screen and (min-width: 1001px) {
  .hamburger {
    display: none !important;
  }
}

@media screen and (max-width: 1000px) {
  .hamburger {
    display: block;
    position: relative;
    width: 50px;
    height: 60px;
    cursor: pointer;
    background: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;

    span {
      position: absolute;
      left: 0;
      right: 0;
      margin-inline: auto;
      width: 70%;
      height: 2px;
      background-color: #fff;
    }

    &:focus {
      outline: none;
    }

    &.active {
      position: fixed;
      top: 10px;

      span {
        background-color: var(--color-secondary);
      }
    }
  }

  .btn-trigger,
  .btn-trigger span {
    transition: all 0.5s;
    box-sizing: border-box;
  }
  .btn-trigger span:nth-of-type(1) {
    top: 15px;
  }
  .btn-trigger span:nth-of-type(2) {
    top: 27px;
  }
  .btn-trigger span:nth-of-type(3) {
    bottom: 19px;
  }

  .hamburger.active span:nth-of-type(1) {
    -webkit-transform: translateY(13px) rotate(-45deg);
    transform: translateY(13px) rotate(-45deg);
  }
  .hamburger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
  }

  .sp-gnavi {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.3s;

    &.active {
      transform: translateX(0);
    }
  }

  .gnavi-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 70px 40px 40px;
    flex-wrap: wrap;
    margin-bottom: 0;

    .nav-item {
      position: relative;
      width: 100%;
      font-size: 18px;
      border-bottom: 1px dashed var(--color-secondary);

      a {
        color: var(--color-base);
        position: relative;
        display: block;
        padding: 20px 20px 20px 10px;

        &::after {
          content: "";
          background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.0495%209.34075L6.58099%2014.8092L8.20324%2016.4065L16.4065%208.20325L8.20324%200L6.58099%201.59725L12.0495%207.06575H-5.12561e-06V9.34075H12.0495Z%22%20fill%3D%22%230F2742%22%2F%3E%0A%3C%2Fsvg%3E");
          background-size: 100%;
          background-repeat: no-repeat;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      &.link-brand-site {
        a::after {
          background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2215%22%20viewBox%3D%220%200%2019%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1.875%2013.125H16.875V5.625H10.3125V1.875H1.875V13.125ZM1.875%2015C1.35938%2015%200.917969%2014.8164%200.550781%2014.4492C0.183594%2014.082%200%2013.6406%200%2013.125V1.875C0%201.35938%200.183594%200.917969%200.550781%200.550781C0.917969%200.183594%201.35938%200%201.875%200H16.875C17.3906%200%2017.832%200.183594%2018.1992%200.550781C18.5664%200.917969%2018.75%201.35938%2018.75%201.875V13.125C18.75%2013.6406%2018.5664%2014.082%2018.1992%2014.4492C17.832%2014.8164%2017.3906%2015%2016.875%2015H1.875Z%22%20fill%3D%22%230F2742%22%2F%3E%0A%3C%2Fsvg%3E");
          background-size: 100%;
          width: 18px;
          height: 15px;
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .hamburger {
    top: 5px;
  }
}

/*====================
  フッター
====================*/

.footer-bg {
  margin-top: var(--section-space-large);

  img {
    width: 100%;
    height: auto;
    aspect-ratio: 2000 / 500;
    object-fit: cover;
  }
}

.footer {
  background-color: var(--color-base);
  padding-top: var(--section-space-medium);
  padding-bottom: 30px;
  padding-inline: 16px;
  color: #fff;

  &.top-footer {
    margin-top: 0;
  }

  .footer-nav_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 0;

    > li {
      border-right: 1px solid #fff;
      padding-right: 10px;
      line-height: 1;

      &:last-child {
        border-right: none;
        padding-right: 0;
      }

      a {
        color: #fff;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .access-info {
    margin-top: 40px;
    text-align: center;

    @media screen and (max-width: 600px) {
      margin-top: 0;
    }

    .logo {
      margin-bottom: 0;
    }
    .company-name {
      margin-bottom: 0;
      margin-top: 12px;
    }
    .address-text {
      margin-bottom: 0;
      margin-top: 16px;
      font-size: 12px;
    }
  }

  .copyright {
    text-align: center;
    margin-top: 40px;

    small {
      font-size: 10px;
    }
  }
}

/*====================
  ブランドトップ
====================*/
.front-main {
  height: 100vh;
  background: url(./assets/img/top/bg_brand_main.jpg) center no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 1000px) {
    padding-inline: 16px;
  }

  .front-main_inner {
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 100px 20px;
    max-width: 800px;
    width: 100%;

    @media screen and (max-width: 1000px) {
      padding: 40px;
    }

    @media screen and (max-width: 600px) {
      padding-inline: 20px;
    }

    .logo {
      margin-bottom: 0;
      text-align: center;
      max-width: 250px;
      margin-inline: auto;
    }

    .link-btn {
      margin-top: 60px;

      @media screen and (max-width: 600px) {
        margin-top: 40px;
      }
    }
  }
}

/*====================
  採用トップ
====================*/
.top-main {
  position: relative;
  height: calc(100vh - var(--header-height));

  .main-title {
    max-width: var(--layout-content-width);
    margin-inline: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    transform: translateY(-50%);
    padding-inline: 16px;

    .title-text {
      font-size: 4rem;
      font-weight: 700;
    }

    .title-lead {
      margin-top: 16px;
      font-size: 2rem;
      font-weight: 700;
    }
  }

  .main-image {
    img {
      width: 100%;
      object-fit: cover;
      height: calc(100vh - var(--header-height));
    }
  }
}

.mission-section {
  padding-block: var(--section-space-large);

  .mission-title {
    color: var(--color-secondary);
    font-size: 4rem;
    font-weight: 700;
    text-align: center;

    @media screen and (max-width: 600px) {
      font-size: 3.1rem;
    }

    .sub-title {
      display: block;
      margin-bottom: 24px;
      font-size: 20px;
      font-weight: 700;
      color: var(--color-accent);
    }
  }

  .mission-lead {
    margin-top: 32px;
    text-align: center;

    @media screen and (max-width: 600px) {
      text-align: left;
    }
  }

  .mission-list {
    display: flex;
    margin-top: 64px;
    margin-bottom: 56px;

    @media screen and (max-width: 800px) {
      flex-direction: column;
    }

    .mission-item {
      flex: 1;
      box-sizing: border-box;
      padding-inline: 15px;

      @media screen and (max-width: 800px) {
        padding-inline: 0;
        padding-block: 30px;
        flex: auto;
        max-width: 400px;
        margin-inline: auto;
        width: 100%;
      }

      &:first-child {
        padding-left: 0;

        @media screen and (max-width: 800px) {
          padding-top: 0;
        }
      }

      &:nth-child(2) {
        border-inline: 1px solid #bbc2cb;

        @media screen and (max-width: 800px) {
          border-inline: none;
          border-block: 1px solid #bbc2cb;
        }
      }

      &:last-child {
        padding-right: 0;

        @media screen and (max-width: 800px) {
          padding-bottom: 0;
        }
      }

      .icon {
        display: block;
        text-align: center;

        figcaption {
          display: block;
          margin-top: 16px;
          font-size: 2.4rem;
          font-weight: 700;
          color: var(--color-accent);
          letter-spacing: 0.05em;
          font-family: var(--eg-font-family);
        }
      }

      .item-title {
        margin-top: 40px;
        font-size: 2.4rem;
        text-align: center;
        font-weight: 700;
        color: #0b0519;
        min-height: 72px;
      }

      .item-text {
        margin-top: 16px;
        text-align: center;
        line-height: 1.8;
        font-size: 15px;
        margin-bottom: 0;
      }
    }
  }
}

.works-section {
  padding-block: var(--section-space-medium);
}

.content-flex {
  display: flex;
  gap: 32px 64px;
  align-items: center;

  @media screen and (max-width: 800px) {
    flex-direction: column;
    align-items: flex-start;
    max-width: 500px;
    margin-inline: auto;
  }

  .image {
    width: 50%;

    @media screen and (max-width: 800px) {
      width: 100%;
    }
  }

  .content-desc {
    flex: 1;

    .content-heading {
      font-weight: 700;
      font-size: 3.2rem;
    }

    .content-text {
      margin-top: 20px;

      p {
        margin-bottom: 0;
        line-height: 1.8;
      }
    }
    .link-btn {
      margin-top: 48px;

      @media screen and (max-width: 800px) {
        margin-inline: auto;
      }
    }
  }
}

.bg-blue {
  .content-desc {
    color: #fff;
  }
}

.interview-section {
  padding-block: var(--section-space-medium);
}

.work-environment {
  padding-block: var(--section-space-medium);
  color: #fff;

  .work-environment_lead {
    text-align: center;
    font-size: 4rem;
    font-weight: 700;

    @media screen and (max-width: 600px) {
      text-align: left;
      font-size: 3.2rem;
    }
  }

  .work-environment-list {
    margin-top: 60px;
    display: flex;
    gap: 40px 30px;
    flex-wrap: wrap;
    justify-content: space-between;

    @media screen and (max-width: 800px) {
      flex-direction: column;
      max-width: 400px;
      margin-inline: auto;
      justify-content: flex-start;
    }

    @media screen and (max-width: 600px) {
      margin-top: 40px;
    }

    .list-item {
      width: calc((100% - 120px) / 3);

      @media screen and (max-width: 800px) {
        width: 100%;
      }

      .image {
        display: block;
        margin-bottom: 15px;
      }
      .title {
        font-size: 24px;
        font-weight: 700;
      }
      .point-list {
        margin-top: 15px;
        font-size: 15px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        li {
          &::before {
            content: "・";
            color: var(--color-accent);
          }
        }
      }
    }
  }
}

.job-description-section {
  padding-top: var(--section-space-medium);

  .job-description_info {
    max-width: 880px;
    margin-inline: auto;

    .info-table {
      width: 100%;

      th,
      td {
        border-bottom: 1px solid var(--color-border);
        padding-block: 10px;

        @media screen and (max-width: 800px) {
          display: block;
          width: 100%;
        }
      }

      tr:first-child {
        th,
        td {
          border-top: 1px solid var(--color-border);
        }

        @media screen and (max-width: 800px) {
          td {
            border-top: none;
          }
        }
      }

      th {
        position: relative;
        font-size: 18px;
        letter-spacing: 0.1em;
        width: 200px;
        padding-left: 20px;

        &::before {
          content: "";
          background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8.81321%206.83199L4.81346%2010.8317L6%2012L12%206L6%200L4.81346%201.16826L8.81321%205.16801H0V6.83199H8.81321Z%22%20fill%3D%22%23F28C28%22%2F%3E%0A%3C%2Fsvg%3E");
          background-repeat: no-repeat;
          background-size: 100%;
          width: 12px;
          height: 12px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      td {
        font-size: 20px;
        letter-spacing: 0.1em;
      }

      @media screen and (max-width: 800px) {
        th,
        td {
          padding-inline: 20px;
          font-size: 16px;
        }

        th {
          border-bottom: none;
          padding-bottom: 0;
        }

        td {
          border-top: none;
        }
      }
    }
  }

  .section-closing {
    margin-top: 40px;
    text-align: center;
    font-size: 20px;

    @media screen and (max-width: 600px) {
      font-size: 18px;
      text-align: left;
    }
  }

  .link-btn {
    margin-top: 40px;
  }
}

/*====================
  下層ページ
====================*/
/* 余白設定 */
.mb-40 {
  margin-bottom: 40px !important;
}

/* パンくず */
.breadcrumbs {
  margin-top: 10px;
  margin-bottom: 86px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;

  @media screen and (max-width: 800px) {
    margin-bottom: 60px;
  }
  a {
    color: var(--color-secondary);

    &:hover {
      text-decoration: none;
    }
  }
}

/* 下層ページメインタイトル */
.page-main {
  min-height: 300px;
  display: flex;
  align-items: center;
  position: relative;

  @media screen and (max-width: 800px) {
    min-height: 200px;
  }

  &::before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .page-main_inner {
    position: relative;
    z-index: 1;
    .title {
      font-size: 3.4rem;
      font-weight: 700;
      text-align: center;
    }
  }
}

.page-contact {
  background: url(./assets/img/page-main/img_contact.jpg) center no-repeat;
  background-size: cover;
}

/* 下層ページコンテンツ */
.page-contents {
  .heading-primary {
    background: #0f2742;
    color: #fff;
    padding: 11px 20px;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 22px;
    border-left: 5px solid #f28c28;

    @media screen and (max-width: 600px) {
      font-size: 18px;
    }
  }

  p {
    line-height: 1.8;
    margin-bottom: 20px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-bottom: 20px;
    line-height: 1.8;
    margin-left: 1.5em;
  }

  ul {
    li {
      list-style-type: disc;
    }
  }

  .contents-block {
    margin-top: var(--section-space-medium);
  }
}

/* お問い合わせ */
.section-lead {
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 40px;

  @media screen and (max-width: 600px) {
    text-align: left;
  }
}

.form-block_inner {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  max-width: 800px;
  margin-inline: auto;

  p {
    margin-bottom: 0;
  }

  .form-box {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;

    @media screen and (max-width: 600px) {
      flex-direction: column;
      row-gap: 10px;
    }

    .required {
      background: #db0000;
      color: #fff;
      width: 50px;
      display: block;
      padding: 3px 10px;
      font-size: 14px;
      border-radius: 3px;
      text-align: center;
    }

    .form-label {
      width: 26%;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      @media screen and (max-width: 600px) {
        width: 100%;
        justify-content: flex-start;
        column-gap: 10px;
      }

      .label-text {
        flex: 1;

        @media screen and (max-width: 600px) {
          flex: none;
        }
      }
    }

    .form-item {
      flex: 1;
    }
  }
}

.form-box {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    border-radius: 5px;
    width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    line-height: 1.1;
    height: 40px;
    letter-spacing: 0.1em;
  }
  textarea {
    height: auto;
    padding: 10px;
  }
  input[type="text"].name,
  input[type="text"].name_kana,
  input[type="text"].tel,
  input[type="email"] {
    width: 50%;

    @media screen and (max-width: 600px) {
      width: 100%;
    }
  }
  .zip input[type="text"] {
    width: 150px;
    margin-bottom: 20px;
  }
}

.wpcf7-list-item.first {
  margin-left: 0;
}

.form-radio label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 30px;
  position: relative;
  width: auto;
}
.form-radio label::before {
  background: #fff;
  border: 1px solid #ccc;
  content: "";
  display: block;
  height: 18px;
  left: 5px;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  width: 18px;
}
.form-radio label::before {
  border-radius: 25px;
}
.form-radio label input[type="radio"] + span::after {
  content: "";
  border-right: 3px solid var(--color-secondary);
  border-bottom: 3px solid var(--color-secondary);
  transform: translateY(-50%) rotate(45deg);
  display: block;
  height: 18px;
  left: 11px;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 9px;
}
.form-radio label input[type="radio"] + span::after {
  border: none;
  background: var(--color-secondary);
  border-radius: 25px;
  transform: none;
  height: 10px;
  width: 10px;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
}
.form-radio label input[type="radio"]:checked + span::after {
  opacity: 1;
}
.form-radio label input[type="radio"] {
  display: none;
}

.form-checkbox label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 30px;
  position: relative;
  width: auto;
}
.form-checkbox label::before {
  background: #fff;
  border: 1px solid #ccc;
  content: "";
  display: block;
  height: 18px;
  left: 5px;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  width: 18px;
}
.form-checkbox label input[type="checkbox"] {
  display: none;
}
.form-checkbox label input[type="checkbox"] + span::after {
  content: "";
  border-right: 3px solid var(--color-secondary);
  border-bottom: 3px solid var(--color-secondary);
  transform: translateY(-50%) rotate(45deg);
  display: block;
  height: 18px;
  left: 11px;
  opacity: 0;
  position: absolute;
  top: 35%;
  width: 9px;
}
.form-checkbox label input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

.submit-btn {
  margin-top: 80px;
  max-width: 420px;
  margin-inline: auto;

  @media screen and (max-width: 600px) {
    max-width: 350px;
  }

  input[type="submit"] {
    display: block;
    background: var(--color-accent);
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    padding: 16px 35px;
    position: relative;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      opacity: 0.8;
    }

    @media screen and (max-width: 600px) {
      font-size: 18px;
    }
  }
}

/* 送信完了 */
.sinple-section-title {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 40px;
}

.sinple-contents {
  text-align: center;
  line-height: 1.8;
  font-size: 18px;
  margin-bottom: 60px;
}

/* 会社概要 */
.profile-table {
  width: 100%;

  tr {
    border-bottom: 1px solid var(--color-border);
  }

  th,
  td {
    padding: 20px 10px;

    @media screen and (max-width: 600px) {
      display: block;
      width: 100%;
    }
  }
  th {
    font-weight: 700;
    width: 200px;

    @media screen and (max-width: 600px) {
      width: 100%;
      padding-bottom: 0;
    }
  }

  @media screen and (max-width: 600px) {
    td {
      padding-top: 10px;
    }
  }
}

.company-images {
  margin-top: 40px;
  display: flex;
  gap: 30px;

  .company-image {
    width: calc((100% - 30px) / 2);
  }
}

/* インタビュー */
.contents-main-visual {
  display: flex;
  gap: 30px 40px;
  align-items: center;

  &:not(.is-reversed) {
    flex-direction: row;
  }

  @media screen and (max-width: 800px) {
    flex-direction: column;

    max-width: 600px;
    margin-inline: auto;
  }
}

.main-visual-image {
  width: 50%;

  @media screen and (max-width: 800px) {
    width: 100%;
  }
}

.main-visual-content {
  flex: 1;

  @media screen and (max-width: 800px) {
    width: 100%;
  }

  .title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 30px;
  }

  .description {
    p {
      line-height: 2;
      font-size: 18px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

.ceo-message {
  max-width: 700px;
  margin-inline: auto;
}

.ceo-message_heading {
  display: flex;
  margin-bottom: 40px;
  align-items: center;
  gap: 40px 80px;

  @media screen and (max-width: 600px) {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .title {
    color: var(--color-secondary);
    font-size: 3.2rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 0;

    @media screen and (max-width: 600px) {
      writing-mode: lr;
      text-orientation: unset;
      width: 100%;
    }
  }
}

.ceo-message_image {
  width: 65%;
}

.ceo-message_content {
  .description {
    p {
      line-height: 1.8;
      font-size: 18px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    .voice-name {
      font-weight: 700;
      font-size: 22px;
      text-align: right;
      margin-top: 40px;
      color: var(--color-secondary);

      > span {
        margin-left: 20px;
      }
    }
  }
}

.iframe-block {
  max-width: 800px;
  margin-inline: auto;

  iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .description {
    margin-top: 10px;
    font-weight: 700;
    text-align: center;
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  figure.wp-block-gallery.has-nested-images {
    flex-direction: column !important;
    max-width: 400px;
    margin-inline: auto;
    row-gap: 20px;
  }

  .wp-block-gallery.has-nested-images figure.wp-block-image {
    width: 100% !important;
  }
}

/* 日発オートセンターの仕事 */
.business-overview {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  counter-reset: number 0;

  .business-item {
    .title {
      position: relative;
      font-size: 2.8rem;
      color: var(--color-secondary);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 5px 15px;

      .title_text {
        display: block;
      }

      &::before {
        content: counter(number, decimal-leading-zero);
        counter-increment: number;
        font-family: var(--eg-font-family);
        line-height: 1;
        font-weight: 900;
        font-size: 4.8rem;
        color: var(--color-accent);
      }
    }

    .description {
      p {
        line-height: 1.8;

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    .business-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      margin-top: 30px;

      .business-image {
        width: calc((100% - 30px) / 2);
      }
    }
  }
}