@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
共通
---------------------------------------------------------------------------------------------------------------------
*/
html {
  scroll-behavior: smooth; }

* {
  margin: 0;
  padding: 0; }

img {
  vertical-align: middle;
  border-style: none;
  width: 100%; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: lighter;
  line-height: 1.4em;
  font-size: 16px; }
  body a {
    text-decoration: none;
    line-height: 1.4em; }
    body a:hover {
      text-decoration: none; }
  body ul, body ol, body li {
    list-style-type: none; }
  body h2, body h3, body h4 {
    font-weight: bold; }
  body figure {
    margin: 0; }
  body strong {
    font-weight: bold; }
  body .Mont {
    font-family: 'Montserrat', sans-serif; }
  body .ask {
    display: inline-block; }
  body .wrapHeight {
    display: flex; }
  @media screen and (min-width: 680px) {
    body .pc {
      display: inline; }
    body .sp {
      display: none; } }
  @media screen and (max-width: 680px) {
    body .pc {
      display: none; }
    body .sp {
      display: inline; } }
  @media screen and (min-width: 768px) {
    body .pc1 {
      display: inline; }
    body .sp1 {
      display: none; } }
  @media screen and (max-width: 768px) {
    body .pc1 {
      display: none; }
    body .sp1 {
      display: inline; } }
  @media screen and (min-width: 1180px) {
    body .pc2 {
      display: inline; }
    body .sp2 {
      display: none; } }
  @media screen and (max-width: 1180px) {
    body .pc2 {
      display: none; }
    body .sp2 {
      display: inline; } }

#MainTitle {
  text-align: center;
  margin: 80px auto 20px; }
  #MainTitle h1 {
    font-size: min(12vw, 10em);
    line-height: 1.2em;
    font-family: 'Montserrat', sans-serif; }
    @media (min-width: 768px) {
      #MainTitle h1 {
        font-size: min(8vw, 6em); } }
  #MainTitle p {
    font-size: 0.9em;
    line-height: 1.6em;
    max-width: 800px;
    width: 90%;
    margin: auto; }
    @media (min-width: 1024px) {
      #MainTitle p {
        font-size: 1.0em; } }

/*
---------------------------------------------------------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------------------------------------------------------
*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 100; }
  @media (min-width: 1024px) {
    header {
      height: 80px; } }
  header .headerIn {
    position: relative;
    width: 95%;
    margin: auto; }
    header .headerIn .Logo {
      position: absolute;
      top: 14px;
      left: 0;
      display: flex;
      z-index: 100; }
      @media (min-width: 1024px) {
        header .headerIn .Logo {
          top: 15px; } }
      @media (min-width: 1024px) {
        header .headerIn .Logo a {
          display: flex; } }
      header .headerIn .Logo a h3 {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.9em;
        color: #000;
        margin: 0px 0 0 26px; }
        @media (min-width: 1024px) {
          header .headerIn .Logo a h3 {
            font-size: 1.5em;
            margin: 6px 0 0 14px; } }
      header .headerIn .Logo img {
        width: 140px;
        height: auto; }
        @media (min-width: 1024px) {
          header .headerIn .Logo img {
            width: 200px; } }
      header .headerIn .Logo h2 {
        font-size: 1.0em;
        font-family: 'Lato', sans-serif;
        margin: 10px 0 0 5px; }
        @media (min-width: 1024px) {
          header .headerIn .Logo h2 {
            font-size: 1.5em;
            margin: 14px 0 0 5px; } }
      header .headerIn .Logo p {
        display: none; }
        @media (min-width: 1024px) {
          header .headerIn .Logo p {
            display: block;
            font-size: 0.9em;
            font-weight: normal;
            margin: 16px 0 0 10px; } }
    header .headerIn .RecruitPage {
      position: absolute;
      top: 23px;
      right: 5px;
      display: flex; }
      @media (min-width: 1024px) {
        header .headerIn .RecruitPage {
          top: 30px; } }
      header .headerIn .RecruitPage a {
        font-size: 0.7em;
        font-weight: normal;
        color: #000;
        margin-right: 5px;
        position: relative;
        display: inline-block; }
        @media (min-width: 1024px) {
          header .headerIn .RecruitPage a {
            font-size: 0.9em; } }
        header .headerIn .RecruitPage a::after {
          position: absolute;
          bottom: -1px;
          left: 0;
          content: '';
          width: 100%;
          height: 1px;
          background: #000;
          transform: scale(0, 1);
          transform-origin: right top;
          transition: transform .3s; }
        header .headerIn .RecruitPage a:hover::after {
          transform-origin: left top;
          transform: scale(1, 1); }
      header .headerIn .RecruitPage img {
        width: 12px;
        height: auto; }

/*
---------------------------------------------------------------------------------------------------------------------
フッター
---------------------------------------------------------------------------------------------------------------------
*/
footer {
  width: 90%;
  position: relative;
  height: 40px;
  margin: 80px auto 0; }
  footer .Menu {
    position: absolute;
    top: 0;
    left: 0; }
    footer .Menu ul {
      display: flex; }
      footer .Menu ul li {
        margin-right: 10px; }
        @media (min-width: 768px) {
          footer .Menu ul li {
            margin-right: 30px; } }
        footer .Menu ul li a {
          font-size: 0.8em;
          line-height: 1.0em;
          color: #707070;
          position: relative;
          display: inline-block; }
          @media (min-width: 768px) {
            footer .Menu ul li a {
              font-size: 0.9em; } }
          footer .Menu ul li a::after {
            position: absolute;
            bottom: 1px;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #707070;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .3s; }
          footer .Menu ul li a:hover::after {
            transform-origin: left top;
            transform: scale(1, 1); }
  footer p {
    font-size: 0.8em;
    line-height: 1.8em;
    color: #707070;
    position: absolute;
    top: 0;
    right: 0; }
    @media (min-width: 768px) {
      footer p {
        font-size: 0.9em; } }

/*
---------------------------------------------------------------------------------------------------------------------
トップへ戻るボタン
---------------------------------------------------------------------------------------------------------------------
*/
#page-top {
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 10;
  opacity: 0;
  transform: translateY(100px); }
  #page-top a {
    background-color: #111;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: #111;
    text-align: center;
    font-size: 1.1em;
    font-weight: 500;
    transition: all 0.3s;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (min-width: 768px) {
      #page-top a {
        width: 50px;
        height: 50px; } }
    #page-top a::after {
      position: absolute;
      content: '';
      top: 20px;
      width: 16px;
      height: 16px;
      border-top: solid 1px #fff;
      border-right: solid 1px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      transition: .5s; }
      @media (min-width: 768px) {
        #page-top a::after {
          top: 22px; } }
    #page-top a:hover {
      letter-spacing: 0.08em; }

/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards; }

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime1 0.5s forwards; }

@keyframes DownAnime1 {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 1;
    transform: translateY(100px); } }
/*
---------------------------------------------------------------------------------------------------------------------
順番入れ替え
---------------------------------------------------------------------------------------------------------------------
*/
.box {
  display: flex; }

@media screen and (max-width: 767px) {
  .box {
    flex-direction: column; } }
@media screen and (max-width: 767px) {
  .order1 {
    order: 1; }

  .order2 {
    order: 2; }

  .order3 {
    order: 3; }

  .order4 {
    order: 4; }

  .order5 {
    order: 5; }

  .order6 {
    order: 6; }

  .order7 {
    order: 7; }

  .order8 {
    order: 8; }

  .order9 {
    order: 9; }

  .order10 {
    order: 10; }

  .order11 {
    order: 11; }

  .order12 {
    order: 12; }

  .order13 {
    order: 13; }

  .order14 {
    order: 14; } }
.boxA {
  display: flex; }

@media screen and (max-width: 821px) {
  .boxA {
    flex-direction: column; } }
@media screen and (max-width: 821px) {
  .orderA1 {
    order: 1; }

  .orderA2 {
    order: 2; } }