/* iPhone Safe Area Insets  */

body {

  padding-top: env(safe-area-inset-top, 0px);

  padding-bottom: env(safe-area-inset-bottom, 0px);

}

/* overwrite for p_top.css:544 */

/* xenoblade3 launch

.kv .swiper-kv .swiper-slide.slide01 {background-image: url("../images/index/kv/slide2207.jpg"); animation: fadeIn 5.2s ease 0s 1 forwards;}

@keyframes fadeIn {

  0% {  opacity: 0; transform: scale(1.1); }

  100% {  opacity: 1;  transform: scale(1);}

}

 */





/* add for p_top.css:544 */

.js_arart { margin-top: 80px; padding: 30px; background: #fff; text-align: center; border-top: solid 1px #333; font-size: 16px; line-height: 2; }

@media (max-width: 768px) {

  .js_arart {  margin: 50px auto -30px; padding: 20px 20px 0; border-top: none; font-size: 3.2vw; line-height: 1.6; letter-spacing: -0.01em;}

}



/* overwrite for p_top.css:921 */

.sec-links ul.min li,

.recruit-subpage .sec-recruit-flow .wrap .recruit-site ul li  {

    width: auto;

    height: 45px;

}

.sec-links ul.min li img,

.recruit-subpage .sec-recruit-flow .wrap .recruit-site ul li img {

    height: 45px;

}

@media (max-width: 768px) {

  .sec-links ul.min { margin: 5.333vw auto 0; }

.sec-links ul.min li  { width: 49%; height: auto; }

.sec-links ul.min li img  { height: auto; }

}



/* company pdf download link */

.broushure-link {

    margin-top: 20px;

    padding: 1em;

    background: #f0f0f0;

    font-weight: 500;

    line-height: 1.6;

    white-space: nowrap;

}

.recruit-subpage .sec-recruit-flow .wrap .recruit-site .bnr {

    width: 300px;

}

/* footer-nav */

@media (min-width: 769px)  {

#sitefooter .inner nav.pc-item .last-item {

    margin-left: 0; }

}

/* outside */

/* add for sitepolicy */

.sitepolicy a[target="_blank"]::after {

  content: "";

  display: inline-block;

  width: 19.2px;

  height: 12px;

  margin-left: 6px;

  background: url("../images/common/icon-blank.png") center center no-repeat;

  background-size: contain;

  vertical-align: -1px;

  transition: transform 0.3s;

}

.share a::after { background-image: none!important;}



/* overwrite for p_top.css:542 */

.kv h1 { width: 100%; height: calc(850 / 900 * 100vh); }

.kv h1 span { position: absolute; right: 30px; bottom: 30px; font-size: 14px; font-family: "Noto Sans JP",sans-serif; letter-spacing: -.3px; font-weight: 500; text-shadow: -1px -1px 0 #e1e1e1, -1px 0 0 #e1e1e1, -1px 1px 0 #e1e1e1, 0 -1px 0 #e1e1e1, 0 1px 0 #e1e1e1, 1px -1px 0 #e1e1e1,  1px 0 0 #e1e1e1,  1px 1px 0 #e1e1e1;  }



/* overwrite for p_top.css:791 */

.sec-games .wrap ul li img { box-shadow: none; filter: drop-shadow(16px 16px 12px rgba(0,0,0,0.28)); }



/* overwrite for p_top.css:848 */

#content.top .sec-news .wrap .news-archive .item a.disabled { cursor: default; }

#content.top .sec-news .wrap .news-archive .item a.disabled:hover { text-decoration: none; }



/* overwrite for p_news.css:844 */

#content.news.subpage main section.archives .item div a.disabled { cursor: default; }

#content.news.subpage main section.archives .item div a.disabled:hover { text-decoration: none; }



/* overwrite for p_techblog.css:599 */

.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text br:nth-of-type(2) { display: none; }



/* add for p_techblog */

.code li, code p, code span { font-family: SFMono-Regular, Consolas, 'Courier New', Meiryo, monospace; }



/* overwrite for p_techblog.css:500 */

.mce-content-body .code-box ol li, .entrybody .code-box ol li, .wysiwyg.entry .code-box ol li, .tox-navobj .code-box ol li { font-size: 14px; /* letter-spacing: -.1px; */  font-family: monospace; }



/* add for p_techblog */

.techblog .entrybody a[target="_blank"]::after {

  content: "";

  display: inline-block;

  width: 19.2px;

  height: 12px;

  margin-left: 6px;

  background: url("../images/common/icon-blank.png") center center no-repeat;

  background-size: contain;

  vertical-align: -1px;

  transition: transform 0.3s;

}



/* overwrite for p_message.css:329 */

.message main:before { background-image:url("../images/recruit/bg-recruit_top.jpg"); }



/* overwrite for p_message.css:63

.company .sec-access .address p br { display: none; } */



/* overwrite for p_games.css:656 */

.subpage.games .sec-games .wrap ul li i { font-size: 16px; font-family: "Noto Sans JP",sans-serif; letter-spacing: -.2px; font-weight: 700; text-shadow:0 0 3px #fff;}



/* overwrite for p_games.css:739 */

#modal .scroll { padding: 30px 0; }



/* overwrite for p_games.css:761 

#modal .modal-box { height: 840px; }

*/

/* overwrite for p_games.css:780 */

#modal .modal-box .detail { height: 1410px; }



/* overwrite for p_games.css:834 */

#modal .btn-base.btn-window { position: relative; margin-top: 160px; }



/* overwrite for p_recruit.css:411 */

  .recruit-subpage main:after { display: none; }



/* overwrite for p_recruit.css:1223 */

  .welfare main:after { display: none; }



/* overwrite for p_recruit.css:1320 */

.welfare main .sec-data .wrap .box .inner .content-wrap {

    width: 75%;

    position: relative;

    margin: 40px auto 0;

}

/* overwrite for p_recruit.css:1346 */

.welfare main .sec-data .wrap .box .inner .number {

    margin-top: 10px;

    font-size: 74px;

}

/* overwrite for p_recruit.css:1351 */

.welfare main .sec-data .wrap .box .inner .number span {

    font-size: 28px;

     font-weight: bold;

}

/* overwrite for p_recruit.css:1353 */

.welfare main .sec-data .wrap .box:nth-of-type(1) ,

.welfare main .sec-data .wrap .box:nth-of-type(2) {

    width: 540px;

}



/* overwrite for p_recruit.css:1358 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner h3 {

    margin-bottom: 0;

}



/* overwrite for p_recruit.css:1369 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner li:nth-of-type(2) {

    margin-top: -5px;

}

/* overwrite for p_recruit.css:1372 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner li img {

    margin-top: -15px;

    width: 40%;

}



/* overwrite for p_recruit.css:1383 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) {

    height: 190px;

    display: flex;

    padding: 0 0 50px 50px;

}

/* overwrite for p_recruit.css:1383 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(2) {

    height: calc(100% - 210px);

    padding: 40px 0 0;

}



/* overwrite for p_recruit.css:1372 */

.welfare main .sec-data .wrap .box .inner li img {

    width:50%;

}



/* overwrite for p_recruit.css:1387 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) h3 {

    align-self: flex-end;

    padding: 0 34px 28px 0;

}

/* overwrite for p_recruit.css:1390 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) .number {

    align-self: flex-end;

    padding-left: 84px;

}



/* overwrite for p_recruit.css:1396 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) .number .note {

    font-size: 12px;

    font-weight: normal;

    display: block;

    margin-left: -5px;

    font-weight: 400;

}

/* overwrite for p_recruit.css:1402 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(2) {

    height: calc(100% - 210px);

    padding: 40px 0 0;

}

/* overwrite for p_recruit.css:1405 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(2) .note {

    text-align: center;

    font-size: 12px;

    display: block;

    margin: 11px 0 0;

    font-weight: 400;

}



/* overwrite for p_sitepolicy.css */

.error-subpage .btn-base {

    width: 270px;

    height: 44px;

    margin: 30px auto 0;

    background: #000;

    display: block;

    position: relative;

    overflow: hidden;

    border: 1px solid #fff;

}

.error-subpage .btn-base span {

    display: block;

    width: 100%;

    height: 100%;

    position: relative;

    padding: 7px 0 0 83px;

    z-index: 10;

}



@media (max-width: 768px) {



/* overwrite for base.css:766 */

#sitefooter .wrap { padding: 22.266vw 0 22.266vw; }



/* overwrite for p_top.css:951*/

.kv h1 {width: 100%; bottom: 7vw; }

.kv h1 span { right: 2vw; bottom: 3vw; font-size: 1.758vw; }



/* overwrite for p_top.css:943 */

.kv .swiper-kv .swiper-slide.slide01 {background-image: url("https://haw10276gk1w.smartrelease.jp/images/index/kv/bg2207@sp.jpg"); }



/* overwrite for p_techblog.css:586 */

.techblog main .sec-slider { margin-bottom: 4vw; }



/* overwrite for p_techblog.css:599 */

.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text { margin-top: 2vw; }

.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail .text br:nth-of-type(2) { display: inline; }



/* overwrite for p_techblog.css:598 */

.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .detail h2 { font-size: 4vw; margin-top: 2vw; }



/* overwrite for p_techblog.css:616 */

.techblog main .sec-archives { padding-top: 3.5vw; }



/* overwrite for p_techblog.css:617 */

.techblog main .sec-archives h2 { font-size: 4vw; margin-bottom: 4vw; }



/* overwrite for p_games.css:912 */

.subpage.games nav.categories { margin-bottom: 6vw; padding-top: 6vw; }



/* overwrite for p_message.css:57 */

.message main { padding-bottom: 0; }



/* overwrite for p_message.css:166 */

.message .btn-base { margin-bottom: 13.672vw; }



/* overwrite for p_company.css:329 */

.company .sec-access .address p br { display: inline; }



/* overwrite for p_games.css:761 */

#modal .modal-box { height: auto; }



/* overwrite for p_games.css:1023 */

#modal .modal-box .detail { height: auto; }



/* overwrite for p_games.css:1064 */

#modal .btn-base.btn-window { bottom: auto;}



welfare main .sec-data .wrap .box:nth-of-type(1), .welfare main .sec-data .wrap .box:nth-of-type(2) {

    width: 100%;

}

/* overwrite for p_recruit.css:2370 */

.welfare main .sec-data .wrap .box:nth-of-type(1), .welfare main .sec-data .wrap .box:nth-of-type(2) {

    width: 100%;

}

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) {

    height: auto;

    padding: 5.836vw 0 6.813vw 13vw;

}

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(2) {

    height: auto;

    padding: 5.836vw 0 6.813vw;

}

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) .number {

    padding-left: 0;

}

/* overwrite for p_recruit.css:2370 */

.welfare main .sec-data .wrap .box .inner .number {

    font-size: 13.281vw;

    padding-left: 2.977vw;

}

/* overwrite for p_recruit.css:2411 */

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner .text .min {

    font-size: 2.148vw;

    padding-right: 0.441vw;

}

/* overwrite for p_recruit.css:2411 */

.welfare main .sec-data .wrap .box:nth-of-type(2) .inner:nth-of-type(1) h3 {

    padding: 0 4.379vw 4.539vw 0;

}

.welfare main .sec-data .wrap .box:nth-of-type(1) .inner:nth-of-type(1) .number .note {

    font-size: 1.758vw;

    padding-left: .953vw;

}

}



/* styles for new RECRUIT top */

/* bg幾何学追加 */

.bg_wrapper {background: url("../images/recruit/bg-recruit_toppage.jpg") no-repeat center top/1920px auto; }

.recruit main .sec-links { background: none; }

@media (max-width: 768px) {

.bg_wrapper {background: url("../images/recruit/bg-recruit_top@sp.jpg") no-repeat center top/100% auto; }

}

/* news */

.sec-news { 

  width: 1280px;margin: 0 auto;  padding-top: 60px; }

  .sec-news .wrap { width: 100%; display: flex; flex-direction:column;  justify-content: space-between; padding: 0 90px 40px;   }

    .sec-news .wrap h2 { width: 450px; height: 59px; background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; background-image: url("../images/index/news/title_bg.png"); padding: 9px 0 0; margin: 0 0 38px; font-family: "din-2014-narrow", sans-serif; font-size: 42px; font-weight: 200; line-height: 1; letter-spacing: 2.52px; text-align: left; }

      .sec-news .wrap .news-archive { margin: 0 0 50px; }

       .sec-news .wrap .news-archive .item + .item { margin: 23px 0 0; } 

        .sec-news .wrap .news-archive .item span { display: flex; }

         .sec-news .wrap .news-archive .item span time { width: 100px; font-family: "din-2014-narrow", sans-serif; font-weight: 400; letter-spacing: 0.1em; padding: 8px 0 0 12px; } 

         .sec-news .wrap .news-archive .item b { display: block; width: 97px; height: 28px; background-color: #8effc6; margin: 0 19px 0 0; transition: filter 0.3s; }

           .sec-news .wrap .news-archive .item b:hover { filter: brightness(1.15); }

           .sec-news .wrap .news-archive .item b a { width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center; line-height: 1; padding-top: 2px; }

            .sec-news .wrap .news-archive .item b a span { font-size: 12px; font-family: "din-2014-narrow", sans-serif; font-weight: 400; transform: rotate(0.05deg); }

            .sec-news .wrap .news-archive .item b a:hover { text-decoration: none; }

            .sec-news .wrap .news-archive .item a { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 1.4px; text-align: left;   transform: rotate(0.05deg); padding: 3px  0 0; max-width: 800px; }

              .sec-news .wrap .news-archive .item a:hover { text-decoration: underline; }

.recruit main .sec-links .wrap {     padding: 100px 0 140px; }

.viewmore-wrap .btn-base { margin-bottom: 30px;}

/* banner */

.recruit main .sec-links .wrap { min-width: 1280px; padding: 100px 0 120px; }

  .recruit main .sec-links .wrap .bnrs { display: flex; margin: 0 auto; justify-content: center;  flex-wrap: wrap;}

    .recruit main .sec-links .wrap .bnrs li { margin: 0 8px  20px; max-width: 356px; width: 23%; }

      .recruit main .sec-links .wrap .bnrs li a { transition: filter 0.3s; display: block; }

       .recruit main .sec-links .wrap .bnrs li a img { backface-visibility: hidden; display: block; width: 100%; }

         .recruit main .sec-links .wrap .bnrs li a:hover { filter: brightness(1.1); }

    /*折り返し用css20221015*/

.recruit main .sec-links .wrap .bnrs::after {

    content: '';

    width: 100%;

}

    /*折り返し用css20221015ここまで*/

@media (max-width: 768px) {

.sec-news { width: 100%; margin: 0; padding-top: 15.23vw; }

  .sec-news .wrap { padding: 0 7.324vw 7.324vw;}

    .sec-news .wrap h2 { width: 84.766vw; height: 11.328vw; padding: 1.66vw 0 0; margin: 0 0 5.176vw; text-align: left; font-size: 8.008vw; letter-spacing: 0.1em; }

      .sec-news .wrap .news-archive { margin: 0 0 6.836vw; }

        .sec-news .wrap .news-archive .item + .item { margin: 4.883vw 0 0; }

          .sec-news .wrap .news-archive .item span { display: block;  position: relative; }

            .sec-news .wrap .news-archive .item span time { width: 100%; padding: 1.465vw 0 1.953vw 25.391vw; display: block; }

              .sec-news .wrap .news-archive .item b { width: 22.266vw; height: 6.445vw; margin: 0 0 0; position: absolute; left: 0; top: 0; }

                .sec-news .wrap .news-archive .item b:hover { filter: brightness(1); }

                  .sec-news .wrap .news-archive .item b a {  padding-top: 0.488vw; }

                    .sec-news .wrap .news-archive .item b a span { font-size: 2.734vw; }

                      .sec-news .wrap .news-archive .item b a:hover { text-decoration: none; }

                         .sec-news .wrap .news-archive .item a { font-size: 3.223vw; letter-spacing: 0.293vw; padding: 1.953vw 0 0; max-width: inherit; display: block; }

                           .sec-news .wrap .news-archive .item a:hover { text-decoration: none; }

.viewmore-wrap { margin: 0 auto; }

.recruit main .sec-links .wrap { min-width: 100%; padding: 8vw 0 16vw; }

        .recruit main .sec-links .wrap .bnrs li { max-width: 100%; width:  100%; margin-bottom: 0; }

}



/* overwrite for p_contact.css 221116 */

.pc_only { display: block; }

.sp_only { display: none; }

.sec-contact-faq {

    margin-top: 0;

    padding-top: 0;

}

  .sec-contact-favor { 

    padding-top: 100px;

  }

    .sec-contact-favor p {

      margin-top: 1em;

    }

.sec-contact-form {

    margin-top: 70px;

}
.sec-contact-form.rh26 {

    margin-top: 140px;

}

  .sec-contact-form p {

      text-align: center;

  }

.contact.subpage section h2 {

    text-align: center;

    font-size: 35px;

    font-weight: 300;

    letter-spacing: 0.1em;

    margin: 0;

    margin-block-start: 0;  

    position: relative;

    z-index: 10;

}

 .align-center { margin-top: 2em; text-align: center;} 

.contact.subpage .sec-contact-faq .wrap:first-child { 

    margin-top: 30px; 

}

  .contact.subpage .sec-contact-faq .wrap,

  .contact.subpage .sec-contact-favor .wrap { 

    padding: 65px 50px;

    background: #fff;

  }

.contact.subpage .sec-contact-faq .wrap h3 { 

    width: auto;

    background: none;

    font-size: 21px;

    font-weight: 500;

    text-align: left;

    padding: 0;

    margin: 0 0 19px;

}

.contact.subpage section li {

    font-weight: 500;

}

.contact.subpage section p, .contact.subpage section li {

    font-size: 14px;

    font-weight: 400;

    line-height: 1.93;

    letter-spacing: 0.05em; }

.contact.subpage .sec-contact-faq .wrap .faq-list h4 {

    display: block;

    background: #efefef;

    padding: 4px 61px;

    position: relative;

    cursor: pointer;

    display: flex;

    font-weight: 400;

}

.contact.subpage .sec-contact-faq .wrap .faq-list h4::before {

    content: "▼";

    position: absolute;

    left: 27px;

    top: 14px;

    font-size: 12px;

    line-height: 1;

    transition: transform 0.3s;

}

.contact.subpage .sec-contact-faq .wrap .faq-list li.li-open h4:before {

    transform: rotate(180deg);

}

.contact.subpage .sec-contact-faq .wrap .faq-list i {

    font-family: "din-2014-narrow", sans-serif;

    font-weight: 400;

    font-style: normal;

    font-size: 17px;

    padding: 0 17px 0 0;

}

.contact.subpage .sec-contact-faq .wrap .faq-list h4 span {

    padding-top: 3px;

}

.contact.subpage .sec-contact-faq .wrap .faq-list .text {

    padding: 24px 60px;

    display: none;

}

.contact.subpage .sec-contact-faq .wrap .faq-list .text .inner {

    display: block;

    position: relative;

    padding-left: 25px;

}

.contact.subpage .sec-contact-faq .wrap .faq-list .text .inner i {

    position: absolute;

    left: 0;

    top: -3px;

    padding-right: 0;

}

.contact.subpage .sec-contact-faq .wrap .faq-list li + li {

    margin-top: 20px;

}

.contact.subpage .sec-contact-faq .wrap ul {

    padding: 0;

    list-style: none;

}

.contact.subpage .sec-contact-faq .wrap ul li {

    list-style: none;

}

.form-btn { margin-top: 60px; }

@media (max-width: 768px) {

.pc_only { display: none; }

.sp_only { display: block; }

  .contact.subpage section h2 { font-size: 5.859vw; line-height: 1.6;}

.sec-contact-form.rh26 { margin: 18.667vw auto 9.366vw; }

  .sec-contact-faq p, .sec-contact-form p { padding: 0 7.617vw; }

  .contact.subpage .sec-contact-faq .wrap,

  .contact.subpage .sec-contact-favor .wrap { padding: 9.366vw 7.617vw; }

  .contact.subpage .sec-contact-faq .wrap h3 { font-size: 3.223vw; margin: 0 0 4.883vw; padding: 0; }

  .contact.subpage .sec-contact-faq .wrap .faq-list i { font-size: 3.613vw; padding: 0.293vw 3.32vw 0 0;     line-height: 1.7; }

  .contact.subpage .sec-contact-faq .wrap ul li { font-size: 2.93vw;}

  .contact.subpage .sec-contact-faq .wrap .faq-list h4 { padding: 0.977vw 0.977vw 0.977vw 9.961vw;}

  .contact.subpage .sec-contact-faq .wrap .faq-list h4::before { left: 3.809vw; top: 3vw; font-size: 2.539vw; }

  .contact.subpage .sec-contact-faq .wrap .faq-list h4 span { font-size: 2.93vw; font-weight: 500; padding-top: 0.5vw; padding-bottom: 0.5vw; }

  .contact.subpage .sec-contact-faq .wrap .faq-list .text { padding: 3.32vw 0 0 9.766vw;}

  .contact.subpage .sec-contact-faq .wrap .faq-list .text inner i { top: -0.215vw; font-size: 3.613vw; padding: 0.293vw 3.32vw 0 0; line-height: 1.7; }

  .contact.subpage .sec-contact-faq .wrap .faq-list .text { font-size: 2.93vw;}

  .contact.subpage .sec-contact-faq .wrap .faq-list .text .inner p { font-size: 2.93vw; padding: 0; }

  .contact.subpage section p, .contact.subpage section li {font-size: 2.93vw;}

}



/* add contact thanks-style 2302 */



.recruit-subpage.freelance .thanks-wrap .btn-base {

    margin: 80px auto;

}



.subpage.contact main .thanks-wrap {

    margin-bottom: -38px;

}

.thanks-wrap {

    /* min-width: 1280px;

    background: #F0F0F0;*/

    position: relative;

    overflow: hidden;

}



/* .thanks-wrap {

    width: 100%;

    height: auto;

    margin: 0 auto;

    padding: 0 90px 150px;

    border: solid 1px #F0F0F0;

} */

.thanks-wrap .page-header, .thanks-wrap {

    position: relative;

    z-index: 10;

}

.recruit-subpage main:before {

    content: "";

    width: 100%;

    height: auto;

    margin-left: 0;

    background-color: transparent;

    background: none;

    position: relative;

    left: 50%;

    top: 0;

}

.thanks-wrap .page-header {

    margin-bottom: 0;

}



.thanks-wrap .lead,

.subpage.contact main .lead, .subpage.contact main .text-send { 

    margin-top: 0;

    padding-top: 60px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: 2.3;

    text-align: center;

}

.subpage.contact main .lead, .subpage.contact main .text-send { 

    padding-top: 0;

} 



.thanks-wrap .wrap section {

    width: 1100px;

    background: #fff;

    padding: 40px 50px 45px;

}

.thanks-wrap .wrap h2, .thanks-wrap .wrap p { 

    transform: rotate(0.05deg);

}

.thanks-wrap .wrap h2.h2-thanks {

    width: 380px;

    background: #efefef;

    font-size: 14px;

    font-weight: 500;

    padding: 8px 10px 6px;

    text-align: center;

    margin: 0 auto 45px;

}

.thanks-wrap .wrap ul#thanks_list {

    padding: 0 20px;

    margin: 0;

}

.thanks-wrap .wrap ul#thanks_list li {

    list-style: disc;

    list-style-position: outside;

}

.thanks-wrap section p, .thanks-wrap section li {

    font-size: 14px;

    font-weight: 400;

    line-height: 1.93;

    letter-spacing: 0.05em;

}

.thanks-wrap .btn-base {

    margin: 80px auto 0;

    position: relative;

    z-index: 10;

    border: 1px solid #efefef;

}

.thanks-wrap .btn-base span {

    padding: 12px 0 0 103px;

 }





@media (max-width: 768px) {

.subpage.contact main .thanks-wrap {margin-bottom: 0;}

  .subpage.contact main { padding-bottom: 8vw; }

.recruit-subpage.freelance .thanks-wrap .btn-base { margin: 13.672vw auto 8vw; }

    .thanks-wrap { min-width: inherit; width: 100%; margin: 0 auto; padding-bottom:8vw;}

    .thanks-wrap .wrap { margin: 5.333vw 0 0; }

    .thanks-wrap .lead, .subpage.contact main .lead, .subpage.contact main .text-send { font-size: 2.93vw; line-height: 1.8; padding: 10.667vw 6.836vw 0; letter-spacing: 0.01em;}

    .subpage.contact main .lead, .subpage.contact main .text-send { padding-top: 0;}

    .thanks-wrap .wrap section { width: 100%; padding: 9.766vw 7.617vw 8.789vw;}

    .thanks-wrap .wrap h2.h2-thanks { width: 56.934vw; font-size: 2.93vw; padding: 1.465vw 2.93vw 0.977vw; margin: 0 auto 5.859vw; }

    .thanks-wrap section p, .thanks-wrap section li { font-size: 2.734vw;  line-height: 1.6; letter-spacing: 0.05em;}

    .recruit-subpage.freelance .btn-base { margin-top: 10.667vw;}

    /* .thanks-wrap .btn-base {margin: 10.667vw auto 26.667vw; } */

    .thanks-wrap .btn-base { margin: 13.672vw auto 0;}

    .thanks-wrap .btn-base span { padding: 2.133vw 0 0 26.172vw;}



}



/* overwrite for p_techblog.css:513

.mce-content-body .box-attention, .entrybody .box-attention, .wysiwyg.entry .box-attention, .tox-navobj .box-attention {

    overflow: hidden;

    overflow-x: scroll;

} */

/* overwrite for p_techblog.css:507 */

.mce-content-body table th, .mce-content-body table td, .entrybody table th, .entrybody table td, .wysiwyg.entry table th, .wysiwyg.entry table td, .tox-navobj table th, .tox-navobj table td {

    padding: 12px;

}

  @media (max-width: 768px) {

    .entrybody table th, .entrybody table td { padding: 1.758vw; }

    .entrybody table th .mjx-n mjx-c, .entrybody table td .mjx-n mjx-c {font-size: 130%; line-height: 1.8; vertical-align: -0.2em; }

}



/* overwrite for p_techblog.css:721 */

@media (max-width: 768px) {

.entrybody ol li { word-break: break-all; line-height: 1.6; }

}

/* add for p_techblog.css 2303 */

.box-text table {word-break: break-all; }



/* add for p_top.css 2310 */

.sec-links ul li a div .twiname {

    font-size: 14px;

}

  @media (max-width: 768px) {

    .sec-links ul li a div .twiname {  font-size: 2.933vw;}

}

.sec-links ul li a div {

    text-align: center;

}



/* overwrite for p_techblog.css:435 231207 */

.mce-content-body .fig-box-modal, .entrybody .fig-box-modal, .wysiwyg.entry .fig-box-modal, .tox-navobj .fig-box-modal {

    justify-content: center;

}

.mce-content-body .fig-box-modal a, .entrybody .fig-box-modal a, .wysiwyg.entry .fig-box-modal a, .tox-navobj .fig-box-modal a {

    width: auto; 

    max-width: 50%; 

    margin-right: 10px;

}

.mce-content-body .fig-box-modal a:last-child, .entrybody .fig-box-modal a:last-child, .wysiwyg.entry .fig-box-modal a:last-child, .tox-navobj .fig-box-modal a:last-child {

    margin-right: 0;

}

@media (max-width: 768px) {

.entrybody .fig-box-modal a {

    margin-right: 1.367vw;}

}



/* overwrite for p_company.css:2024 layout */

.sec-introduction {

  width: 1100px;

  margin: 0 auto;

  padding-top: 120px;

}

.company .sec-introduction .list .inner {

    width: 340px;

    height: 560px;

    background: #fff;

    display: flex;

    flex-direction: column;

    margin: 0 20px 40px;

}

.company .sec-introduction .list .inner .img {

    width: 340px;

    height: 240px;

    background-position: center top;

    background-size: cover;

    background-repeat: no-repeat;

}

.company .sec-introduction .list .inner .text {

    width: 340px;

    padding: 30px 30px 20px;

}

        .company .sec-introduction .list .inner:nth-of-type(1) .img {

          background-image: url("../media/2024/02/member2024-01.jpg"); }

        .company .sec-introduction .list .inner:nth-of-type(2) .img { 

          background-image: url("../media/2024/02/member2024-02.jpg"); }

        .company .sec-introduction .list .inner:nth-of-type(3) .img {

          background-image: url("../media/2024/02/member2024-03.jpg"); }

        .company .sec-introduction .list .inner:nth-of-type(4) .img {

          background-image: url("../media/2024/02/member2024-04.jpg"); }

        .company .sec-introduction .list .inner:nth-of-type(5) .img {

          background-image: url("../media/2024/02/member2024-05.jpg"); }



@media (max-width: 768px) {

  .company .sec-introduction { width: 100%; margin: 0 auto; padding-top: 120px; }

    .company .sec-introduction .list .inner { width: 100%; height: auto; margin: 0 0 6.836vw; padding: 7.617vw;}

      .company .sec-introduction .list .inner .img { width: 100%; min-height: 200px; height: 200px; overflow: hidden; background-size: contain; }

      .company .sec-introduction .list .inner .text { width: 100%; padding: 6.8vw  0;}

  }



/* add for new リクナビバナー layout */

.bnr-mgn {

  margin: 30px auto 0; 

}

@media (max-width: 768px) {

  .bnr-mgn { margin: 5.333vw auto 0; }

}

.bnr-mgn_rec {

  margin: 30px auto 0; 

}

@media (max-width: 768px) {

  .bnr-mgn_rec {margin: 6.348vw 0 0; }

}



/* add for new environment layout */

.welfare main .sec-vision {

    margin: 0 0 0;

    padding-top: 123px;

}

  .welfare main .sec-vision .wrap {

      width: 1100px;

      margin: 0 auto;

      text-align: left;

      background: #fff;

      padding: 100px;

  }

    .welfare main .sec-vision .wrap p {

        font-size: 16px;

        font-weight: 400;

        line-height: 1.93;

        letter-spacing: 0.1em;

    }



@media (max-width: 768px) {

  .welfare main .sec-vision { margin: 0 0; padding-top: 23.414vw;}

    .welfare main .sec-vision .wrap { width: 100%;  padding: 15.625vw 7.617vw; }

      .welfare main .sec-vision h2 { line-height: 1.8; }

      .welfare main .sec-vision .wrap p { font-size: 3.223vw; line-height: 1.78; }

}





 /*  add for new environment もっとくわしく！モノリスソフトの働く環境／京都スタジオ編バナー  */

#link-kyotostudio {

  display: block;

  width: 1100px;

  margin: 120px auto 60px;

  padding-top: 0 !important;

}

  @media (max-width: 768px) {

    #link-kyotostudio { width: 90%; margin: 60px auto 40px;}

    #link-kyotostudio img { width: 100%; }

  }

#link-kyotostudio a:hover {

  opacity: 0.7; transition: 0.3s; }







/* add for new もっとくわしく！モノリスソフトの働く環境／京都スタジオ編バナー hover */

.sec-bnrs ul li a:hover, .recruit main .sec-links .wrap .bnrs li a:hover {

  opacity: 0.7; transition: 0.3s; filter: brightness(1); }



/* add for RECRUIT TOP レイアウト */

.recruit .sec-news { width: 1280px;margin: 0 auto;  padding-top: 0; }

  .recruit .sec-news .wrap { padding: 0 90px 120px;   }

.recruit main .sec-links .wrap { min-width: 1280px; padding: 100px 0; }

@media (max-width: 768px) {

.recruit .sec-news { width: 100%; padding-top: 0; padding-bottom: 15.23vw; }

  .recruit .sec-news .wrap { padding: 0 7.324vw 7.324vw;}

    .recruit main .sec-links .wrap { min-width: 100%; padding: 16vw 0 8vw; }

}





    /* 202407 キャリア採用バナー1   */

section.career-links {

  width: 100%;

  position: relative;

  padding: 30px 0 0;

}

  .recruit-subpage.mid-career.recruit-subpage .sec-recruit-base:nth-of-type(1) .wrap section.career-links .wrap {

    padding: 0;

  }

  .recruit-subpage.mid-career.recruit-subpage .sec-recruit-base:nth-of-type(1) .wrap section.career-links .wrap:after {

    background: none;

  }

    section.career-links ul.bnrs {

    }

      section.career-links ul.bnrs li {

        width: 100%;

        height: 200px;

      }

      section.career-links ul.bnrs li a {

        display: block;

    }

        section.career-links ul.bnrs li img {

        width: 100%;

        height: 100%;

        }

@media (max-width: 768px) {

      section.career-links ul.bnrs li { height: 66px; margin-bottom: 0;} 

}



   /* 202408 キャリア採用バナー2   */

section.career-links2408 {

  width: 100%;

  position: relative;

  padding: 30px 0 0;

}

  .recruit-subpage.mid-career.recruit-subpage .sec-recruit-base:nth-of-type(1) .wrap section.career-links .wrap {

    padding: 0;

  }

  .recruit-subpage.mid-career.recruit-subpage .sec-recruit-base:nth-of-type(1) .wrap section.career-links .wrap:after {

    background: none;

  }

    section.career-links2408 ul.bnrs {

      display: flex;

      justify-content: space-between;

    }

      section.career-links2408 ul.bnrs li {

      }

      section.career-links2408 ul.bnrs li a {

        display: block;

    }

      section.career-links2408 ul.bnrs li a:hover {

        opacity: 0.7; transition: 0.3s;

    }

        section.career-links2408 ul.bnrs li img {

        width: 100%;

        height: 100%;

        }



@media (max-width: 768px) {

      section.career-links2408 ul.bnrs {  flex-direction:column; }

      section.career-links2408 ul.bnrs li { margin-bottom: 30px;} 

      section.career-links2408 ul.bnrs li:last-child { margin-bottom: 0;} 

}





   /* 202603 キャリア採用バナー3   */

section.career-links202603 {

  width: 100%;

  position: relative;

  padding: 30px 0 0;

}

  section.career-links202603 ul.bnrs {

    display: flex;

    justify-content: space-between;

    padding: 0;  

    margin: 0; 

    gap: 20px; 

  }

    section.career-links202603 ul.bnrs li {

      width: calc((100% - 40px) / 3); 

    }

      section.career-links202603 ul.bnrs li a {

        display: block;

      }

        section.career-links202603 ul.bnrs li a:hover {

          opacity: 0.7;

          transition: 0.3s;

        }



section.career-links202603 ul.bnrs li img {

  width: 100%;

  height: auto; /

  vertical-align: bottom; 

}



@media (max-width: 768px) {

      section.career-links202603 ul.bnrs {  flex-direction:column; }

      section.career-links202603 ul.bnrs li { width: 100%; margin-bottom: 20px;} 

      section.career-links202603 ul.bnrs li:last-child { margin-bottom: 0;} 

}





    /* 202407 新卒newマーク   */

.recruit-subpage .sec-recruit-base .wrap .parts-links li a > i {

    display: block;

    position: absolute;

    width: 68px;

    height: 24px;

    background-color: #8effc6;

    font-size: 13px;

    font-weight: 300;

    text-align: center;

    right: 0;

    top: 0;

    color: #000;

    z-index: 5;

    padding-top: 2px;

}





/* 2025 xenobladex de launch */



/* header_menu-white */

body#site-index {min-width: 100%;}



body#site-index #siteHeader .wrap .inner nav ul li a { color: #fff; }

body#site-index #siteHeader .wrap .inner nav ul li a:before { background: #fff; }

body#site-index #siteHeader .wrap .logo { margin: 10px 0 0 30px; -webkit-filter: invert(100%) grayscale(100%) contrast(100); filter: invert(100%) grayscale(100%) contrast(100); }

body#site-index #siteHeader .wrap .inner nav .pull-down li a { color: #000 !important; }

body#site-index #siteHeader .wrap .inner nav .pull-down li a span:before { background: #000 !important; }



/* 共通スタイル */

.kv {

    overflow: hidden;

    position: relative;

    width: 100%;

    height: 100vh;

}

  .kv .wrap {

    width: 100%;

    height: calc( 100% - 7.422vw) ;

}



/* スマートフォン向けのスタイル（デフォルト） */

.kv #kv_xenobladex-de {

    overflow: hidden;

    position: relative;

    width: 100%;

    height: 100vh; /* スマホ向けの高さ */

    z-index: 1;

    transition-property: transform;

    background: url("../images/index/kv/xbxde_all_sp.webp") no-repeat center top / cover;

    animation: fadeIn 3s ease-in-out 0s forwards;

}



.xbxde_logobase {

    position: absolute;

    width: 100%;

    height: 100vh; /* スマホ向けの高さ */

    z-index: 2; 

    background: url("../images/index/kv/xbxde_logo_shadow_sp.webp") no-repeat center top / cover;

    filter: blur(20px);

    opacity: 0;

    animation: logobaseFadeIn 0.5s ease 2.6s forwards; /* 背景フェードイン後に開始 */

}



.xbxde_logo {

    position: absolute;

    width: 100%;

    height: 100vh; /* スマホ向けの高さ */

    z-index: 3; 

    background: url("../images/index/kv/xbxde_logo_sp.webp") no-repeat center top / cover;

    transform: translateX(15%); 

    opacity: 0;

    animation: fadeInRight 1s ease-out 2s forwards; /* ロゴベース後に遅れて開始 */

}



/* アニメーション */

@keyframes fadeIn {

    0% {

        opacity: 0;

        transform: scale(1.1);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes logobaseFadeIn {

    0% {

        opacity: 0;

        filter: blur(20px);

    }

    100% {

        opacity: 1;

        filter: blur(0);

    }

}



@keyframes fadeInRight {

    0% {

        opacity: 0;

        transform: translateX(50px); /* 右からスライドイン */

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}





/* スマートフォン向けの追加スタイル */

@media (max-width: 768px) {

    body#site-index #siteHeader { background-color:rgba(51, 51, 51,0.7) }

    body#site-index #siteHeader .wrap .logo { margin: 0; }

    body#site-index #content { padding: 0; }

    body#site-index #siteHeader .btn-menu span {

        -webkit-filter: invert(100%) grayscale(100%) contrast(100);

        filter: invert(100%) grayscale(100%) contrast(100);

    }

    .kv {

        width: 100%;

        height: 156vw;

    }

    .kv #kv_xenobladex-de {

        height: 100%;

        background: url("../images/index/kv/xbxde_all_sp.webp") no-repeat center top / 100%;

    }

    .xbxde_logobase {

        height: 100%;

        background: url("../images/index/kv/xbxde_logo_shadow_sp.webp") no-repeat center top / 100%;

    }

    .xbxde_logo {

        height: 100%;

        background: url("../images/index/kv/xbxde_logo_sp.webp") no-repeat center top / 100%;

    }

}



/* PC向けスタイル（768px以上の場合のみ適用） */

@media (min-width: 768px) {

    .kv #kv_xenobladex-de {

        height: 100vh;

        background: url("../images/index/kv/xbxde_all.webp") no-repeat 57% top / cover;

    }



    .xbxde_logobase {

        height: 100vh;

        background: url("../images/index/kv/xbxde_logo_shadow.webp") no-repeat 57% top / cover;

    }



    .xbxde_logo {

        height: 100vh;

        background: url("../images/index/kv/xbxde_logo.webp") no-repeat 57% top / cover;

    }

}

/* overwrite for p_top.css:542 */

.kv h1 { width: 100%; height: calc(850 / 900 * 100vh); }

.kv h1 span { 

    position: absolute; 

    right: 30px; 

    bottom: 30px; 

    font-size: 14px; 

    font-family: "Noto Sans JP", sans-serif; 

    letter-spacing: -0.3px; 

    font-weight: 500; 

    color: #fff; /* 白文字 */

    text-shadow: 

        -1px -1px 1px rgba(0, 0, 0, 0.5), 

        1px -1px 1px rgba(0, 0, 0, 0.5), 

        -1px 1px 1px rgba(0, 0, 0, 0.5), 

        1px 1px 1px rgba(0, 0, 0, 0.5);

}

/* overwrite for p_top.css:951*/

@media (max-width: 768px) {

.kv h1 {width: 100%; bottom: 0;}

.kv h1 span { right: 2vw; bottom: 2.133vw; font-size: 2.4vw; }

}



/* contact css 240401 */

.contact-pd1-5em {

  padding-bottom: 1.5em;

}



/* games css 250520 */

.subpage.games nav.categories ul li a i sup {

  display: none;

}



/* overwrite for p_techblog.css:465 251027 */

.mce-content-body ol, .entrybody ol, .wysiwyg.entry ol, .tox-navobj ol {

    padding: 0 0 0 2em;

}



/* overwrite for p_company.css:168 2601 */

.company .sec-access h3 {

    padding: 0 60px 0 0; }

    .company .sec-access .detail {

      display: flex;

      align-items: flex-start;

      padding: 0 54px 0 64px; }

    .company .sec-access .mapwrap {

      width: calc(100% - 440px);

      padding: 0 0 0 20px;

      margin: -7px 0 0; }

      .company .sec-access .mapwrap .map {

        margin: 0 0 6px; }

      .company .sec-access .mapwrap .btn-map {

        display: flex;

        justify-content: center;

        align-items: center;

        width: 100%;

        height: 42px;

        color: #fff;

        text-align: center;

        background: #000;

        font-size: 12px;

        transition: opacity 0.3s;

        letter-spacing: 0.1em; }

        .company .sec-access .mapwrap .btn-map:hover {

          opacity: 0.7; }

        .company .sec-access .mapwrap .btn-map i {

          display: block;

          width: 21px;

          height: 14px;

          background: url("../images/common/icon-window.png") no-repeat left top/contain;

          margin-right: 15px; }

        .company .sec-access .mapwrap .btn-map i, .company .sec-access .mapwrap .btn-map span {

          backface-visibility: hidden; }



@media (max-width: 768px) {

.company .sec-access h3 { padding: 0 7.617vw 0 0; }

    .company .sec-access .detail { padding: 0 7.617vw; display: block; }

    .company .sec-access .mapwrap {      width: 100%;

      padding: 0;

      margin: 4.883vw 0 0; }

      .company .sec-access .mapwrap .map {

        margin: 0;

        width: 100%;

        height: 41.016vw;

        overflow: hidden; }

        .company .sec-access .mapwrap .map iframe {

          width: 100% !important;

          height: 100% !important; }

      .company .sec-access .mapwrap .btn-map {

        height: 8.594vw;

        font-size: 2.734vw;

        margin-top: 2.441vw;

        padding-right: 6vw; }

        .company .sec-access .mapwrap .btn-map:hover {

          opacity: 1; }

        .company .sec-access .mapwrap .btn-map i {

          display: block;

          width: 4.688vw;

          height: 3.027vw;

          margin-right: 3.418vw; }

        .company .sec-access .mapwrap .btn-map i, .company .sec-access .mapwrap .btn-map span {

          backface-visibility: hidden; }

}

/* 202609 就活ハラスメント相談フォーム */
.subpage.contact main .wrap section form.harassment-form .form-table,
.subpage.contact main .wrap section form.harassment-form .form-table tbody,
.subpage.contact main .wrap section form.harassment-form .form-table tr,
.subpage.contact main .wrap section form.harassment-form .form-table th,
.subpage.contact main .wrap section form.harassment-form .form-table td {
  display: block;
  width: 100%;
}

.subpage.contact main .wrap section form.harassment-form .form-table tr + tr {
  margin-top: 40px;
}

.subpage.contact main .wrap section form.harassment-form .form-table th {
  padding: 0 0 12px 0;
  background: none;
  text-align: left;

  margin-bottom: 0;
}

.subpage.contact main .wrap section form.harassment-form .form-table td {
  padding: 0;
}

.subpage.contact main .wrap section form.harassment-form .form-note {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.8;
    text-align: left;
}

.harassment-form .consultation-options {
  padding: 20px 24px;
  background: #efefef;
}

.harassment-form .consultation-options label {
  display: block;
  line-height: 1.8;
}

.harassment-form .consultation-options input {
  margin-right: 10px;
}

.subpage.contact main .wrap section form.harassment-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.subpage.contact main .wrap section form.harassment-form .submit {
  margin-top: 60px;
}

@media (max-width: 768px) {
  .subpage.contact main .wrap section form.harassment-form .form-table tr + tr {
    margin-top: 8vw;
  }

  .subpage.contact main .wrap section form.harassment-form .form-table th {
    padding-bottom: 2.4vw;
  }

  .subpage.contact main .wrap section form.harassment-form .form-note {
    margin: 1.6vw 0 3.2vw;
    font-size: 2.93vw;
  }

  .harassment-form .consultation-options {
    padding: 4.8vw;
  }
}





@media (max-width: 768px) {
  .subpage.contact main .wrap section form.harassment-form .form-table tr + tr {
    margin-top: 6.4vw;
  }

  .subpage.contact main .wrap section form.harassment-form .form-table th {
    padding-bottom: 1.6vw;
    margin-bottom: 0;
  }

  .subpage.contact main .wrap section form.harassment-form .form-table td {
    padding: 0;
  }

  .subpage.contact main .wrap section form.harassment-form .form-note {
    margin: 1.2vw 0 2.4vw;
    text-align: left;
  }

  .subpage.contact main .wrap section form.harassment-form .submit {
    margin-top: 10vw;
  }
}
/* 202609 就活ハラスメント：箇条書き<ul>にclass="box"を付与し、
   既存の .subpage.contact main .wrap ul.box（グレー枠）をそのまま流用。
   ここでは上の平文(.lead)との余白のみ調整する。
   id="thanks_list"と衝突する他ページ（サンクスページ側の
   .thanks-wrap .wrap ul#thanks_list）には class="box" を付けていないため
   影響しない */
#thanks_list.box {
    margin-top: 40px;
}
@media (max-width: 768px) {
    #thanks_list.box {
        margin-top: 8vw;
    }
}

/* 202609 フリーランス採用ページ：就活ハラスメント防止への取り組みリンク
   デザインは既存の .sec-recruit-contact（「採用についてのお問い合わせ」と同じ、
   p_recruit.css側で定義済みの黒帯リンク）をそのまま流用。
   表示・非表示はMTテンプレート「コンタクトフォーム設定（HTML）」側の
   <mt:If name="catlabel" eq="freelance"> で分岐しており、
   ここでは前の要素(RECRUIT TOPボタン)との余白のみ調整する。
   .harassment-link-section というクラスはこの分岐内でのみ出力されるため、
   他ページの .sec-recruit-contact には影響しない */
.harassment-link-section {
    margin-top: 40px;
}
@media (max-width: 768px) {
    .harassment-link-section {
        margin-top: 8vw;
    }
}