@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    border: 0;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 896px) {
    .img-responsive {
        display: block;
        width: 100%;
        height: auto;
    }
}

html {
    overflow-y: scroll;
    font-size: 62.5%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}

body {
    position: relative;
    line-height: 1.4;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #000;
    background: #417A73;
    height: 100%;
    font-size: 1.6rem;
    line-height: 1.80769;
    letter-spacing: 2px;
    overflow: visible;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    background: transparent;
    color: #000;
    outline: none;
    vertical-align: baseline;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.clear {
    clear: both;
}

.clearfix::after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: '';
}

.sp {
    display: none;
}

@media only screen and (max-width: 768px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    html {
        font-size: 55%;
    }
}

.container {
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    max-width: 1140px;
    margin: 0 auto;
}

/* @media only screen and (max-width: 768px) {
    .container {
        width: calc(100% - 30px);
        max-width: 1140px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 480px) {
    .container {
        width: calc(100% - 15px);
        max-width: 1140px;
        margin: 0 auto;
    }
} */

/*
heading******************************/

.title_x_large {
    font-size: 4.6rem;
    font-weight: bold;
}

.title_x_large span {
    display: block;
    font-size: 2.0rem;
    font-weight: normal;
}

.title_large {
    font-size: 2.8rem;
    font-weight: bold;
}

.title_large span {
    display: block;
    font-size: 1.4rem;
    font-weight: normal;
}

.title_medium {
    font-size: 2.0rem;
    font-weight: bold;
}

.title_small {
    font-size: 1.8rem;
    font-weight: normal;
}

/*
grid******************************/

.grid {
    letter-spacing: -.35em;
    margin: 0 -15px 0;
}

.col {
    display: inline-block;
    letter-spacing: normal;
    padding: 0 15px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
column******************************/

.column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*
reverse******************************/

.box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media only screen and (max-width: 480px) {
    .box {
        flex-direction: column;
    }

    .box:nth-child(even) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column-reverse;
    }
}

.box_cont {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media screen and (max-width: 480px) {
    .box_cont {
        flex-direction: column-reverse;
    }
}

.box_left {
    width: 40.8771%;
}

.box_right {
    width: 56.4912%;
}

/*
width******************************/

.width1 {
    width: 8.33333333333%;
}

@media only screen and (max-width: 896px) {
    .width1 {
        width: 100%;
    }
}

.width2 {
    width: 16.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width2 {
        width: 100%;
    }
}

.width3 {
    width: 25.0%;
}

@media only screen and (max-width: 896px) {
    .width3 {
        width: 100%;
    }
}

.width4 {
    width: 33.3333333333%;
}

@media only screen and (max-width: 896px) {
    .width4 {
        width: 100%;
    }
}

.width5 {
    width: 41.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width5 {
        width: 100%;
    }
}

.width6 {
    width: 50.0%;
}

@media only screen and (max-width: 896px) {
    .width6 {
        width: 100%;
    }
}

.width7 {
    width: 58.3333333333%;
}

@media only screen and (max-width: 896px) {
    .width7 {
        width: 100%;
    }
}

.width8 {
    width: 66.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width8 {
        width: 100%;
    }
}

.width9 {
    width: 75.0%;
}

@media only screen and (max-width: 896px) {
    .width9 {
        width: 100%;
    }
}

.width10 {
    width: 83.3333333333%;
}

@media only screen and (max-width: 896px) {
    .width10 {
        width: 100%;
    }
}

.width11 {
    width: 91.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width11 {
        width: 100%;
    }
}

.width12 {
    width: 100%;
}

/*
list*3カラム******************************/

.three_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.three_list .list_item {
    width: -webkit-calc((100% - 4%) / 3);
    width: calc((100% - 4%) / 3);
    margin-top: 4rem;
    margin-right: 2%;
    margin-bottom: 3.0rem;
}

@media screen and (min-width: 897px) {
    .three_list .list_item:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 896px) {
    .three_list .list_item {
        width: -webkit-calc((100% - 5% - 1px) / 2);
        width: calc((100% - 5% - 1px) / 2);
        margin-right: 5%;
    }
}

@media screen and (max-width: 896px) {
    .three_list .list_item:nth-child(2n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 568px) {
    .three_list .list_item {
        width: 100%;
        margin-right: 0;
    }
}

.three_list .list_item .title {
    font-size: 1.6rem;
}

.three_list .list_item img {
    margin-bottom: 3.0rem;
}

/*
list*4カラム******************************/

.four_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.four_list .list_item {
    width: -webkit-calc((100% - 9%) / 4);
    width: calc((100% - 9%) / 4);
    margin-top: 2.0rem;
    margin-right: 3%;
    margin-bottom: 2.0rem;
}

@media screen and (min-width: 569px) {
    .four_list .list_item:nth-child(4n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 568px) {
    .four_list .list_item {
        width: -webkit-calc((100% - 7%) / 2);
        width: calc((100% - 7%) / 2);
        margin-right: 7%;
    }

    .four_list .list_item:nth-child(2n) {
        margin-right: 0;
    }
}

/*
list*5カラム******************************/

.five_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 8.0rem;
}

.five_list .list_item {
    width: -webkit-calc((100% - 4%) / 5);
    width: calc((100% - 4%) / 5);
    margin-top: 1.0rem;
    margin-right: 1%;
    margin-bottom: 1.0rem;
}

.five_list .list_item .title {
    font-size: 2.0rem;
}

@media screen and (min-width: 993px) {
    .five_list .list_item:nth-child(5n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 992px) {
    .five_list .list_item {
        width: -webkit-calc((100% - 6%) / 3);
        width: calc((100% - 6%) / 3);
        margin-right: 3%;
    }
}

@media screen and (max-width: 992px) {
    .five_list .list_item:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 568px) {
    .five_list .list_item {
        width: -webkit-calc((100% - 7%) / 2);
        width: calc((100% - 7%) / 2);
        margin-right: 7%;
    }

    .five_list .list_item:nth-child(3n) {
        margin-right: 7%;
    }

    .five_list .list_item:nth-child(2n) {
        margin-right: 0;
    }
}

/*
追加******************************/

.set_center {
    text-align: center;
}

.set_left {
    text-align: left;
}

.set_right {
    text-align: right;
}

.cursor {
    cursor: pointer;
}

.d_flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.inner {
    width: 680px;
    margin: 0 auto;
}

@media screen and (max-width: 896px) {
    .inner {
        width: 86%;
        padding: 0 15px;
    }
}

.inner_320 {
    width: 320px;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    .inner_320 {
        width: 86%;
        padding: 0 15px;
    }
}

.inner_890 {
    width: 890px;
    margin: 0 auto;
}

@media screen and (max-width: 992px) {
    .inner_890 {
        width: 90%;
        padding: 0 15px;
    }
}

.text {
    font-size: 1.6rem;
    line-height: 1.75;
}

.btn {
    padding-top: 3.6rem;
}

.note {
    font-size: 1.4rem;
}
.w_100vw {
    width: 100vw;
}

/*
header******************************/

.header_content {
    background-color: #fff;
    overflow: hidden;
}


.header_content_inner {
    /* background-color: #417A73; */
    background-color: #305A55;
    width: -webkit-calc(100% - 9.3229vw);
    width: calc(100% - 9.3229vw);
    padding: 0.8rem 10rem 4.5rem 6.8rem;
    box-shadow: 0 1px 0 #305A55;
    border-radius: 0 0 100px 0;
}

@media only screen and (max-width: 1450px) {
    .header_content_inner {
        width: -webkit-calc(100% - 3.125vw);
        width: calc(100% - 3.125vw);
        padding: 0.8rem 3.0rem 4.5rem 4.5rem;
    }
}

@media only screen and (max-width: 1200px) {
    .header_content_inner {
        width: -webkit-calc(100% - 1.5625vw);
        width: calc(100% - 1.5625vw);
    }
}

@media only screen and (max-width: 768px) {
    .header_content_inner {
        width: -webkit-calc(100% - 15px);
        width: calc(100% - 15px);
        border-radius: 0 0 50px 0;
    }
}

@media only screen and (max-width: 480px) {
    .header_content_inner {
        padding: 0.8rem 15px 4.5rem 15px;
    }
}

.header_content_03 .header_content_inner {
    padding: 0.8rem 10rem 0 6.8rem;
}

@media only screen and (max-width: 1450px) {
    .header_content_03 .header_content_inner {
        padding: 0.8rem 3.0rem 0 4.5rem;
    }
}

@media only screen and (max-width: 480px) {
    .header_content_03 .header_content_inner {
        padding: 0.8rem 15px 0 15px;
    }
}

.header_inner {
    padding: 0 0 2.8rem 0;
}

/* @media only screen and (max-width: 1450px) {
    .header_inner {
        padding: 0 0 2.8rem 0;
    }
}

@media only screen and (max-width: 480px) {
    .header_inner {
        padding: 0 0 2.8rem 0;
    }
} */

.title_disc {
    padding-bottom: 4.2rem;
    font-size: 1.0rem;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media only screen and (max-width: 480px) {
    .title_disc {
        padding-bottom: 1.0rem;
    }
}

.header_flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
}

.header_nav .btn_link_wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}

.header_nav .btn_link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}

.header_nav .btn_link li {
    padding: 0 25px;
    line-height: 1.0;
}

.header_nav .btn_link li a {
    color: #fff;
    position: relative;
    font-size: 1.8rem;
    font-weight: bold;
}

.header_nav .btn_link li a:hover {
    opacity: 0.6;
}

.header_sns {
    position: absolute;
    right: 0;
    top: 240px;
    right: 65px;
    height: calc(100% - 300px);
    /* height: calc(100% - 552px); */
    z-index: 4;
}

@media only screen and (max-width: 1450px) {
    .header_sns {
        right: 11px;
    }
}

@media only screen and (max-width: 1200px) {
    .header_sns {
        right: 0.5729vw;
    }
}

@media only screen and (max-height: 480px) {
    .header_sns {
        display: none;
    }
}

.header_sns_sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 70px;
}

.header_sns .sns_wrap {
    margin-left: -13px;
    display: inline-block;
}

.header_sns .sns_wrap ul {
    display: block;
        text-align: center;
}

.header_sns .sns_wrap ul li {
    padding: 11px 0;
}

.header_sns .icon_twitter {
    display: block;
    height: 2.3rem;
}

/* nav */

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg {
    position: fixed;
    z-index: 5;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.87);
    /*丸のスタート位置と形状*/
    transform: scale(0);
    /*scaleをはじめは0に*/
    right: -50px;
    top: -50px;
    transition: all .6s;
    /*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive {
    transform: scale(50);
    /*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list {
    display: none;
    /*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#g-nav.panelactive #g-nav-list {
    display: block;
    /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav .g-nav-list-ul {
    opacity: 0;
    /*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity: 1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    /*0.2 秒遅らせて出現*/
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/*リストのレイアウト設定*/
/* #g-nav li {
    text-align: center;
} */

#g-nav li a {
    color: #fff;
    text-decoration: none;
    padding: 2rem 0;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6rem;
}


/*========= ボタンのためのCSS ===============*/
.openbtn1 {
    position: fixed;
    top: 17px;
    right: 0px;
    z-index: 9999;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

/*×に変化*/
.openbtn1 span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: #2f0f19;
    width: 45%;
}

.openbtn1 span:nth-of-type(1) {
    top: 15px;
}

.openbtn1 span:nth-of-type(2) {
    top: 23px;
}

.openbtn1 span:nth-of-type(3) {
    top: 31px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

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

.openbtn1.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn1.active span {
    background-color: #fff;
}

.nav_logo {
    text-align: center;
    padding-bottom: 4.0rem;
}

.g-nav-list-ul {
    width: 100vw;
    height: 100vh;
    padding: 0 15%;
    padding-bottom: 4rem;
}

.g-nav-list-ul .sns_wrap {
    padding-bottom: 4.0rem;
}

.g-nav-list-ul .sns_wrap ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.g-nav-list-ul .sns_wrap ul li {
    padding: 0 13px;
}

.openbtn1.active {
    position: fixed;
}

@media only screen and (max-width: 1200px) {
    .header_nav.pc {
        display: none;
    }
    .sp_nav.sp {
        display: block;
    }
}

/*
kv******************************/

.kv {
    position: relative;
}

.kv_movie {
    position: relative;
    overflow: hidden;
    padding: 2.8rem 0 7rem 0;
}

@media only screen and (max-width: 1450px) {
    .kv_movie {
        padding: 2.8rem 0 7.0rem 0;
    }
}

@media only screen and (max-width: 480px) {
    .kv_movie {
        padding: 2.8rem 3rem 7rem 4.5rem;
        margin-right: -15px;
        margin-left: -15px;
    }
}

.kv_catch {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48.557%;
    max-width: 722px;
    pointer-events: none;
}

@media only screen and (max-width: 1200px) {
    .kv_catch {
        top: 88%;
        left: 15px;
        width: 100%;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 480px) {
    .kv_catch {
        top: 88%;
        left: 15px;
        width: 100%;
    }
}

.kv_catch-ja {
    font-size: 1.8rem;
    color: #fff;
    padding-top: 3.5rem;
}

@media only screen and (max-width: 1200px) {
    .kv_catch-ja {
        padding-top: 0;
    }
}

@media only screen and (max-width: 480px) {
    .kv_catch-ja {
        padding-top: 0;
    }
}


.kv_movie_inner {
    width: 63.02149178255373%;
    max-width: 997px;
    margin-left: auto;
}

@media only screen and (max-width: 1200px) {
    .kv_movie_inner {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .kv_movie_inner {
        width: 100%;
    }
}

.kv_movie_flex {
    display: flex;
    margin: 0 -1vw;
}


.movie_item {
    width: 33.3333333333%;
    margin: 0 1vw;
    -webkit-clip-path: inset(0px 0px round 175px 175px 175px 175px);
    clip-path: inset(0px 0px round 175px 175px 175px 175px);
}

@media(hover: hover) {
    .movie_item:hover .movie_list-img {
        opacity:0;
    }

    .movie_item:hover video {
        opacity: 1;
    }
}

@media only screen and (max-width: 480px) {
    .movie_item {
        width: 100%;
        margin: 0;
    }
    .movie_item-02, .movie_item-03 {
        display: none;
    }
}

.movie_list {
    position: relative;
    z-index: 1;
    background-color: #305A55;
    border-radius: 174px;
    overflow: hidden;
    cursor: pointer;
}

.movie_list::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 141.158%;
    pointer-events: none;
}

.-waku {
    border: 2px solid #707070;
    border-radius: 174px;
    box-sizing: border-box;
    z-index: 2;
}

.movie_list video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition-property: opacity;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(0.3, 0.1, 0.1, 1);
}

@media(min-width: 960px) {
    .movie_list video {
        opacity:0;
    }
}

.movie_list-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition-property: opacity;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(0.3, 0.1, 0.1, 1);
}

.movie_list-img img {
    display: none;
}

@media(min-width: 960px) {
    .movie_list-img img {
        display:block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

.movie_list-cover {
    position: absolute;
    bottom: 0;
}

.kv_bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    padding: 3.7rem 0 0 0.9rem;
}

@media only screen and (max-width: 1450px) {
    .kv_bottom {
        width: -webkit-calc(100% - 3.125vw);
        width: calc(100% - 3.125vw);
        padding: 3.7rem 0 0;
    }
}

@media only screen and (max-width: 480px) {
    .kv_bottom {
        padding: 3.7rem 0 0 1.5rem;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.kv_news {
    padding-top: 86px;
}

@media only screen and (max-width: 786px) {
    .kv_news {
        padding-top: 56px;
    }
}

.kv_news a {
    color: #fff;
}

.kv_news-date {
    font-size: 1.4rem;
    padding-right: 63px;
    letter-spacing: 0.3em;
}

@media only screen and (max-width: 480px) {
    .kv_news-date {
        display: block;
        padding-right: 0;
        padding-bottom: 1.0rem;
    }
}

.kv_news-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    max-width: 500px;
    vertical-align: bottom;
}

@media only screen and (max-width: 1000px) {
    .kv_news-text {
        width: 80%;
        max-width: 400px;
    }
}

.kv_movie_btn {
    position: absolute;
    right: -23px;
    padding-bottom: 2rem;
}

@media only screen and (max-width: 1450px) {
    .kv_movie_btn {
        right: 42px;
    }
}

@media only screen and (max-width: 1000px) {
    .kv_movie_btn {
        right: 18px;
    }
}

@media only screen and (max-width: 768px) {
    .kv_movie_btn {
        right: 1px;
        padding-bottom: 4rem;
    }
}

/* kv_loop_text */

.kv_loop_text {
    position: relative;
    height: 11.45833vw;
    z-index: 0;
    margin-right: -100px;
    margin-left: -68px;
}

@media only screen and (max-width: 1450px) {
    .kv_loop_text {
        margin-right: -30px;
        margin-left: -45px;
    }
}

@media only screen and (max-width: 768px) {
    .kv_loop_text {
        position: relative;
        height: 24.10256vw;
    }
}

.kv_loop_text-img {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    width: 100%;
    /* width: -webkit-calc(100% + 300px);
    width: calc(100% + 300px); */
    height: 11.45833vw;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    /* Safari用 */
    transform: translate(-50%, -50%);
    background-image: url("../images/kv-loop-text_02.png");
    background-position: 0 top;
    background-repeat: repeat-x;
    background-size: cover;
    -webkit-animation: kv-loop-text 100s linear 0s infinite;
    animation: kv-loop-text 100s linear 0s infinite;
    opacity: 0.6;
}

@media only screen and (max-width: 480px) {
    .kv_loop_text-img {
        height: 24.10256vw;
    }
}

@-webkit-keyframes kv-loop-text {
    0% {
        background-position: 0 top;
    }

    100% {
        background-position: -2221px top;
    }
}

@keyframes kv-loop-text {
    0% {
        background-position: 0 top;
    }

    100% {
        background-position: -2221px top;
    }
}

/* scroll__line */

.scroll_content {
    z-index: 1;
    position: absolute;
    left: -0;
    top: 25%;
    margin-left: -6.8rem;
    padding-top: 1.2rem;
}

@media only screen and (max-width: 1450px) {
    .scroll_content {
        margin-left: -4.5rem;
    }
}

@media only screen and (max-width: 480px) {
    .scroll_content {
        margin-left: -15px;
    }
}

.scroll_text {
    display: block;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

.scroll_line {
    position: relative;
    left: 10px;
    margin-top: 7px;
    width: 1px;
    height: 70px;
    overflow: hidden;
    background: #fff;
}

/*
subkv******************************/

.subkv {
    position: relative;
}

.subkv_image_box {
    position: relative;
    overflow: hidden;
    padding: 2.8rem 0 9.5rem 0;
}

@media only screen and (max-width: 1450px) {
    .subkv_image_box {
        padding: 2.8rem 0 2.5rem 0;
    }
}

@media only screen and (max-width: 480px) {
    .subkv_image_box {
        padding: 2.8rem 3rem 2.5rem 4.5rem;
        margin-right: -15px;
        margin-left: -15px;
    }
}

.subkv_image {
    width: 79.013%;
    max-width: 1250px;
    margin-left: auto;
}

@media only screen and (max-width: 480px) {
    .subkv_image {
        width: 100%;
    }
}

.subkv_image img {
    border-radius: 100px 0 100px 0;
    height: 462px;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
}

@media only screen and (max-width: 1200px) {
    .subkv_image img {
        height: 300px;
    }
}

@media only screen and (max-width: 768px) {
    .subkv_image img {
        border-radius: 50px 0 50px 0;
        height: 180px;
    }
}

.page_title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    padding-top: 4.5rem;
}

@media only screen and (max-width: 768px) {
    .page_title {
        left: 15px;
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .page_title-en img.title_img_menu-course {
        width: 212px;
    }
    .page_title-en img.title_img_blog {
        width: 72px;
    }
    .page_title-en img.title_img_menu-staff {
        width: 78px;
    }
}

.page_title-ja {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    padding-top: 1.8rem;
}

@media only screen and (max-width: 480px) {
    .page_title-ja {
        font-size: 1.4rem;
    }
}

.no_subkv {
    position: relative;
    margin-bottom: -4.5rem;
}

/*
aboutus******************************/

.aboutus {
    /* background-color: #417A73; */
    background: linear-gradient(#305A55, #417A73);
}

.aboutus_inner {
    position: relative;
    padding: 14.0rem 0;
}

@media only screen and (max-width: 768px) {
    .aboutus_inner {
        padding: 9.8rem 0;
    }
}

.aboutus_inner::after {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    border-radius: 100px 0 0 100px;
    margin-left: 9.3229vw;
}

@media only screen and (max-width: 1450px) {
    .aboutus_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .aboutus_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .aboutus_inner::after {
        border-radius: 50px 0 0 50px;
        margin-left: 15px;
    }
}

.aboutus_heading {
    position: absolute;
    font-size: 7.4rem;
    font-weight: bold;
    z-index: 3;
    right: 9.3229vw;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    transform: translateX(50px);
}

@media only screen and (max-width: 1450px) {
    .aboutus_heading {
        right: 3.125vw;
        transform: translateX(35px);
    }
}

@media only screen and (max-width: 1200px) {
    .aboutus_heading {
        right: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .aboutus_heading {
        position: relative;
        font-size: 5.18rem;
        padding-bottom: 4.2rem;
        writing-mode: inherit;
        right: 0;
        left: -30px;
    }
}

.aboutus_concept {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 10.0rem;
}

@media only screen and (max-width: 768px) {
    .aboutus_concept {
        display: block;
    }
}

.aboutus_concept_figure {
    width: 50%;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 768px) {
    .aboutus_concept_figure {
        width: 100%;
    }
}

.aboutus_concept_figure figure {
    margin-left: -6.08333vw;
}

@media only screen and (max-width: 1700px) {
    .aboutus_concept_figure figure {
        margin-left: 0;
    }
}

.aboutus_concept_figure figure img {
    width: 100vw;
}

.aboutus_concept_info {
    width: 50%;
    padding-left: 110px;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 1200px) {
    .aboutus_concept_info {
        padding-left: 55px;
    }
}

@media only screen and (max-width: 768px) {
    .aboutus_concept_info {
        width: 100%;
        padding-left: 0;
        padding-top: 5.0rem;
    }
}

.aboutus_concept_info .title {
    font-size: 2.0rem;
    color: #A35F3A;
    font-weight: bold;
    padding-bottom: 7.0rem;
}

@media only screen and (max-width: 768px) {
    .aboutus_concept_info .title {
        padding-bottom: 3.5rem;
    }
}

@media only screen and (max-width: 1600px) {
    .aboutus_concept_info .text {
        width: -webkit-calc(100% - 73px);
        width: calc(100% - 73px);
    }
}

@media only screen and (max-width: 768px) {
    .aboutus_concept_info .text {
        width: 100%;
    }
}

.aboutus_greetings {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .aboutus_greetings {
        display: block;
    }
}

.aboutus_greetings_figure {
    width: -webkit-calc( ( 378 / 1140 ) * 100%);
    width: calc( ( 378 / 1140 ) * 100%);
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 768px) {
    .aboutus_greetings_figure {
        width: 80%;
    }
}

.aboutus_greetings_info {
    width: -webkit-calc( ( 762 / 1140 ) * 100%);
    width: calc( ( 762 / 1140 ) * 100%);
    padding-right: 110px;
    z-index: 2;
    position: relative;
}

@media only screen and (max-width: 1200px) {
    .aboutus_greetings_info {
        padding-right: 55px;
    }
}

@media only screen and (max-width: 768px) {
    .aboutus_greetings_info {
        width: 100%;
        padding-right: 0;
        padding-top: 5.0rem;
    }
}

.aboutus_greetings_info .title {
    font-size: 2.0rem;
    color: #A35F3A;
    font-weight: bold;
    padding-bottom: 7.0rem;
}

@media only screen and (max-width: 768px) {
    .aboutus_greetings_info .title {
        padding-bottom: 3.5rem;
    }
}

/*
gallery******************************/

.gallery {
    background-color: #417A73;
    padding: 14.0rem 0;
}

@media only screen and (max-width: 768px) {
    .gallery {
        padding: 9.8rem 0;
    }
}

.gallery_wrap {
    display: flex;
    overflow: hidden;
}

.gallery_list {
    display: flex;
    list-style: none;
}

.gallery_list-left{
    animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.gallery_item {
    width: -webkit-calc(100vw / 6);
    width: calc(100vw / 6);
    margin: 0 15px;
}

@media only screen and (max-width: 768px) {
    .gallery_item {
        width: -webkit-calc(100vw / 4);
        width: calc(100vw / 4);
        margin: 0 15px;
    }
}

@media only screen and (max-width: 480px) {
    .gallery_item {
        width: -webkit-calc(100vw / 2);
        width: calc(100vw / 2);
        margin: 0 15px;
    }
}

.gallery_item > img{
    width: 100%;
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

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

.top-menu {
    background: #F8F5EF;
    padding: 14.0rem 0;
}

@media only screen and (max-width: 768px) {
    .top-menu {
        padding: 9.8rem 0;
    }
}

.top-menu_heading {
    font-size: 7.4rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 6.0rem;
}

@media only screen and (max-width: 768px) {
    .top-menu_heading {
        font-size: 5.18rem;
        padding-bottom: 4.2rem;
    }
}

.top-menu_heading span {
    display: block;
    font-size: 2.0rem;
    font-weight: bold;
    color: #A35F3A;
}

@media only screen and (max-width: 768px) {
    .top-menu_heading span {
        font-size: 1.4rem;
    }
}

.top-menu_inner {
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    max-width: 1694px;
    margin: 0 auto;
}

.banner_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5.0rem 0;
}

@media screen and (max-width: 600px) {
    .banner_list {
        margin: -2.5rem 0;
    }
}

.banner_item {
    width: -webkit-calc((100% - 3.5%) / 2);
    width: calc((100% - 3.5%) / 2);
    margin-right: 3.5%;
    padding: 5.0rem 0;
}

.banner_item:nth-child(2n) {
        margin-right: 0;
    }

@media screen and (max-width: 600px) {
    .banner_item {
        width: 100%;
        margin-right: 0;
        padding: 2.5rem 0;
    }
}

.banner_item-title {
    font-size: 2.0rem;
    font-weight: bold;
    padding-top: 3.0rem;
}

.top-menu_btn {
    padding-top: 8.0rem;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .top-menu_btn {
        padding-top: 4.0rem;
    }
}

/*
page-menu******************************/

.page-menu {
    /* background-color: #417A73; */
    background: linear-gradient(#305A55, #417A73);
}

.page-menu_inner {
    position: relative;
    padding: 14rem 0;
}

@media only screen and (max-width: 768px) {
    .page-menu_inner {
        padding: 9.8rem 0;
    }
}

.page-menu_inner::after {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    border-radius: 100px 0 0 100px;
    margin-left: 9.3229vw;
}

@media only screen and (max-width: 1450px) {
    .page-menu_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .page-menu_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .page-menu_inner::after {
        border-radius: 50px 0 0 50px;
        margin-left: 15px;
    }
}

.page-menu_box {
    margin-bottom: 10rem;
}

@media only screen and (max-width: 768px) {
    .page-menu_box {
        margin-bottom: 7rem;
    }
}

.page-menu_box:last-child {
    margin-bottom: 0;
}

.page-menu_flex {
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    max-width: 1370px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 1700px) {
    .page-menu_flex {
        width: -webkit-calc(100% - 60px);
        width: calc(100% - 60px);
        max-width: 1140px;
    }
}

@media only screen and (max-width: 768px) {
    .page-menu_flex {
        display: block;
    }
}

.page-menu_left {
    position: relative;
    z-index: 2;
    width: 28%;
}

@media only screen and (max-width: 1700px) {
    .page-menu_left {
        margin-left: 0;
    }
}

@media only screen and (max-width: 768px) {
    .page-menu_left {
        width: 100%;
    }
}

.page-menu_title-en {
    font-size: 2.0rem;
    color: #A35F3A;
    font-weight: bold;
    letter-spacing: 0.2em;
}

.page-menu_right {
    position: relative;
    z-index: 2;
    width: 71.751%;
    max-width: 983px;
}

@media only screen and (max-width: 1700px) {
    .page-menu_right {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .page-menu_right {
        width: 100%;
    }
}

.page-menu_title-ja {
    font-size: 4.8rem;
    font-weight: bold;
    border-bottom: 1px solid #000;
}

@media only screen and (max-width: 768px) {
    .page-menu_title-ja {
        font-size: 3.36rem;
    }
}

.page-menu_info {
    padding: 2.7rem 0 5rem;
    width: 81.180%;
    max-width: 798px;
}

@media only screen and (max-width: 768px) {
    .page-menu_info {
        width: 95%;
    }
}

.page-menu_item {
    background: #F8F5EF;
    padding: 3.5rem 3.9rem 2.5rem 2.5rem;
    margin-bottom: 4.0rem;
}

.page-menu_item-category {
    background: #82AA7E;
    font-size: 1.4rem;
    color: #FFF;
    display: inline-block;
    padding: 0 7px;
}

.page-menu_item-title {
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0.9rem 0;
}

.page-menu_item-price {
    font-size: 1.8rem;
    text-align: right;
}

.page-menu_photo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}


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

.top-blog {
    position: relative;
}

.top-blog::before {
    content: "";
    position: absolute;
    top: 0;
    right: 9.3229vw;
    background: url(../images/img_katanuki_01.png);
    background-size: cover;
    z-index: 1;
    width: 100px;
    height: 100px;
}

@media only screen and (max-width: 1450px) {
    .top-blog::before {
        right: 3.125vw;
    }
}

@media screen and (max-width: 768px) {
    .top-blog::before {
        width: 50px;
        height: 50px;
    }
}

.top-blog::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 9.3229vw;
    background: url(../images/img_katanuki_02.png);
    background-size: cover;
    z-index: 1;
    width: 100px;
    height: 100px;
}

@media only screen and (max-width: 1450px) {
    .top-blog::after {
        right: 3.125vw;
    }
}

@media screen and (max-width: 768px) {
    .top-blog::after {
        width: 50px;
        height: 50px;
    }
}

.top-blog_inner {
    position: relative;
    padding: 14rem 0;
}

@media only screen and (max-width: 768px) {
    .top-blog_inner {
        padding: 9.8rem 0;
    }
}

.top-blog_inner::before {
    position: absolute;
    content: "";
    background-color: #F8F5EF;
    width: 9.3229vw;
    height: 100%;
    display: block;
    top: 0;
    right: 0;
}

@media only screen and (max-width: 1450px) {
    .top-blog_inner::before {
        width: 3.125vw;
    }
}

.top-blog_inner::after {
    position: absolute;
    content: "";
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    right: 0;
    border-radius: 0 100px 100px 0;
    margin-right: 9.3229vw;
}

@media only screen and (max-width: 1450px) {
    .top-blog_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .top-blog_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .top-blog_inner::after {
        border-radius: 50px 0 0 50px;
        margin-left: 15px;
    }
}

.top-blog_heading {
    position: relative;
    font-size: 7.4rem;
    font-weight: bold;
    padding-bottom: 6.0rem;
    color: #fff;
    z-index: 3;
}

@media only screen and (max-width: 768px) {
    .top-blog_heading {
        font-size: 5.18rem;
        padding-bottom: 4.2rem;
    }
}

.top-blog_heading span {
    display: block;
    font-size: 2.0rem;
    font-weight: bold;
    color: #A35F3A;
}

@media only screen and (max-width: 768px) {
    .top-blog_heading span {
        font-size: 1.4rem;
    }
}

.blog_list {
    position: relative;
    z-index: 3;
    font-size: 0;
}

.blog_list .slick-next {
    right: 17px;
    z-index: 100;
    display: none!important;
}

.blog_list .slick-prev {
    left: 23px;
    z-index: 100;
    display: none!important;
}

.blog_list .slick-list {
    padding-right: -webkit-calc((100% - 78.88vw)/ 2);
    padding-right: calc((100% - 78.88vw)/ 2);
    margin-left: -webkit-calc((100% - 78.88vw)/ 2);
    margin-left: calc((100% - 78.88vw)/ 2);
}

@media only screen and (min-width: 1440px) {
    .blog_list .slick-list {
        margin-left: -webkit-calc(((100% - 1440px)/ 2) + 152px);
        margin-left: calc(((100% - 1440px)/ 2) + 152px);
    }
}

@media only screen and (max-width: 767px) {
    .blog_list .slick-list {
        margin-left: 30px;
        padding-right: 70px
    }
}

.blog_list .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.blog_list .slick-slide {
    margin-right: 40px;
    width: 18.435vw!important;
}

@media only screen and (max-width: 1450px) {
    .blog_list .slick-slide {
        margin-right: 40px;
        width: 22.666vw!important;
    }
}

@media only screen and (max-width: 480px) {
    .blog_list .slick-slide {
        margin-right: 40px;
        width: 62.666vw!important;
    }
}

/* .blog_list .slick-slide:last-child {
    display: none;
} */

@media only screen and (max-width: 768px) {
    .blog_list .slick-slide:last-child {
            display: block;
        }
}

@media only screen and (max-width: 480px) {
    .blog_list .slick-slide:last-child {
            display: block;
        }
}

.blog_list .slick-slide img {
    width: 100vw;
}

.blog_item_info {
    background-color: #fff;
    padding: 1.7rem 14px 3.8rem;
}


.blog_item-date {
    font-size: 1.4rem;
    background: #fff;
    padding-bottom: 1.6rem;
}

.blog_item-date {
    font-size: 1.4rem;
    background: #fff;
}

.blog_item-title {
    font-size: 1.6rem;
    background: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.top-blog_btn {
    display: block;
    padding-top: 5rem;
    text-align: right;
    position: relative;
    z-index: 4;
}

/*
page-blog******************************/

.page-blog {
    /* background-color: #417A73; */
    background: linear-gradient(#305A55, #417A73);
}

.page-blog_inner {
    position: relative;
    padding: 14rem 0;
}

@media only screen and (max-width: 768px) {
    .page-blog_inner {
        padding: 9.8rem 0;
    }
}

.page-blog_inner::after {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    border-radius: 100px 0 0 100px;
    margin-left: 9.3229vw;
}

@media only screen and (max-width: 1450px) {
    .page-blog_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .page-blog_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .page-blog_inner::after {
        border-radius: 50px 0 0 50px;
        margin-left: 15px;
    }
}

.page-blog_list {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -4rem 0 -3rem;
}

.page-blog_item {
    width: -webkit-calc((100% - 6%) / 3);
    width: calc((100% - 6%) / 3);
    margin-top: 4rem;
    margin-right: 3%;
    margin-bottom: 3rem;
    z-index: 10;
}

@media screen and (min-width: 897px) {
    .page-blog_item:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 896px) {
    .page-blog_item {
        width: -webkit-calc((100% - 5% - 1px) / 2);
        width: calc((100% - 5% - 1px) / 2);
        margin-right: 5%;
    }
}

@media screen and (max-width: 896px) {
    .page-blog_item:nth-child(2n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 568px) {
    .page-blog_item {
        width: 100%;
        margin-right: 0;
    }
}

/*
news_single******************************/

.page-blog_inner.page-blog-single {
    position: relative;
    padding: 10rem 0;
    min-height: calc(100vh - 481px);
}

@media only screen and (max-width: 768px) {
    .page-blog_inner.page-blog-single {
        padding: 7.0rem 0;
    }
}

.blog_box {
    position: relative;
    z-index: 3;
    background: #fff;
    width: 915px;
    margin: 0 auto;
}

@media screen and (max-width: 1200px) {
    .blog_box {
        width: 90%;
    }
}

.notice_category {
    float: left;
}

.notice_date {
    font-size: 1.4rem;
    display: block;
    padding-bottom: 1.5rem;
}

.notice_title {
    font-size: 2.4rem;
    display: block;
    padding-bottom: 1.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
}

.notice_text {
    font-size: 1.6rem;
    display: block;
    line-height: 2.0;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    border-top: 1px dashed #000;
}

/* postNavi */

.back {
    text-align: center;
    padding-top: 5.0rem;
}

/*
qa******************************/

.qa {
    background: #F8F5EF;
    padding: 14.0rem 0;
}

@media only screen and (max-width: 768px) {
    .qa {
        padding: 9.8rem 0;
    }
}

.qa_heading {
    font-size: 7.4rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 6.0rem;
}

@media only screen and (max-width: 768px) {
    .qa_heading {
        font-size: 5.18rem;
        padding-bottom: 4.2rem;
    }
}


.qa_heading span {
    display: block;
    font-size: 2.0rem;
    font-weight: bold;
    color: #A35F3A;
}

@media only screen and (max-width: 768px) {
    .qa_heading span {
        font-size: 1.4rem;
    }
}

.qa_item {
    width: -webkit-calc(100% - 148px);
    width: calc(100% - 148px);
    max-width: 924px;
    margin: auto;
    padding-bottom: 8.0rem;
}

@media only screen and (max-width: 768px) {
    .qa_item {
        width: -webkit-calc(100% - 74px);
        width: calc(100% - 74px);
    }
}

.qa_item:last-child {
    padding-bottom: 0;
}

.qa_item-title {
    position: relative;
    background: #fff;
    padding: 3.6rem 3.2rem 3.4rem;
    border-radius: 0 0 3.0rem 0;
    margin-bottom: 3.0rem;
}

.qa_item-title::before {
    position: absolute;
    content: 'Q.';
    top: 1.0rem;
    left: -3.5em;
    height: 7.4rem;
    width: 7.4rem;
    border-radius: 50%;
    font-size: 2.6rem;
    font-weight: bold;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .qa_item-title::before {
        font-size: 1.6rem;
        height: 4.5rem;
        width: 4.5rem;
    }
}

.qa_item-text {
    position: relative;
    background: #fff;
    padding: 3.6rem 3.2rem 3.4rem;
    border-radius: 0 0 0 3.0rem;
}

.qa_item-text::after {
    position: absolute;
    content: 'A.';
    top: 1.0rem;
    right: -3.5em;
    height: 7.4rem;
    width: 7.4rem;
    border-radius: 50%;
    font-size: 2.6rem;
    font-weight: bold;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .qa_item-text::after {
        font-size: 1.6rem;
        height: 4.5rem;
        width: 4.5rem;
    }
}

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

.top-staff {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    margin: 14.0rem 0;
}

@media screen and (max-width: 768px) {
    .top-staff {
        margin: 9.8rem 0;
    }
}

@media screen and (min-width: 769px) {
    .top-staff_flex {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
        height: 750px;
    }
}

.top-staff_flex {
    position: relative;
    width: 100%;
    height: 750px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .top-staff_flex {
        height: 550px;
    }
}

.top-staff_heading {
    font-size: 7.4rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 6.0rem;
    color: #fff;
}

@media only screen and (max-width: 768px) {
    .top-staff_heading {
        font-size: 5.18rem;
        padding-bottom: 4.2rem;
    }
}

.top-staff_heading span {
    display: block;
    font-size: 2.0rem;
    font-weight: bold;
    color: #A35F3A;
}

@media only screen and (max-width: 768px) {
    .top-staff_heading span {
        font-size: 1.4rem;
    }
}

.top-staff_slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

@media screen and (min-width: 769px) {
    .top-staff_slider {
        width: 640px;
    }
}

.top-staff_slider_list {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.top-staff_slider_list.list-left {
    padding-right: 7.5px;
}

.top-staff_slider_list.list-right {
    padding-left: 7.5px;
}

.top-staff_slider_item {
    z-index: 1;
    position: relative;
    width: 100%;
}

.top-staff_slider_item-img {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding-bottom: 15px;
}

.top-staff_slider_item-img figure {
    position: relative;
}

.top-staff_slider_item-img figcaption {
    position: absolute;
    bottom: 15px;
    left: 10px;
    background: #A35F3A;
    color: #fff;
    width: 90%;
    padding: 5px 10px;
    border-radius: 0 10px 10px 10px;
    font-size: 1.4rem;
}

@media only screen and (max-width: 768px) {
    .top-staff_slider_item-img figcaption {
        left: 5px;
        font-size: 1.2rem;
    }
}

.top-staff_slider_item-img img {
    display: block;
    width: 100%;
    height: auto;
}

.top-staff_slider_item.slider01 {
    transform: translateY(0);
    animation: slide1 50s -25s linear infinite;
    -webkit-animation: slide1 50s -25s linear infinite;
}

.top-staff_slider_item.slider02 {
    transform: translateY(0);
    animation: slide2 50s linear infinite;
    -webkit-animation: slide2 50s linear infinite;
}

.top-staff_slider_item.slider03 {
    transform: translateY(0);
    animation: slide3 50s -25s linear infinite;
    -webkit-animation: slide3 50s -25s linear infinite;
}

.top-staff_slider_item.slider04 {
    transform: translateY(0);
    animation: slide4 50s linear infinite;
    -webkit-animation: slide4 50s linear infinite;
}

@keyframes slide1 {
    0% {
        transform:translateY(100%);
    }
	100%{
        transform:translateY(-100%);
    }
}

@-webkit-keyframes slide1{
    0% {
        -webkit-transform:translateY(100%);
    }
	100%{
        -webkit-transform:translateY(-100%);
    }
}

@keyframes slide2 {
    0% {
        transform:translateY(0%);
    }
	100%{
        transform:translateY(-200%);
    }
}

@-webkit-keyframes slide2{
    0% {
        -webkit-transform:translateY(0%);
    }
	100%{
        -webkit-transform:translateY(-200%);
    }
}

@keyframes slide3 {
    0% {
        transform:translateY(-100%);
    }
	100% {
        transform:translateY(100%);
    }
}

@-webkit-keyframes slide3{
	  0% {
        -webkit-transform:translateY(-100%);
    }
	100% {
        -webkit-transform:translateY(100%);
    }
}

@keyframes slide4 {
	  0% {
        transform:translateY(-200%);
    }
	100% {
        transform:translateY(0%);
    }
}

@-webkit-keyframes slide4{
	  0% {
        -webkit-transform:translateY(-200%);
    }
	100% {
        -webkit-transform:translateY(0%);
    }
}

.top-staff_btn-pc {
    display: block;
    text-align: center;
}

.top-staff_btn-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .top-staff_btn-pc {
        display: none;
    }
    .top-staff_btn-sp {
        display: block;
        padding-top: 5rem;
        text-align: center;
    }
}

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

.page-staff {
    /* background-color: #417A73; */
    background: linear-gradient(#305A55, #417A73);
}

.page-staff_inner {
    position: relative;
    padding: 14rem 0;
}

@media only screen and (max-width: 768px) {
    .page-staff_inner {
        padding: 9.8rem 0;
    }
}

.page-staff_inner::after {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    border-radius: 100px 0 0 100px;
    margin-left: 9.3229vw;
}

@media only screen and (max-width: 1450px) {
    .page-staff_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .page-staff_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .page-staff_inner::after {
        border-radius: 50px 0 0 50px;
        margin-left: 15px;
    }
}

.page-staff_box {
    margin-bottom: 10rem;
}

@media only screen and (max-width: 768px) {
    .page-staff_box {
        margin-bottom: 7rem;
    }
}

.page-staff_box:last-child {
    margin-bottom: 0;
}

.page-staff_flex {
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    max-width: 1370px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 1700px) {
    .page-staff_flex {
        width: -webkit-calc(100% - 60px);
        width: calc(100% - 60px);
        max-width: 1140px;
    }
}

@media only screen and (max-width: 768px) {
    .page-staff_flex {
        display: block;
    }
}

.page-staff_left {
    position: relative;
    z-index: 2;
    width: 28%;
}

@media only screen and (max-width: 1700px) {
    .page-staff_left {
        margin-left: 0;
    }
}

@media only screen and (max-width: 768px) {
    .page-staff_left {
        width: 100%;
    }
}

.page-staff_title-en {
    font-size: 2.0rem;
    color: #A35F3A;
    font-weight: bold;
    letter-spacing: 0.2em;
}

.page-staff_right {
    position: relative;
    z-index: 2;
    width: 71.751%;
    max-width: 983px;
}

@media only screen and (max-width: 1700px) {
    .page-staff_right {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .page-staff_right {
        width: 100%;
    }
}

.page-staff_title-ja {
    font-size: 4.8rem;
    font-weight: bold;
    border-bottom: 1px solid #000;
}

@media only screen and (max-width: 768px) {
    .page-staff_title-ja {
        font-size: 3.36rem;
    }
}

.page-staff_panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 8.0rem;
}

@media only screen and (max-width: 480px) {
    .page-staff_panel {
        display: block;
    }
}

.page-staff_panel_img {
    width: 30.824%;
    max-width: 303px;
}

@media only screen and (max-width: 480px) {
    .page-staff_panel_img {
        width: 100%;
    }
}

.page-staff_panel_img img {
    border-radius: 80px 0 0  0;
}

.page-staff_panel_info {
    width: 69.175%;
    max-width: 680px;
    background: #F8F5EF;
    padding: 4.2rem 3.5rem 5rem;
    border-radius: 0 0 80px 0;
}

@media only screen and (max-width: 480px) {
    .page-staff_panel_info {
        width: 100%;
    }
}

.page-staff_panel-title {
    font-size: 1.8rem;
    font-weight: bold;
    padding-bottom: 1.5rem;
}

.page-staff_panel-neme_ja {
    font-size: 1.8rem;
    font-weight: bold;
}

.page-staff_panel-neme_en {
    font-size: 1.4rem;
}

.page-staff_panel-comment {
    padding-top: 2.0rem;
    padding-bottom: 5rem;
}

.page-staff_panel-btn_reserve a {
    position: relative;
    display: block;
    background: #A35F3A;
    color: #fff;
    width: 186px;
    height: 48px;
    line-height: 48px;
    border-radius: 4px;
    text-align: center;
    z-index: 4;
}



/*
voice******************************/

.voice {
    background-color: #F8F5EF;
    padding-top: 14.0rem;
}

@media only screen and (max-width: 768px) {
    .voice {
        padding-top: 9.8rem;
    }
}

.voice_inner {
    position: relative;
    padding: 14.0rem 0;
}

@media only screen and (max-width: 768px) {
    .voice_inner {
        padding: 9.8rem 0;
    }
}

.voice_inner::after {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    border-radius: 100px 0 0 0;
    margin-left: 9.3229vw;
}

@media only screen and (max-width: 1450px) {
    .voice_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .voice_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .voice_inner::after {
        border-radius: 50px 0 0 0;
        margin-left: 15px;
    }
}

.voice_heading {
    font-size: 7.4rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 6.0rem;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 768px) {
    .voice_heading {
        font-size: 5.18rem;
        padding-bottom: 4.2rem;
    }
}

.voice_heading span {
    display: block;
    font-size: 2.0rem;
    font-weight: bold;
    color: #A35F3A;
}

@media only screen and (max-width: 768px) {
    .voice_heading span {
        font-size: 1.4rem;
    }
}

.voice_panel {
    position: relative;
    z-index: 2;
}

.voice_panel_inner {
    padding: 5.6rem 4.0rem;
    border: 1px solid #707070;
    border-radius: 3.6rem;
    margin-bottom: 7.0rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 480px) {
    .voice_panel_inner {
        padding: 2.5rem 2.5rem;
        border: 1px solid #707070;
        border-radius: 1.8rem;
    }
}

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

.voice_panel_img {
    margin-right: 63px;
    width: 20%;
    max-width: 150px;
}

@media only screen and (max-width: 768px) {
    .voice_panel_img {
        margin-right: 30px;
    }
}

@media only screen and (max-width: 480px) {
    .voice_panel_img {
        margin-right: 15px;
    }
}

.voice_panel_info {
    width: 85%;
    max-width: 910px;
}

.voice_panel-name {
    float: left;
}

@media only screen and (max-width: 768px) {
    .voice_panel-name {
        float: none;
    }
}

.voice_panel-date {
    float: right;
}

@media only screen and (max-width: 768px) {
    .voice_panel-date {
        float: none;
    }
}

.voice_panel-text {
    clear: both;
    padding-top: 3.6rem;
}

/*
footer
***************************************************** */

.footer {
    background-color: #fff;
    overflow: hidden;
}

.footer_inner {
    position: relative;
    background-color: #417A73;
    width: -webkit-calc(100% - 9.3229vw);
    width: calc(100% - 9.3229vw);
    padding: 7.0rem 10.0rem 1.5rem 6.8rem;
    border-radius: 0 100px 0 0;
}

@media only screen and (max-width: 1450px) {
    .footer_inner {
        width: -webkit-calc(100% - 3.125vw);
        width: calc(100% - 3.125vw);
        padding: 7.0rem 3.0rem 1.5rem 4.5rem;
    }
}

@media only screen and (max-width: 1200px) {
    .footer_inner {
        width: -webkit-calc(100% - 1.5625vw);
        width: calc(100% - 1.5625vw);
    }
}

@media only screen and (max-width: 768px) {
    .footer_inner {
        display: block;
        padding: 3.5rem 5rem 1.5rem 3.4rem;
        border-radius: 0 50px 0 0;
        width: -webkit-calc(100% - 15px);
        width: calc(100% - 15px);
    }
}

.footer_flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 1200px) {
    .footer_flex {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .footer_flex {
        display: block;
    }
}

.footer_left {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 70%;
}

@media only screen and (max-width: 1200px) {
    .footer_left {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .footer_left {
        display: block;
    }
}

.footer_logo {
    margin-right: 68px;
}

@media only screen and (max-width: 1200px) {
    .footer_logo {
        margin-right: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .footer_logo {
        margin-right: 0;
        padding-bottom: 3.0rem;
    }
}

.footer_info {
    font-style: inherit;
    padding-bottom: 3rem;
    color: #fff;
}

.footer_info dl {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media only screen and (max-width: 768px) {
    .footer_info dl {
        display: block;
        padding-bottom: 0.8rem;
    }
    .footer_info dl:last-child {
        display: block;
        padding-bottom: 0;
    }
}

.footer_address .to_googlemap {
    color: #fff;
    padding-left: 16px;
}

.footer_address .to_googlemap img {
    margin-right: 6px;
}

.footer_tel {
    font-size: 2.4rem;
    font-weight: bold;
}

.footer_tel a {
    color: #fff;
}

.footer_tel .icon_tel {
    margin-top: 1.3rem;
    margin-right: 10px;
}

.footer_right {
    position: relative;
    z-index: 2;
    width: 30%;
}

@media only screen and (max-width: 1200px) {
    .footer_right {
        width: 100%;
    }
}

.footer .sns_wrap ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 1200px) {
    .footer .sns_wrap ul {
        padding-bottom: 3.0rem;
    }
}

.footer .sns_wrap ul li {
    padding: 0 20px;
}

@media screen and (max-width: 1200px) {
    .footer .sns_wrap ul li {
        padding: 0 15px;
    }
}

.footer .copyright {
    text-align: right;
    color: #fff;
    font-size: 1.2rem;
}

/*
page-content-bg******************************/

.page-content-bg {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* background: url(../img/page-content-bg@1x.jpg); */
    background: url(../images/bg_wall.png);
    transform: translateX(0%);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

@media screen and (max-width: 1400px) {
    .page-content-bg {
        background: url(../images/bg_wall.png);
        background-size: cover;
        background-position: 86% bottom;
    }
}

@media screen and (max-width: 768px) {
    .page-content-bg {
        height: 258vw;
        background: url(../images/bg_wall.png);
        background-size: cover;
        background-position: 86% bottom;
    }
}

/* .page-content-bg::before {
    content: '';
    top: 0px;
    left: 0;
    width: 100%;
    padding-top: 0;
    display: block;
}

.page-content-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -30px;
    display: block;
    width: 100%;
    height: 140px;
    background: url(../images/isu.png) no-repeat;
    z-index: 1;
    background-size: 100%;
} */
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}


/* page top */

#return_top {
    position: relative;
    z-index: 5;
    mix-blend-mode: difference;
}

#return_top a {
    position: fixed;
    bottom: 20px;
    right: 65px;
    cursor: pointer;
    color: #fff;
    font-size: 1.8rem;
    line-height: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 30;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate( 180deg);
}

@media only screen and (max-width: 1450px) {
    #return_top a {
        right: 11px;
    }
}

@media only screen and (max-width: 1200px) {
    #return_top a {
        right: 0.5729vw;
    }
}

#return_top a span {
    visibility: inherit;
    display: block;
    margin-bottom: 50px;
    color: #fff;
    transform: rotate( 180deg);
}

#return_top a::before {
    content: "";
    width: 2px;
    height: 40px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
}

#return_top a:hover::before {
    position: inherit;
    background-color: #f1543b;
}

#return_top.scroll a::before {
    -webkit-animation: scrollAnime02 2.0s cubic-bezier(0.5, 0, 0, 1) infinite;
    animation: scrollAnime02 2.0s cubic-bezier(0.5, 0, 0, 1) infinite;
}

@-webkit-keyframes scrollAnime02 {
    0% {
        height: 0;
        bottom: 40px;
    }
    40% {
        height: 40px;
        bottom: 0;
    }
    60% {
        height: 40px;
    }
    100% {
        height: 0;
    }
}

@keyframes scrollAnime02 {
    0% {
        height: 0;
        bottom: 40px;
    }
    40% {
        height: 40px;
        bottom: 0;
    }
    60% {
        height: 40px;
    }
    100% {
        height: 0;
    }
}

/*
404 Not Found******************************/

.not_found {
    /* background-color: #417A73; */
    background: linear-gradient(#305A55, #417A73);
}

.not_found_inner {
    position: relative;
    padding: 10rem 0;
    min-height: calc(100vh - 481px);
}

@media only screen and (max-width: 768px) {
    .not_found_inner {
        padding: 9.8rem 0;
    }
}

.not_found_inner::after {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    border-radius: 100px 0 0 100px;
    margin-left: 9.3229vw;
}


@media only screen and (max-width: 1450px) {
    .not_found_inner::after {
        margin-left: 3.125vw;
    }
}

@media only screen and (max-width: 1200px) {
    .not_found_inner::after {
        margin-left: 1.5625vw;
    }
}

@media only screen and (max-width: 768px) {
    .not_found_inner::after {
        border-radius: 50px 0 0 50px;
        margin-left: 15px;
    }
}

.not_found_title {
    font-size: 12rem;
    position: relative;
    z-index: 4;
    text-align: center;
    line-height: 1.4;
    padding-bottom: 5rem;
}

.not_found_title span {
    display: block;
    font-size: 5.0rem;
}

.not_found_text {
    line-height: 2.0;
    position: relative;
    z-index: 4;
}

.not_found a {
    text-decoration: underline;
}

/* .btn_reserve {
    display: block;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    background: #000;
    color: #fff;
    width: 48px;
    height: 186px;
    margin: auto;
    line-height: 48px;
    border-radius: 4px;
    position: relative;
    z-index: 78;
} */



/* fadeUp */

.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */

.fadeLeft{
    animation-name: fadeLeftAnime;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime{
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
    animation-name: fadeRightAnime;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime{
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeLeftTrigger{
    opacity: 0;
}

.fadeUpTrigger{
    opacity: 0;
}

.fadeRightTrigger{
    opacity: 0;
}

/* btn circle */

.btn_circle {
    display: inline-block;
}

.btn_circle a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #A35F3A;
    padding: 1px 0;
}

.btn_circle a:hover .text {
    opacity: .7;
}

.btn_circle a:hover .icon:before {
    height: 120%;
    width: 120%;
}

.btn_circle .text {
    font-weight: bold;
    -webkit-transition: opacity .6s;
    transition: opacity .6s;
}

.btn_circle .icon {
    color: #fff;
    width: 6.4rem;
    height: 6.4rem;
    margin-left: 24px;
    position: relative;
    z-index: 10;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.btn_circle .icon:before {
    border: 1px solid #A35F3A;
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width,height;
    transition-property: width,height;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    width: 100%;
    z-index: -1;
}

.icon_triangle {
    width: 12px;
    height: 14px;
    fill: #A35F3A;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.top-blog_btn .icon_triangle {
    fill: #fff;
}

.top-blog_btn .btn_circle .icon:before {
    border: 1px solid #fff;
}

.top-blog_btn .btn_circle a {
    color: #fff;
}

.top-staff_btn-pc .icon_triangle {
    fill: #fff;
}

.top-staff_btn-pc .btn_circle .icon:before {
    border: 1px solid #fff;
}

.top-staff_btn-pc .btn_circle a {
    color: #fff;
}

.top-staff_btn-sp .icon_triangle {
    fill: #fff;
}

.top-staff_btn-sp .btn_circle .icon:before {
    border: 1px solid #fff;
}

.top-staff_btn-sp .btn_circle a {
    color: #fff;
}