@charset "UTF-8";
/* ==========================================================
  layout.css
  display: PC and Tab
========================================================== */
@media screen and (min-width: 768px) {
  /* ====================
    @ABOUT
  ===================== */
  #darkness #page section {
    background-color: #222222; }
    #darkness #page section .inner {
      position: relative; }
      #darkness #page section .inner .text--colmun {
        width: 100%;
        max-width: 600px;
        padding: 70px 0;
        position: relative;
        z-index: 2; }
        #darkness #page section .inner .text--colmun p[class^="bg--h3"] {
          overflow: hidden;
          -webkit-transition: 400ms all;
          transition: 400ms all;
          position: absolute;
          top: 70px;
          left: -10px; }
        #darkness #page section .inner .text--colmun .bg--h3--01 {
          background: url(../images/about/bg_h3_01.png) no-repeat left top;
          width: 600px;
          height: 60px; }
        #darkness #page section .inner .text--colmun .bg--h3--02 {
          background: url(../images/about/bg_h3_02.png) no-repeat left top;
          width: 250px;
          height: 60px; }
        #darkness #page section .inner .text--colmun .bg--h3--03 {
          background: url(../images/about/bg_h3_03.png) no-repeat left top;
          width: 420px;
          height: 60px; }
        #darkness #page section .inner .text--colmun h1 {
          font-size: 36px;
          letter-spacing: 0.2rem;
          margin: 0 0 30px;
          position: relative;
          z-index: 2; }
        #darkness #page section .inner .text--colmun h2 {
          font-size: 36px;
          letter-spacing: 0.2rem;
          margin: 0 0 30px;
          position: relative;
          z-index: 2; }
        #darkness #page section .inner .text--colmun h3 {
          font-size: 36px;
          letter-spacing: 0.2rem;
          margin: 0 0 30px;
          position: relative;
          z-index: 2; }
        #darkness #page section .inner .text--colmun .text {
          width: 450px;
          line-height: 2.2; }
      #darkness #page section .inner .img {
        width: 500px;
        position: absolute;
        top: -40px;
        right: 50%;
        margin: 0 -600px 0 0; }
      #darkness #page section .inner .iframe {
        width: 500px;
        position: absolute;
        top: -40px;
        right: 50%;
        margin: 0 -600px 0 0; }
  #darkness #page div[class^="sub-main"] {
    margin: 0 0 120px; }
  #darkness #page .sub-main-01 div {
    background: url(../images/about/sub_main_01.jpg) no-repeat center 0;
    background-size: cover; }
  #darkness #page .sub-main-02 div {
    background: url(../images/about/sub_main_02.jpg) no-repeat center 0;
    background-size: cover; }
  #darkness .for-visitor {
    text-align: center;
    padding: 105px 0 120px; }
    #darkness .for-visitor p {
      font-size: 36px;
      line-height: 1;
      font-weight: 300;
      margin: 0 0 30px; }
    #darkness .for-visitor span {
      font-size: 16px;
      line-height: 2.5; }
    #darkness .for-visitor .btn-page {
      width: 400px;
      text-align: center;
      margin: 50px auto 0; }
      #darkness .for-visitor .btn-page a {
        background-color: #ff6b00;
        font-size: 18px;
        font-weight: 600;
        color: #000;
        padding: 12px 0 4px;
        display: block;
        position: relative;
        background-image: linear-gradient(to right, #ff6b00 50%, rgba(0, 0, 0, 0) 50%);
        background-position: 0 0;
        background-size: 200% auto;
        transition: .3s; }
        #darkness .for-visitor .btn-page a span {
          font-size: 16px;
          font-weight: 600;
          display: block; }
        #darkness .for-visitor .btn-page a:hover, #darkness .for-visitor .btn-page a.current {
          background-color: #000;
          color: #ff6b00; }
        #darkness .for-visitor .btn-page a:hover {
          color: #fff;
          background-position: -100% 0; }

  /* ====================
    @PROGRAM
  ===================== */
  #program #page {
    background-color: transparent; }
    #program #page div [class^="sub-main"] div span {
      color: #ff6b00;
      font-weight: 600;
      font-size: 34px; }
    #program #page .sub-main-01 div {
      background: url(../images/program/sub_main_01.jpg) no-repeat center 0;
      background-size: cover; }
    #program #page .sub-main-02 div {
      background: url(../images/program/sub_main_02.jpg) no-repeat center 0;
      background-size: cover; }
    #program #page .sub-main-03 div {
      background: url(../images/program/sub_main_03.jpg) no-repeat center 0;
      background-size: cover; }
    #program #page .container h3 {
      font-size: 36px;
      text-align: center;
      padding: 70px 30px; }
      #program #page .container h3 span {
        font-size: 20px; }
    #program #page .container .inner {
      padding: 20px 40px 120px;
      overflow: hidden;
      clear: both; }
      #program #page .container .inner table {
        width: 45%;
        max-width: 400px;
        margin: 12px 0 0;
        float: left; }
        #program #page .container .inner table th, #program #page .container .inner table td {
          border-top: 1px solid #666666;
          border-bottom: 1px solid #666666; }
          #program #page .container .inner table th:not(:first-child), #program #page .container .inner table td:not(:first-child) {
            border-left: 1px solid #666666; }
        #program #page .container .inner table th {
          background-color: #000;
          color: #fff;
          padding: 5px 20px; }
        #program #page .container .inner table td {
          background-color: #e9e5df;
          color: #000;
          padding: 8px 20px; }
          #program #page .container .inner table td span {
            color: #ff6b00; }
      #program #page .container .inner .description {
        width: 67%;
        max-width: 465px;
        min-width: 350px;
        line-height: 2.2;
        float: right; }
    #program #page .container2 {
      margin: 120px 0 0; }
      #program #page .container2 h3 {
        font-size: 36px;
        text-align: center;
        padding: 60px 30px 40px; }
        #program #page .container2 h3 span {
          font-size: 20px; }
      #program #page .container2 .inner {
        padding: 0 40px 100px;
        overflow: hidden;
        clear: both; }
        #program #page .container2 .inner table {
          width: 100%; }
          #program #page .container2 .inner table th, #program #page .container2 .inner table td {
            border-top: 1px solid #666666;
            border-bottom: 1px solid #666666; }
            #program #page .container2 .inner table th:not(:first-child), #program #page .container2 .inner table td:not(:first-child) {
              border-left: 1px solid #666666; }
          #program #page .container2 .inner table th {
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 6px 20px; }
          #program #page .container2 .inner table td {
            background-color: #e9e5df;
            color: #000;
            padding: 12px 20px; }
            #program #page .container2 .inner table td:first-child {
              font-weight: 400;
              color: #ff6b00; }

  /* ====================
    @PRICE
  ===================== */
  #price #page .inner {
    padding: 60px 40px 90px; }
    #price #page .inner .page-navi {
      background-color: #000;
      width: 900px;
      padding: 0 10px;
      height: 140px;
      margin: 0 auto; }
      #price #page .inner .page-navi li {
        width: 300px;
        height: 140px;
        text-align: center;
        position: relative; }
        #price #page .inner .page-navi li a {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          #price #page .inner .page-navi li a span {
            font-weight: 300;
            margin: 0 auto;
            display: block; }
            #price #page .inner .page-navi li a span:first-child {
              font-size: 17px;
              padding: 0 0 10px;
              position: relative; }
              #price #page .inner .page-navi li a span:first-child.navi01 {
                width: 200px; }
              #price #page .inner .page-navi li a span:first-child.navi02 {
                width: 200px; }
              #price #page .inner .page-navi li a span:first-child.navi03 {
                width: 200px; }
              #price #page .inner .page-navi li a span:first-child:before {
                content: '';
                width: 0;
                left: 50%;
                bottom: 0;
                transition: all 0.3s ease;
                border-bottom: 1px solid #ff6b00;
                position: absolute;
                display: block; }
              #price #page .inner .page-navi li a span:first-child:after {
                content: '';
                width: 0;
                right: 50%;
                bottom: 0;
                transition: all 0.3s ease;
                border-bottom: 1px solid #ff6b00;
                position: absolute;
                display: block; }
          #price #page .inner .page-navi li a:hover {
            transition: all 0.3s ease; }
            #price #page .inner .page-navi li a:hover span {
              color: #fff; }
              #price #page .inner .page-navi li a:hover span:first-child {
                margin: 0 auto 10px; }
                #price #page .inner .page-navi li a:hover span:first-child:before, #price #page .inner .page-navi li a:hover span:first-child:after {
                  width: 50%;
                  border-bottom: 1px solid #ff6b00; }
    #price #page .inner section {
      margin: 70px auto 0; }
      #price #page .inner section h3 {
        color: #ff6b00;
        font-size: 24px;
        font-weight: 600;
        line-height: 1; }
      #price #page .inner section > p {
        line-height: 2;
        margin: 40px 0 20px; }
        #price #page .inner section > p:first-of-type {
          margin: 30px 0 20px; }
      #price #page .inner section .table {
        border: 1px solid #666666;
        padding: 25px 24px 25px 34px;
        margin: 0 0 30px;
        overflow: hidden;
        clear: both; }
        #price #page .inner section .table dl {
          float: left; }
          #price #page .inner section .table dl:not(:first-child) {
            margin: 0 0 0 30px; }
          #price #page .inner section .table dl dt, #price #page .inner section .table dl dd {
            float: left; }
          #price #page .inner section .table dl dt {
            color: #ff6b00; }
          #price #page .inner section .table dl dd {
            margin: 0 0 0 15px; }
      #price #page .inner section table {
        width: 100%; }
        #price #page .inner section table tr th, #price #page .inner section table tr td {
          border-top: 1px solid #666666;
          border-bottom: 1px solid #666666;
          letter-spacing: 0;
          padding: 15px 20px; }
          #price #page .inner section table tr th:not(:first-child), #price #page .inner section table tr td:not(:first-child) {
            border-left: 1px solid #666666; }
        #price #page .inner section table tr th {
          background-color: #000;
          color: #fff;
          text-align: center; }
          #price #page .inner section table tr th span {
            font-size: 12px; }
          #price #page .inner section table tr th br {
            display: none; }
        #price #page .inner section table tr td {
          background-color: #fff;
          color: #000;
          line-height: 1.8;
          vertical-align: middle; }
          #price #page .inner section table tr td:first-child {
            width: 185px;
            color: #ff6b00;
            padding: 15px 20px 15px 35px; }
          #price #page .inner section table tr td:nth-child(3) {
            width: 260px; }
          #price #page .inner section table tr td .border {
            border-bottom: 1px solid #000;
            padding: 0 0 10px;
            margin: 0 0 10px; }
          #price #page .inner section table tr td span {
            float: right; }
      #price #page .inner section .attention {
        margin: 15px 0 0;
        font-size: 13px;
        line-height: 1.7; }
        #price #page .inner section .attention a {
          color: #ff6b00;
          text-decoration: underline; }
          #price #page .inner section .attention a:hover {
            color: #ff6b00;
            text-decoration: none; }

  /* ====================
    @INSTRUCTORS
  ===================== */
  #instructors #page {
    /* LIST */ }
    #instructors #page .search-area {
      height: 45px;
      padding: 35px 40px 0;
      position: relative; }
      #instructors #page .search-area input[type="search"] {
        background: url(../images/instructors/icon_search.gif) no-repeat 20px 12px;
        background-size: 22px;
        background-color: #fff;
        border: none;
        width: 400px;
        font-size: 20px;
        padding: 8px 5px 8px 50px;
        position: absolute;
        right: 40px; }
    #instructors #page .thunb-list {
      padding: 15px 0 160px;
      margin: 0 auto; }
      #instructors #page .thunb-list li {
        width: 23.5%;
        max-width: 217px;
        margin: 2% 2% 0 0;
        position: relative; }
        #instructors #page .thunb-list li.show-instructor.non-margin {
          margin: 2% 0 0; }
        #instructors #page .thunb-list li a {
          color: #e9e5de;
          overflow: hidden;
          display: block;
          position: relative;
          /* box-shadow */
          box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.5);
          -webkit-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.5); }
          #instructors #page .thunb-list li a img {
            -moz-transition: -moz-transform 0.3s linear;
            -webkit-transition: -webkit-transform 0.3s linear;
            -o-transition: -o-transform 0.3s linear;
            -ms-transition: -ms-transform 0.3s linear;
            transition: transform 0.3s linear; }
          #instructors #page .thunb-list li a:hover {
            /* box-shadow */
            box-shadow: 0px 6px 20px 8px rgba(0, 0, 0, 0.6);
            -moz-box-shadow: 0px 6px 20px 8px rgba(0, 0, 0, 0.6);
            -webkit-box-shadow: 0px 6px 20px 8px rgba(0, 0, 0, 0.6); }
            #instructors #page .thunb-list li a:hover img {
              -webkit-transform: scale(1.1, 1.1);
              -moz-transform: scale(1.1, 1.1);
              -o-transform: scale(1.1, 1.1);
              -ms-transform: scale(1.1, 1.1);
              transform: scale(1.1, 1.1); }
          #instructors #page .thunb-list li a span {
            width: 100%;
            height: 100%;
            color: #ff6b00;
            font-size: 20px;
            text-align: center;
            line-height: 1;
            margin-top: 50%;
            display: block;
            position: absolute;
            bottom: -46%;
            z-index: 2; }

  /* modal */
  .modal-content .img {
    width: 860px;
    height: 645px;
    margin: 0 auto;
    position: relative; }
    .modal-content .img p {
      color: #ff6b00;
      font-size: 20px;
      position: absolute;
      top: 30px;
      left: 40px; }

  /* ====================
    @NEWS
  ===================== */
  #news #page {
    /* 詳細 */ }
    #news #page .category-btn {
      padding: 80px 40px 0;
      position: relative;
      z-index: 2; }
      #news #page .category-btn li {
        width: 18%;
        font-size: 16px; }
        #news #page .category-btn li:not(:first-child) {
          margin: 0 0 0 2.3%; }
        #news #page .category-btn li a {
          background-color: #000;
          padding: 8px 0;
          display: block;
          /* box-shadow */
          box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3);
          -webkit-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3); }
          #news #page .category-btn li a:hover {
            background-color: #ff6b00;
            color: #fff;
            /* box-shadow */
            box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4);
            -webkit-box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4); }
          #news #page .category-btn li a.current {
            background-color: #ff6b00;
            color: #fff; }
    #news #page .news-list {
      padding: 0 40px 120px; }
      #news #page .news-list li {
        width: 23.5%;
        max-width: 216px;
        max-height: 320px;
        margin: 0 0 4%; }
        #news #page .news-list li:not(:nth-child(4n)) {
          margin: 0 2% 4% 0; }
    #news #page article {
      padding: 80px 60px 60px; }
      #news #page article > p span, #news #page article > div span {
        color: #ff6b00; }
      #news #page article .img {
        text-align: center; }
        #news #page article .img img {
          width: auto;
          height: auto;
          display: inline;
          margin: 0; }
      #news #page article .date {
        color: #888888;
        font-size: 14px;
        line-height: 1;
        margin: 35px 0 20px; }
      #news #page article .category {
        color: #e9e5df; }
      #news #page article .title {
        font-size: 20px;
        margin: 20px 0 50px; }
      #news #page article ul, #news #page article ol {
        padding: 0 0 0 2rem; }
      #news #page article ul li {
        list-style-type: disc; }
      #news #page article ol li {
        list-style-type: decimal; }
      #news #page article .attention {
        font-size: 1.2rem;
        padding: 0 0 0 1em;
        text-indent: -1em; }
      #news #page article img {
        width: auto;
        height: auto;
        display: block;
        margin: 25px 0 20px; }
      #news #page article a {
        color: #ff6b00;
        text-decoration: underline; }
        #news #page article a:hover {
          text-decoration: none; }
    #news #page .btn-return {
      width: 300px;
      font-size: 20px;
      text-align: center;
      padding: 0 0 90px;
      margin: 0 auto; }
      #news #page .btn-return a {
        background-color: #000;
        padding: 18px 0 16px;
        display: block;
        position: relative;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ff6b00 50%);
        background-position: 0 0;
        background-size: 200% auto;
        transition: .3s;
        /* box-shadow */
        box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3); }
        #news #page .btn-return a:hover {
          background-position: -100% 0;
          background-color: #ff6b00;
          color: #fff;
          /* box-shadow */
          box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4);
          -webkit-box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4); }
        #news #page .btn-return a::after {
          background: url(../images/shared/icon_arrow.png) no-repeat;
          background-size: contain;
          display: block;
          content: '';
          position: absolute;
          width: 50px;
          height: 20px;
          top: 24px;
          left: 36px; }

  /* ====================
    @STUDIO
  ===================== */
  #studio #page .address-card {
    padding: 100px 40px 50px; }
    #studio #page .address-card li {
      width: 32%; }
      #studio #page .address-card li {
        margin: 0 1% 2% 0; }
      #studio #page .address-card li > a {
        background-color: #000;
        max-width: 300px;
        height: 300px;
        margin: 0 0 2%;
        overflow: hidden;
        display: block;
        position: relative; }
        #studio #page .address-card li > a:hover {
          color: #fff; }
      #studio #page .address-card li h3 {
        font-size: 90px;
        line-height: 0.65;
        color: #333333;
        font-weight: 600;
        text-align: right;
        margin: 0 -4px 0 0; }
      #studio #page .address-card li .place {
        max-width: 265px;
        min-width: 245px;
        padding: 40px 15px 25px 19px;
        position: absolute;
        left: 0;
        top: 142px; }
        #studio #page .address-card li .place h4 {
          margin: 0 0 18px; }
          #studio #page .address-card li .place h4 span {
            color: #ff6b00;
            font-size: 22px;
            position: relative; }
            #studio #page .address-card li .place h4 span:after {
              background: url(../images/studio/icon_map.png) no-repeat;
              background-size: contain;
              display: block;
              content: '';
              position: absolute;
              width: 32px;
              height: 38px;
              top: -10px;
              right: -32px; }
      #studio #page .address-card li .detail {
        display: none; }
      #studio #page .address-card li:hover h3 {
        color: #ff6b00;
        transition: .4s; }
      #studio #page .address-card li:hover .place {
        display: none;
        transition: .4s; }
      #studio #page .address-card li:hover .detail {
        max-width: 265px;
        min-width: 245px;
        padding: 40px 15px 25px 19px;
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        transition: .4s; }
  #studio .kenyo {
    width: 258px;
    background-image: url(https://www.jumpone.jp/wp-content/themes/jumpone_2017/images/studio/kenyo.png);
    background-repeat: no-repeat;
    background-position: right top; }

  /* ====================
    @FAQ
  ===================== */
  #faq #page #container {
    position: relative; }
    #faq #page #container .left-side-bar {
      background-color: #000;
      width: 280px;
      margin-right: 580px;
      position: absolute;
      z-index: 3; }
      #faq #page #container .left-side-bar .side-list {
        padding: 60px 0 0; }
        #faq #page #container .left-side-bar .side-list li a {
          display: block;
          height: 60px;
          padding: 0 30px 0 20px;
          position: relative;
          background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #191919 50%);
          background-position: 0 0;
          background-size: 200% auto;
          transition: .3s; }
          #faq #page #container .left-side-bar .side-list li a::after {
            background: url(../images/faq/icon_arrow.png) no-repeat;
            background-size: contain;
            display: block;
            content: '';
            position: absolute;
            width: 12px;
            height: 100%;
            top: 20px;
            right: 15px; }
          #faq #page #container .left-side-bar .side-list li a:hover, #faq #page #container .left-side-bar .side-list li a.current {
            background-color: #191919;
            color: #ff6b00; }
          #faq #page #container .left-side-bar .side-list li a:hover {
            background-position: -100% 0; }
          #faq #page #container .left-side-bar .side-list li a span {
            line-height: 60px; }
    #faq #page #container .right-contents {
      border-left: solid 280px #000;
      width: 580px;
      padding: 80px 0 0 60px; }
      #faq #page #container .right-contents section {
        padding-bottom: 120px; }
        #faq #page #container .right-contents section .section-title {
          margin: 0 0 20px;
          position: relative; }
          #faq #page #container .right-contents section .section-title h3 {
            font-size: 18px;
            margin-bottom: 15px; }
          #faq #page #container .right-contents section .section-title .section-bar {
            position: relative;
            width: 100%;
            height: 2px; }
            #faq #page #container .right-contents section .section-title .section-bar span {
              background: #ff6b00;
              width: 42px;
              height: 100%;
              display: block;
              position: relative;
              z-index: 2; }
        #faq #page #container .right-contents section .section-contents table {
          width: 100%; }
          #faq #page #container .right-contents section .section-contents table .question-list {
            border-bottom: 1px solid rgba(225, 222, 218, 0.2); }
            #faq #page #container .right-contents section .section-contents table .question-list th {
              width: 30px;
              color: #ff6b00; }
            #faq #page #container .right-contents section .section-contents table .question-list td a {
              padding: 35px 0 35px 15px;
              display: block; }
          #faq #page #container .right-contents section .section-contents table.detail .question-list {
            border-bottom: none; }
            #faq #page #container .right-contents section .section-contents table.detail .question-list th {
              width: 30px;
              color: #ff6b00; }
            #faq #page #container .right-contents section .section-contents table.detail .question-list td {
              padding: 0 0 0 15px;
              display: block; }
          #faq #page #container .right-contents section .section-contents table.detail .answer-list {
            border-bottom: 1px solid rgba(225, 222, 218, 0.2); }
            #faq #page #container .right-contents section .section-contents table.detail .answer-list th {
              width: 30px;
              color: #ffae00; }
            #faq #page #container .right-contents section .section-contents table.detail .answer-list td {
              padding: 25px 0 25px 15px; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td ul, #faq #page #container .right-contents section .section-contents table.detail .answer-list td ol {
                padding: 0 0 0 2rem; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td ul li {
                list-style-type: disc; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td ol li {
                list-style-type: decimal; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td .attention {
                font-size: 1.2rem;
                padding: 0 0 0 1em;
                text-indent: -1em; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td a {
                color: #ff6b00;
                text-decoration: underline; }
                #faq #page #container .right-contents section .section-contents table.detail .answer-list td a:hover {
                  text-decoration: none; }

  /* ====================
    @TRIAL
  ===================== */
  #trial #page .sub-main div {
    background: url(../images/trial/sub_main.jpg) no-repeat center 0;
    background-size: cover; }
    #trial #page .sub-main div span {
      text-align: center; }
      #trial #page .sub-main div span em {
        font-size: 32px;
        display: block;
        margin: 0 0 20px; }
      #trial #page .sub-main div span small {
        font-size: 16px; }
  #trial #page #container .inner {
    padding: 55px 40px 60px; }
    #trial #page #container .inner section {
      margin: 0 0 40px;
      position: relative; }
      #trial #page #container .inner section:not(:last-of-type)::after {
        background: url(../images/trial/icon_arrow.png) no-repeat;
        background-size: contain;
        display: block;
        content: '';
        position: absolute;
        width: 20px;
        height: 50px;
        bottom: 40px;
        left: 130px; }
      #trial #page #container .inner section .left-side-bar {
        background-color: #000;
        width: 280px;
        margin-right: 580px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
        #trial #page #container .inner section .left-side-bar .section-title {
          text-align: center;
          position: relative; }
          #trial #page #container .inner section .left-side-bar .section-title h3 {
            font-size: 40px;
            line-height: 1; }
          #trial #page #container .inner section .left-side-bar .section-title .section-bar {
            position: relative;
            width: 100%;
            height: 2px; }
            #trial #page #container .inner section .left-side-bar .section-title .section-bar span {
              background: #fff;
              width: 30px;
              height: 100%;
              display: block;
              position: relative;
              z-index: 2;
              margin: 25px auto 0; }
          #trial #page #container .inner section .left-side-bar .section-title h4 {
            font-size: 18px;
            color: #ff6b00;
            line-height: 1;
            margin: 30px 0 20px; }
            #trial #page #container .inner section .left-side-bar .section-title h4.last {
              font-size: 16px; }
          #trial #page #container .inner section .left-side-bar .section-title h5 {
            font-size: 16px;
            letter-spacing: 0; }
      #trial #page #container .inner section .right-contents {
        background-color: #222;
        border-left: solid 280px #000;
        width: 560px;
        padding: 55px 30px 50px 50px; }
        #trial #page #container .inner section .right-contents .sub-tit {
          font-size: 16px;
          color: #ff6b00;
          margin: 0 0 30px; }
        #trial #page #container .inner section .right-contents .text {
          line-height: 2.2; }
          #trial #page #container .inner section .right-contents .text .attention {
            font-size: 12px;
            line-height: 1.6; }
          #trial #page #container .inner section .right-contents .text .inline {
            border: 1px solid #333;
            width: 250px;
            padding: 15px 20px;
            margin: 20px 0 10px; }
            #trial #page #container .inner section .right-contents .text .inline span {
              padding: 10px 12px;
              display: block; }
              #trial #page #container .inner section .right-contents .text .inline span:first-child {
                padding: 0 12px 10px; }
              #trial #page #container .inner section .right-contents .text .inline span:last-child {
                padding: 10px 12px 0; }
              #trial #page #container .inner section .right-contents .text .inline span:not(:last-child) {
                border-bottom: 1px solid #333; }
              #trial #page #container .inner section .right-contents .text .inline span em {
                color: #ff6b00; }
        #trial #page #container .inner section .right-contents .btn-page {
          width: 330px;
          text-align: center;
          margin: 35px 0 20px; }
          #trial #page #container .inner section .right-contents .btn-page a {
            background-color: #ff6b00;
            font-size: 18px;
            font-weight: 600;
            padding: 20px 0;
            display: block;
            position: relative;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #191919 50%);
            background-position: 0 0;
            background-size: 200% auto;
            transition: .3s; }
            #trial #page #container .inner section .right-contents .btn-page a:hover, #trial #page #container .inner section .right-contents .btn-page a.current {
              background-color: #191919;
              color: #ff6b00; }
            #trial #page #container .inner section .right-contents .btn-page a:hover {
              color: #fff;
              background-position: -100% 0; }
        #trial #page #container .inner section .right-contents .text-link {
          background: url(../images/trial/icon_arrow_s.png) no-repeat 0 0;
          padding: 0 0 0 10px; }
          #trial #page #container .inner section .right-contents .text-link a {
            color: #ff6b00;
            text-decoration: underline;
            padding: 0 0 0 4px; }
            #trial #page #container .inner section .right-contents .text-link a:hover {
              text-decoration: none; }
        #trial #page #container .inner section .right-contents span.strong {
          color: #ff6b00;
          font-weight: 600; }
        #trial #page #container .inner section .right-contents ul li {
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 30px;
          padding: 0 0 30px; }
          #trial #page #container .inner section .right-contents ul li:first-child {
            background-image: url(../images/trial/number01.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(2) {
            background-image: url(../images/trial/number02.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(3) {
            background-image: url(../images/trial/number03.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(4) {
            background-image: url(../images/trial/number04.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(5) {
            background-image: url(../images/trial/number05.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(6) {
            background-image: url(../images/trial/number06.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(7) {
            background-image: url(../images/trial/number07.gif); }
          #trial #page #container .inner section .right-contents ul li > div {
            margin: 0 0 0 35px; }
            #trial #page #container .inner section .right-contents ul li > div .inline {
              border: 1px solid #333;
              width: 360px;
              padding: 15px 20px;
              margin: 20px 0 10px; }
              #trial #page #container .inner section .right-contents ul li > div .inline p {
                padding: 0 0 10px 8px;
                overflow: hidden;
                clear: both; }
                #trial #page #container .inner section .right-contents ul li > div .inline p:first-child {
                  padding: 0 0 10px 8px; }
                #trial #page #container .inner section .right-contents ul li > div .inline p:last-child {
                  padding: 10px 0 0 8px; }
                #trial #page #container .inner section .right-contents ul li > div .inline p:not(:last-child) {
                  border-bottom: 1px solid #333; }
                #trial #page #container .inner section .right-contents ul li > div .inline p em {
                  color: #ff6b00; }
                #trial #page #container .inner section .right-contents ul li > div .inline p span {
                  float: right; }
            #trial #page #container .inner section .right-contents ul li > div .attention {
              font-size: 12px;
              line-height: 1.6; } 

  /* ====================
    @RECRUIT
  ===================== */
  #recruit #page .inner {
    padding: 60px 40px 90px; }
    #recruit #page .inner .page-navi {
      background-color: #000;
      width: 900px;
      padding: 0 10px;
      height: 140px;
      margin: 0 auto; }
      #recruit #page .inner .page-navi li {
        width: 300px;
        height: 140px;
        text-align: center;
        position: relative; }
        #recruit #page .inner .page-navi li a {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          #recruit #page .inner .page-navi li a span {
            font-weight: 300;
            margin: 0 auto;
            display: block; }
            #recruit #page .inner .page-navi li a span:first-child {
              font-size: 17px;
              padding: 0 0 10px;
              position: relative; }
              #recruit #page .inner .page-navi li a span:first-child.navi01 {
                width: 200px; }
              #recruit #page .inner .page-navi li a span:first-child.navi02 {
                width: 200px; }
              #recruit #page .inner .page-navi li a span:first-child.navi03 {
                width: 200px; }
              #recruit #page .inner .page-navi li a span:first-child:before {
                content: '';
                width: 0;
                left: 50%;
                bottom: 0;
                transition: all 0.3s ease;
                border-bottom: 1px solid #ff6b00;
                position: absolute;
                display: block; }
              #recruit #page .inner .page-navi li a span:first-child:after {
                content: '';
                width: 0;
                right: 50%;
                bottom: 0;
                transition: all 0.3s ease;
                border-bottom: 1px solid #ff6b00;
                position: absolute;
                display: block; }
          #recruit #page .inner .page-navi li a:hover {
            transition: all 0.3s ease; }
            #recruit #page .inner .page-navi li a:hover span {
              color: #fff; }
              #recruit #page .inner .page-navi li a:hover span:first-child {
                margin: 0 auto 10px; }
                #recruit #page .inner .page-navi li a:hover span:first-child:before, #recruit #page .inner .page-navi li a:hover span:first-child:after {
                  width: 50%;
                  border-bottom: 1px solid #ff6b00; }
    #recruit #page .inner section {
      margin: 70px auto 0; }
      #recruit #page .inner section h3 {
        color: #ff6b00;
        font-size: 24px;
        font-weight: 600;
        line-height: 1; }
      #recruit #page .inner section > p {
        line-height: 2;
        margin: 40px 0 20px; }
        #recruit #page .inner section > p:first-of-type {
          margin: 30px 0 20px; }
      #recruit #page .inner section .table {
        border: 1px solid #666666;
        padding: 25px 24px 25px 34px;
        margin: 0 0 30px;
        overflow: hidden;
        clear: both; }
        #recruit #page .inner section .table dl {
          float: left; }
          #recruit #page .inner section .table dl:not(:first-child) {
            margin: 0 0 0 30px; }
          #recruit #page .inner section .table dl dt, #recruit #page .inner section .table dl dd {
            float: left; }
          #recruit #page .inner section .table dl dt {
            color: #ff6b00; }
          #recruit #page .inner section .table dl dd {
            margin: 0 0 0 15px; }
      #recruit #page .inner section table {
        width: 100%; }
        #recruit #page .inner section table tr th, #recruit #page .inner section table tr td {
          border-top: 1px solid #666666;
          border-bottom: 1px solid #666666;
          letter-spacing: 0;
          padding: 15px 20px; }
          #recruit #page .inner section table tr th:not(:first-child), #recruit #page .inner section table tr td:not(:first-child) {
            border-left: 1px solid #666666; }
        #recruit #page .inner section table tr th {
          background-color: #000;
          color: #fff;
          text-align: center; }
          #recruit #page .inner section table tr th span {
            font-size: 12px; }
          #recruit #page .inner section table tr th br {
            display: none; }
        #recruit #page .inner section table tr td {
          background-color: #fff;
          color: #000;
          line-height: 1.8;
          vertical-align: middle; }
          #recruit #page .inner section table tr td:first-child {
            width: 185px;
            color: #ff6b00;
            padding: 15px 20px 15px 35px; }
          #recruit #page .inner section table tr td:nth-child(3) {
            width: 260px; }
          #recruit #page .inner section table tr td .border {
            border-bottom: 1px solid #000;
            padding: 0 0 10px;
            margin: 0 0 10px; }
          #recruit #page .inner section table tr td span {
            float: right; }
      #recruit #page .inner section .attention {
        margin: 15px 0 0;
        font-size: 13px;
        line-height: 1.7; }
        #recruit #page .inner section .attention a {
          color: #ff6b00;
          text-decoration: underline; }
          #recruit #page .inner section .attention a:hover {
            color: #ff6b00;
            text-decoration: none; }

  #recruit .for-visitor {
    text-align: center;
    padding: 60px 0 60px; }

    #recruit .for-visitor span {
      font-size: 16px;
      line-height: 2.5; 
}
    #recruit .for-visitor .btn-page {
      width: 400px;
      text-align: center;
      margin: 8px auto 8px ; 
}
      #recruit .for-visitor .btn-page a {
        background-color: #ff6b00;
        font-size: 18px;
        font-weight: 600;
        color: #000;
        padding: 8px 0 8px;
        display: block;
        position: relative;
        background-image: linear-gradient(to right, #ff6b00 50%, rgba(0, 0, 0, 0) 50%);
        background-position: 0 0;
        background-size: 200% auto;
        transition: .3s; }
        #recruit .for-visitor .btn-page a span {
          font-size: 16px;
          font-weight: 600;
          display: block; }
        #recruit .for-visitor .btn-page a:hover, #recruit .for-visitor .btn-page a.current {
          background-color: #000;
          color: #ff6b00; }
        #recruit .for-visitor .btn-page a:hover {
          color: #fff;
          background-position: -100% 0; }
}
/* ==========================================================
  layout.css
  display: SP
========================================================== */
@media screen and (max-width: 767px) {
  /* ====================
    @ABOUT
  ===================== */
  #darkness #page section {
    background-color: #222222; }
    #darkness #page section .inner {
      padding: 6% 4%; }
      #darkness #page section .inner .text--colmun {
        width: 100%;
        margin: 0 0 25px;
        position: relative; }
        #darkness #page section .inner .text--colmun p[class^="bg--h3--"] {
          width: 100%;
          height: 30px;
          overflow: hidden;
          -webkit-transition: 400ms all;
          transition: 400ms all;
          position: absolute;
          top: 10px; }
        #darkness #page section .inner .text--colmun .bg--h3--01 {
          background: url(../images/about/bg_h3_01.png) no-repeat left top;
          background-size: 100% 30px; }
        #darkness #page section .inner .text--colmun .bg--h3--02 {
          background: url(../images/about/bg_h3_02.png) no-repeat left top;
          background-size: 100% 30px; }
        #darkness #page section .inner .text--colmun .bg--h3--03 {
          background: url(../images/about/bg_h3_03.png) no-repeat left top;
          background-size: 100% 30px; }
        #darkness #page section .inner .text--colmun h1 {
          font-size: 2.2rem;
          letter-spacing: 0.2rem;
          margin: 0 0 25px;
          position: relative;
          z-index: 2; }
        #darkness #page section .inner .text--colmun h2 {
          font-size: 2.2rem;
          letter-spacing: 0.2rem;
          margin: 0 0 25px;
          position: relative;
          z-index: 2; }
        #darkness #page section .inner .text--colmun h3 {
          font-size: 2.2rem;
          letter-spacing: 0.2rem;
          margin: 0 0 25px;
          position: relative;
          z-index: 2; }
        #darkness #page section .inner .text--colmun .text {
          width: 100%;
          line-height: 2; }
      #darkness #page section .inner .img {
        width: 100%;
        margin: 0 auto; }
  #darkness #page div[class^="sub-main"] {
    margin: 25px 0; }
  #darkness #page .sub-main-01 div {
    background: url(../images/about/sub_main_01.jpg) no-repeat center 0;
    background-size: contain; }
  #darkness #page .sub-main-02 div {
    background: url(../images/about/sub_main_02.jpg) no-repeat center 0;
    background-size: contain; }
  #darkness .for-visitor {
    text-align: center;
    padding: 50px 2% 60px; }
    #darkness .for-visitor p {
      font-size: 2.4rem;
      line-height: 1;
      margin: 0 0 15px; }
    #darkness .for-visitor span {
      font-size: 1.4rem;
      line-height: 2.5; }
    #darkness .for-visitor .btn-page {
      width: 80%;
      text-align: center;
      margin: 25px auto 0; }
      #darkness .for-visitor .btn-page a {
        background-color: #ff6b00;
        font-size: 1.6rem;
        color: #000;
        font-weight: 600;
        padding: 12px 0 6px;
        display: block; }
        #darkness .for-visitor .btn-page a span {
          font-size: 1.4rem;
          font-weight: 600;
          display: block; }

  /* ====================
    @PROGRAM
  ===================== */
  #program #page {
    background-color: transparent; }
    #program #page div[class^="sub-main"] div span {
      color: #ff6b00;
      font-size: 2.2rem;
      font-weight: 600; }
    #program #page .sub-main-01 div {
      background: url(../images/program/sub_main_01.jpg) no-repeat center 0;
      background-size: contain; }
    #program #page .sub-main-02 div {
      background: url(../images/program/sub_main_02.jpg) no-repeat center 0;
      background-size: contain; }
    #program #page .sub-main-03 div {
      background: url(../images/program/sub_main_03.jpg) no-repeat center 0;
      background-size: contain; }
    #program #page .container h3 {
      font-size: 2.4rem;
      text-align: center;
      padding: 30px 4%; }
      #program #page .container h3 span {
        font-size: 1.6rem; }
    #program #page .container .inner {
      padding: 25px 2% 35px; }
      #program #page .container .inner table {
        width: 100%;
        margin: 0 0 15px; }
        #program #page .container .inner table th, #program #page .container .inner table td {
          border-top: 1px solid #666666;
          border-bottom: 1px solid #666666; }
          #program #page .container .inner table th:not(:first-child), #program #page .container .inner table td:not(:first-child) {
            border-left: 1px solid #666666; }
        #program #page .container .inner table th {
          background-color: #000;
          color: #fff;
          padding: 5px 16px; }
        #program #page .container .inner table td {
          background-color: #e9e5df;
          color: #000;
          padding: 7px 16px; }
          #program #page .container .inner table td span {
            color: #ff6b00; }
      #program #page .container .inner .description {
        line-height: 2; }
    #program #page .container2 {
      margin: 40px 0 0; }
      #program #page .container2 h3 {
        font-size: 2.0rem;
        text-align: center;
        padding: 30px 4% 0; }
        #program #page .container2 h3 span {
          font-size: 1.6rem; }
      #program #page .container2 .inner {
        padding: 25px 2% 35px; }
        #program #page .container2 .inner table {
          width: 100%;
          margin: 0 0 15px; }
          #program #page .container2 .inner table th, #program #page .container2 .inner table td {
            border-top: 1px solid #666666;
            border-bottom: 1px solid #666666; }
            #program #page .container2 .inner table th:not(:first-child), #program #page .container2 .inner table td:not(:first-child) {
              border-left: 1px solid #666666; }
          #program #page .container2 .inner table th {
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 6px 0; }
          #program #page .container2 .inner table td {
            background-color: #e9e5df;
            color: #000;
            padding: 10px 15px; }
            #program #page .container2 .inner table td:first-child {
              color: #ff6b00; }

  /* ====================
    @PRICE
  ===================== */
  #price #page .inner {
    padding: 5% 2% 6%; }
    #price #page .inner .page-navi {
      width: 100%;
      margin: 0 auto; }
      #price #page .inner .page-navi li {
        background-color: #000;
        width: 49%;
        height: 100px;
        padding: 0 5%;
        margin: 0 0 2%;
        box-sizing: border-box;
        text-align: center;
        position: relative; }
        #price #page .inner .page-navi li:nth-child(even) {
          margin: 0 0 2% 2%; }
        #price #page .inner .page-navi li a {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          /* 左から半分 */
          width: 100%;
          /* 大枠と同じ幅に */
          /* 要素の大きさの半分引く（CSS3） */
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          #price #page .inner .page-navi li a span {
            font-weight: 300;
            margin: 0 auto;
            display: block; }
            #price #page .inner .page-navi li a span:first-child {
              border-bottom: 1px solid #ff6b00;
              font-size: 1.5rem;
              padding: 0 0 6px;
              margin: 0 auto 6px; }
              #price #page .inner .page-navi li a span:first-child.navi01 {
                width: 80%; }
              #price #page .inner .page-navi li a span:first-child.navi02 {
                width: 80%; }
              #price #page .inner .page-navi li a span:first-child.navi03 {
                width: 80%; }
              #price #page .inner .page-navi li a span:first-child.navi04 {
                width: 80%; }
    #price #page .inner section {
      margin: 30px auto 0; }
      #price #page .inner section h3 {
        color: #ff6b00;
        font-weight: 600;
        font-size: 2.2rem;
        line-height: 1; }
      #price #page .inner section > p {
        font-size: 1.5rem;
        margin: 15px 0 20px; }
      #price #page .inner section table {
        width: 100%; }
        #price #page .inner section table tr th, #price #page .inner section table tr td {
          border-top: 1px solid #666666;
          border-bottom: 1px solid #666666;
          font-size: 1.4rem;
          letter-spacing: 0;
          padding: 2%; }
          #price #page .inner section table tr th:not(:first-child), #price #page .inner section table tr td:not(:first-child) {
            border-left: 1px solid #666666; }
        #price #page .inner section table tr th {
          background-color: #000;
          color: #fff;
          text-align: center;
          vertical-align: middle; }
          #price #page .inner section table tr th span {
            font-size: 1.2rem; }
        #price #page .inner section table tr td {
          background-color: #fff;
          color: #000;
          line-height: 1.8;
          vertical-align: middle; }
          #price #page .inner section table tr td:first-child {
            width: 25%;
            color: #ff6b00; }
          #price #page .inner section table tr td:last-child {
            width: 27%; }
          #price #page .inner section table tr td .border {
            border-bottom: 1px solid #000;
            padding: 0 0 6px;
            margin: 0 0 6px; }
      #price #page .inner section .attention {
        margin: 10px 0 0; }
        #price #page .inner section .attention a {
          color: #ff6b00;
          text-decoration: underline; }

  /* ====================
    @INSTRUCTORS
  ===================== */
  #instructors {
    /* LIST */ }
    #instructors .search-area {
      padding: 3% 2% 0;
      margin: 0 auto; }
      #instructors .search-area input[type="search"] {
        background: url(../images/instructors/icon_search.gif) no-repeat 16px 13px;
        background-size: 11px;
        background-color: #fff;
        border: none;
        border-radius: 0;
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 0.15rem;
        padding: 6px 5px 6px 30px; }
    #instructors .thunb-list {
      padding: 5% 0 10%;
      margin: 0 auto; }
      #instructors .thunb-list li {
        width: 47%;
        margin: 2% 1% 0;
        overflow: hidden;
        position: relative; }
        #instructors .thunb-list li a {
          color: #e9e5de;
          position: relative; }
          #instructors .thunb-list li a span {
            width: 100%;
            height: 100%;
            color: #ff6b00;
            font-size: 1.6rem;
            text-align: center;
            letter-spacing: 0.15rem;
            line-height: 1;
            margin-top: 50%;
            display: block;
            position: absolute;
            bottom: -46%;
            z-index: 2; }

  /* modal */
  .modal-content .img {
    width: 331px;
    height: 248px;
    position: relative; }
    .modal-content .img p {
      color: #ff6b00;
      letter-spacing: 0.15rem;
      font-size: 1.8rem;
      position: absolute;
      top: 15px;
      left: 15px; }

  /* ====================
    @NEWS
  ===================== */
  #news #page {
    /* 詳細 */ }
    #news #page .category-btn {
      padding: 35px 2% 0;
      position: relative;
      z-index: 2; }
      #news #page .category-btn li {
        width: 30%;
        font-size: 1.6rem;
        margin: 0 1.5% 15px; }
        #news #page .category-btn li a {
          background-color: #000;
          padding: 4px 0;
          display: block; }
          #news #page .category-btn li a.current {
            background-color: #ff6b00;
            color: #fff; }
    #news #page article {
      padding: 40px 4% 30px; }
      #news #page article > p span, #news #page article > div span {
        color: #ff6b00; }
      #news #page article .date {
        color: #888888;
        font-size: 1.4rem;
        line-height: 1;
        margin: 35px 0 20px; }
      #news #page article .category {
        color: #e9e5df; }
      #news #page article .title {
        font-size: 2.0rem;
        margin: 20px 0 50px; }
      #news #page article ul, #news #page article ol {
        padding: 0 0 0 2rem; }
      #news #page article ul li {
        list-style-type: disc; }
      #news #page article ol li {
        list-style-type: decimal; }
      #news #page article .attention {
        font-size: 1.2rem;
        padding: 0 0 0 1em;
        text-indent: -1em; }
      #news #page article a {
        color: #ff6b00;
        text-decoration: underline; }
    #news #page .btn-return {
      width: 60%;
      font-size: 1.8rem;
      text-align: center;
      padding: 0 0 40px;
      margin: 0 auto; }
      #news #page .btn-return a {
        background-color: #000;
        padding: 14px 0 12px;
        display: block;
        position: relative;
        /* box-shadow */
        box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3); }
        #news #page .btn-return a:hover {
          background-color: #ff6b00;
          color: #fff;
          /* box-shadow */
          box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4);
          -moz-box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4);
          -webkit-box-shadow: 0px 4px 16px 6px rgba(0, 0, 0, 0.4); }
        #news #page .btn-return a::after {
          background: url(../images/shared/icon_arrow.png) no-repeat;
          background-size: contain;
          display: block;
          content: '';
          position: absolute;
          width: 25px;
          height: 10px;
          top: 22px;
          left: 20px; }

  /* ====================
    @STUDIO
  ===================== */
  #studio #page .address-card {
    padding: 5% 4% 7%; }
    #studio #page .address-card > li {
      width: 100%;
      margin: 0 0 4%; }
      #studio #page .address-card > li > a {
        background-color: #000;
        height: 350px;
        overflow: hidden;
        display: block;
        position: relative;
        pointer-events: none; }
      #studio #page .address-card > li h3 {
        font-size: 9.0rem;
        line-height: 0.65;
        color: #333333;
        font-weight: 600;
        text-align: right; }
      #studio #page .address-card > li .place {
        padding: 15px;
        position: absolute;
        left: 0;
        top: 0; }
        #studio #page .address-card > li .place h4 {
          margin: 0 0 10px; }
          #studio #page .address-card > li .place h4 span {
            color: #ff6b00;
            font-size: 2.0rem;
            position: relative; }
            #studio #page .address-card > li .place h4 span:after {
              background: url(../images/studio/icon_map.png) no-repeat;
              background-size: 16px 19px;
              display: block;
              content: '';
              position: absolute;
              width: 16px;
              height: 19px;
              top: 8px;
              right: -19px; }
      #studio #page .address-card > li .detail {
        padding: 10px 15px 15px;
        position: absolute;
        top: 95px;
        left: 0; }
    #studio #page .address-card .sp-btn-area {
      background-color: #000;
      padding: 0 15px 20px; }
      #studio #page .address-card .sp-btn-area > ul {
        width: 100%;
        overflow: hidden;
        clear: both; }
        #studio #page .address-card .sp-btn-area > ul li {
          width: 47.5%;
          float: left; }
          #studio #page .address-card .sp-btn-area > ul li:first-child {
            background-color: #ff6b00; }
          #studio #page .address-card .sp-btn-area > ul li:last-child {
            background-color: #ffae00;
            margin: 0 0 0 5%; }
          #studio #page .address-card .sp-btn-area > ul li a {
            color: #000;
            font-weight: 600;
            padding: 8px 0;
            text-align: center;
            display: block; }
  #studio .kenyo {
    width: 300px;
    background-image: url(https://www.jumpone.jp/wp-content/themes/jumpone_2017/images/studio/kenyo.png);
    background-repeat: no-repeat;
    background-position: right bottom; }

  /* ====================
    @FAQ
  ===================== */
  #faq #page #container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    clear: both; }
    #faq #page #container .left-side-bar {
      background-color: #000;
      width: 100%;
      position: relative;
      z-index: 3; }
      #faq #page #container .left-side-bar .side-list {
        padding: 60px 0 0; }
        #faq #page #container .left-side-bar .side-list li a {
          display: block;
          height: 60px;
          padding: 0 30px 0 35px;
          position: relative;
          background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #191919 50%);
          background-position: 0 0;
          background-size: 200% auto;
          transition: .3s; }
          #faq #page #container .left-side-bar .side-list li a::after {
            background: url(../images/faq/icon_arrow.png) no-repeat;
            background-size: contain;
            display: block;
            content: '';
            position: absolute;
            width: 12px;
            height: 100%;
            top: 20px;
            right: 15px; }
          #faq #page #container .left-side-bar .side-list li a:hover, #faq #page #container .left-side-bar .side-list li a.current {
            background-color: #191919;
            color: #ff6b00; }
          #faq #page #container .left-side-bar .side-list li a:hover {
            background-position: -100% 0; }
          #faq #page #container .left-side-bar .side-list li a span {
            line-height: 60px; }
    #faq #page #container .right-contents {
      width: 94%;
      padding: 4% 3%; }
      #faq #page #container .right-contents section {
        padding-bottom: 50px; }
        #faq #page #container .right-contents section .section-title {
          margin: 0 0 20px;
          position: relative; }
          #faq #page #container .right-contents section .section-title h3 {
            font-size: 1.8rem;
            margin-bottom: 15px; }
          #faq #page #container .right-contents section .section-title .section-bar {
            position: relative;
            width: 100%;
            height: 2px; }
            #faq #page #container .right-contents section .section-title .section-bar span {
              background: #ff6b00;
              width: 42px;
              height: 100%;
              display: block;
              position: relative;
              z-index: 2; }
        #faq #page #container .right-contents section .section-contents table {
          width: 100%; }
          #faq #page #container .right-contents section .section-contents table .question-list {
            border-bottom: 1px solid rgba(225, 222, 218, 0.2); }
            #faq #page #container .right-contents section .section-contents table .question-list th {
              width: 30px;
              color: #ff6b00; }
            #faq #page #container .right-contents section .section-contents table .question-list td a {
              padding: 35px 0 35px 15px;
              display: block; }
          #faq #page #container .right-contents section .section-contents table.detail .question-list {
            border-bottom: none; }
            #faq #page #container .right-contents section .section-contents table.detail .question-list th {
              width: 30px;
              color: #ff6b00; }
            #faq #page #container .right-contents section .section-contents table.detail .question-list td {
              padding: 0 0 0 15px;
              display: block; }
          #faq #page #container .right-contents section .section-contents table.detail .answer-list {
            border-bottom: 1px solid rgba(225, 222, 218, 0.2); }
            #faq #page #container .right-contents section .section-contents table.detail .answer-list th {
              width: 30px;
              color: #ffae00; }
            #faq #page #container .right-contents section .section-contents table.detail .answer-list td {
              padding: 25px 0 25px 15px; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td ul, #faq #page #container .right-contents section .section-contents table.detail .answer-list td ol {
                padding: 0 0 0 2rem; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td ul li {
                list-style-type: disc; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td ol li {
                list-style-type: decimal; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td .attention {
                font-size: 1.2rem;
                padding: 0 0 0 1em;
                text-indent: -1em; }
              #faq #page #container .right-contents section .section-contents table.detail .answer-list td a {
                color: #ff6b00;
                text-decoration: underline; }

  /* ====================
    @TRIAL
  ===================== */
  #trial #page .sub-main div {
    background: url(../images/trial/sub_main.jpg) no-repeat center 0;
    background-size: contain; }
    #trial #page .sub-main div span {
      text-align: center; }
      #trial #page .sub-main div span em {
        font-size: 1.6rem;
        display: block;
        margin: 0 0 10px; }
      #trial #page .sub-main div span small {
        font-size: 1.4rem; }
  #trial #page #container .inner {
    padding: 8% 2% 5%; }
    #trial #page #container .inner section {
      margin: 0 0 40px; }
      #trial #page #container .inner section .left-side-bar {
        background-color: #000;
        padding: 3% 0; }
        #trial #page #container .inner section .left-side-bar .section-title {
          text-align: center;
          position: relative; }
          #trial #page #container .inner section .left-side-bar .section-title h3 {
            font-size: 2.6rem;
            line-height: 1; }
          #trial #page #container .inner section .left-side-bar .section-title .section-bar {
            position: relative;
            width: 100%;
            height: 2px; }
            #trial #page #container .inner section .left-side-bar .section-title .section-bar span {
              background: #fff;
              width: 30px;
              height: 100%;
              display: block;
              position: relative;
              z-index: 2;
              margin: 15px auto 0; }
          #trial #page #container .inner section .left-side-bar .section-title h4 {
            font-size: 1.8rem;
            color: #ff6b00;
            line-height: 1;
            margin: 15px 0 10px; }
            #trial #page #container .inner section .left-side-bar .section-title h4.last {
              font-size: 1.6rem; }
          #trial #page #container .inner section .left-side-bar .section-title h5 {
            font-size: 1.6rem;
            letter-spacing: 0; }
      #trial #page #container .inner section .right-contents {
        background-color: #222;
        padding: 3%;
        position: relative; }
        #trial #page #container .inner section .right-contents:not(.none)::after {
          display: block;
          content: '▼';
          position: absolute;
          line-height: 1;
          bottom: -20px;
          left: 50%;
          margin-left: -15px;
          font-size: 30px;
          color: #222; }
        #trial #page #container .inner section .right-contents .sub-tit {
          font-size: 1.6rem;
          color: #ff6b00;
          margin: 0 0 20px; }
        #trial #page #container .inner section .right-contents .text {
          line-height: 2; }
          #trial #page #container .inner section .right-contents .text .attention {
            font-size: 1.2rem; }
          #trial #page #container .inner section .right-contents .text .inline {
            border: 1px solid #333;
            padding: 15px 20px;
            margin: 20px 0 10px; }
            #trial #page #container .inner section .right-contents .text .inline span {
              padding: 10px 12px;
              display: block; }
              #trial #page #container .inner section .right-contents .text .inline span:first-child {
                padding: 0 12px 10px; }
              #trial #page #container .inner section .right-contents .text .inline span:last-child {
                padding: 10px 12px 0; }
              #trial #page #container .inner section .right-contents .text .inline span:not(:last-child) {
                border-bottom: 1px solid #333; }
              #trial #page #container .inner section .right-contents .text .inline span em {
                color: #ff6b00; }
        #trial #page #container .inner section .right-contents .btn-page {
          width: 80%;
          text-align: center;
          margin: 25px auto 10px; }
          #trial #page #container .inner section .right-contents .btn-page a {
            background-color: #ff6b00;
            font-size: 1.6rem;
            padding: 18px 0;
            display: block; }
            #trial #page #container .inner section .right-contents .btn-page a:hover {
              color: #fff; }
        #trial #page #container .inner section .right-contents .text-link {
          background: url(../images/trial/icon_arrow_s.png) no-repeat 0 0;
          width: 70%;
          padding: 0 0 0 10px;
          margin: 0 auto; }
          #trial #page #container .inner section .right-contents .text-link a {
            color: #ff6b00;
            text-decoration: underline;
            padding: 0 0 0 4px; }
            #trial #page #container .inner section .right-contents .text-link a:hover {
              text-decoration: none; }
        #trial #page #container .inner section .right-contents span.strong {
          color: #ff6b00;
          font-weight: 600; }
        #trial #page #container .inner section .right-contents ul li {
          background-repeat: no-repeat;
          background-position: 0 2px;
          background-size: 15px;
          padding: 0 0 20px; }
          #trial #page #container .inner section .right-contents ul li:first-child {
            background-image: url(../images/trial/number01.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(2) {
            background-image: url(../images/trial/number02.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(3) {
            background-image: url(../images/trial/number03.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(4) {
            background-image: url(../images/trial/number04.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(5) {
            background-image: url(../images/trial/number05.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(6) {
            background-image: url(../images/trial/number06.gif); }
          #trial #page #container .inner section .right-contents ul li:nth-child(7) {
            background-image: url(../images/trial/number07.gif); }
          #trial #page #container .inner section .right-contents ul li > div {
            margin: 0 0 0 20px; }
            #trial #page #container .inner section .right-contents ul li > div .inline {
              border: 1px solid #333;
              padding: 15px 20px;
              margin: 20px 0 10px; }
              #trial #page #container .inner section .right-contents ul li > div .inline p {
                padding: 0 0 10px 8px;
                overflow: hidden;
                clear: both; }
                #trial #page #container .inner section .right-contents ul li > div .inline p:first-child {
                  padding: 0 0 10px 8px; }
                #trial #page #container .inner section .right-contents ul li > div .inline p:last-child {
                  padding: 10px 0 0 8px; }
                #trial #page #container .inner section .right-contents ul li > div .inline p:not(:last-child) {
                  border-bottom: 1px solid #333; }
                #trial #page #container .inner section .right-contents ul li > div .inline p em {
                  color: #ff6b00; }
                #trial #page #container .inner section .right-contents ul li > div .inline p span {
                  float: right; }
            #trial #page #container .inner section .right-contents ul li > div .attention {
              font-size: 1.2rem; } 


  /* ====================
    @RECRUIT
  ===================== */
  #recruit #page .inner {
    padding: 5% 2% 6%; }
    #recruit #page .inner .page-navi {
      width: 100%;
      margin: 0 auto; }
      #recruit #page .inner .page-navi li {
        background-color: #000;
        width: 49%;
        height: 100px;
        padding: 0 5%;
        margin: 0 0 2%;
        box-sizing: border-box;
        text-align: center;
        position: relative; }
        #recruit #page .inner .page-navi li:nth-child(even) {
          margin: 0 0 2% 2%; }
        #recruit #page .inner .page-navi li a {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          /* 左から半分 */
          width: 100%;
          /* 大枠と同じ幅に */
          /* 要素の大きさの半分引く（CSS3） */
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          #recruit #page .inner .page-navi li a span {
            font-weight: 300;
            margin: 0 auto;
            display: block; }
            #recruit #page .inner .page-navi li a span:first-child {
              border-bottom: 1px solid #ff6b00;
              font-size: 1.5rem;
              padding: 0 0 6px;
              margin: 0 auto 6px; }
              #recruit #page .inner .page-navi li a span:first-child.navi01 {
                width: 80%; }
              #recruit #page .inner .page-navi li a span:first-child.navi02 {
                width: 80%; }
              #recruit #page .inner .page-navi li a span:first-child.navi03 {
                width: 80%; }
              #recruit #page .inner .page-navi li a span:first-child.navi04 {
                width: 80%; }
    #recruit #page .inner section {
      margin: 30px auto 0; }
      #recruit #page .inner section h3 {
        color: #ff6b00;
        font-weight: 600;
        font-size: 2.2rem;
        line-height: 1; }
      #recruit #page .inner section > p {
        font-size: 1.5rem;
        margin: 15px 0 20px; }
      #recruit #page .inner section table {
        width: 100%; }
        #recruit #page .inner section table tr th, #recruit #page .inner section table tr td {
          border-top: 1px solid #666666;
          border-bottom: 1px solid #666666;
          font-size: 1.4rem;
          letter-spacing: 0;
          padding: 2%; }
          #recruit #page .inner section table tr th:not(:first-child), #recruit #page .inner section table tr td:not(:first-child) {
            border-left: 1px solid #666666; }
        #recruit #page .inner section table tr th {
          background-color: #000;
          color: #fff;
          text-align: center;
          vertical-align: middle; }
          #recruit #page .inner section table tr th span {
            font-size: 1.2rem; }
        #recruit #page .inner section table tr td {
          background-color: #fff;
          color: #000;
          line-height: 1.8;
          vertical-align: middle; }
          #recruit #page .inner section table tr td:first-child {
            width: 25%;
            color: #ff6b00; }
          #recruit #page .inner section table tr td:last-child {
            width: 27%; }
          #recruit #page .inner section table tr td .border {
            border-bottom: 1px solid #000;
            padding: 0 0 6px;
            margin: 0 0 6px; }
      #recruit #page .inner section .attention {
        margin: 10px 0 0; }
        #recruit #page .inner section .attention a {
          color: #ff6b00;
          text-decoration: underline; }
  #recruit .for-visitor {
    text-align: center;
    padding: 50px 2% 60px; }
    #recruit .for-visitor p {
      font-size: 2.4rem;
      line-height: 1;
      margin: 0 0 15px; }
    #recruit .for-visitor span {
      font-size: 1.4rem;
      line-height: 2.5; }
    #recruit .for-visitor .btn-page {
      width: 80%;
      text-align: center;
      margin: 25px auto 0; }
      #recruit .for-visitor .btn-page a {
        background-color: #ff6b00;
        font-size: 1.6rem;
        color: #000;
        font-weight: 600;
        padding: 9px 0 9px;
        display: block; }
        #recruit .for-visitor .btn-page a span {
          font-size: 1.4rem;
          font-weight: 600;
          display: block; }

}