@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1050px) {
  #top_box01 .boxs01 .box h2 .t2 {
    font-size: 11vw;
  }
}
@media screen and (min-width: 1001px) {
  .pc_none {
    display: none;
  }
  .sp_nav {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .sp_none {
    display: none;
  }
  .pc_nav {
    display: none;
  }
  body {
    font-size: 14px;
  }
  main {
    margin-top: 80px;
    padding-bottom: 0;
  }
  #index {
    /*background: url("../images/sp_enter_bg.jpg") #000 center top no-repeat;
    background-size: cover;
    background-attachment: fixed;*/
    main {
      margin-top: 120px;
      padding-bottom: 0;
    }
    .tx01 {
      margin: 0 auto 20px;
      width: 80%;
    }
    .tx02 {
      margin: 0 auto 50px;
      width: 80%;
    }
    #logo {
      width: 98%;
      max-width: 892px;
      margin: 0 auto 30px;
    }
    #btn {
      width: 50%;
      max-width: 380px;
      margin: 0 auto 30px;
    }
  }
  footer {
    padding: 50px 0;
    .fbg .footernav {
      display: none;
    }
    .copybox {
      display: block;
      .flogo {
        margin: 0 auto 10px;
        ;
      }
      .copy {
        text-align: center;
      }
    }
  }
  header {
    padding: 0;
    width: 100%;
    height: 80px;
    .header .logo {
      width: 210px;
    }
    .sp_nav {
      margin-left: auto;
      .navbox {
        text-align: center;
        ul {
          padding: 90px 0 0;
          a {
            color: #d5c78a;
            margin-bottom: 50px;
            display: block;
            li {
              text-align: center;
              font-size: 24px;
              line-height: 1.6;
              span {
                display: block;
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }
  header {
    /* hamburger(ハンバーガーアイコン) */
    .hamburger {
      position: absolute;
      right: 0;
      top: 0;
      width: 80px;
      height: 80px;
      background-color: #f0e29b;
      cursor: pointer;
      z-index: 300;
    }
    .hamburger__line {
      position: absolute;
      width: 50px;
      height: 3px;
      right: 15px;
      background-color: #000;
      transition: all 0.5s;
    }
    .hamburger__line--1 {
      top: 18px;
    }
    .hamburger__line--2 {
      top: 38px;
    }
    .hamburger__line--3 {
      top: 58px;
    }
    .open .hamburger__line--1 {
      transform: rotate(-45deg);
      top: 35px;
    }
    .open .hamburger__line--2 {
      opacity: 0;
    }
    .open .hamburger__line--3 {
      transform: rotate(45deg);
      top: 35px;
    }
    .sp-nav {
      position: fixed;
      right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
      top: 0;
      width: 100%; /* 出てくるスライドメニューの幅 */
      height: 100vh;
      background-color: #000000c7;
      transition: all 0.5s;
      z-index: 200;
      overflow-y: auto; /* メニューが多くなったらスクロールできるように */
    }
    /*ハンバーガーがクリックされたら右からスライド*/
    .open .sp-nav {
      right: 0;
    }
    .black-bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 5;
      background-color: #000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s;
      cursor: pointer;
      z-index: 100;
    }
    /*ハンバーガーメニューが開いたら表示*/
    .open .black-bg {
      opacity: 0.3;
      visibility: visible;
    }
    /* / hamburger(ハンバーガーアイコン) / */
  }
  /*        gtit         */
  .gtit {
    width: 100%;
    padding-left: 2.5%;
    .gl {
      width: 190px;
      margin-bottom: 40px;
    }
    .gtxt {
      font-size: 55px;
      span {
        margin-top: 30px;
        letter-spacing: 0.16em;
        font-size: 20px;
        display: block;
      }
    }
  }
  .gtit.center {
    padding: 0;
    .gl {
      margin: 0 auto 40px;
    }
    .gtxt {
      text-align: center;
      span {
        text-align: center;
      }
    }
  }
  /*      /  gtit  /       */
  #top {
    background: url("../images/sp_top_bg.png") #000 center top repeat-y;
    background-size: 100%;
  }
  .underlayer {
    background: url("../images/sp_underlayer_bg.jpg") #000 center top repeat-y;
    background-size: 100%;
    .boxs01 .box {
      padding: 500px 0 100px 5%;
      h2 .t2 {
        margin-top: 45px;
        line-height: 1;
      }
      h2 .t3 {
        margin-top: 45px;
        line-height: 1;
      }
    }
  }
  .head_imgbox {
    width: 100%;
    margin: 0;
    .imgbox {
      width: 90%;
      margin: 0 0 0 10%;
    }
  }
  .pxnkuzubox {
    padding: 23px 0 23px 10%;
    width: 90%
  }
  #message_box01 .head_imgbox .imgbox {
    background: url("../images/sp_message_slider01.png");
    background-size: cover;
    background-position-x: left;
    background-repeat: no-repeat;
  }
  #philosophy_box01 .head_imgbox .imgbox {
    background: url("../images/sp_philosophy_slider01.png");
    background-size: cover;
    background-position-x: left;
    background-repeat: no-repeat;
  }
  #group_box01 .head_imgbox .imgbox {
    background: url("../images/sp_group_slider01.png");
    background-size: cover;
    background-position-x: left;
    background-repeat: no-repeat;
  }
  #top_box02.top_box02 {
    background: none;
  }
  #top_box05 {
    background: url("../images/sp_top_box04bg.png") center top no-repeat;
    padding: 110px 0;
  }
  .top_box02 {
    .boxs .bg {
      height: 300px;
    }
    .dboxs {
      .boxs position: relative;
      width: 100%;
      .box {
        display: block;
        background: #14111c;
      }
    }
    .boxs.tbox03 .bg {
      height: 150px;
      width: 90%;
    }
    .boxs.tbox03 .box .img {
      background: none;
    }
    .boxs.tbox03 .box .txt .b {
      background: none;
    }
    .boxs.tbox03 .box {
      background: none;
    }
    .boxs.tbox01 .box, .boxs.tbox01 .box .txt .b {
      background: none;
    }
    .boxs.tbox01 .box .txt .t2 {
      padding: 0 0 75px;
    }
    .boxs.tbox02 .box {
      background: none;
    }
    .boxs.tbox02 .box .txt .b {
      background: url("../images/message_box02bg.png");
      background-size: 95% 80%;
      background-position: top right;
      background-repeat: no-repeat;
    }
    .boxs .box .img {
      /*margin: auto;*/
      width: 97.5%;
      max-width: 1000px;
    }
    .boxs .box .txt .b {
      padding: 10px 2.5%;
      z-index: -1;
    }
    .boxs.tbox02 .bg {
      right: 0;
      width: 95%;
      left: auto;
    }
    .boxs:nth-child(2n) .box .img {
      margin-left: 2.5%;
    }
    .boxs:nth-child(2n) .gtit {
      width: 100%;
      margin: 0;
    }
    .boxs .box .txt .b .morebtn {
      margin: 30px auto;
      position: relative;
    }
  }
  #top_box04.top_box02 .boxs.tbox03 .box {
    width: 95%:
  }
  #message_box02 {
    .dboxs .boxs {
      width: 100%;
      .box {
        display: block;
        padding-bottom: 0px;
        .img {
          width: 100%;
          max-width: 1000px;
          text-align: center;
        }
        .img img {
          width: 100%;
        }
        .txt .b {
          padding: 10px 2.5%;
          z-index: -1;
        }
      }
      .boxs:first-child .box {
        background: none;
      }
      .boxs:first-child .box .txt .t1 {
        background: url("../images/message_box02bg.png");
        background-size: 98% 55%;
        background-position: right bottom;
        background-repeat: no-repeat;
      }
      .boxs:first-child .box .txt .t2 {
        background: url("../images/message_box02bg.png");
        background-size: 98% 100%;
        background-position: right bottom;
        background-repeat: no-repeat;
        padding-bottom: 30px;
      }
    }
  }
  #link_boxs .link_boxs .link_box .onebox {
    width: calc(100% / 2 - 2%);
  }
  #top_box01 {
    .head_imgbox .imgbox {
      background: url("../images/sp_top_slider01.jpg");
      background-size: cover;
      /* padding: 240px 0 400px;*/
    }
    .boxs01 .box {
      width: 100%;
      padding: 240px 0 400px 5%;
    }
    .boxs01 .box h2 .t3 {
      font-size: 20px;
    }
  }
  #group_box01 .head_imgbox .imgbox, #philosophy_box01 .head_imgbox .imgbox, #message_box01 .head_imgbox .imgbox {
    background-size: auto 75%;
    background-position: top left;
    background-repeat: no-repeat;
    width: 100%;
    margin: 0%;
  }
}
@media screen and (max-width: 800px) {
  .underlayer .boxs01 .box {
    h2 {
      .t2 {
        margin-top: 5%;
        font-size: 10.2vw;
      }
    }
  }
  .gtit.center {
    .gtxt {
      font-size: 8.5vw;
    }
  }
  #philosophy_box02 {
    padding: 19% 0 32%;
    .gtit.center .gtxt {
      font-size: 7vw;
    }
  }
  @media screen and (max-width: 600px) {
    header {
      .sp_nav {
        .navbox {
          ul {
            a {
              margin-bottom: 9%;
              li {
                font-size: 20px;
                span {
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
    #index {
      main {
        margin-top: 20%;
      }
      .tx01 {
        margin: 0 auto 4%;
      }
      .tx02 {
        margin: 0 auto 22%;
      }
      #logo {
        margin: 0 auto 8%;
      }
      #btn {
        margin: 0 auto 5%;
      }
    }
    #top_box01 .boxs01 .box {
      padding: 35% 0 59% 5%;
      h2 {
        .t1 {
          font-size: 3vw;
        }
        .t2 {
          margin-top: 11%;
        }
        .t3 {
          margin-top: 10%;
          font-size: 3.5vw;
        }
        .t4 {
          font-size: 2.3vw;
        }
      }
    }
    #top_box02 {
      margin: 27% 0 0;
    }
    .top_box02 {
      .boxs .box .txt .t2 {
        padding: 8% 0 0%;
      }
      .dboxs .boxs.tbox03 .box .txt .t2 {
        padding: 10% 0 0%;
      }
    }
    .morebtn {
      margin: 6% auto;
      font-size: 14px;
    }
    .underlayer .boxs01 .box {
      padding: 66% 0 13% 5%;
      h2 {
        .t1 {
          font-size: 2.5vw;
        }
        .t3 {
          margin-top: 10%;
          font-size: 4vw;
        }
        .t4 {
          font-size: 2.3vw;
        }
      }
    }
    #link_boxs {
      .linkbox {
        background-size: 100% 500px;
        padding: 30px 0 25%;
        .t {}
        .link_boxs {
          margin: 0px auto 8%;
          .tit {
            font-size: 20px;
          }
          .link_box {
            padding: 1.5%;
          }
          .onebox {
            margin: 1% 1% 10%;
            .txt .t {
              padding: 5% 0 0 18%;
            }
            .txt::before {
              top: 30%;
              width: 13%;
            }
            .txt .t .t1 {
              font-size: 3.5vw;
            }
            .txt .t .t2 {
              font-size: 12px;
            }
          }
        }
      }
    }
    #top_box05 {
      padding: 19% 0;
      background-size: 100%;
      background-position-y: 13%;
      .txt {
        padding: 50% 0 0;
      }
    }
    .pxnkuzubox {
      padding: 15px 0 15px 10%;
      font-size: 14px;
    }
    #message_box02 {
      .boxs .box {
        margin: 10% 0 17%;
      }
      .dboxs .boxs .box .txt .b {
        padding: 2.5%;
      }
      .boxs .box .txt .t1 {
        font-size: 9.5vw;
      }
      .boxs .box .txt .t1 span {
        font-size: 4vw;
        padding: 4% 0 7%;
      }
      .dboxs .boxs.tbox02 {
        width: 98%;
      }
    }
    #philosophy_box02 {
      padding: 18% 0 30%;
    }
  }
  @media screen and (max-width: 500px) {
    body {
      font-size: 12px;
    }
    .gtit {
      .gtxt {
        font-size: 8.5vw;
        span {
          margin-top: 5%;
          font-size: 4vw;
        }
      }
      .gl {
        margin: 0 0 7%;
      }
    }
    .gtit.center {
      .gl {
        margin: 0 auto 7%;
      }
    }
  }