@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1023px) {
  /*************************************************************/
  * {}
  html {}
  /**/
  body {
    font-size: 1.5rem;
  }
  /**/
  /*toggleクリックしたらスクロールさせない(ios)*/
  html.noscroll {
    overflow: hidden;
  }
  /*toggleクリックしたらスクロールさせない*/
  body.noscroll {
    overflow: hidden;
  }
  /************************************************************ */
  /* -------------------------------------------------- sp */
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  /* ------------------------------ ボタン */
  .btn {
    font-size: 1.6rem;
    padding: 20px 30px;
  }
  /* ------------------------------ ボタン（横）*/
  ul.btn_wrap {
    margin: 40px 0 20px 0;
  }
  ul.btn_wrap li {
    margin: 0 5px;
  }
  /************************************************************ header*/
  #header {}
  #header .inner {
    margin: 20px 15px;
  }
  #header .inner h1 img {
    width: 399px;
    height: auto;
  }
  /************************************************************ nav */
  /*線のサイズ→横幅30px、縦20px、太さ2pxの場合*/
  /*  nav .toggle {
    display: block;
    padding: 0;
    width: 31px;
    height: 18px;
    position: fixed;
    cursor: pointer;
    top: 20px;
    right: 20px;
    z-index: 10000000;
  }
  nav .toggle span {
    display: block;
    width: 30px;
    height: 2px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    transform: translateY(-50%);
    position: absolute;
    background-color: #000;
  }
  nav .toggle span.bar01 {
    top: 0;
  }
  nav .toggle span.bar02 {
    top: 50%;
  }
  nav .toggle span.bar03 {
    top: 100%;
  }
  nav .toggle.active span {
    width: 28.28px;
    left: 5px
  }
  nav .toggle.active span.bar01 {
    transform: rotate(0.7853981633974483rad) translateY(-50%);
    top: 0px
  }
  nav .toggle.active span.bar02 {
    opacity: 0;
  }
  nav .toggle.active span.bar03 {
    transform: rotate(-0.7853981633974483rad) translateY(-50%);
    top: calc(100% - 0px)
  }*/
  /* ------------------------------ nav #nav*/
  #nav {
    /*display: none;
    margin: 0;
    padding: 0 0 100px 0;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;*/
  }
  /*スクロールバー非表示（Chrome・Safari）*/
  #nav::-webkit-scrollbar {
    /*display: none;*/
  }
  /* ------------------------------ mainimg*/
  /**/
  #mainimg .slider_wrap .slider li {
    height: auto;
  }
  #mainimg .slider_wrap .slider li img {
    height: auto !important;
  }
  /**/
  #mainimg .slider_wrap .catch {
    bottom: -10px;
  }
  #mainimg .slider_wrap .catch span {
    font-size: 8.0rem;
  }
  #mainimg .slider_wrap .catch span:first-of-type {
    margin: 0 0 0 -35px;
  }
  /* ------------------------------ nav*/
  nav .nav ul li a {
    font-size: 1.6rem;
  }
  /* ------------------------------ trial*/
  #trial .inner::before {
    font-size: 9.0rem;
  }
  #trial .inner div ul {
    top: 40%;
  }
  #trial .inner div ul li {
    max-width: 320px;
  }
  #trial .inner div ul li a {
    padding: 20px 0;
    font-size: 2.2rem;
  }
  /* ------------------------------ special*/
  #special {
    padding: 40px 0;
  }
  #special .inner {
    width: calc(100% - 80px);
  }
  #special .inner::before {
    background-size: 75%;
    left: -30px;
  }
  /* ---------- h*/
  #special h2 {
    margin: 40px 0 0 0;
  }
  #special h2 span {
    padding: 6px 60px 8px 120px;
    font-size: 2.4rem;
  }
  #special h2:after {
    width: 30px;
    height: 3px;
  }
  /**/
  #special .text {
    width: calc(100% - 180px);
    padding: 40px 0;
  }
  /* ------------------------------ interview*/
  #interview {
    padding: 40px 0;
  }
  #interview .inner {
    width: calc(100% - 120px);
  }
  /* ---------- h*/
  #interview .inner .head:after {
    bottom: 30px;
  }
  #interview .inner .head h2 {
    font-size: 5.2rem;
  }
  #interview .inner .head span {
    margin: 0 0 0 20px;
    font-size: 1.6rem;
  }
  /* ---------- slider*/
  #interview .interview_wrap .bx-wrapper .bx-controls-direction a {
    top: -15px;
    width: 32px;
    height: 32px;
  }
  #interview .interview_wrap .bx-wrapper .bx-prev {
    background-size: 32px;
    right: 130px !important;
  }
  #interview .interview_wrap .bx-wrapper .bx-next {
    background-size: 32px;
  }
  /* ---------- カウント*/
  #interview .slide_num {
    padding: 0 55px 0 0;
  }
  #interview .slide_num span {
    top: 0;
    font-size: 1.8rem;
  }
  /* ---------- 中身*/
  #interview .interview_wrap .interview li {
    background-size: 300px;
    background-position: -40px -30px;
  }
  #interview .interview_wrap .interview li .text {
    margin: 100px 0 0 0;
    width: 100%;
  }
  #interview .interview_wrap .interview li .text h3 {
    margin: 0 0 30px 40%;
    font-size: 2.2rem;
  }
  /* ------------------------------ stepguide*/
  #stepguide .stepguide .inner {
    width: calc(100% - 120px);
  }
  /* ---------- h*/
  #stepguide .stepguide .inner .head:after {
    bottom: 30px;
  }
  #stepguide .stepguide .inner .head h2 {
    font-size: 5.2rem;
  }
  #stepguide .stepguide .inner .head span {
    margin: 0 0 0 20px;
    font-size: 1.6rem;
  }
  #stepguide .stepguide .flow .box h3 {
    font-size: 1.7rem;
  }
  #stepguide .stepguide .flow .box p {
    font-size: 1.4rem;
  }
  /* ---------- member*/
  #stepguide .member {
    padding: 40px 0;
  }
  /* ---------- h*/
  #stepguide .member h2 span {
    font-size: 2.4rem;
    padding: 4px 15px 5px 15px;
  }
  #stepguide .member h3 {
    font-size: 1.5rem;
  }
  /* ------------------------------ epi*/
  #epi {
    padding: 40px 0;
  }
  /* ---------- h*/
  #epi .inner .head:after {
    bottom: 30px;
  }
  #epi .inner .head h2 {
    font-size: 5.2rem;
  }
  #epi .inner .head span {
    margin: 0 0 0 20px;
    font-size: 1.6rem;
  }
  #epi details summary {
    font-size: 1.8rem;
    padding: 10px 40px 10px 20px;
  }
  /* 開閉アイコン */
  #epi summary::after {
    right: 20px;
  }
  #epi details div span {
    font-size: 1.8rem;
    margin: 0 10px 0 0;
  }
  #epi details div p {
    font-size: 1.4rem;
  }
  /* ------------------------------ vision*/
  #vision .vision li::before {
    font-size: 6.0rem;
  }
  /* ---------- h*/
  #vision h2 span {
    padding: 6px 60px 8px 60px;
    font-size: 2.4rem;
  }
  #vision h2:after {
    width: 30px;
    height: 3px;
  }
  /**/
  #vision .vision li h3 {
    font-size: 7rem;
  }
  #vision .vision li h3 span {
    font-size: 2.0rem;
    padding: 0.25em 2.5em;
  }
  /* ------------------------------ activity*/
  #activity {
    padding: 40px 0;
  }
  #activity h2 span {
    padding: 6px 60px 8px 40px;
    font-size: 2.4rem;
  }
  #activity h2:after {
    width: 30px;
    height: 3px;
  }
  #activity h3 {
    font-size: 1.9rem;
    margin: 0 0 10px -20px;
  }
  #activity .activity li {
    padding: 40px 90px 50px 90px;
  }
  #activity .activity li p {
    font-size: 1.4rem;
  }
  /**/
  #activity .activity_wrap .bx-wrapper .bx-controls-direction a {
    width: 32px;
    height: 32px;
  }
  #activity .activity_wrap .bx-wrapper .bx-prev {
    background-size: 32px;
    left: 20px !important;
  }
  #activity .activity_wrap .bx-wrapper .bx-next {
    background-size: 32px;
    right: 20px !important;
  }
  /* ------------------------------ contact*/
  #contact h2 span {
    font-size: 2.4rem;
    padding: 4px 15px 5px 15px;
  }
  /**/
  #contact .waku_wrap {
    margin: 40px 0;
  }
  #contact .waku_wrap .waku .add_1 .mail {
	width: 200px;
  }
  #contact .waku_wrap .waku .add_1 .mail::before {
	left: 63px;
  }
}