/* Theme Name: Yellowtails Inc. (mobile) */

/* ---------------------------------------------------------------- */
/* common */
/* ---------------------------------------------------------------- */

body {
    font-size: 16px;
    font-family: 'Noto Sans JP', Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 26px;
    word-break: break-all;
    /* text-size-adjust: none; */
    /* -webkit-text-size-adjust: 100%; */
}

.wrapper {
    margin: 0 auto;
    width: 100%;
}

a:hover img {
    opacity: 1;
}

a.bo {
    text-decoration: underline;
}

a.bo:hover {
    text-decoration: underline;
}

a.no-bo {
    text-decoration: underline;
}

a.no-bo:hover {
    text-decoration: underline;
}

.pc {
    display: none;
}

.mobi {
    display: block;
}

.mt20 {
    margin-top: 2.5% !important;
}

/* ---------------------------------------------------------------- */
/* header */
/* ---------------------------------------------------------------- */

.mobi header {
    background: #fff;
    box-sizing: border-box;
    padding: 10px 2.5%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.head-logo-mobi img {
    height: 31px;
    width: auto;
}

.menu-btn {
    display: block;
    margin: 5px auto 0;
    position: relative;
    width: 30px;
    height: 27px;
}

.menu-btn, .menu-btn span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.menu-btn span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
}

.menu-btn span:nth-of-type(1) {
    top: 0;
}

.menu-btn span:nth-of-type(2) {
    top: 9px;
}

.menu-btn span:nth-of-type(3) {
    bottom: 5px;
}

.menu-btn.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
    top: -11px;
}

.menu-btn.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-btn.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
    bottom: -6px;
}

.sp-menu {
    background: #ffca08;
    box-sizing: border-box;
    display: none;
    padding: 2.5%;
    position: fixed;
    width: 100%;
    z-index: 9990;
}

.sp-menu li a {
    color: #000;
    display: block;
    font-family: "avenir-heavy";
    font-weight: bold;
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 2.5%;
    text-align: center;
    text-decoration: none;
}

.sp-menu li:last-child a {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* top - kv */
/* ---------------------------------------------------------------- */

.kv {
    background: url(../../uploads/img/top-img.png) no-repeat;
    background-size: cover;
    height: 350px;
    margin-top: 51px;
    width: 100%;
}

.kv-title-1 {
    top: 45px;
    width: 300px;
}

.kv-title-2 {
    font-size: 28px;
    line-height: 33px;
}

.kv-title-4.mobi {
    display: flex;
}

/* ---------------------------------------------------------------- */
/* top */
/* ---------------------------------------------------------------- */

.top-bg-1 {
    background: #fff;
    background-size: contain;
    box-sizing: border-box;
    padding: 30px 0;
    position: relative;
    width: 100%;
}

.top-bg-1.top-page {
    padding: 0;
}

.top-bg-1.news-top {
    margin-bottom: -30px;
    padding-bottom: 0;
}

.top-bg-2 {
    background-image: none;
    background: #ececec;
    background-size: 100%;
    background-position: top,bottom,center;
    background-repeat: no-repeat,no-repeat,repeat-y;
    box-sizing: border-box;
    padding: 0;
}

.content-info {
    margin-bottom: 0px;
    background-color: #232939;
}

.content-info .left,
.content-info .right {
    float: none;
}

.content-title {
    padding: 30px 2.5%;
    text-align: center;
}

.content-title h2 {
    font-size: 40px;
    line-height: 40px;
}

.content-text {
    width: 100%;
    padding: 30px 2.5%;
}

.content-text-service {
    width: 100%;
    background-color: #ececec;
    padding: 30px 2.5%;
}

/* ---------------------------------------------------------------- */
/* top - latest */
/* ---------------------------------------------------------------- */

.top-latest {
    background: #ffca08;
    box-shadow: 8px 8px 8px 0 #666;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -160px;
    width: 90%;
}

.latest-1 a {
    float: none;
    padding: 10px;
    position: relative;
    text-decoration: none;
    width: 100%;
}

.latest-1 a::after {
    bottom: 18px;
    left: 110px;
    right: 0;
}

.latest-2 {
    background: #fff;
    box-sizing: border-box;
    margin-left: 0;
    min-height: auto;
    padding: 10px;
}

.latest-in.left,
.latest-link.left {
    float: none;
}

.latest-in {
    margin-bottom: 2.5%;
}

.vision-img {
    width: 100%!important;
    margin-left: 0!important;
    /*margin-top: 50px!important;*/
    margin-top: 1px!important;
}

/* ---------------------------------------------------------------- */
/* top - slider */
/* ---------------------------------------------------------------- */

.service-slider .pc {
    display: none !important;
}

.service-slider .mobi {
    display: block !important;
}

.service-slider {
    margin-bottom: 0;
}

.service-slider li img {
    height: 130px;
    margin: 0 auto;
    width: auto;
}

.slick-slider {
    margin-top: 10px;
    margin-left: 0;
    width: 100%;
}

.slick-prev, .slick-next {
    height: 35px !important;
    width: 35px !important;
}

.slick-prev {
    left: 0 !important;
    top: 160px !important;
}

.slick-prev:before {
    content: url(../img/sp.slider-prev.png) !important;
    height: 35px;
    width: 35px;
}

.slick-next {
    left: 45px !important;
    right: 0 !important;
    top: 160px !important;
}

.slick-next:before {
    content: url(../img/sp.slider-next.png) !important;
    height: 35px;
    width: 35px;
}

@media (min-width: 568px) {
  .service-slider li img {
      height: 220px;
  }
  .slick-prev,
  .slick-next {
      top: 245px !important;
  }
}

/* ---------------------------------------------------------------- */
/* top - news */
/* ---------------------------------------------------------------- */

.top-news {
    margin-top: 70px;
    padding: 0;
}

.top-news .left,
.top-news .right {
    float: none;
}

.top-news-title {
    width: 100%;
    background-color: #232939;
    margin-bottom: 20px;
    padding: 10px;
}

.top-news-title-inner {
    width: 100px;
    text-align: center;
    margin: 0 auto;
}

.top-news-title h2 {
    color: #ffcb08;
    font-family: "avenir-heavy";
    font-weight: bold;
    font-size: 30px;
    line-height: 40px;
}

.top-news-link {
    color: #fff;
    display: block;
    font-family: "avenir-heavy";
    font-weight: bold;
    height: 40px;
    position: relative;
    text-align: right;
    text-decoration: none;
}

.top-news-link::after {
    background: url(../../uploads/img/link-icon-1.png) no-repeat;
    background-size: 100%;
    bottom: 0;
    content: "";
    height: 9px;
    position: absolute;
    right: 0;
    width: 27px;
}

.top-news-list {
    width: 100%;
    margin: 10px;
}

.news-1 {
    clear: both;
    float: none;
    margin-bottom: 2.5%;
    overflow: hidden;
    width: 100%;
}

.news-2 {
    margin-top: 0;
    margin-left: 0;
}

.news-date {
    float: left;
    margin-right: 20px;
}

.news-cate {
    float: left;
    margin-right: 0;
    width: 100px;
}

/* ---------------------------------------------------------------- */
/* top - company */
/* ---------------------------------------------------------------- */

.top-company {
    height: 604px;
    position: relative;
}

.top-company .left,
.top-company .right {
    float: none;
}

.company-info {
    position: relative;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.company-in {
    background: #ffcb08;
    height: auto;
    margin-left: -2.5%;
    padding: 10px 2.5%;
    position: relative;
    width: 100%;
    top: 0;
    width: 105%;
    z-index: 0;
}

.company-title h2 {
    font-size: 30px;
    line-height: 40px;
}

.company-in ul {
    margin: 20px auto 0;
    overflow: hidden;
    width: 100%;
}

.company-in ul li {
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
    position: relative;
}

.company-in ul li:last-child {
    margin-right: 0;
    margin-bottom: 0;
}

.company-in ul li::after {
    content: none;
}

.company-map {
    margin-left: -2.5%;
    position: relative;
    right: 0;
    width: 105%;
    z-index: 0;
}

.access-link {
    display: none;
}

.access-map-btn img {
    bottom: 0;
    left: 0;
    height: auto;
    margin: 0 auto 20px;
    position: absolute;
    right: 0;
    width: 80%;
    z-index: 10;
}

#company-map-in {
    height: 400px;
    margin-top: 0;
    width: 100%;
}

/* ---------------------------------------------------------------- */
/* top - greeting */
/* ---------------------------------------------------------------- */

.top-greeting {
    background: url(../../uploads/img/bg-greeting.png);
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    height: auto;
    padding: 30px 2.5%;
    width: 100%;
}

.top-greeting .left,
.top-greeting .right {
    float: none;
}

.top-greeting img {
    height: auto;
    margin: 0 auto;
    width: 80%;
}

.greeting-text {
    margin-top: 20px;
    width: 100%;
}

.greeting-text h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------- */
/* top - recruit */
/* ---------------------------------------------------------------- */

.top-recruit {
    background: #ffcb08;
    background-position: center;
    background-size: contain;
    box-sizing: border-box;
    height: auto;
    padding: 30px 2.5%;
    position: relative;
    width: 100%;
}

.top-recruit-in-sp {
    background: url(../../uploads/img/sp.recruit-main-middle.png);
    background-size: 100%;
    box-sizing: border-box;
    padding: 2.5% 18.5%;
}

.top-recruit-btn {
    bottom: 0;
    margin: 5% auto 0;
    padding: 10px 40px;
    position: relative;
    width: 205px;
}

.top-recruit-btn::after {
    background: url(../../uploads/img/link-icon-1.png) no-repeat;
    background-size: 100%;
    content: "";
    height: 9px;
    position: absolute;
    right: 25px;
    top: 16px;
    width: 27px;
}

.top-recruit-text {
    margin-top: 10px;
}

/* ---------------------------------------------------------------- */
/* footer - entry */
/* ---------------------------------------------------------------- */

.foot-entry {
    background: #fff;
    box-sizing: border-box;
    padding: 10px 0;
}

.entry-link {
    font-size: 30px;
    line-height: 40px;
    margin-right: 10px;
}

.entry-mini {
    line-height: 40px;
}

.foot-entry-btn {
    width: 265px;
}

/* ---------------------------------------------------------------- */
/* footer */
/* ---------------------------------------------------------------- */

.foot-main .wrapper.of {
    overflow: visible;
}

.foot-main {
    padding: 30px 0;
}

.foot-main .left,
.foot-main .right {
    float: none;
}

.foot-logo {
    height: auto;
    margin-top: 0;
    margin-right: 0;
    margin: 0 auto 20px;
    width: 200px;
}

.foot-copy {
    margin-top: -20px;
    padding-bottom: 20px;
    font-size: 12px;
    text-align: center;
}

.foot-menu {
    margin-left: -2.5%;
    width: 105%;
}

.foot-menu ul li {
    float: none;
    margin-right: 0;
    padding-left: 2.5%;
}

.foot-menu ul li:last-child {
    margin-right: 0;
}

.foot-menu ul li a {
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    color: #fff;
    display: block;
    font-weight: bold;
    line-height: 26px;
    padding: 10px 2.5%;
    text-decoration: none;
}

.foot-menu ul li:first-child a {
    border-top: 1px solid #fff;
}

.foot-address {
    font-size: 16px;
    line-height: 26px;
    margin: 20px auto 0;
    width: 100%;
    padding-left: 2.5%;
}

.pagetop img {
    bottom: 20px;
    cursor: pointer;
    height: 200px;
    position: fixed;
    right: 0;
    width: auto;
    z-index: 20;
}

/* ---------------------------------------------------------------- */
/* breadcrumbs */
/* ---------------------------------------------------------------- */

.breadcrumbs {
    background: #fff;
    box-sizing: border-box;
    padding: 10px 0;
    padding-left: 2.5%;
}

.breadcrumbs .post-share {
    margin-right: 10px;
    text-align: center;
}

/* ---------------------------------------------------------------- */
/* fadein */
/* ---------------------------------------------------------------- */

.is-top-page .fadein_b.scrollin:not(.t-center) {
    background-color: #232939;
}

/* ---------------------------------------------------------------- */
/* title-kv */
/* ---------------------------------------------------------------- */

.title-kv-in {
    font-size: 40px;
    line-height: 50px;
}

/* ---------------------------------------------------------------- */
/* vison */
/* ---------------------------------------------------------------- */

.vision-kv {
    background: url(../../uploads/img/vision/vision-kv.jpg) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    color: #fff;
    margin-top: 51px;
    padding: 30px 0;
    width: 100%;
}

.vision-in {
    margin-top: 30px;
    padding: 0 2.5%;
    text-align: left;
}

.vision-in h2 {
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 30px;
}

.mission-con {
    background: #fff;
    box-sizing: border-box;
    height: auto;
    position: relative;
}

.mission-title {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
}

.mission-title h2 {
    color: #ffcb08;
    font-family: "avenir-heavy";
    font-weight: bold;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
    position: relative;
}

.mission-title h2::after {
    border-bottom: 3px solid #ffcb08;
    bottom: -5px;
    content: "";
    left: 0;
    position: absolute;
    width: 200px;
}

.mission-text {
    line-height: 28px;
    margin-top: 30px;
    padding: 0 2.5%;
    position: relative;
    width: 100%;
    z-index: 20;
}

.mission-con img.right {
    height: auto;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}

.vision-con {
    background: #f3f3f3;
    box-sizing: border-box;
    height: 700px;
    margin-top: -160px;
    position: relative;
}

.vision-title {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
}

.vision-title h2 {
    color: #ffcb08;
    font-family: "avenir-heavy";
    font-weight: bold;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
    position: relative;
}

.vision-title h2::after {
    border-bottom: 3px solid #ffcb08;
    bottom: -5px;
    content: "";
    left: 0;
    position: absolute;
    width: 200px;
}

.vision-text {
    line-height: 28px;
    margin-top: 130px;
    padding: 0 2.5%;
    position: relative;
    width: 100%;
    z-index: 10;
}

.vision-con img.left {
    height: auto;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
}

.value-img {
    background: url(../../uploads/img/vision/value-img.png);
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    height: auto;
    padding-bottom: 31.60%;
    width: 100%;
}

.value-text {
    background: #fff;
    box-sizing: border-box;
    line-height: 28px;
    padding: 20px 2.5%;
}

.value-title {
    margin-bottom: 20px;
}

.value-title h2 {
    color: #ffcb08;
    font-family: "avenir-heavy";
    font-weight: bold;
    font-size: 40px;
    line-height: 50px;
    margin: 0 auto 20px;
    position: relative;
    width: 240px;
}

/* ---------------------------------------------------------------- */
/* company */
/* ---------------------------------------------------------------- */

.company-kv {
    background: url(../../uploads/img/company-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    color: #ffcb08;
    height: 350px;
    margin-top: 51px;
    padding-top: 100px;
    width: 100%;
}

.company-main {
    margin: -130px 0 30px;
}

.company-main-in {
    box-sizing: border-box;
    padding: 30px 2.5%;
}

.company-main-in h2 {
    font-size: 40px;
    line-height: 50px;
}

.table-info {
    margin: 20px auto 0;
    width: 100%;
}

.table-info.company-t {
    width: 100%;
}

.table-1 {
    float: none;
    padding: 5px 0;
    width: 100%;
}

.table-2 {
    box-sizing: border-box;
    border-left: 0;
    border-top: 1px solid #ffcb08;
    margin-left: 0;
    padding: 5px 0;
}

.company-main .top-news {
    background: #ececec;
    margin-top: 0;
    padding: 30px 10px 2.5%;
}

.company-main .top-news-list {
    width: 100%;
}

.officer {
    margin-top: 10%;
}

.officer-list {
    padding: 5% 0;
}

.officer-list .left,
.officer-list .right {
    float: none;
}

.officer-list img {
    height: auto;
    margin: 0 auto 20px;
    width: 70%;
}

.officer-text {
    width: 100%;
}

.officer-list ul li {
    float: none;
    margin-bottom: 20px;
    width: 100%;
}

.officer-list ul li:last-child {
    margin-bottom: 0;
}

.officer-list ul li strong {
    font-weight: bold;
    font-size: 26px;
    line-height: 36px;
}

.content-mini-title {
    margin-bottom: 5%;
}

.content-mini-title h2 {
    font-size: 40px;
    line-height: 50px;
}

.content-mini-text {
    color: #373737;
    width: 100%;
}

.content-mini-info .left,
.content-mini-info .right {
    float: none;
}

#company-group {
     padding-left: 2.5%;
     padding-right: 2.5%;
}

.group {
    margin-bottom: 30px;
}

.group:last-child {
    margin-bottom: 0;
}

.group img {
    height: auto;
    width: 100%;
}

.group-text {
    margin-top: 10px;
}

.group-link {
    width: 180px;
}

.access-main-in {
    background: #fff;
    box-sizing: border-box;
    padding: 10px 2.5%;
}

.access-main-in strong {
    display: block;
    font-family: "avenir-heavy";
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 5px;
    line-height: 34px;
    margin-right: 0;
}

/* ---------------------------------------------------------------- */
/* news */
/* ---------------------------------------------------------------- */

.news-kv {
    background: url(../../uploads/img/news-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    color: #ffcb08;
    height: 350px;
    margin-top: 51px;
    padding-top: 100px;
    width: 100%;
}

.news-itiran {
    margin: -120px 0 30px;
    padding: 30px 0;
}

.news-cate-link {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.news-cate-link ul {
    width: 270px;
}

.news-cate-link li {
    font-family: "avenir-heavy";
    float: left;
    font-size: 14px;
    letter-spacing: 5px;
    margin-right: 15px;
    position: relative;
}

.news-cate-link li::after {
    content: "/";
    position: absolute;
    right: -12px;
}

.news-list {
    margin: 0 2.5%;
}

.news-list li {
    float: none;
    margin: 0 0 30px 0;
    width: 100%;
}

.news-list li:nth-last-child(-n+2) {
    margin-bottom: 30px;
}

.news-list li:last-child {
    margin-bottom: 0;
}

.news-list-info {
    margin-bottom: 2.5%;
}

.news-list-in {
    height: 78px;
    margin-right: 0;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}

.news-list-date {
    font-family: "avenir-heavy";
    float: left;
}

.news-list-cate {
    bottom: 10px;
    display: block;
    margin-right: 0;
    position: absolute;
    right: 0;
}

.news-list-img {
    height: auto;
    overflow: hidden;
    width: 100%;
}

.news-list-text a {
    color: #000;
    text-decoration: none;
}

.news-list-text h3 {
    font-weight: bold;
    margin-bottom: 2.5%;
}

/* ---------------------------------------------------------------- */
/* signle */
/* ---------------------------------------------------------------- */

.single {
    margin: -120px 0 30px;
    padding: 30px 2.5%;
}

.single-info {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.single-cate {
    box-sizing: border-box;
    bottom: 0;
    font-size: 12px;
    letter-spacing: 2px;
}

.single-thumb img {
    height: auto;
    margin-bottom: 20px;
    width: 100%;
}

.single-text {
    margin: 0 auto 20px;
    width: 100%;
}

.single-text p {
    margin-bottom: 20px;
}

.single-text img {
    height: auto;
    margin-bottom: 20px;
    width: 100%;
}

.single-text h2 {
    font-weight: bold;
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 20px;
    text-align: center;
}

.single-pager {
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 30px;
}

.single-pager li a {
    box-sizing: border-box;
    color: #000;
    display: block;
    font-family: "avenir-heavy";
    float: left;
    font-size: 12px;
    letter-spacing: 5px;
    padding: 40px 0 70px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

/* ---------------------------------------------------------------- */
/* service */
/* ---------------------------------------------------------------- */

.service-kv {
    background: url(../../uploads/img/service-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 350px;
    margin-top: 51px;
    margin-left: -15%;
    width: 115%;
}

.service-text {
    background: #232939;
    box-sizing: border-box;
    color: #fff;
    float: none;
    margin-top: 0;
    padding: 20px 2.5%;
    width: 100%;
}

.service-in {
    padding: 30px 0;
}

.service-in ul li {
    border-bottom: 0;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.service-in ul li .left,
.service-in ul li .right {
    float: none;
}

.service-con {
    width: 100%;
    padding: 0 2.5%;
}

.service-con-img {
    height: auto;
}

.service-con.left {
    margin-bottom: 30px;
}

/* ---------------------------------------------------------------- */
/* recruit */
/* ---------------------------------------------------------------- */

.recruit-kv {
    background: url(../../uploads/img/recruit-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 350px;
    margin-top: 51px;
    padding: 30px 2.5%;
}

.recruit-text {
    margin-top: 30px;
}

.recruit-top {
    margin-top: -100px;
}

.recruit-info {
    width: 300px;
}

.recruit-link-in ul li {
    float: left;
    margin-right: 45px;
    position: relative;
}

.recruit-base {
    background: #fff;
    box-sizing: border-box;
    padding: 30px 2.5%;
}

.recruit-sec-1 .left,
.recruit-sec-1 .right {
    float: none;
}

.recruit-sec-1 {
    box-sizing: border-box;
    margin-bottom: 30px;
}

.recruit-sec-1-1 {
    left: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.recruit-sec-1-title {
    margin-bottom: 20px;
}

.recruit-sec-1-title h2 {
    font-size: 40px;
    line-height: 50px;
}

.recruit-sec-1-2 {
    position: relative;
    width: 100%;
    z-index: 1;
}

.recruit-sec-1-2 img {
    height: auto;
    margin-top: 10px;
    width: 100%;
}

.recruit-sec-2 {
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 0;
}

.recruit-sec-title .left {
    float: none;
}

.recruit-sec-title h2 {
    font-size: 40px;
    line-height: 40px;
    margin-right: 0;
}

.recruit-sec-bg {
    display: inline-block;
}

.recruit-state {
    margin: 0 auto 30px;
    width: 100%;
}

.recruit-state li {
    float: none;
    margin: 0;
    margin-bottom: 30px;
    width: 100%;
}

.recruit-state li:nth-last-child(-n+2) {
    margin-bottom: 30px;
}

.recruit-state li:last-child {
    margin-bottom: 0;
}

.recruit-apply {
    margin: 0;
}

.staff-itiran {
    padding: 30px 0 30px;
}

.staff-title {
    color: #ffcb08;
    margin-bottom: 20px;
    text-align: center;
}

.staff-title .staff-title-in {
    font-size: 40px;
    line-height: 40px;
}

.staff-list {
    margin: 0 auto;
    width: 300px;
}

.staff-list li {
    float: none;
    margin-bottom: 30px;
    width: 100%;
}

.staff-list li:nth-child(3n) {
    margin: 0 auto 30px;
}

.staff-list li:last-child {
    margin-bottom: 0;
}

.staff-text-in {
    font-size: 20px;
    line-height: 30px;
    height: 341px;
    padding: 10px;
}

.staff-img {
    height: 305px;
    width: 300px;
}

@media (min-width: 568px) {
  .staff-list {
      width: 500px;
  }
  .staff-list li {
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
      width: 240px;
  }
  .staff-list li:nth-child(2n) {
      margin-right: 0 !important;
  }
  .staff-list li:nth-child(3n) {
      margin: 0 20px 20px 0;
  }
  .staff-list li:nth-last-child(-n+2) {
      margin-bottom: 0;
  }
  .staff-text-in {
      height: 244px;
  }
  .staff-img {
      height: 244px;
      width: 100%;
  }
}

.recruit-bg-1 {
    background: url(../../uploads/img/bg-3.png);
    background-size: 100%;
    box-sizing: border-box;
    height: 1200px;
    position: relative;
}

.recruit-bg-1 .wrapper {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 300px;
}

.recruit-bg-1 .left,
.recruit-bg-1 .right {
    float: none;
}

.recruit-bg-2 {
    background: url(../../uploads/img/bg-4.png);
    background-size: 100%;
    bottom: 0;
    box-sizing: border-box;
    height: 80%;
    position: absolute;
    width: 100%;
}

.recruit-main {
    width: 100%;
}

.recruit-main-title {
    color: #ffcb08;
    margin-bottom: 20px;
    position: relative;
}

.recruit-main-title::after {
    content: none;
}

.recruit-main-title-in {
    font-size: 40px;
    line-height: 50px;
}

.recruit-flow {
    width: 100%;
}

.recruit-flow ul {
    margin: 30px 0;
}

.recruit-flow ul li {
    margin-bottom: 30px;
}

.recruit-flow-title-in {
    font-size: 30px;
    line-height: 40px;
}

/* ---------------------------------------------------------------- */
/* staff */
/* ---------------------------------------------------------------- */

.staff-kv {
    background: url(../../uploads/img/staff-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 350px;
    margin-top: 51px;
    padding: 30px 2.5%;
}

.staff-kv .title-kv {
    color: #fff;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.staff-kv .title-kv-in {
    float: none;
    margin-right: 0;
}

.staff-kv h1 {
    float: none;
    line-height: 27px;
}

.staff-top {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(247,247,247,0) 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 80%, rgba(35,41,57,1) 80%, rgba(35,41,57,1) 100%); /* FF 3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(247,247,247,0) 30%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 80%,rgba(35,41,57,1) 80%,rgba(35,41,57,1) 100%); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(247,247,247,0) 30%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 80%,rgba(35,41,57,1) 80%,rgba(35,41,57,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#232939',GradientType=0 ); /* IE 6-9 */
    box-sizing: border-box;
    margin-top: -120px;
}

.staff-in {
    margin: 0 auto;
    width: 300px;
}

.staff-main-info {
    background: rgba(255, 203, 8, 1);
    bottom: 0;
    left: 0;
    padding: 10px;
    position: relative;
    width: 100%;
}

.staff-main-title {
    font-size: 23px;
    line-height: 33px;
    margin-bottom: 10px;
}

.staff-main-info-in {
    padding-left: 10px;
}

.staff-name {
    font-size: 23px;
    line-height: 33px;
}

.staff-in .staff-text {
    padding: 20px;
}

.staff-in h3 {
    font-size: 23px;
    line-height: 33px;
    margin-bottom: 20px;
}

.staff-in h3.bg-y {
    padding: 5px 10px;
}

.interview .left,
.interview .right {
    float: none;
}

.interview-text.left,
.interview-text.right {
    width: 100%;
}

.interview img {
    height: auto;
    margin-bottom: 10px;
    width: 100%;
}

@media (min-width: 568px) {
  .staff-in {
      width: 500px;
  }
}

/* ---------------------------------------------------------------- */
/* contact */
/* ---------------------------------------------------------------- */

.contact-kv {
    background: url(../../uploads/img/contact-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 350px;
    margin-top: 51px;
    padding-top: 30px;
    width: 100%;
}

.entry-kv {
    background: url(../../uploads/img/entry-kv.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 350px;
    margin-top: 51px;
    padding-top: 30px;
    width: 100%;
}

.form-top {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(32,37,52,0) 6%, rgba(35,41,57,1) 6%, rgba(35,41,57,1) 100%); /* FF 3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(32,37,52,0) 6%,rgba(35,41,57,1) 6%,rgba(35,41,57,1) 100%); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(32,37,52,0) 6%,rgba(35,41,57,1) 6%,rgba(35,41,57,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#232939',GradientType=0 ); /* IE 6-9 */
    box-sizing: border-box;
    margin-top: -120px;
}

.form-top .wrapper {
    background: #fff;
    box-shadow: 8px -8px 8px 0 #666;
    box-sizing: border-box;
    padding: 30px 0 30px;
}

.form-list {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.form-list ul {
    width: 230px;
}

.form-list ul li {
    margin-right: 20px;
}

.form-text-1 {
    margin: 0 2.5% 20px;
    text-align: left;
}

.form-text-2 {
    margin: 0 2.5%;
}

.form-base .form-btn {
    bottom: -90px;
}

.form-base .form-policy {
    margin: 30px 2.5% 90px;
}

.form-table {
    margin: 0 2.5%;
}

.form-btn {
    margin-top: 30px;
    width: 230px;
}

.form-btn::after {
    right: 15px;
}

.form-policy {
    margin: 20px 2.5%;
}

.form-policy-text {
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 300px;
    margin-bottom: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px;
}

/* ---------------------------------------------------------------- */
/* loading */
/* ---------------------------------------------------------------- */

.loading-text {
    top: 40%;
}