@charset "UTF-8";

/*! //////////////////////////////
Base
////////////////////////////// !*/

body {}

a {}

a:hover {}

img {}

a img {}

a:hover img {}

li {}

h1, h2, h3, h4, h5, h6, p {}


/*! Common Item !*/

.overlay-logo {
    width: 20%;
}


/*! footer !*/

#footer {}

.footer {}

address {}


/*! scroll !*/

#scroll {}

#scroll a {}

#scroll a:hover {}

#scroll a div {}

#scroll a div span {}

#scroll a div span:nth-child(1) {}

#scroll a div span:nth-child(2) {}


/*! mv !*/

.mv-movie {}

video {}

.mv-movie-overlay {}

@-webkit-keyframes hue-rotate {
    from {
        -webkit-filter: hue-rotate(0);
        -moz-filter: hue-rotate(0);
        -ms-filter: hue-rotate(0);
        filter: hue-rotate(0);
    }
    to {
        -webkit-filter: hue-rotate(360deg);
        -moz-filter: hue-rotate(360deg);
        -ms-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

@keyframes hue-rotate {
    from {
        -webkit-filter: hue-rotate(0);
        -moz-filter: hue-rotate(0);
        -ms-filter: hue-rotate(0);
        filter: hue-rotate(0);
    }
    to {
        -webkit-filter: hue-rotate(360deg);
        -moz-filter: hue-rotate(360deg);
        -ms-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

.circle-logo {
    width: 100px;
    position: fixed;
    top: -30%;
    right: -30%;
}

.circle-logo svg {}

.circle-logo.dropin {
    width: 40%;
    top: 20px;
}

.circle-logo.fadeout {
    width: 25%;
}

#container {}

.container-inner {}


/*! Contents !*/

#contents-wrap {}

.contents-head {}


/* navi */

#navi-toggle {}

.menu-trigger, .menu-trigger span {}

.menu-trigger {
    width: 40px;
    height: 34px;
}

.menu-trigger span {}

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

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

.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}

.menu-trigger span:nth-of-type(1) {
    -webkit-animation: menu-trigger-bar01 .5s forwards;
    animation: menu-trigger-bar01 .5s forwards;
}

@-webkit-keyframes menu-trigger-bar01 {
    0% {
        -webkit-transform: translateY(20px) rotate(-45deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
    }
}

@keyframes menu-trigger-bar01 {
    0% {
        transform: translateY(20px) rotate(-45deg);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

.menu-trigger span:nth-of-type(2) {
    -webkit-animation: menu-trigger-bar02 .5s forwards;
    animation: menu-trigger-bar02 .5s forwards;
}

@-webkit-keyframes menu-trigger-bar02 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes menu-trigger-bar02 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.menu-trigger span:nth-of-type(3) {
    -webkit-animation: menu-trigger-bar03 .5s forwards;
    animation: menu-trigger-bar03 .5s forwards;
}

@-webkit-keyframes menu-trigger-bar03 {
    0% {
        -webkit-transform: translateY(-20px) rotate(45deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
    }
}

@keyframes menu-trigger-bar03 {
    0% {
        transform: translateY(-20px) rotate(45deg);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

.menu-trigger::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 30px;
    height: 30px;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-transition: all .5S;
    -moz-transition: all .5S;
    -ms-transition: all .5S;
    -o-transition: all .5S;
    transition: all .5S;
    opacity: 0;
}

.menu-trigger.active::after {
    -webkit-animation: circle .5s;
    animation: circle .5s;
}

@-webkit-keyframes circle {
    0% {
        -webkit-transform: scale(.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(3.5);
        opacity: 0;
    }
}

@keyframes circle {
    0% {
        transform: scale(.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

.menu-trigger.active span:nth-of-type(1) {
    -webkit-animation: active-menu-trigger-bar01 .5s .5s forwards;
    animation: active-menu-trigger-bar01 .5s .5s forwards;
    top: -5px;
}

@-webkit-keyframes active-menu-trigger-bar01 {
    0% {
        -webkit-transform: translateY(0) rotate(0);
    }
    100% {
        -webkit-transform: translateY(20px) rotate(-45deg);
    }
}

@keyframes active-menu-trigger-bar01 {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(20px) rotate(-45deg);
    }
}

.menu-trigger.active span:nth-of-type(2) {
    -webkit-animation: active-menu-trigger-bar02 .5s .5s forwards;
    animation: active-menu-trigger-bar02 .5s .5s forwards;
}

@-webkit-keyframes active-menu-trigger-bar02 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes active-menu-trigger-bar02 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.menu-trigger.active span:nth-of-type(3) {
    -webkit-animation: active-menu-trigger-bar03 .5s .5s forwards;
    animation: active-menu-trigger-bar03 .5s .5s forwards;
    bottom: -3px;
}

@-webkit-keyframes active-menu-trigger-bar03 {
    0% {
        -webkit-transform: translateY(0) rotate(0);
    }
    100% {
        -webkit-transform: translateY(-20px) rotate(45deg);
    }
}

@keyframes active-menu-trigger-bar03 {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(-20px) rotate(45deg);
    }
}

#navi-panel {
    width: 80%;
    height: 70vh;
}

#navi-panel.active {
    left: -10%;
    top: -5%;
}

.navi-circle-logo.appear {
    width: 120px;
    right: 20px;
    top: 70px;
    opacity: 0.5;
}

.navi-panel-inner {}

.navi-panel-inner ul {}

.navi-panel-inner ul li {}

.navi-panel-inner ul li ul {
    padding: 0;
    margin: 10px 0 0 1em;
}

.navi-panel-inner ul li a {}

.navi-panel-inner ul li a::after {
    position: absolute;
    bottom: -3px;
    right: 0;
    content: '';
    width: 0;
    height: 1px;
    background-color: #FFF;
    -webkit-transition: all .5S;
    -moz-transition: all .5S;
    -ms-transition: all .5S;
    -o-transition: all .5S;
    transition: all .5S;
}

.navi-panel-inner ul li a:hover::after {
    width: 100%;
}

@charset "UTF-8";

/*! mv !*/

.mv-typography-wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: start;
    align-items: center;
}

.mv-typography-wrap .mv-typography-svg {
    width: 90vw;
    top: -5vh;
    opacity: 1;
    left: 10px;
}

#mv-typography-outline-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

#mv-typography-outline-box .mv-typography-svg {
    opacity: 0;
    -webkit-transition: opacity .5S;
    -moz-transition: opacity .5S;
    -ms-transition: opacity .5S;
    -o-transition: opacity .5S;
    transition: opacity .5S;
}

#mv-typography-outline-box.delay .mv-typography-svg {
    opacity: 1.0;
}

#typography-outline {}

#typography-outline path {}

#mv-typography-slogan-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 1.0;
    -webkit-transition: opacity .5S;
    -moz-transition: opacity .5S;
    -ms-transition: opacity .5S;
    -o-transition: opacity .5S;
    transition: opacity .5S;
}

#mv-typography-slogan-box.fadeout {
    opacity: 0;
}

#typography-slogan {}

#typography-slogan path {
    fill: #FFF;
    stroke: #FFF;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 1;
    -webkit-animation: typography-slogan 3s ease-in forwards;
    animation: typography-slogan 3s ease-in forwards;
    -webkit-transition: background 1S;
    -moz-transition: background 1S;
    -ms-transition: background 1S;
    -o-transition: background 1S;
    transition: background 1S;
}

@-webkit-keyframes typography-slogan {
    0% {
        stroke-dashoffset: 2000;
        fill: transparent;
    }
    50% {
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #FFF;
    }
}

@keyframes typography-slogan {
    0% {
        stroke-dashoffset: 2000;
        fill: transparent;
    }
    50% {
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #FFF;
    }
}

.mv-slogan {
    font-size: 8vw;
    bottom: 20vh;
}

.mv-slogan.delay {}

.mv-slogan span {}


/* アニメーション設定 */

.arrow-wrap {
    bottom: -60px;
    right: 0px;
}

.arrow-inner a {}

.arrow-inner a p {}

.arrow-inner a:hover p {}

.arrow-bar {
    height: 70px;
}

.arrow-bar::before {}

@keyframes arrow-bar {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    60% {
        -webkit-transform: translate3d(-50%, 100px, 0);
        transform: translate3d(-50%, 100px, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 100px, 0);
        transform: translate3d(-50%, 100px, 0);
    }
}


/*! news !*/

#top .news-wrap {}

#top .news-box {}

#top .news-title {}

#top .news-box-inner {}

#top .post-item {
    margin: 0 0 20px;
}

#top .post-date {
    text-align: left;
    width: 100%;
    float: none;
    padding: 10px 10px 0;
}

#top .post-image {}

#top .post-title {
    padding: 10px;
    text-align: left;
}

#top .post-title a {}

#top .post-title a:hover {}

#top .news-more {}

#top .news-more a {
    font-size: 1rem;
}

#top .news-more a:hover {}

#top .news-more a:before, #top .news-more a:after {}

#top .news-more a:before {}

#top .news-more a:after {}

#top .news-more a:hover:after, #top .news-more a:hover:before {}

#recruitment-wrap {}

.recruitment-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
    width: 100%;
    background: rgba(0, 0, 0, .75);
}

.recruitment-box-inner {}

.recruitment-box-inner h2 {
    font-size: 7vw;
}

.recruitment-box-inner p {
    line-height: 1.5;
    font-size: 1.2rem;
}

.recruitment-box-inner .recruitment-title {
    font-size: 15vw;
    line-height: 1;
}

.recruitment-link a {
    font-size: 1rem;
}

.recruitment-link a:hover {}

.recruitment-link a:before, .recruitment-link a:after {}


}
.recruitment-link a:after {}
.recruitment-link a:hover:after, .recruitment-link a:hover:before {}
@charset "UTF-8";

/*! //////////////////////////////
Page
////////////////////////////// !*/

/*! Common !*/
.circle-logo {}
.circle-logo.dropin {}
.circle-logo.fadeout {}
#contents-wrap {}
.page-title {}
.page-title .en {
    font-size: 20vw;
}
.page-title .en::after {}
.page-title .ja {
    font-size: 5vw;
    line-height: 1.2;
}
.page-wrap {
    padding: 50px 0 0;
}

/*! Service !*/
.service-wrap {
    padding-top: 100px;
}
.service-box {}
.service-box-inner {}
.service-img {
    max-width: 70%;
}
.service-explain {
    width: 80%;
    bottom: -130px;
}
.service-title {
    font-size: 1rem;
    top: -70px;
    text-shadow: 0 0 15px rgba(0, 0, 0, .75);
}
.service-title::before, .service-title::after {}
.service-title::before {}
.service-title::after {}
.service-title span {}
.service-title span::before, .service-title span::after {}
.service-title span::before {}
.service-title span::after {}
.service-typography {
    font-size: 12vw;
    top: -30px;
}
.service-text {
    padding: 0 20px;
    top: 0;
    top: 20px;
}
.service-text p {
    font-size: 1rem;
    line-height: 1.75;
}
.service-more {}
.service-more a {}
.service-more span {}
.service01 .service-explain {
    left: auto;
    right: 0;
}
.service01 .service-typography {}
.service02 .service-img {}
.service02 .service-explain {}
.service03 .service-explain {
    left: auto;
    right: 0;
}
.service03 .service-typography {}
.service04 .service-img {}
.service05 .service-explain {
    left: auto;
    right: 0;
}
.service05 .service-typography {}
.service06 .service-img {}
.service06 .service-typography {}
.service06 .coming-soon {}

/*! Recruit !*/
.recruit-wrap {}
.recruit-box {}
.recruit-box-inner {}
.recruit-anchor {}
.recruit-anchor ul {}
.recruit-anchor ul li {
    margin-bottom: 1em;
}
.recruit-anchor ul li::before {}
.recruit-anchor ul li a {}
.recruit-explain {}
.recruit-title {}
.recruit-explain p {}
.table-layout {
    max-width: 100%;
}
.table-layout dl {}
.table-layout dl dt {
    font-size: 14px;
    padding: 0.5em 10px;
    width: 30%;
}
.table-layout dl dt span {}
.table-layout dl dt .any {}
.table-layout dl dt .must {}
.table-layout dl dd {
    font-size: 14px;
    padding: 0.5em 0 0.5em 30%;
}
.table-layout dl dd textarea {}
.table-layout dl dd input[] {}
.table-layout dl dd input[] {}
.table-layout dl dd input[] {}
.recruit-application {}
.recruit-inquiry {}
.recruit-inquiry a {
    font-size: 5vw;
}
.recruit-inquiry a:hover {}
.recruit-inquiry a:before, .recruit-inquiry a:after {}
.recruit-inquiry a:before {}
.recruit-inquiry a:after {}
.recruit-inquiry a:hover:after, .recruit-inquiry a:hover:before {}

/*! Contact !*/
.contact-box {
    padding: 50px 0;
}
.contact-box-inner {}
.contact-explain {}
.contact-title {}
.contact-explain p {
    margin: 0 1em;
    text-align: left;
}
.contact-application {}
.contact-application {}
.contact-application dl {}
.contact-application dl dt {
    float: none;
    width: 100%;
    margin-bottom: 0.5em;
}
.contact-application dl dt span {}
.contact-application dl dt .any {}
.contact-application dl dt .must {}
.contact-application dl dd {
    padding: 0.5em 0;
    border: none;
    margin-bottom: 1em;
    margin-left: 0;
}
.contact-application dl dd textarea {}
.contact-application dl dd input[] {}
.contact-application dl dd input[] {}
.contact-application dl dd input[] {}
.contact-application dd textarea, .contact-application dd input[type="text"], .contact-application dd input[type="email"] {
    font-size: 18px;
    padding: 0.4em 0.8em;
    color: #FFF;
}
.contact-application dd textarea:hover, .contact-application dd input[type="text"]:hover, .contact-application dd input[type="email"]:hover, .contact-application dd textarea:active, .contact-application dd input[type="text"]:active, .contact-application dd input[type="email"]:active {}
.contact-application dd input[type="radio"] {}
.contact-inquiry {}
.contact-inquiry input[type="submit"] {
    font-size: 5vw;
}
.contact-inquiry input[type="submit"]:hover {}
.contact-inquiry input[type="submit"]::before, .contact-inquiry input[type="submit"]::after {}
.contact-inquiry input[type="submit"]::before {}
.contact-inquiry input[type="submit"]::after {}
.wpcf7-not-valid-tip {}
.your_message .wpcf7-not-valid-tip {}
.wpcf7-response-output {}
.wpcf7-validation-errors {}

/*! Company !*/
.company-wrap {
    display: block;
    padding-top: 50px;
}
.company-box {
    margin-bottom: 50px;
}
.company-box-inner {}
.company-img {}
.company-img:hover {}
.company-typography {
    font-size: 12vw;
}
.company-explain {}
.company-title {
    font-size: 5vw;
}

/*! About !*/
.about-box {
    padding: 0;
    min-height: 70vh;
    margin-bottom: -50px;
}
.about-box-inner {}
.about-explain {}
.about-application {}
.about-application dl {}
.about-application dl dt {}
.about-application dl dd {}

/*! Philosophy !*/
.philosophy-wrap {
    margin: 0;
}
.philosophy-wrap-inner {}
.philosophy-explain {}
.philosophy-title {
    font-size: 12vw;
}
.philosophy-box {
    padding: 0 15px;
}
.philosophy-sub-title {
    font-size: 6vw;
}
.philosophy-box p {
    font-size: 1.1rem;
}

/*! Message !*/
.message-box {}
.message-box-inner {}
.message-explain {}
.message-title {}
.message-box p {}

/* News */
#news .news-box {}
#news .news-box .news-title {}
#news .news-box .news-box-inner {}
#news .news-box .post-item {}
#news .news-box .post-date {
    width: 100%;
    padding: 10px 10px 0;
    text-align: left;
    float: none;
}
#news .news-box .post-image {}
#news .news-box .post-title {
    padding: 10px;
    text-align: left;
}
#news .news-box .post-title a {
}
#news .news-box .post-title a:hover {}

/* Single */
.eyecatch-image {
  width: 100%;
  margin: 0 auto;
}
.single-post {}
.single-post-header {}
.post-date {}
.post-inner {
    padding: 0 10px;
}
.post-eyecatch {}
.post-inner p {}
.post-navi {}
.next-post {}
.prev-post {}



  @media screen and (max-width:639px){
    .contact-form dt {
      float: none;
    }
    .contact-form dd {
      margin: 8px 0 30px 0px;
    }
    input[type="submit"] {
      width: 80%;
    }
    .contact-form {
      padding: 50px 20px 1px;
    }
    .agreement .inner {
      padding: 15px;
      width: 90%;
      margin: 0 auto;
    }
  .agreement .inner dl dd ol {
      padding: 0;
    }
    .agreement .inner dl dd {
      margin-left: 20px;
    }
  }