@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-height: 0vw;
}

body {
  font-family: "Noto Sans JP", system-ui;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}

ol, ul {
  list-style: none;
}

em {
  font-style: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, select {
  vertical-align: middle;
}

img {
  display: block;
  border-style: none;
  font-size: 0;
  line-height: 0;
}

a {
  background: transparent;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

/* フォームリセット */
button, textarea, select, input {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
}
input[type=radio],
input[type=checkbox] {
  display: none;
}
select::-ms-expand {
  display: none;
}
button {
  box-shadow: none;
  outline: none;
}

@media screen and (max-width: 768px) {
  .sp_none {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .pc_none {
    display: none;
  }
}

:root {
  --con-width: 1000px;
  --mincho: "游明朝", Yu Mincho, YuMincho, "Hiragino Mincho ProN", serif;
  --border: #d5dce8;
  --gray_back: #f1f1f1;
  --color_1: #35579d;
  --color_2: #30a6df;
}

.w100 {
  width: 100%;
}

.bold {
  font-weight: 500;
}

.fade {
  opacity: 0;
  transition: all 1s ease-out;
}

.fade_on {
  opacity: 1;
}

.movexl {
  opacity: 0;
  translate: -20px 0;
  transition: all 0.4s ease-out;
}

.movexl2 {
  opacity: 0;
  translate: -20px 0;
  transition: all 0.4s ease-out 1s;
}

.movexr {
  opacity: 0;
  translate: 20px 0;
  transition: all 0.4s ease-out;
}

.movexl_on,
.movexr_on {
  opacity: 1;
  translate: 0 0;
}

.movey {
  opacity: 0;
  translate: 0 20px;
  transition: all 0.4s ease-out;
}

.movey_on {
  opacity: 1;
  translate: 0 0;
}

.move {
  opacity: 0;
}

.move_on {
  opacity: 1;
}

@keyframes f_a {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes m_y {
  0% {
    opacity: 0;
    translate: 0 20px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

/* ===================================
ヘッダー
------------------------------------*/
header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.25em;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  transition: all 0.3s linear;
  animation: f_a 0.5s linear 0.4s both;
  h1 a {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--color_1);
    span {
      margin-left: 0.5em;
    }
  }
  svg {
    width: 60px;
    height: 46px;
  }
  .pc_nav {
    ul {
      display: flex;
      align-items: center;
      li:nth-child(-n+4) {
        margin-right: 2.4em;
      }
    }
    a {
      color: #000;
    }
    a span {
      display: inline-block;
    }
    a:hover span {
      transition: .6s;
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
    a:hover span:nth-of-type(1) {
      transition-delay: .04s;
    }
    a:hover span:nth-of-type(2) {
      transition-delay: .08s;
    }
    a:hover span:nth-of-type(3) {
      transition-delay: .12s;
    }
    a:hover span:nth-of-type(4) {
      transition-delay: .16s;
    }
    a:hover span:nth-of-type(5) {
      transition-delay: .2s;
    }
    a:hover span:nth-of-type(6) {
      transition-delay: .24s;
    }
    a:hover span:nth-of-type(7) {
      transition-delay: .28s;
    }
  }

  a.r_btn {
    display: block;
    width: 160px;
    padding: 0.75em;
    background: var(--color_2);
    color: #fff;
    text-align: center;
  }
  a.c_btn {
    display: block;
    width: 160px;
    padding: 0.75em;
    background: var(--color_1);
    color: #fff;
    text-align: center;
  }
}

.nav_sc {
  background-color: inherit;
  backdrop-filter: inherit;
  h1 a {
    color: #fff;
  }
  .txt {
    fill: #fff;
  }
  .line {
    stroke: #fff
  }
  .pc_nav a {
    color: #fff;
  }
}


@media screen and (min-width:1200px) {
  #nav_area,
  #navBtn {
    display: none;
  }
}

@media screen and (max-width:1199px) {
  .pc_nav {
    display: none;
  }
  /* ドロワーメニュー */
  #nav_area {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 80px 20px 20px;
    background: var(--color_1);
    overflow: auto;
    z-index: 1001;
    transition:all 0.5s linear;
    &.open {
      visibility: visible;
      opacity: 1;
    }
    nav {
      margin: 50px 0 0;
    }
    li a {
      display: block;
      margin: 20px 0;
      padding: 20px 0;
      text-align: center;
      color: #fff;
      font-weight: 500;
      line-height: 1.2;
      transition: all 0.3s linear;
      &:hover {
        opacity: 0.6;
      }
    }
    .r_btn {
      background: var(--color_2);
    }
    li a.c_btn {
      background: #fff;
      color: var(--color_1);
    }
  }
  #navBtn {
    position: fixed;
    top: 5px;
    right: 15px;
    display: block;
    width: 60px;
    height: 60px;
    z-index: 1005;
    background: #fff;
    border-radius: 50%;
    padding: 20px 15px;
    cursor: pointer;
    span {
      display: block;
      width: 100%;
      height: 1px;
      background: var(--color_1);
      transition: all 0.3s ease;
      &:nth-of-type(2) {
        margin-top: 8px;
      }
      &:nth-of-type(3) {
        margin-top: 8px;
      }
    }
    &.btn_close span {
      &:nth-of-type(1) {
        rotate: -315deg;
        translate: 0 9px;
        transform-origin: center;
        color: #fff;
      }
      &:nth-of-type(2) {
        opacity: 0;
      }
      &:nth-of-type(3) {
        rotate: 315deg;
        translate: 0 -9px;
        transform-origin: center;
        color: #fff;
      }
    }
  }
}

.slide-animation {
  animation: fadeScale 8s 0s forwards;
}
@keyframes fadeScale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.slider {
  overflow: hidden;
  background: #000;
  img {
    width: 100%;
    height: 100svh;
    object-fit: cover;
  }
}

/* ===================================
コンテンツ
------------------------------------*/
main {
  overflow: hidden;
}

/* トップページ */
.main_visual {
  position: relative;
  p {
    position: absolute;
    left: 6%;
    bottom: 6%;
    color: #fff;
    font-size: clamp(18px, 4.8vw, 36px);
    font-feature-settings: "palt";
    animation: m_y 0.6s linear 1s both;
    span {
      display: block;
      margin: 0 auto -0.08em -0.03em;
      font-family: "Poppins", system-ui;
      font-weight: 700;
      font-size: 440%;
    }
    @media screen and (max-width:768px) {
      left: 4%;
    }
  }
}

#about {
  padding: min(21.8%, 100px) 0;
  background: var(--color_1);
  color: #fff;
  p {
    margin-top: 1.5em;
    font-size: 18px;
    line-height: 1.8;
  }
  ul {
    display: flex;
    align-items: flex-start;
    width: min(89.6%, 550px);
    li:first-child {
      margin-top: 10.8%;
    }
    li:nth-child(2) {
      margin-top: 5.4%;
    }
  }
  .move_on {
    li:nth-child(1) {
      animation: m_y 0.4s linear 1.4s both;
    }
    li:nth-child(2) {
      animation: m_y 0.4s linear 1s both;
    }
    li:nth-child(3) {
      animation: m_y 0.4s linear 0.6s both;
    }
  }
  .box2 {
    margin: min(26.6%, 200px) auto 0;
    h2 {
      text-align: right;
      span {
        display: block;
        font-family: "Poppins", system-ui;
        font-weight: 700;
        opacity: 0.5;
      }
      .t1 {
        margin-bottom: -0.06em;
        padding-right: 0.6em;
      }
    }
  }
  @media screen and (max-width:1099px) {
    ul {
      margin: 0 0 0 auto;
    }
    .box1 {
      position: relative;
      div {
        padding: 0 4% 3em;
      }
      h2 {
        font-size: clamp(25px, 6.66vw, 50px);
        line-height: 1.6;
      }
    }
    .deco {
      position: absolute;
      bottom: -10%;
      right: -36%;
    }
    .box2 {
      div {
        padding: 0 4% 3em;
      }
      h2 {
        font-size: 21px;
        span {
          font-size: clamp(50px, 13.3vw, 100px);
        }
      }
    }
  }
  @media screen and (min-width:1100px) {
    .box1 {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(100%, 1400px);
      margin: auto;
      padding-left: 6%;
      h2 {
        font-size: 40px;
        line-height: 1.6;
      }
      ul {
        margin-left: 4%;
      }
    }
    .deco {
      position: absolute;
      top: 65%;
      right: -17%;
    }
    .box2 {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;
      width: min(100%, 1400px);
      padding-right: 6%;
      ul {
        margin-right: 4%;
      }
      h2 {
        font-size: 24px;
        span {
          font-size: 90px;
          font-size: clamp(78px, 7vw, 90px);
        }
        .t1 {
          margin-bottom: -0.06em;
          padding-right: 0.6em;
        }
      }
      p {
        max-width: 560px;
      }
    }
  }
}

.top_title {
  font-size: 18px;
  span {
    display: block;
    font-family: "Poppins", system-ui;
    font-size: 52px;
    font-weight: 700;
    color: var(--color_1);
  }
}

.top_service {
  ul {
    margin-top: 1.5em;
  }
  li {
    position: relative;
  }
  li:nth-child(1) {
    background: url(../img/t_service_01.jpg) center center no-repeat;
    background-size: cover;
  }
  li:nth-child(2) {
    background: url(../img/t_service_02.jpg) center center no-repeat;
    background-size: cover;
  }
  a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22.4% 0;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    z-index: 5;
  }
  a::before {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 37, 66, 0.4);
    z-index: -1;
    transition: all 0.3s linear;
  }
  a:hover::before {
    background: rgba(11, 37, 66, 0.2);
  }
  .arrow {
    margin-left: 20px;
  }
  @media screen and (max-width:768px) {
    padding: 38.4% 0 22.6%;
    background: url(../img/t_service_deco.png) top -10% left 10% no-repeat;
    h2 {
      padding-left: 4%;
    }
  }
  @media screen and (min-width:769px) {
    padding: 134px 0 147px 6%;
    background: url(../img/t_service_deco.png) top -10% right -10% no-repeat;
    ul {
      display: flex;
      align-items: center;
      li {
        width: 50%;
      }
    }
  }
}

.top_recruit {
  position: relative;
  color: #fff;
  .box {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-40%);
    width: 100%;
    text-align: center;
  }
  .top_title span {
    color: #fff;
  }
  p {
    margin: 2em 0 1em;
    line-height: 1.8;
  }
  .btn {
    display: block;
    width: min(83.3%, 300px);
    margin: auto;
    padding: 1.2em;
    background: var(--color_1) url(../img/arrow.svg) center right 4% no-repeat;
    background-size: 1.6em auto;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    transition: all 0.3s linear;
    &:hover {
      background: var(--color_2) url(../img/arrow.svg) center right 4% no-repeat;
      background-size: 1.6em auto;
      letter-spacing: 0.1em;
    }
  }
}

.top_news {
  width: min(100%, 1400px);
  padding: min(32%, 120px) 0 min(28%, 100px);
  h2 {
    padding: 4%;
  }
  ul {
    border-top: var(--border) 1px solid;
  }
  li {
    padding: 0.1em;
    border-bottom: var(--border) 1px solid;
  }
  a {
    display: block;
    padding: 1.9em 4%;
    transition: all 0.5s linear;
    &:hover {
      background: rgba(45, 80, 139, 0.1);
    }
  }
  div {
    margin-bottom: 0.6em;
    color: var(--color_1);
    font-family: "Poppins", system-ui;
    font-size: 15px;
    font-weight: 700;
  }
  p {
    line-height: 1.6;
    color: #000;
  }
  @media screen and (min-width:769px) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: auto;  
    h2 {
      padding: 0 6%;
    }
    ul {
      width: 73%;
    }
  }
}

.top_contact {
  a {
    display: block;
    background: var(--color_1);
    color: #fff;
    transition: all 0.3s linear;
    &:hover {
      background: #4a76d1;
      picture::after {
        background: none;
      }
    }
  }
  .top_title span {
    display: inline-block;
    position: relative;
    color: #fff;
    &::after {
      position: absolute;
      top: 0.05em;
      right: -1.2em;
      display: block;
      content: "";
      width: 44px;
      height: 44px;
      background: url(../img/arrow.svg) center center no-repeat;
      background-size: 100% auto;
    }
  }
  p {
    margin-top: 2em;
    line-height: 1.8;
  }
  picture {
    position: relative;
    &::after {
      display: block;
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(11, 52, 66, 0.2);
      transition: all 0.3s linear;
    }
  }
  @media screen and (min-width:1000px) {
    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-height: 420px;
      overflow: hidden;
    }
    picture {
      width: 50%;
    }
    div {
      padding: 0 4% 0 6%;
    }
  }
  @media screen and (max-width:999px) {
    div {
      padding: 20% 4%;
    }
  }
}

/* 下層ページ */
.under_title {
  padding: 0 6% min(8%, 50px);
  font-size: 18px;
  span {
    display: block;
    font-family: "Poppins", system-ui;
    font-size: 62px;
    font-weight: 700;
    color: var(--color_1);
  }
  @media screen and (min-width:769px) {
    span {
      font-size: 90px;
    }
  }
}

.inner {
  padding: 0 6%;
  width: min(100%, 1400px);
  margin: auto;
  p {
    line-height: 1.8;
  }
}

.list_table {
  width: 100%;
  margin: 2em 0;
  border-top: 1px solid var(--border);
  text-align: left;
  th {
    width: 0;
    white-space: nowrap;
    padding: 2em 8em 2em 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--color_1);
    font-weight: 400;
  }
  td {
    padding: 2em 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    line-height: 1.6;
  }
  @media screen and (max-width:768px) {
    th {
      display: block;
      width: 100%;
      padding: 1.5em 0 1em;
      border-bottom: none;
    }
    td {
      display: block;
      width: 100%;
      padding: 0 0 1.5em;
    }
  }
}

/* 業務内容 */
.service {
  padding-top: min(34%, 260px);
  h3 {
    padding: 5em 0 1.5em;
    font-size: 30px;
    color: var(--color_1);
    font-weight: 400;
  }
  .mb  {
    margin-bottom: 2em;
  }
  ul {
    margin-bottom: 2em;
  }
  li {
    margin-top: 1em;
    line-height: 1.8;
  }
  h4 {
    margin: 3em 0 0.5em;
    font-size: 30px;
    color: var(--color_1);
    font-weight: 400;
  }
  @media screen and (max-width:768px) {
    h3,
    h4 {
      font-size: 21px;
    }
  }
}

/* 会社情報 */
.company {
  padding-top: min(34%, 260px);
  h3 {
    padding: 5em 0 0;
    font-size: 30px;
    color: var(--color_1);
    font-weight: 400;
  }
  .map {
    width: 100%;
    height: 400px;
  }
}

/* お知らせ */
.news_list {
  padding-top: min(34%, 260px);
  #new {
    margin-top: 5em;
    border-top: var(--border) 1px solid;
    li {
      padding: 0.1em;
      border-bottom: var(--border) 1px solid;
    }
    a {
      display: block;
      padding: 1.9em 0;
      transition: all 0.5s linear;
      &:hover {
        background: rgba(45, 80, 139, 0.1);
      }
    }
    div {
      margin: 0 0 0.6em;
      color: var(--color_1);
      font-family: "Poppins", system-ui;
      font-size: 15px;
      font-weight: 700;
    }
    p {
      line-height: 1.6;
      color: #000;
    }
    @media screen and (min-width:769px) {
      a {
        display: flex;
        align-items: center;
      }
      div {
        margin: 0 4em 0 0;
      }
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    a {
      display: inline-block;
      padding: 1em;
      background: #d7ddeb;
      border-radius: 5px;
      color: var(--color_1);
    }
    li + li {
      margin-left: 1em;
    }
  }
}
.news_detail {
  padding-top: min(34%, 260px);
  .inner {
    margin-top: 5em;
  }
  #info_date {
    color: var(--color_1);
    font-family: "Poppins", system-ui;
    font-size: 15px;
    font-weight: 700;
  }
  #info_title {
    margin: 0.5em 0 2.5em;
    font-size: 28px;
    line-height: 1.6;
    @media screen and (max-width:768px) {
      font-size: 24px;
    }
  }
  #info_contents {
    margin-bottom: 2.5em;
    line-height: 1.8;
  }
  .btn {
    margin-top: 4em;
    text-align: center;
    a {
      display: inline-block;
      padding: 1em;
      background: #d7ddeb;
      border-radius: 5px;
      color: var(--color_1);
    }
  }
}

/* 採用情報 */
.recruit {
  padding-top: min(34%, 260px);
  .inner {
    padding-top: 4em;
  }
  .sub_title {
    padding: 5em 0 0;
    font-size: 30px;
    color: var(--color_1);
    font-weight: 400;
  }
  .type {
    margin: 3em 0 0;
    a {
      display: block;
      padding: 1.5em;
      background: url(../img/arrow2.svg) right 3% center no-repeat;
      background-size: 30px auto;
      border: 1px solid var(--color_1);
      font-size: 20px;
      text-align: center;
      color: var(--color_1);
      font-weight: 500;
      transition: all 0.2s linear;
      span {
        font-size: 16px;
      }
      
    }
    @media screen and (max-width:1100px) {
      span {
        display: block;
        margin-top: 0.3em;
      }
    }
    @media screen and (max-width:899px) {
      a {
        padding: 0.8em;
      }
      li + li {
        margin-top: 0.5em;
      }
    }
    @media screen and (min-width:900px) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      li {
        width: 49%;
        margin-bottom: 1em;
      }
      a:hover {
        translate: 0 0.3em;
      }
    }
  }
  .type_title {
    padding: 5em 0 0.3em;
    border-bottom: 1px solid var(--color_1);
    color: var(--color_1);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
  }
  .point {
    margin: 0.5em 0;
    font-size: 32px;
    line-height: 1.6;
    @media screen and (max-width:768px) {
      font-size: 24px;
    }
  }
  .type_table {
    width: 100%;
    margin-top: 1em;
    border: 1px solid var(--border);
    tr {
      border-bottom: 1px solid var(--border);
    }
    th {
      width: 22%;
      padding: 1em 1.5em;
      background: #eaedf3;
      border-right: 1px solid var(--border);
      color: var(--color_1);
      font-weight: 400;
      vertical-align: middle;
      text-align: left;
    }
    td {
      padding: 1em 1.5em;
      line-height: 1.8;
      vertical-align: middle;
    }
    @media screen and (max-width:768px) {
      th,
      td {
        display: block;
        width: 100%;
        border-right: none;
        padding: 1em;
      }
    }
  }
  .btn_s {
    display: block;
    width: min(70%, 280px);
    margin: 2em auto 0;
    padding: 1.4em;
    background: var(--color_2) url(../img/arrow3.svg) right 3% center no-repeat;
    background-size: 30px auto;
    text-align: center;
    color: #fff;
    transition: all 0.2s linear;
    &:hover {
      translate: 0 0.3em;
    }
  }
  .footer_contact {
    margin-top: 0;
  }
}
#entry {
  margin-top: 7em;
  padding: 10em 6%;
  background: var(--color_1);
  .under_title {
    color: #fff;
    text-align: center;
    span {
      color: #fff;
    }
  }
  .box {
    width: min(92%, 1170px);
    margin: auto;
    padding: 6em 4% 8em;
    background: #fff;
  }
  @media screen and (max-width:768px) {
    padding: 6em 2%;
  }
}
form {
  dl {
    width: min(100%, 800px);
    margin: auto;
  }
  dt {
    margin: 2em 0 0.7em;
    font-weight: 500;
  }
  .req {
    display: inline-block;
    margin-left: 1em;
    padding: 0.2em 1em;
    background: #ff6161;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
  }
  input.txt,
  textarea {
    width: 100%;
    padding: 1.1em 1.5em;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 18px;
  }
  ::placeholder {
    color: #aaa;
    font-weight: 400;
    font-family: "Noto Sans JP", system-ui;
  }
  input.txt:focus,
  textarea:focus {
    outline: 2px solid var(--color_2);
  }
  select {
    display: inline-block;
    font-size: 1em;
    padding: 1.1em 3em 1.1em 1.5em;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: url(../img/arrow.png) right center no-repeat;
    background-size: auto 100%;
  }
  select:focus {
    outline: 2px solid var(--color_2);
  }
  .agree_check {
    margin: 40px 0;
    text-align: center;
    .checkbox-parts {
      position: relative;
      padding: 0.2em 0 0.2em 3em;
      cursor: pointer;
      line-height: 1.2;
    }
    .checkbox-parts::before {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      left: 0;
      width: 2em;
      height: 2em;
      content: "";
      border: 1px solid var(--border);
    }
    .checkbox-parts::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: -0.3em;
      translate: 0 -50%;
      width: 2.6em;
      height: 2.6em;
      background: var(--color_2);
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    .checkbox-input:checked + .checkbox-parts::before {
      border: 1px solid var(--color_2);
    }
    .checkbox-input:checked + .checkbox-parts::after {
      left: 0.2em;
      width: 1.6em;
      height: 1.6em;
      opacity: 1;
    }
    a {
      text-decoration: underline;
    }
  }
  .form_btn {
    display: block;
    width: min(100%, 360px);
    margin: auto;
    padding: 1.2em;
    background: var(--color_1) url(../img/arrow.svg) right 6% center no-repeat;
    background-size: 30px auto;
    border-radius: 40px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s linear;
    &:hover {
      background: var(--color_2) url(../img/arrow.svg) right 6% center no-repeat;
      background-size: 30px auto;
      letter-spacing: 0.05em;
    }
  }
}

.confirm_box {
  max-width: 880px;
  margin: auto;
  padding: 7em 6% 10em;
  p {
    line-height: 1.8;
  }
  dt {
    margin: 3em 0 1em;
    font-weight: 500;
  }
  dd {
    line-height: 1.8;
    font-size: 18px;
  }
}
.next_btn {
  display: block;
  width: min(100%, 360px);
  margin: 3em auto 2em;
  padding: 1.2em;
  background: var(--color_1) url(../img/arrow.svg) right 6% center no-repeat;
  background-size: 30px auto;
  border-radius: 40px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s linear;
  &:hover {
    background: var(--color_2) url(../img/arrow.svg) right 6% center no-repeat;
    background-size: 30px auto;
    letter-spacing: 0.05em;
  }
}
.prev_btn {
  display: block;
  width: min(50%, 200px);
  margin: auto;
  padding: 1em;
  background: #c0c0c0;
  border-radius: 40px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s linear;
  color: #fff;
  &:hover {
    background: #d9d9d9;
    letter-spacing: 0.05em;
  }
}
.thx_box {
  max-width: 880px;
  margin: auto;
  padding: 7em 6% 16em;
  p {
    line-height: 1.8;
  }
}

/* お問い合わせ */
.contact {
  padding-top: min(34%, 260px);
  .inner {
    padding: 6em 6% 16em;
  }
  p {
    max-width: 800px;
    margin: auto;
  }
  .footer_contact {
    margin-top: 0;
  }
}

/* プライバシーポリシー */
.privacy {
  padding-top: min(34%, 260px);
  .inner {
    padding: 6em 6% 16em;
  }
  h3 {
    margin: 2em 0 0.5em;
    color: var(--color_1);
    font-size: 24px;
    line-height: 1.6;
  }
  p {
    line-height: 1.8;
  }
}

/* ===================================
フッター
------------------------------------*/
.footer_contact {
  margin-top: min(50%, 240px);
  a {
    display: block;
    padding: min(11.6%, 87px) 6%;
    color: #fff;
    transition: all 0.3s linear;
    &.con {
      background: var(--color_1);
    }
    &.con:hover {
      background: #4a76d1;
    }
    &.rec {
      background: var(--color_2);
    }
    &.rec:hover {
      background: #50bcf0;
    }
  }
  .top_title span {
    display: inline-block;
    position: relative;
    color: #fff;
    &::after {
      position: absolute;
      top: 0.05em;
      right: -1.2em;
      display: block;
      content: "";
      width: 44px;
      height: 44px;
      background: url(../img/arrow.svg) center center no-repeat;
      background-size: 100% auto;
    }
  }
  p {
    margin-top: 2em;
    line-height: 1.8;
  }
  @media screen and (min-width:1000px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      width: 50%;
    }
  }
  @media screen and (max-width:999px) {
    .top_title span {
      font-size: 44px;
      &::after {
        width: 38px;
        height: 38px;
      }
    }
    div {
      padding: 20% 4%;
    }
  }
}

footer {
  padding: min(25%, 140px) 0 0;
  text-align: center;
  small {
    
    display: block;
    padding: 0.7em;
    text-align: center;
    font-size: 12px;
    color: #abb5ca;
  }
  @media screen and (min-width:769px) {
    small {
      border-top: 1px solid var(--border);
    }
  }
}
.footer_logo {
  display: inline-block;
  margin: auto;
  color: var(--color_1);
  font-size: 18px;
  font-weight: 500;
  span {
    display: block;
    margin-top: 0.5em;
  }
  .logo {
    width: 96px;
    margin: auto;
  }
}
.footer_nav {
  a {
    color: var(--color_1);
    transition: all 0.3s linear;
    &:hover {
      color: #000;
    }
  }
  @media screen and (max-width:768px) {
    margin: 10.6% 0 18.6%;
    border-top: 1px solid var(--border);
    li {
      border-bottom: 1px solid var(--border);
      text-align: left;
    }
    a {
      display: block;
      padding: 1.2em 4%;
    }
  }
  @media screen and (min-width:769px) {
    display: flex;
    justify-content: center;
    margin: 44px 0 120px;
    li + li {
      margin-left: 3em;
    }
  }
}