@charset "UTF-8";

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeout {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

* {
    font-style: normal;
    font-weight: 400;
    list-style: none;
    margin: 0;
    padding: 0
}

figure,
nav {
    display: block
}

html {
    font-size: 10px
}

body {
    background: #fff;
    color: #333;
    font-family: "Noto Serif JP", "ヒラギノ角ゴ Pro", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, sans-serif;
    font-size: 10px;
    text-align: center;
    -webkit-text-size-adjust: 100%
}

.anchor {
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0
}

img {
    vertical-align: top
}

svg {
    pointer-events: none
}

a {
    color: #000
}

a:hover {
    text-decoration: none
}

@media screen and (min-width:768px) {
    a[href^=tel] {
        pointer-events: none;
        text-decoration: none !important
    }
}

@media screen and (max-width:767px) {
    .c-pc {
        display: none
    }
}

.c-sp {
    display: none
}

@media screen and (max-width:767px) {
    .c-sp {
        display: block
    }
}

.l-all {
    min-height: 600px
}

@media screen and (max-width:767px) {
    .l-all {
        width: 100%;
        min-width: 320px;
        overflow: hidden
    }
}

.header__block {
    background: #fff;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column
}

.header__block[data-menu=show] {
    animation: fadein .5s ease 0s 1 forwards;
    display: -ms-flexbox;
    display: flex;
    pointer-events: auto
}

.header__block[data-menu=hide] {
    animation: fadeout .5s ease 0s 1 forwards;
    display: -ms-flexbox;
    display: flex;
    pointer-events: none
}

.header__logo {
    margin: 0 auto 120px;
    width: 210px
}

@media screen and (max-width:767px) {
    .header__logo {
        margin: 0 auto 90px
    }
}

.header__logo img {
    height: 15px;
    width: 100%
}

.header__nav {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 50vh;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-height: 393px;
    min-height: 300px
}

@media screen and (max-width:767px) {
    .header__nav {
        height: 203px;
        max-height: none;
        min-height: 0
    }
}

.header__nav a {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 2.5rem;
    height: 40px;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    text-decoration: none;
    width: 270px;
    text-decoration: none;
    transition: all 250ms ease
}

.header__nav a:hover {
    opacity: .7
}

.header__sns {
    bottom: 75px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    right: 45px;
    width: 55px
}

@media screen and (max-width:767px) {
    .header__sns {
        bottom: 25px;
        left: 0;
        margin: 0 auto;
        right: 0
    }
}

.header__sns a {
    display: block;
    text-decoration: none;
    transition: all 250ms ease
}

.header__sns a:hover {
    opacity: .7
}

.header__sns a img {
    height: 15px;
    width: 15px
}

.header__btn {
    cursor: pointer;
    height: 30px;
    left: 25px;
    position: fixed;
    top: 13px;
    width: 60px;
    z-index: 1000
}

.header__btn::after,
.header__btn::before {
    background: #fff;
    content: "";
    height: 1px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 60px;
    transition: all 250ms ease
}

.header__btn::before {
    top: 17px
}

.header__btn::after {
    bottom: 17px
}

.header__btn[data-menu=show]::before {
    top: 14px;
    transform: rotate(-7deg)
}

.header__btn[data-menu=show]::after {
    bottom: 15px;
    transform: rotate(7deg)
}

.header__btn[data-menu=show]::after,
.header__btn[data-menu=show]::before {
    background: #000 !important
}

.header__btn[data-color=black]::after,
.header__btn[data-color=black]::before {
    background: #000
}

.header__btn[data-color=white]::after,
.header__btn[data-color=white]::before {
    background: #fff
}

.footer {
    background: #2d2d2d;
    box-sizing: border-box;
    height: 265px;
    padding: 50px 0 25px;
    position: relative
}

@media screen and (max-width:767px) {
    .footer {
        height: auto;
        padding: 50px 25px 25px
    }
}

.footer__logo {
    text-align: left
}

@media screen and (min-width:768px) {
    .footer__logo {
        margin: 0 45px
    }
}

@media screen and (max-width:767px) {
    .footer__logo {
        margin: 0 0 50px
    }
}

.footer__logo img {
    height: 12px;
    width: 165px
}

@media screen and (max-width:767px) {
    .footer__logo img {
        height: 10px;
        width: 140px
    }
}

.footer__address {
    -ms-flex-align: start;
    align-items: flex-start;
    color: #ccc;
    font-size: 1.1rem;
    -ms-flex-pack: justify;
    justify-content: space-between;
    line-height: 20px;
    margin: -21px auto 60px;
    padding: 0 0 0 210px;
    text-align: left;
    width: 585px
}

@media screen and (max-width:960px) {
    .footer__address {
        margin: -21px 0 60px auto;
        padding: 0;
        width: 500px
    }
}

@media screen and (max-width:767px) {
    .footer__address {
        display: block;
        margin: 0 0 90px 0;
        width: auto
    }
}

.footer__address a {
    color: #ccc;
    font-family: Lato, serif
}

.footer__address div {
    color: #ccc;
    font-family: Lato, serif;
    font-size: 1.3rem;
    line-height: 20px;
    margin: 25px 0 0
}

.footer__address div a {
    text-decoration: none
}

.footer__sns {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start
}

@media screen and (max-width:767px) {
    .footer__sns {
        margin: 0 0 50px
    }
}

@media screen and (min-width:768px) {
    .footer__sns {
        left: 45px;
        position: absolute;
        top: 160px
    }
}

.footer__sns li {
    margin: 0 15px 0 0;
    width: 15px
}

.footer__sns a {
    text-decoration: none;
    transition: all 250ms ease
}

.footer__sns a:hover {
    opacity: .7
}

.footer__sns img {
    height: 15px;
    width: 15px
}

.footer__copyright {
    color: #666;
    display: block;
    font-family: Lato, serif;
    font-size: 1rem;
    line-height: 15px;
    text-align: left
}

@media screen and (min-width:768px) {
    .footer__copyright {
        margin: 0 45px
    }
}

.pagetop {
    bottom: 30px;
    height: 36px;
    position: fixed;
    right: 30px;
    width: 36px;
    z-index: 1000
}

@media screen and (max-width:767px) {
    .pagetop {
        display: none
    }
}

.pagetop a {
    border-radius: 100%;
    display: block;
    height: 36px;
    left: 0;
    opacity: .4;
    overflow: hidden;
    position: absolute;
    top: 66px;
    transition: all .2s ease;
    width: 36px
}

.pagetop a:hover {
    opacity: .8
}

.pagetop[data-status=show] a {
    top: 0
}

.c-title {
    color: #000;
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 2rem;
    line-height: 25px;
    margin: 0 auto 225px;
    position: relative;
    text-align: center;
    width: 77%;
    color: transparent
}

@media screen and (max-width:767px) {
    .c-title {
        margin: 0 25px 75px;
        width: auto
    }
}

.c-title[data-status=show] {
    color: #000;
    transition: all 1s ease .5s
}

.c-title::after,
.c-title::before {
    transform: scale(0, 1)
}

.c-title::before {
    transform-origin: left center
}

.c-title::after {
    transform-origin: right center
}

.c-title[data-status=show]::after,
.c-title[data-status=show]::before {
    transition: all 750ms cubic-bezier(.785, .135, .15, .86);
    transform: scale(1, 1)
}

.c-title::after,
.c-title::before {
    background: #ccc;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 37.3%
}

@media screen and (max-width:767px) {

    .c-title::after,
    .c-title::before {
        width: 23%
    }
}

.c-title::before {
    left: 0
}

.c-title::after {
    right: 0
}

.c-copy {
    color: #000;
    font-size: 1.5rem;
    line-height: 25px;
    margin: -50px 0 175px;
    opacity: 0;
    transform: translateY(10px)
}

@media screen and (max-width:767px) {
    .c-copy {
        margin: 0 0 100px
    }
}

.c-copy[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

.mainvisual {
    height: 100vh;
    position: relative;
    width: 100%
}

.mainvisual::before {
    background: rgba(0, 0, 0, .4);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.mainvisual__bg01,
.mainvisual__bg02,
.mainvisual__bg03 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.mainvisual__bg01 {
    background: url(../images/mv_01.jpg) no-repeat center;
    background-size: cover
}

.mainvisual__bg02 {
    animation: mv 15s linear -9.9s infinite;
    background: url(../images/mv_02.jpg) no-repeat center;
    background-size: cover;
    opacity: 0
}

.mainvisual__bg03 {
    animation: mv 15s linear -5.4s infinite;
    background: url(../images/mv_03.jpg) no-repeat center;
    background-size: cover;
    opacity: 0
}

@keyframes mv {
    0% {
        opacity: 1
    }

    30% {
        opacity: 1
    }

    36% {
        opacity: 0
    }

    94% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.mainvisual__block {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 50px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 210px;
    z-index: 10
}

@media screen and (max-width:767px) {
    .mainvisual__block {
        height: 47.5px
    }
}

.mainvisual__logo img {
    height: 15px;
    width: 210px
}

.mainvisual__copy {
    color: #fff;
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 1.2rem;
    line-height: 25px
}

.mainvisual__block {
    filter: blur(10px);
    opacity: 0
}

.mainvisual[data-status=show] .mainvisual__block {
    filter: blur(0);
    opacity: 1;
    transition: all 1s ease 150ms
}

.mainvisual {
    height: 100vh;
    position: relative;
    width: 100%
}

.mainvisual::before {
    background: rgba(0, 0, 0, .4);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.mainvisual__bg01,
.mainvisual__bg02,
.mainvisual__bg03 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.mainvisual__bg01 {
    background: url(../images/mv_01.jpg) no-repeat center;
    background-size: cover
}

.mainvisual__bg02 {
    animation: mv 15s linear -9.9s infinite;
    background: url(../images/mv_02.jpg) no-repeat center;
    background-size: cover;
    opacity: 0
}

.mainvisual__bg03 {
    animation: mv 15s linear -5.4s infinite;
    background: url(../images/mv_03.jpg) no-repeat center;
    background-size: cover;
    opacity: 0
}

@keyframes mv {
    0% {
        opacity: 1
    }

    30% {
        opacity: 1
    }

    36% {
        opacity: 0
    }

    94% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.mainvisual__block {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 50px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 210px;
    z-index: 10
}

@media screen and (max-width:767px) {
    .mainvisual__block {
        height: 47.5px
    }
}

.mainvisual__logo img {
    height: 35px;
    width: auto
}

.mainvisual__copy {
    color: #fff;
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 1.2rem;
    line-height: 25px
}

.mainvisual__block {
    filter: blur(10px);
    opacity: 0
}

.mainvisual[data-status=show] .mainvisual__block {
    filter: blur(0);
    opacity: 1;
    transition: all 1s ease 150ms
}

.story {
    padding: 250px 0 250px
}

@media screen and (max-width:767px) {
    .story {
        padding: 125px 0 125px
    }
}

.story h3 {
    margin: 0 0 25px;
    text-align: left;
    font-size: 1.2rem;
    line-height: 25px;
    opacity: 0;
    transform: translateY(10px)
}

@media screen and (max-width:767px) {
    .story h3 {
        font-size: 1.1rem
    }
}

.story h3[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

@media screen and (max-width:767px) {
    .story h3 {
        margin: 0 0 15px
    }
}

.story div p {
    text-align: left;
    font-size: 1.2rem;
    line-height: 25px;
    opacity: 0;
    transform: translateY(10px)
}

@media screen and (max-width:767px) {
    .story div p {
        font-size: 1.1rem
    }
}

.story div p[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

@media screen and (min-width:768px) {
    .story__01 {
        -ms-flex-align: center;
        align-items: center;
        box-sizing: border-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 0 125px;
        padding: 0 0 0 11.5%
    }
}

@media screen and (max-width:767px) {
    .story__01 {
        margin: 0 0 100px;
        padding: 0 0 0 50px;
        text-align: right
    }
}

.story__01--text {
    box-sizing: border-box;
    padding: 0 50px 0 0;
    width: 32.4%
}

@media screen and (max-width:767px) {
    .story__01--text {
        padding: 55px 50px 0 0;
        width: 100%
    }
}

.story__01--img {
    overflow: hidden;
    width: 54.54%
}

@media screen and (max-width:767px) {
    .story__01--img {
        width: 100%
    }
}

.story__01--img img {
    width: 100%;
    opacity: 0;
    transform: scale(1.05)
}

.story__01--img img[data-status=show] {
    opacity: 1;
    transition: opacity 1s ease, transform 5s ease;
    transform: scale(1)
}

.story__02 {
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto 125px;
    width: 77%
}

@media screen and (max-width:767px) {
    .story__02 {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin: 0 50px 125px;
        width: auto
    }
}

.story__02--text {
    padding: 125px 0 0;
    width: 37.3%
}

@media screen and (max-width:960px) {
    .story__02--text {
        padding: 50px 0 0
    }
}

@media screen and (max-width:767px) {
    .story__02--text {
        box-sizing: border-box;
        padding: 55px 0 0 0;
        width: 100%
    }
}

.story__02--img {
    overflow: hidden;
    width: 47.7%
}

@media screen and (max-width:767px) {
    .story__02--img {
        -ms-flex-item-align: start;
        align-self: flex-start;
        width: 89%
    }
}

.story__02--img img {
    width: 100%;
    opacity: 0;
    transform: scale(1.05)
}

.story__02--img img[data-status=show] {
    opacity: 1;
    transition: opacity 1s ease, transform 5s ease;
    transform: scale(1)
}

.story__03 {
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto 125px;
    width: 60.9%
}

@media screen and (max-width:767px) {
    .story__03 {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin: 0 50px 125px;
        width: auto
    }
}

.story__03--text {
    padding: 125px 0 0;
    width: 47.1%
}

@media screen and (max-width:960px) {
    .story__03--text {
        padding: 50px 0 0
    }
}

@media screen and (max-width:767px) {
    .story__03--text {
        box-sizing: border-box;
        padding: 55px 0 0 0;
        width: 100%
    }
}

.story__03--img {
    overflow: hidden;
    width: 33.9%
}

@media screen and (max-width:767px) {
    .story__03--img {
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin: 0 9% 0 0;
        width: 53.4%
    }
}

.story__03--img img {
    width: 100%;
    opacity: 0;
    transform: scale(1.05)
}

.story__03--img img[data-status=show] {
    opacity: 1;
    transition: opacity 1s ease, transform 5s ease;
    transform: scale(1)
}

.story__04 {
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 11.5% 0 19.6%;
    width: 68.9%
}

@media screen and (max-width:767px) {
    .story__04 {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin: 0 50px 0;
        width: auto
    }
}

.story__04--text {
    padding: 125px 0 0;
    width: 41.6%
}

@media screen and (max-width:960px) {
    .story__04--text {
        padding: 50px 0 0
    }
}

@media screen and (max-width:767px) {
    .story__04--text {
        padding: 55px 0 0 0;
        width: 100%
    }
}

.story__04--img {
    overflow: hidden;
    width: 41.6%
}

@media screen and (max-width:767px) {
    .story__04--img {
        -ms-flex-item-align: start;
        align-self: flex-start;
        width: 80.7%
    }
}

.story__04--img img {
    width: 100%;
    opacity: 0;
    transform: scale(1.05)
}

.story__04--img img[data-status=show] {
    opacity: 1;
    transition: opacity 1s ease, transform 5s ease;
    transform: scale(1)
}

.menu {
    background: #ededed;
    padding: 250px 0 210px
}

@media screen and (max-width:767px) {
    .menu {
        padding: 125px 0 125px
    }
}

@media screen and (min-width:768px) {
    .menu__list {
        -ms-flex-align: start;
        align-items: flex-start;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 auto 0;
        width: 77%
    }
}

@media screen and (max-width:767px) {
    .menu__list {
        margin: 0 50px 25px
    }
}

.menu__list div {
    overflow: hidden
}

@media screen and (min-width:768px) {
    .menu__list div {
        margin: 0 0 100px;
        width: calc((100% - 45px) * .5)
    }
}

@media screen and (max-width:767px) {
    .menu__list div {
        margin: 0 0 50px;
        width: 100%
    }
}

.menu__list img {
    width: 100%;
    opacity: 0;
    transform: scale(1.05)
}

.menu__list img[data-status=show] {
    opacity: 1;
    transition: opacity 1s ease, transform 5s ease;
    transform: scale(1)
}

.menu__list div {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    text-align: left;
    font-size: 1.2rem;
    line-height: 25px
}

@media screen and (max-width:767px) {
    .menu__list div {
        margin: -25px 0 50px
    }
}

@media screen and (max-width:767px) {
    .menu__list div {
        font-size: 1.1rem
    }
}

.menu__list div h3 {
    color: #000;
    opacity: 0;
    transform: translateY(10px)
}

.menu__list div h3[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

.menu__list div p {
    opacity: 0;
    transform: translateY(10px)
}

.menu__list div p[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

.menu__list--eng {
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    margin: 0 0 10px
}

.menu__more {
    margin: 0 auto;
    width: 375px;
    opacity: 0;
    transform: translateY(10px)
}

@media screen and (max-width:767px) {
    .menu__more {
        width: 275px
    }
}

.menu__more[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

.menu__more a {
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #000;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 1.3rem;
    height: 50px;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
    transition: all 250ms ease
}

.menu__more a:hover {
    opacity: .7
}

.news {
    padding: 250px 0 250px
}

@media screen and (max-width:767px) {
    .news {
        padding: 125px 0 125px
    }
}

.news__body {
    margin: 0 auto;
    width: 77%;
    opacity: 0;
    transform: translateY(10px)
}

.news__body[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

.news__body img {
    width: 100%
}

.recruit {
    background: #5e5e5e;
    box-sizing: border-box;
    position: relative
}

@media screen and (min-width:768px) {
    .recruit {
        padding: 125px 0;
        width: 100%
    }
}

@media screen and (max-width:767px) {
    .recruit {
        padding: 525px 50px 100px
    }
}

.recruit__title {
    color: transparent;
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 2.5rem;
    line-height: 25px;
    padding: 200px 0 0;
    position: absolute;
    right: 80px;
    top: 125px;
    width: 25px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-feature-settings: normal
}

@media screen and (max-width:960px) {
    .recruit__title {
        right: 39px
    }
}

@media screen and (max-width:767px) {
    .recruit__title {
        right: 49px
    }
}

.recruit__title::before {
    background: #ddd;
    content: "";
    display: inline-block;
    height: 0;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px
}

.recruit__title[data-status=show] {
    color: #ededed;
    transition: all 1s ease 650ms
}

.recruit__title[data-status=show]::before {
    height: 175px;
    transition: all .5s cubic-bezier(.785, .135, .15, .86)
}

@media screen and (min-width:768px) {
    .recruit__block {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 auto;
        width: 77%
    }
}

.recruit__img {
    overflow: hidden
}

@media screen and (min-width:768px) {
    .recruit__img {
        width: 48.1%
    }
}

.recruit__img img {
    width: 100%;
    opacity: 0;
    transform: scale(1.05)
}

@media screen and (max-width:767px) {
    .recruit__img img {
        height: 375px;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.recruit__img[data-status=show] img {
    opacity: 1;
    transition: opacity 1s ease, transform 5s ease;
    transform: scale(1)
}

.recruit__body {
    opacity: 0;
    transform: translateY(10px)
}

.recruit__body[data-status=show] {
    opacity: 1;
    transition: all 1s ease;
    transform: translateY(0)
}

@media screen and (min-width:768px) {
    .recruit__body {
        width: 39.5%
    }
}

.recruit__body a {
    -ms-flex-align: start;
    align-items: flex-start;
    box-sizing: border-box;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 100px 0;
    text-align: left;
    text-decoration: none;
    text-decoration: none;
    transition: all 250ms ease
}

@media screen and (max-width:960px) {
    .recruit__body a {
        padding: 45px 0
    }
}

.recruit__body a:hover {
    opacity: .7
}

@media screen and (max-width:767px) {
    .recruit__body a {
        padding: 25px 0
    }
}

.recruit__body a:hover p {
    color: #fff
}

.recruit__body--text {
    font-family: "Cormorant Garamond", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 2rem;
    line-height: 30px
}

@media screen and (max-width:767px) {
    .recruit__body--text {
        margin: 0 0 80px;
        white-space: nowrap
    }
}

.recruit__body--link {
    color: transparent;
    line-height: 15px;
    padding: 0 0 0 25px;
    position: relative;
    transition: all 250ms ease
}

.recruit__body--link::before {
    background: url(../images/icon_arrow.svg) no-repeat left center;
    bottom: 0;
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    width: 15px
}

.mainvisual__body {
    color: #fff;
    margin-top: 75px;
    max-width: 431px;
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box
}

.mainvisual__block {
    width: auto
}

.mainvisual__body p {
    font-size: 11px
}

.mainvisual__body dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    text-align: left;
    margin: auto;
    margin-top: 25px;
    width: fit-content
}

@media screen and (min-width:426px) {
    .mainvisual__body dl {
        margin-left: 0
    }
}

.mainvisual__body a {
    color: white
}

/*# sourceMappingURL=../map/style.css.map */