.bg-primary {
    background: none !important;
}

.entry-header {
    display: none;
}

.navbar-expand-md {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}




.testbox {
    height: 2000px;
    background: #ccc;
}





#wrapper-navbar {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0;
    z-index: 1500;
    background-color: rgba(255, 255, 255, 1.0);
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    transition: 0.8s;
}







@media(min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}










#contents {
    transform: translateX(0);
    transition: all .2s cubic-bezier(0.19, 1, 0.22, 1)
}





.button-line {
    height: 1px;
    width: 100%;
    background-color: #111
}

.button-link {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #111;
    font-size: 18px;
    line-height: 1;
    position: relative;
    padding: 23px 50px
}

@media all and (max-width: 768px) {
    .button-link {
        padding: 17px 33px
    }
}

.button-link .button-line {
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #111;
    z-index: 0;
    overflow: hidden
}

.button-link .button-line::before {
    width: 100%;
    content: "";
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    background: #E4E4E4;
    height: 1px;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: right top;
    transition: -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1)
}

.button-link .button-line::after {
    width: 100%;
    content: "";
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    background: #22819E;
    height: 1px;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: right top;
    transition: -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1)
}

.button-link:hover {
    color: #22819E
}

.button-link:hover .button-line:before {
    transform: scaleX(1);
    transform-origin: left top;
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1)
}

.button-link:hover .button-line:after {
    transform: scaleX(1);
    transform-origin: left top;
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition-delay: 0.35s
}

.link-card {
    display: block;
    width: 100%;
}

.link-card .news-img {
    transition: all .8s cubic-bezier(0.19, 1, 0.22, 1)
}

.link-card:hover .news-img {
    transform: translate(-1%, -1%);
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.05)
}

@media all and (max-width: 768px) {
    .link-card:hover .news-img {
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05)
    }
}



.link-card .productimg {
    transition: all .8s cubic-bezier(0.19, 1, 0.22, 1)
}

.link-card a:hover .productimg {
    transform: translate(-1%, -1%);
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.05)
}

@media all and (max-width: 768px) {
    .link-card:hover .productimg {
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05)
    }
}



.link-wrap .link {
    display: inline-block;
    height: 31px;
    width: 31px;
    transform-origin: center;
    position: relative;
    border: 1px solid #707070;
    border-radius: 50%;
    overflow: hidden
}

.link-wrap .link i {
    display: block;
    position: absolute;
    border-bottom: 1px solid #707070;
    border-right: 1px solid #707070;
    box-sizing: border-box;
    transform-origin: center;
    width: 9px;
    height: 9px;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: all .2s cubic-bezier(0.19, 1, 0.22, 1)
}

.link-wrap .link-line {
    height: 1px;
    width: 0%;
    position: absolute;
    top: 50%;
    left: -40%;
    background: #111;
    z-index: 0
}

.link-wrap .link-line::before {
    width: 100%;
    content: "";
    display: block;
    top: 0;
    left: 1px;
    position: absolute;
    background: #E4E4E4;
    height: 1px;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: right top;
    transition: -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1)
}

.link-wrap .link-line::after {
    width: 100%;
    content: "";
    display: block;
    top: 0;
    left: 1px;
    position: absolute;
    background: #22819E;
    height: 1px;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: right top;
    transition: -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1)
}

.link-wrap:hover {
    overflow: visible
}

.link-wrap:hover .link {
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid #22819E
}

.link-wrap:hover .link i {
    border-bottom: 1px solid #22819E;
    border-right: 1px solid #22819E;
    transition: all .2s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.link-wrap:hover .link-line {
    top: 50%;
    width: 100%;
    animation: linkLine 0.2s cubic-bezier(0.19, 1, 0.22, 1) forwards
}

.link-wrap:hover .link-line:before {
    transform: scaleX(1);
    transform-origin: left top;
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1)
}

.link-wrap:hover .link-line:after {
    transform: scaleX(1);
    transform-origin: left top;
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 0.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition-delay: 0.35s
}

.link-wrap-small .link {
    height: 22px;
    width: 22px
}

.link-wrap-small .link i {
    width: 7px;
    height: 7px;
    top: 50%
}








.l-hero {
    position: relative;
    height: 100vh;
    z-index: 3;
    overflow: hidden;
}



@media all and (max-width: 768px) {
    .l-hero {
        padding-top: 60px;
        height: 100vh
    }
}

.l-hero-bg {
    position: absolute;
    height: 57vh;
    bottom: 0;
    background: #f5f5f5;
    width: 100%;
    z-index: -1
}


@media all and (max-width:768px) {
    .l-hero-bg {
        display: none
    }
}

@media all and (max-width: 768px) {
    .l-hero {
        height: auto
    }
}


.l-hero-slider {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-title {
    position: absolute;
    left: 130px;
    top: 30vh
}

@media all and (max-width:768px) {
    .hero-title {
        top: 41vh;
        left: 0vw;
        padding: 6.66667vw
    }
}

.hero-title-sp {
    position: static
}

.hero-title .hero-catch {
    color: #E37800;
    font-size: calc(55px + 2vw);
    line-height: 1.15;
    font-family: sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;
    letter-spacing: 0.2vw;
    position: relative;
}

.hero-title .hero-catch .sub-catch {
    color: #45352B;
    font-size: calc(2px + 1.5vw);
    line-height: 1.15;
    font-family: "futura-pt", sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;
    letter-spacing: 0.4vw;
    font-weight: 600;
}

@media all and (max-width: 768px) {
    .hero-title .hero-catch {
        font-size: 9.68vw
    }

    .hero-title .hero-catch-text {
        margin-bottom: 2.66667vw
    }
}

.hero-title .hero-catch-inner {
    margin-bottom: 1vw;
    line-height: 1
}

.hero-title .hero-catch-inner.hero-catch-inner-02,
.hero-title .hero-catch-inner.hero-catch-inner-04 {
    line-height: .5;
}

.hero-title .hero-sub {
    color: #45352B;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1;
    letter-spacing: 0.3vw;
    margin-left: 6px;
    margin-top: 2.2vw
}

@media all and (max-width: 768px) {
    .hero-title .hero-sub {
        font-size: 14px;
        margin-left: 0px;
        letter-spacing: 0.87vw;
        margin-top: 3vw;
        color: #707070
    }
}

.hero-title .hero-sub .line-horizontal {
    margin-bottom: 1rem
}

.hero-image {
    overflow: hidden;
    width: 78.125%;
    height: calc(100vh - 150px);
    position: absolute;
    right: 0;
    top: 150px;
    z-index: 1
}






@media all and (max-width: 768px) {
    .hero-image {
        width: 100%;
        height: 89.33333vw;
        position: static;
        margin-bottom: 3.46667vw
    }
}

.hero-image .hero-title {
    position: absolute;
    left: calc(130px - 21.71vw);
    top: calc(30vh - 150px);
    z-index: 1
}

@media all and (max-width:768px) {
    .hero-image .hero-title {
        top: calc(41vh - 80px);
        left: -13.33333vw
    }
}

.hero-image .hero-title .hero-catch {
    color: #E37800;
    opacity: 1;
}

.hero-image .hero-title .hero-catch .sub-catch {
    color: #45352B;
    opacity: 1;
}


.hero-image .hero-title .hero-sub {
    color: #45352B;
    opacity: 1;
}

.hero-slider {
    height: 100%
}

.hero-slider img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-container {
    border-radius: 50px 0px 0px 50px;
}


.hero .swiper-container {
    width: 100%;
    height: 100%;
}



.hero .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}





.hero-catch-text {
    display: inline-block;
    position: relative;
    -webkit-clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
    clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%)
}

.hero-catch-text.active {
    -webkit-transform: none;
    -ms-transform: none;
    -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
    clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
    transition: -webkit-clip-path 1s cubic-bezier(0.205, 0.01, 0.075, 0.995) 1s, clip-path 1s cubic-bezier(0.205, 0.01, 0.075, 0.995) 1s, transform 1s cubic-bezier(0.205, 0.01, 0.075, 0.995) 1s;
    transition-delay: 0.8s;
}

.hero-catch-text-sub {
    margin-bottom: 12px;
    font-weight: bold;
    line-height:1.6;
}

.hero-catch-underline {
    border-bottom: 1px solid #111;
}

.line-horizontal {
    position: relative;
    display: inline-block
}

.line-horizontal:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 1px;
    width: 100%;
    background-color: #111;
    content: "";
    animation: lineHorizontal 2s 0.5s cubic-bezier(0.205, 0.01, 0.075, 0.995) forwards;
    opacity: 0
}

.line-horizontal:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    height: 1px;
    opacity: 0;
    width: 100%;
    background-color: #111;
    content: "";
    animation: lineHorizontal 2s 0.6s cubic-bezier(0.205, 0.01, 0.075, 0.995) forwards
}

.line-vertical {
    position: relative;
    display: inline-block
}

.line-vertical:before {
    position: absolute;
    top: 0;
    opacity: 0;
    left: 0;
    display: block;
    height: 200%;
    width: 1px;
    background-color: #111;
    content: "";
    animation: lineVertical 2s 0.5s cubic-bezier(0.205, 0.01, 0.075, 0.995) forwards
}

.line-vertical:after {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 200%;
    width: 1px;
    background-color: #111;
    content: "";
    animation: lineVertical 2s 0.7s cubic-bezier(0.205, 0.01, 0.075, 0.995) forwards
}


.hero-catch-text-sub .hero-catch-text {
    font-weight: bold;
    margin-bottom: inherit
}



.hero-catch-inner-03 .line-vertical:after,
.hero-catch-inner-03 .line-vertical:before,
.hero-catch-inner-03 .line-horizontal:before,
.hero-catch-inner-03 .line-horizontal:after {
    background-color: #fff
}

@media all and (max-width: 768px) {

    .hero-catch-inner-03 .line-vertical:after,
    .hero-catch-inner-03 .line-vertical:before,
    .hero-catch-inner-03 .line-horizontal:before,
    .hero-catch-inner-03 .line-horizontal:after {
        background-color: #E4E4E4
    }
}

.hero-catch-inner-04 .line-vertical:after,
.hero-catch-inner-04 .line-vertical:before,
.hero-catch-inner-04 .line-horizontal:before,
.hero-catch-inner-04 .line-horizontal:after {
    background-color: #fff
}

@media all and (max-width: 768px) {

    .hero-catch-inner-04 .line-vertical:after,
    .hero-catch-inner-04 .line-vertical:before,
    .hero-catch-inner-04 .line-horizontal:before,
    .hero-catch-inner-04 .line-horizontal:after {
        background-color: #E4E4E4
    }
}

@media all and (max-width: 7687px) {

    .hero-sub .line-vertical:after,
    .hero-sub .line-vertical:before,
    .hero-sub .line-horizontal:before,
    .hero-sub .line-horizontal:after {
        background-color: #E4E4E4
    }
}







.u-pc-hidden {
    display: none
}

.u-sp-hidden {
    display: block
}

.u-sp-pc-hidden {
    display: none;
}


.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}







.l-lower-title {
    margin: auto;
    margin-top: 128px;
    padding-top: 45px;
    padding-bottom: 45px
}

@media all and (max-width:767px) {
    .l-lower-title {
        width: 99%;
        padding-top: 18px;
        padding-bottom: 18px;
        margin-top: 100px
    }
}

.l-lower-title h1,
.l-lower-title strong {
    font-size: 24px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 4px;
    color: #45352B;
}


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

    .l-lower-title h1,
    .l-lower-title strong {
        font-size: 18px
    }
}

.l-lower-title p {
    font-family: "futura-pt", sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;
    font-size: 14px;
    letter-spacing: .1em;
    color: #45352B;
}

@media all and (max-width: 767px) {
    .l-lower-title p {
        font-size: 12px
    }
}

.l-lower-title.l-lower-title-wrap {
    background-size: cover;
    background-position: center center;
    padding-bottom: 200px;
    margin-bottom: 125px
}

@media all and (max-width: 767px) {
    .l-lower-title.l-lower-title-wrap {
        margin-bottom: 50px;
        width: 100%
    }
}

.l-lower-title.l-lower-title-wrap h1,
.l-lower-title.l-lower-title-wrap strong {
    color: #fff
}

.l-lower-title.l-lower-title-wrap p {
    color: #fff
}





.page-subtitle {
    color: #45352B;
    font-size: calc(10px + .7vw);
    line-height: 1.6;
    letter-spacing: 0.3vw;
    font-weight: 600;
    margin-bottom: 2rem;
}


.page-description {
    color: #45352B;
}



.l-page-head {
    margin-bottom: 125px
}



@media all and (max-width: 768px) {
    .l-page-head {
        margin-bottom: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }

}

.l-page-head .page-title {

    font-size: clamp(2.5rem, 1.364rem + 4.85vw, 5rem);
    color: #E37800;

    font-weight: bold;
    line-height: 1.29167;
    margin-bottom: 18px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    letter-spacing: 0.03em
}

.jp-title {
    font-size: 26px;
    font-weight: 600;
}




.l-page-head .varia-title {

    font-size: calc(12px + 1.2vw);
    color: #fff;

    font-weight: bold;
    line-height: 1.29167;
    margin-bottom: 18px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    letter-spacing: 0.03em
}


.l-page-head .brend-title {

    font-size: calc(15px + 2vw);
    color: #111;

    font-weight: bold;
    line-height: 1.29167;
    margin-bottom: 18px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    letter-spacing: 0.03em
}


.brend-type {
    font-size: 22px;
    color: #E37800;
}

.item_harmony img{
    width:100%;
    max-width:350px;
}


.l-page-head .page-title-anim {
    display: inline-block;
    position: relative;
    -webkit-clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
    clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
    font-weight: bold
}

.l-page-head .page-title-anim-parag {
    font-weight: bold;
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding-right: 13px;
    -webkit-perspective: 0;
    perspective: 0
}

.l-page-head .page-title-anim:last-child {
    margin-top:1.5rem;
}


@media all and (max-width: 768px) {
    .l-page-head .page-title-anim-parag {
        padding-right: 0
    }
}



.hero-catch-titledrip {
    position: relative;
    overflow: hidden;
}

.hero-catch-titledrip::before {
    content: "";
    display: block;
    bottom: 11%;
    position: absolute;
    background: #E37800;
    height: 1px;
    z-index: 1;
    animation: catchtitleLineBefore 1.6s cubic-bezier(0, .21, .66, 1.01) forwards
}


.l-page-head .page-title-anim-parag::before {
    content: "";
    display: block;
    top: 90%;
    position: absolute;
    background: #E37800;
    height: 1px;
    z-index: 1;
    animation: titleLineBefore 1.2s cubic-bezier(.61, .76, .61, .55) forwards
}

.l-page-head .page-title-anim.active {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;

    -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
    clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
    transition: -webkit-clip-path 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s, clip-path 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s, transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0.04s;
    transition-delay: .4s;
}


@media all and (max-width: 768px) {
    .l-page-head .page-title {
        font-size: 22px;
        margin-bottom: 18px
    }
}

.l-page-head .page-description {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    letter-spacing: 0.04em
}

@media all and (max-width: 768px) {
    .l-page-head .page-description {
        font-size: 12px
    }
}

.l-page-head .anim-sub-title {
    -webkit-clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
    clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
    font-weight: bold
}

.l-page-head .anim-sub-title.active {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
    clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
    transition: -webkit-clip-path 2.4s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, clip-path 2.4s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, transform 2.4s cubic-bezier(0.19, 1, 0.22, 1)
}




.l-page-visual {
    display: block;
    padding-bottom: 7.8125vw;
    margin-bottom: 60px
}

.l-page-visual .page-visual-image-figure img.trend {
    width: 70%;
    margin-left: 10%
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image-figure img.trend {
        width: 100%;
        margin-left: -5%
    }
}

.l-page-visual .page-visual-image-figure .kiyoko-logo {
    display: block;
    text-align: center
}

.l-page-visual .page-visual-image-figure .kiyoko-logo img {
    max-width: 275px;
    margin-left: 0%
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image-figure .kiyoko-logo img {
        width: 120px
    }
}

.l-page-visual .page-visual-image-figure img.marketing {
    display: block;
    max-width: 52.34375vw;
    margin: 0 auto !important
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image-figure img.marketing {
        max-width: 90vw
    }
}

.l-page-visual .page-visual-image-figure img.development {
    display: block;
    max-width: 73.4375vw;
    margin: 0 auto !important
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image-figure img.development {
        max-width: 80.53333vw
    }
}

.l-page-visual .page-visual-image-figure img.share {
    max-width: 73.4375vw;
    margin: 0 auto !important
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image-figure img.share {
        max-width: 80.53333vw
    }
}

.l-page-visual .page-visual.global-movie .page-visual-image a {
    position: relative;
    z-index: 100
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual.global-movie .page-visual-image {
        height: auto
    }

    .l-page-visual .page-visual.global-movie .page-visual-image img {
        height: auto
    }
}

.l-page-visual .page-visual-image {
    width: 89.0625%;
    height: 37.5vw;
    margin-left: 10.9375%;
    overflow: hidden;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.05)
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image {
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05)
    }
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 45vw
    }

    .l-page-visual .page-visual-image img {
        object-fit: cover;
        height: 70vw
    }


    .l-page-visual .page-visual-image.brendmenu img {
        height: 40vw;
        object-fit: contain;
    }



    .l-page-visual .page-visual-image.template__yui img {
        object-fit: cover;
        height: 40vw
    }

    .l-page-visual .page-visual-image.template__moca img {
        object-fit: cover;
        height: 40vw
    }




}


.l-page-visual .page-visual-image+.l-inner {
    margin-top: 125px
}

@media all and (max-width: 767px) {
    .l-page-visual .page-visual-image+.l-inner {
        margin-top: 50px
    }
}

.l-page-visual .page-visual-image-center {
    margin-left: auto;
    margin-right: auto
}

.l-page-visual p+p {
    margin-top: 40px
}

@media all and (max-width: 767px) {
    .l-page-visual p+p {
        margin-top: 20px
    }
}

.l-page-visual .js-slider-swiper+.l-inner {
    margin-top: 60px
}

@media all and (max-width: 767px) {
    .l-page-visual .js-slider-swiper+.l-inner {
        margin-top: 24px
    }
}

@media all and (max-width: 767px) {
    .l-inner-trend {
        padding: 0
    }
}

@media all and (max-width: 767px) {
    .l-trend-text {
        padding-left: 6.66667vw;
        padding-right: 6.66667vw;
        padding-top: 6.66667vw
    }
}







/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100px, 0, 0) scale(0.95);
        transform: translate3d(-100px, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100px, 0, 0) scale(0.95);
        transform: translate3d(-100px, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0%, 0, 0) scale(1);
        transform: translate3d(0, 0, 0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@keyframes arrow {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes itemIn {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0) scale(0.95)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1)
    }
}

.itemIn {
    -webkit-animation-name: itemIn;
    animation-name: itemIn;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@keyframes bgBussines {
    from {
        opacity: 1;
        transform: translate3d(-100vw, 0, 0) scale(1)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1)
    }
}

.bgBussines {
    -webkit-animation-name: bgBussines;
    animation-name: bgBussines;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@keyframes linkLine {
    from {
        transform: translate3d(-150%, 0, 0) scale(1);
        transform-origin: right top
    }

    to {
        transform-origin: right top;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1)
    }
}

.linkLine {
    -webkit-animation-name: linkLine;
    animation-name: linkLine;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@keyframes titleIn {
    from {
        opacity: 0;
        transform-origin: left top;
        left: -40px
    }

    to {
        transform-origin: right top;
        opacity: 1;
        left: 0px
    }
}

@keyframes lineHorizontal {
    from {
        transform: translate3d(-100%, 0, 0) scale(1);
        opacity: 0;
        transform-origin: right top
    }

    50% {
        opacity: 0.7;
        transform: translate3d(0, 0%, 0) scale(1)
    }

    to {
        transform-origin: right top;
        opacity: 0;
        transform: translate3d(100%, 0, 0) scale(1)
    }
}

.lineHorizontal {
    -webkit-animation-name: lineHorizontal;
    animation-name: lineHorizontal;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@keyframes lineVertical {
    from {
        transform: translate3d(0, -50%, 0) scale(1);
        opacity: 0;
        transform-origin: right top
    }

    50% {
        transform-origin: right top;
        opacity: 0.7;
        transform: translate3d(0, 0%, 0) scale(1)
    }

    to {
        transform-origin: right top;
        opacity: 0;
        transform: translate3d(0, 30%, 0) scale(1)
    }
}

.lineVertical {
    -webkit-animation-name: lineVertical;
    animation-name: lineVertical;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@keyframes fade-in {
    0% {
        display: none;
        opacity: 0
    }

    1% {
        display: block;
        opacity: 0
    }

    100% {
        display: block;
        opacity: 1
    }
}

@keyframes fade-out {
    0% {
        display: block;
        opacity: 1
    }

    1% {
        display: block;
        opacity: 1
    }

    100% {
        display: none;
        opacity: 0
    }
}

@keyframes indicator {
    from {
        left: 0;
        transform-origin: left top;
        width: 10px
    }

    20% {
        width: 30px
    }

    80% {
        width: 30px
    }

    to {
        transform-origin: left top;
        left: 100%;
        width: 0px
    }
}

@keyframes titleLineBefore {
    from {
        width: 100%;
        left: -100%;
    }

    to {
        left: 100%;
        width: 100%;
    }
}

@-webkit-keyframes titleLineBefore {
    from {
        width: 100%;
        -webkit-transform: translateX(-100%)
    }

    to {
        -webkit-transform: translateX(100%);
        width: 100%
    }
}

.titleLineBefore {
    -webkit-animation-name: titleLineBefore;
    animation-name: titleLineBefore;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}






@keyframes catchtitleLineBefore {
    from {
        width: 100%;
        left: -100%;
    }

    to {
        left: 100%;
        width: 100%;
    }
}

@-webkit-keyframes catchtitleLineBefore {
    from {
        width: 100%;
        -webkit-transform: translateX(-100%)
    }

    to {
        -webkit-transform: translateX(100%);
        width: 100%;
    }
}

.catchtitleLineBefore {
    -webkit-animation-name: catchtitleLineBefore;
    animation-name: catchtitleLineBefore;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}






.l-container {
    padding-left: 10.9375vw;
    padding-right: 10.9375vw;
    margin: 0 auto;
    position: relative
}

@media all and (max-width: 768px) {
    .l-container {
        padding-left: 4vw;
        padding-right: 4vw
    }
}

.l-col {
    width: 1000px;
    margin: 0 auto
}

@media all and (max-width: 768px) {
    .l-col {
        width: auto;
        padding-left: 6.66667vw;
        padding-right: 6.66667vw
    }
}

.l-col-s {
    width: 840px;
    margin: 0 auto
}

@media all and (max-width: 768px) {
    .l-col-s {
        width: auto;
        padding-left: 6.66667vw;
        padding-right: 6.66667vw
    }
}

.l-inner {
    width: 78.125vw;
    margin: 0 auto;
}

@media all and (max-width: 768px) {
    .l-inner {
        width: auto;
        padding-left: 6.66667vw;
        padding-right: 6.66667vw
    }
}

.bg-gray {
    height: 100vw;
    background-color: #f5f5f5
}

#js-wrap {
    position: relative
}

#js-wrap.is-active {
    overflow: hidden;
    height: 100%
}

#js-wrap.is-active:before {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.8)
}

#js-wrap:before {
    display: none
}





.h2 {
    text-align: left;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 1px;

    line-height: 1.3;
    margin-bottom: 45px;
    color: #45352B
}

.h2 span {

    color: #45352B;
    font-size: 14px;
    display: block;
    line-height: 1;
    margin-bottom: 20px
}

@media all and (max-width: 768px) {
    .h2 span {
        font-size: 12px;
        margin-bottom: 10px
    }
}

@media all and (max-width: 768px) {
    .h2 {
        font-size: 18px;
        line-height: 1.66667;
        margin-bottom: 18px
    }
}

.h3 {
    text-align: left;
    font-weight: bold;
    font-size: 18px;

    line-height: 1.6;
    margin-bottom: 20px
}

@media all and (max-width: 768px) {
    .h3 {
        margin-bottom: 10px;
        font-size: 16px
    }
}

.h4 {
    text-align: left;
    font-size: 18px;
    letter-spacing: 2px;

}

@media all and (max-width: 768px) {
    .h4 {
        font-size: 24px
    }
}

.strong {

    margin-bottom: 0px;
    text-align: left;
    font-size: 18px;

    font-weight: bold;
    letter-spacing: 2px
}

@media all and (max-width: 768px) {
    .strong {
        font-size: 14px
    }
}

#overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    content: "";
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1)
}

#overlay.active {
    display: block;
    opacity: 1
}







h2.sub-header {
    font-size: 2.6rem;
    font-size: 28px;
    color: #604C3F;

    line-height: 1.6;
    letter-spacing: .2rem;
    margin-bottom: 4rem;
    font-feature-settings: "palt";
    font-family: "Shippori Mincho", "HiraKakuProN-W3", "Meiryo", serif;
    font-weight: 700;
    position: relative;
}








.threequarters {
    line-height: 1.8;
    font-size: 1.15em;
    text-align: left;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    text-justify: inter-ideograph;
    margin-bottom: 5rem;
}




#voc {
    margin-bottom:8rem;
}



.voc_area {
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}


.voc_mark {
    width:220px;
    
}


.voc_area p {
    width: calc(100% - 240px);
}


@media all and (max-width: 768px) {
    .voc_mark {
    width:100%;
    text-align:center;
    
}
 .voc_mark img {
    width:200px;
    
}
.voc_area p {
    width: 100%;
}

}



.sqts {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}




.l-gray-box {
    position: relative;
    margin-bottom: 125px;
    margin-top: 125px;
}

@media all and (max-width: 768px) {
    .l-gray-box {
        margin-bottom: 50px;
        margin-top: 50px;
    }



}

.l-gray-box .gray-box {
    padding-top: 11.71875vw;
    padding-bottom: 4.26563vw;
    
    overflow-x: hidden
}

@media all and (max-width: 768px) {
    .l-gray-box .gray-box {
        background: #f5f5f5;
        margin-top: 0;
        padding-top: 19.53125vw;
        padding-bottom: 11.71875vw;
        margin-bottom: 0
    }

    .l-gray-box .gray-box .bg-white {
        background: #fff;
    }

}

.l-gray-box .gray-box .bg-gray {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    left: -10.9375vw;
    top: 0;
    z-index: -1;

    -webkit-border-radius: 0rem 3rem 3rem 0rem;
    -moz-border-radius: 0rem 3rem 3rem 0rem;
    border-radius: 0rem 3rem 3rem 0rem;
}

@media all and (max-width: 768px) {
    .l-gray-box .gray-box .bg-gray {
        display: none
    }
}

.l-gray-box .gray-box .bg-gray.bg-gray-full {
    left: 0
}

.l-gray-box .gray-box.sdgs div>div {
    margin-bottom: 20px
}

.l-gray-box .gray-box.sdgs img {
    max-width: 130px !important;
    display: block;
    margin: 0 auto
}

@media all and (max-width: 768px) {
    .l-gray-box .gray-box.sdgs img {
        max-width: 240px !important
    }
}

.l-gray-box .gray-box.j-map {
    margin-top: 17.1875vw;
    padding-bottom: 6.64063vw;
    margin-bottom: 0vw;
    overflow-x: visible
}

@media all and (max-width: 768px) {
    .l-gray-box .gray-box.j-map {
        margin-top: 0;
        padding-top: 19.53125vw;
        padding-bottom: 11.71875vw;
        margin-bottom: 0;
        width: 100%
    }
}

.l-gray-box .gray-box.j-map .d-flex-figure {
    transform: scale(1.5) translateY(-50px)
}

.l-gray-box .gray-box-message {
    position: relative
}

.l-gray-box p+p {
    margin-top: 40px
}

@media all and (max-width: 768px) {
    .l-gray-box p+p {
        margin-top: 20px
    }
}










.d-flex-image {
    position: relative;
    padding-bottom: 31.25vw
}

@media all and (max-width: 768px) {
    .d-flex-image {
        padding-bottom: 7.8125vw
    }
}

.d-flex-image img {
    position: absolute;
    left: calc((100% - (600/1280)*100vw) - 4vw);
    top: calc(-5rem - 5vw);
    width: 60vw;
    height: auto;
    max-width: none;

}

@media all and (max-width: 768px) {
    
}

@media all and (max-width: 768px) {
    .d-flex-image img {
        width: 100%;
        position: static
    }
}

.d-flex-image svg {
    position: absolute;
    top: 32vw;
    left: 19.53125vw;
    transform: scale(1.5);
    width: 14.0625vw;
    max-width: 180px;
    height: auto
}

@media all and (max-width: 768px) {
    .d-flex-image svg {
        top: auto;
        bottom: 50px;
        left: 30px
    }
}





.normal-dflex .d-flex-image {
    position: relative;
    padding-bottom: 31.25vw
}

@media all and (max-width: 768px) {
    .normal-dflex .d-flex-image {
        padding-bottom: 7.8125vw
    }
}

.normal-dflex .d-flex-image img {
    position: absolute;
    left: calc((100% - (600/1280)*100vw) - 4vw);
    top: 0;
    width: 46.875vw;
    height: auto;
    max-width: none;


}

@media all and (max-width: 768px) {
    .normal-dflex .d-flex-image img {}
}

@media all and (max-width: 768px) {
    .normal-dflex .d-flex-image img {
        width: 100%;
        position: static
    }
}

.normal-dflex .d-flex-image svg {
    position: absolute;
    top: 32vw;
    left: 19.53125vw;
    transform: scale(1.5);
    width: 14.0625vw;
    max-width: 180px;
    height: auto
}

@media all and (max-width: 768px) {
    .normal-dflex .d-flex-image svg {
        top: auto;
        bottom: 50px;
        left: 30px
    }
}





.d-flex .d-flex-order2 img {
    left: -9vw !important;
}

.d-flex-figure {
    position: relative
}

.d-flex-figure-vision svg {
    position: absolute;
    left: -3.125vw;
    width: 100%;
    height: auto
}

@media all and (max-width: 768px) {
    .d-flex-figure-vision svg {
        width: 100%;
        position: static
    }
}

.l-images-box {
    position: relative;
    
    margin-bottom: 1vw
}

@media all and (max-width: 768px) {
    .l-images-box {
        padding-bottom: 0px;
        margin-bottom: 0vw
    }
}

@media all and (max-width: 768px) {
    .l-images-box img.process {
        max-width: 80.53333vw;
        margin: 0 auto
    }
}

.l-images-box .pc-moc {
    transform: scale(1.6) translate(-14%, 14%)
}

.l-images-box .pc-moc img {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0)
}

.l-images-box .pc-moc video {
    position: absolute;
    z-index: 1;
    width: 24.55vw;
    left: 3.3%;
    top: 4%
}

.l-images-box p+p {
    margin-top: 30px
}

@media all and (max-width: 768px) {
    .l-images-box p+p {
        margin-top: 15px
    }
}

.l-page-nav {
    margin-bottom: 60px
}

@media all and (max-width: 768px) {
    .l-page-nav {
        margin-bottom: 24px
    }
}











.d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -2%
}

@media all and (max-width: 768px) {
    .d-flex {
        margin: 0
    }
}

.d-flex-col1 {
    width: 4.3%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col1 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col1.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col1.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col1.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs1 {
        width: 4.3%;
        margin: 0 2%
    }

    .d-flex-col-xs1.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs1.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col2 {
    width: 12.6%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col2 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col2.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col2.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col2.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs2 {
        width: 12.6%;
        margin: 0 2%
    }

    .d-flex-col-xs2.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs2.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col3 {
    width: 20.9%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col3 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col3.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col3.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col3.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs3 {
        width: 20.9%;
        margin: 0 2%
    }

    .d-flex-col-xs3.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs3.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col4 {
    width: 29.2%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col4 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col4.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col4.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col4.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs4 {
        width: 29.2%;
        margin: 0 2%
    }

    .d-flex-col-xs4.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs4.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col5 {
    width: 37.5%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col5 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col5.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col5.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col5.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs5 {
        width: 37.5%;
        margin: 0 2%
    }

    .d-flex-col-xs5.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs5.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col6 {
    width: 45.8%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col6 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col6.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col6.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col6.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs6 {
        width: 45.8%;
        margin: 0 2%
    }

    .d-flex-col-xs6.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs6.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col7 {
    width: 54.1%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col7 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col7.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col7.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col7.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs7 {
        width: 54.1%;
        margin: 0 2%
    }

    .d-flex-col-xs7.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs7.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col8 {
    width: 62.4%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col8 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col8.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col8.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col8.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs8 {
        width: 62.4%;
        margin: 0 2%
    }

    .d-flex-col-xs8.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs8.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col9 {
    width: 70.7%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col9 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col9.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col9.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col9.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs9 {
        width: 70.7%;
        margin: 0 2%
    }

    .d-flex-col-xs9.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs9.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col10 {
    width: 79%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col10 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col10.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col10.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col10.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs10 {
        width: 79%;
        margin: 0 2%
    }

    .d-flex-col-xs10.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs10.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col11 {
    width: 87.3%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col11 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col11.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col11.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col11.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs11 {
        width: 87.3%;
        margin: 0 2%
    }

    .d-flex-col-xs11.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs11.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex-col12 {
    width: 95.6%;
    margin: 0 2%
}

@media all and (max-width: 768px) {
    .d-flex-col12 {
        width: 100%;
        margin: 0;
        margin-bottom: 4%
    }
}

.d-flex-col12.gutter1 {
    margin-right: 8.3%
}

@media all and (max-width: 768px) {
    .d-flex-col12.gutter1 {
        margin-right: 0%
    }
}

.d-flex-col12.gutter1:last-child {
    margin-right: 0
}

@media all and (max-width: 768px) {
    .d-flex-col-xs12 {
        width: 95.6%;
        margin: 0 2%
    }

    .d-flex-col-xs12.gutter1 {
        margin-right: 8.3%
    }

    .d-flex-col-xs12.gutter1:last-child {
        margin-right: 0
    }
}

@media all and (min-width: 768px) {
    .d-flex-order1 {
        order: 1
    }

    .d-flex-order2 {
        order: 2
    }
}

.d-flex.a-center {
    align-items: center
}

.d-flex.a-start {
    align-items: flex-start
}

.d-flex.a-end {
    align-items: flex-end
}

.d-flex.j-content-st {
    justify-content: flex-start
}

.d-flex.j-center {
    justify-content: center
}

.d-flex.j-center>* {
    margin: 0 2px
}

.ta-left {
    text-align: left
}

.ta-right {
    text-align: right
}





.about-us_img img {
    -webkit-border-radius: 0rem 3rem 3rem 0rem;
    -moz-border-radius: 0rem 3rem 3rem 0rem;
    border-radius: 0rem 3rem 3rem 0rem;

}



.top-roaster_img img {
    -webkit-border-radius: 3rem 0rem 0rem 3rem;
    -moz-border-radius: 3rem 0rem 0rem 3rem;
    border-radius: 3rem 0rem 0rem 3rem;

}


.topbouttxt {
    background: #fff;
    padding: 5rem;
    -webkit-border-radius: 3rem 0rem 0rem 3rem;
    -moz-border-radius: 3rem 0rem 0rem 3rem;
    border-radius: 3rem 0rem 0rem 3rem;
}

.toproastertxt {
    background: #f5f5f5;
    padding: 5rem;
    -webkit-border-radius: 0rem 3rem 3rem 0rem;
    -moz-border-radius: 0rem 3rem 3rem 0rem;
    border-radius: 0rem 3rem 3rem 0rem;
}



.kawakamitxt {
    background: rgba(255, 255, 255, 1);
    padding: 5rem 3rem;
    -webkit-border-radius: 3rem 0rem 0rem 3rem;
    -moz-border-radius: 3rem 0rem 0rem 3rem;
    border-radius: 3rem 0rem 0rem 3rem;
    margin-top: -10rem;
    margin-left: 35rem;
    z-index: 100;
}


.about_pac_title {
    color: #E37800;
    font-weight: 600;
    margin-left: calc((100% - (600/1280)*100vw) + 18vw);
    margin-bottom: 5rem;
    font-size: 4rem;
}


.roast_pac_title {
    color: #E37800;
    font-weight: 600;
    margin-right: calc((100% - (600/1280)*100vw) + 18vw);
    margin-bottom: 5rem;
    text-align: right;
    font-size: 4rem;
}



.kawakawmi_pac_title {
    color: #E37800;
    font-weight: 600;
    margin-right: calc((100% - (600/1280)*100vw) + 18vw);
    margin-bottom: 5rem;
    text-align: left;
    font-size: 3.5rem;
}

.l-inner.materialbox {
    max-width: 1200px;
}



.l-page-visual .page-visual-image.materialimg {
    width: 89.5%;
    height: 27vw;
    margin-left: 10.5%;
    overflow: hidden;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 3rem 0rem 0rem 3rem;
    -moz-border-radius: 3rem 0rem 0rem 3rem;
    border-radius: 3rem 0rem 0rem 3rem;
}








.l-page-visual .page-visual-image.variaimg {
    width: 89.5%;
    margin-right: 10.5%;
    margin-left: auto;
    overflow: hidden;
    background: #e8bc88;
    padding: 5rem 0;
    height: auto;

    -webkit-border-radius: 0rem 3rem 3rem 0rem;
    -moz-border-radius: 0rem 3rem 3rem 0rem;
    border-radius: 0rem 3rem 3rem 0rem;

}






.page-visual-image.kawakamiimg {
    width: 100%;
    height: 50vw;

    overflow: hidden;
    box-shadow: 30px 30px 30px rgb(0 0 0 / 5%);
    -moz-border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    -ms-border-radius: 1.5em;
}







.l-page-head.sdgsbox {
    margin-bottom: 0;
}

.sdgsimg {
    margin-top: 30px;
}

.sdg-images {}



.sdg-images img {
    width: 30%;
}

.col-green {
    color: #E37800;
}


.l-gray-box .gray-box.product-gray {
    padding-top: 5rem;
    padding-bottom: 20rem;
    margin-bottom: 25rem;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

.l-gray-box .l-page-head {
    margin-bottom: -4rem;
}


.l-gray-box .l-page-foot {
    margin-top: -10rem;
}





.l-gray-box .l-inner {
    z-index: 100;
}

.product-gray {
    background-color: #f5f5f5;
}



.l-page-head .page-title.product-title {

    line-height: .8;
    z-index: 5;
    margin-bottom: 1rem;
}




.h2.product-subtitle {
    margin-bottom: 0;
    z-index: 5;
}


.h2.product-subtitle span {
    line-height: 1;
    margin-bottom: 0px;
    display: inline-block;
    padding-left: 3rem;
}


.product-title .page-title-anim-parag {}

.product-caution {
    font-size: 12px;
    
    text-align: center;
}


.product-detail {
    background: #E37800;
    padding: 5rem;
    
    margin-bottom: 10rem;
    z-index: 100;
    width: 60%;

    -moz-border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -o-border-radius: 2rem;
    -ms-border-radius: 2rem;
    color: #fff;
}

.detail-title {
    font-size: 30px;
    margin-bottom: 2rem;
}


#free_thinking .page-head{
    margin-top:8rem;
    display:flex;
    justify-content: center;

}


.l-page-visual .page-visual-image.brendmenu {
    width: 89.5%;
    margin-left: 10.5%;
    margin-left: auto;
    overflow: hidden;
    background: #f6f7f8 url(../imgs/bg_brend.jpg) no-repeat right top;
    background-size: contain;
    padding: 5rem 0;
    height: auto;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
}

.brend-area {
    margin-bottom: 5rem;
}

.brendbox {
    margin-bottom: 2rem;
}

.l-page-head.brendbox .page-title {
    font-size: calc(55px + 2vw);
    line-height: 1;
    margin-bottom: 5rem;
}

.l-page-head.sdgsbox .page-title {

    line-height: .8;
    margin-bottom: 5rem;

}


.star-mark {
    color: #B5E000;
}







.brend-menu {
    font-weight: 100 !important;
    letter-spacing: -1px !important;
}

.brend-name {
    color: #45352B;
}




.flow {
    margin-top: 8rem;
    text-align: center;
}

.flowflame {
    border: 1px solid #E37800;
    -moz-border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -o-border-radius: 3rem;
    -ms-border-radius: 3rem;
    padding: 0 3rem;
}

.flow h2 {
    text-align: center;
    margin-top: -20px;
    margin-bottom: 50px;
    font-size: 28px;

    letter-spacing: 1px;
    line-height: 1.3;
    color: #604C3F;

}

.flow h2 span {
    background: #fff;
    padding: 0 2rem;
    font-weight: 600;
    display: inline-block;
}

.flow h3 {
    font-size: calc(15px + 1vw);
    font-weight: bold;
    color: #E37800;
    margin-bottom: 1rem;
}

.flow p {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.04em;
    text-align: center;
}

.flow p.flow-caution {
    font-size: 12px;
}

.flow-step {
    margin-bottom: 5rem;
}

.step-1,
.step-2,
.step-3 {
    position: relative;

}

.step-1:before,
.step-2:before,
.step-3:before {
    padding-left: 3rem;
    padding-right: 1rem;
    background: url(../imgs/leaf.svg) no-repeat left center;
    background-size: 30px;
    content: "";
}


.step-1:after {
    padding-left: 1rem;
    padding-right: 5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: url(../imgs/step1_icon.svg) no-repeat right center;
    background-size: 40px;
    content: "";
}

.step-2:after {
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 5rem;
    background: url(../imgs/step2_icon.svg) no-repeat right top;
    background-size: 40px;
    content: "";
}

.step-3:after {
    padding-left: 1rem;
    padding-right: 5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: url(../imgs/step3_icon.svg) no-repeat right center;
    background-size: 40px;
    content: "";

}




.kawakamileft,
.kawakamiright {
    position: relative;
}


.kawakamiright p.page-description{line-height:2.5;}



.kawakami-name {
    text-align: left;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.3;
    margin-bottom: 45px;

}

.kawakami-name span {
    color: #45352B;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    margin-right: 3rem;
}


.kawakami-profile {
    margin: 0rem 0rem 0rem 0rem;

}

.ninteisyo{
    margin-top:4rem;
}


.kawakami-profile h4 {
    color:#E37800;
    padding: 1rem .5rem 1rem .5rem;
    border-bottom: 1px solid #ccc;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.kawakami-profile dl {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    
}

.kawakami-profile dt {
    flex-basis: 100%;
    padding: 0rem .5rem 0rem .5rem;
    font-size: 1.5rem;
    font-weight:700;
}

.kawakami-profile dd {
    flex-basis: 100%;
    padding: 0rem .5rem 0rem .5rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

@media screen and (max-width: 559px) {
    .kawakami-profile dl {
        flex-flow: column;
    }

    .kawakami-profile dd {
        border-bottom: 1px solid #ccc;
        padding-bottom: 1.5rem;
    }

}

.kawakami-profile p {
    flex-basis: 100%;
    padding: 0rem .5rem 0rem .5rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.youtubebox {
    width: 50%;
    margin: 0 auto;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


.kawakami-long {
    width: 100%;

    background: url(../imgs/kawakami_longimg.jpg) no-repeat center center;
    background-size: cover;
    padding: 30rem 0;
    margin-bottom: 10rem;
}



.novelty {
    position: relative;
}


.novelty-image {}

.novelty-text {
    z-index: 100;
}


.beans {
    position: relative;
}


.beans-image {}

.beans-text {
    z-index: 100;
}


.beans .d-flex-image img {
    position: absolute;
    top: calc(-12rem - 1vw);
    width: 40vw;
    
}



.bg-gray .bg-white {
    background: #fff;
}


.beans-roastertxt {
    background: #fff;
    padding: 5rem;
    -webkit-border-radius: 0rem 2rem 2rem 0rem;
    -moz-border-radius: 0rem 2rem 2rem 0rem;
    border-radius: 0rem 2rem 2rem 0rem;

}


.tate-moji {
    z-index: 200;
    position: absolute;
    left: 0rem;
    top: -5rem;
    color: #E37800;


    font-size: calc(6vw - 8px);
    letter-spacing: 2px;


    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

}



.tate-moji-right {
    z-index: 200;
    position: absolute;
    right: 0rem;
    top: 5rem;
    color: #E37800;


    font-size: calc(6vw - 8px);
    letter-spacing: 2px;


    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

}





.tate-moji-beans {
    z-index: 200;
    position: absolute;
    right: 0rem;
    top: -18rem;
    color: #E37800;


    font-size: calc(6vw - 8px);
    letter-spacing: 2px;


    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

}









.viewmorebtn {
    position: absolute;
    right: 5rem;
    bottom: 0;
    background: #fff;
}


.viewmore {
    width: 115px;
    height: 71px;
    position: relative;

}


.viewmore:before {
    content: "";
    width: 69px;
    height: 69px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    background: #111;
    transition: all .3s cubic-bezier(.39, .575, .565, 1);
}



.viewmore a {
    position: relative;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 100%;
    padding-left: 14px;
    font-size: 12px;
    z-index: 2;
    letter-spacing: 0;
    mix-blend-mode: difference;
}


.viewmore a:hover {
    color: #fff;
}

.viewmore a:after,
.viewmore a:before {
    content: "";
    width: 15px;
    height: 0;
    border-top: 1px solid #fff;
    position: absolute;
    top: calc(50% + 2px);
    right: 0;
}


.viewmore a:after {
    width: 9px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: calc(50% - 1px);
    right: -1px;
}

.viewmore span {
    position: relative;
    z-index: 1;
}

.viewmore:hover:before {
    -webkit-transform: translateY(-50%) translateX(105%) scale(.4);
    transform: translateY(-50%) translateX(105%) scale(.4)
}






.l-page-visual .page-visual-image.template__yui {
    width: 100%;
    overflow: hidden;
    background: #F8FCE5;
    margin-left: 0;
    padding: 10rem 0;
    height: auto;


}



.l-page-visual .page-visual-image.template__moca {
    width: 100%;
    overflow: hidden;
    background: #F5F4F4;
    margin-left: 0;
    padding: 10rem 0;
    height: auto;
    box-shadow: none !important;

}




.template__yui .l-page-head {
    margin-bottom: 0;
}


.template__moca .l-page-head {
    margin-bottom: 0;
}



.template__btn {
    text-align: center;
    width: 100%;
    margin: 2rem auto 5px auto;
}

.template__btn a {
    border: 1px solid #604C3F;
    padding: 5px 0px;
    font-size: 21px;
    display: block;
    background: #fff;

    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;

    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.template__btn .strong {
    font-size: 21px;
}


.template__btn a:hover {
    border: 1px solid #604C3F;
    background: #604C3F;
    color: #fff;
    text-decoration: none;
}











#caution {
    margin-top: -100px;
    padding-top: 100px;
}

.page-brand .l-page-visual {
    padding-bottom: 0;

}

.page-head a {
    color: #E37800;
    text-decoration: underline;

}



.page-brand .template__btn a {
    color: #333;
    text-decoration: none;
}


.page-brand .template__btn a:hover {
    text-decoration: none;
    color: #fff;
}




.caution {
    margin-top: 8rem;

}

.caution_flame {
    margin-bottom: 5rem;
    padding: 0;
}

.caution_flame-btn {
    margin-top: 5rem;
    padding: 0;
}

.caution h2 {
    background: #604C3F;

    margin-bottom: 50px;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    padding: .5rem 2rem;
}


.caution_flame h3 {


    margin-bottom: 50px;
    font-size: 26px;

    letter-spacing: 1px;
    line-height: 1.3;
    color: #E37800;
    font-weight: 600;
}

.caution_flame ul {
    margin-left: 1rem;
    padding: 0;
    list-style-type: none;
}





.caution_flame li {
    list-style-type: none;
    position: relative;
    padding-left: 2rem;
    margin: 0 0 3rem 0;
    font-weight: 600;
    font-size: 1.8rem;
}


.caution_flame li:before {

    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.5em;
    content: "";
    background: #E37800;
}


.caution_flame li span {
    font-weight: 400;
    font-size: 1.4rem;
}









/* -------------------------------------------------------------------------- */

/*  2. Element Base
/* ---------------------------------------------*---------------------------- */


html {
    font-size: 62.5%;
    height: 100%;

}


a {
    color: #333;
    text-decoration: none;

}

a:hover {
    color: #333;
    text-decoration: none;
}



main {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
.faux-heading {
    font-weight: 600;
    line-height: 1.25;
    margin: 1rem 0 1.5rem;
    font-feature-settings: "palt"1;
}

h1,
.heading-size-1 {
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.138888889;
}

h2,
.heading-size-2 {

    font-size: 3.6rem;
}

h3,
.heading-size-3 {
    font-size: 3rem;
}

h4,
.heading-size-4 {
    font-size: 1.8rem;
}

h5,
.heading-size-5 {
    font-size: 1.8rem;
}

h6,
.heading-size-6 {
    font-size: 1.6rem;
    letter-spacing: 0.03125em;
    text-transform: uppercase;
}

p {
    margin: 0 0 .1em 0;
    font-feature-settings: "palt"1, "pwid"1;
    text-align: justify;
    text-justify: inter-ideograph;
}

em,
i,
q,
dfn {
    font-style: italic;
}

em em,
em i,
i em,
i i,
cite em,
cite i {
    font-weight: bolder;
}

big {
    font-size: 1.2em;
}

small {
    font-size: 0.75em;
}

b,
strong {
    font-weight: 700;
}

ins {
    text-decoration: underline;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

abbr,
acronym {
    cursor: help;
}

address {
    line-height: 1.5;
    margin: 0 0 2rem 0;
}

hr {
    border-style: solid;
    border-width: 0.1rem 0 0 0;
    border-color: #dcd7ca;
    margin: 4rem 0;
}

section {
    position: relative;

}

section .container {
    margin-top: -100px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.sectionbreak {
    margin: 0 0 8rem 0;

}



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,

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,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
input,
textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    background: transparent
}




body {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", sans-serif;
    font-feature-settings: "palt"1;
    color: #111;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    font-size: 1.6rem;
    background: #fff;
    line-height: 1.83;
    height: 100%;
}

.wrapper {
    padding-top: 150px;
    padding-bottom: 0px;
    position: relative;
}



iframe {
    border-width: 0 !important;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}




.pagination {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}


.marginbottom-10 {
    margin-bottom: 10px !important;
}

.marginbottom-20 {
    margin-bottom: 20px !important;
}

.marginbottom-30 {
    margin-bottom: 30px !important;
}

.marginbottom-40 {
    margin-bottom: 40px !important;
}

.marginbottom-50 {
    margin-bottom: 50px !important;
}

.marginbottom-60 {
    margin-bottom: 60px !important;
}

.marginbottom-70 {
    margin-bottom: 70px !important;
}

.marginbottom-80 {
    margin-bottom: 80px !important;
}

.marginbottom-90 {
    margin-bottom: 90px !important;
}

.marginbottom-100 {
    margin-bottom: 100px !important;
}

.margintop-10 {
    margin-top: 10px !important;
}

.margintop-20 {
    margin-top: 20px !important;
}

.margintop-30 {
    margin-top: 30px !important;
}

.margintop-40 {
    margin-top: 40px !important;
}

.margintop-50 {
    margin-top: 50px !important;
}

.margintop-60 {
    margin-top: 60px !important;
}

.margintop-70 {
    margin-top: 70px !important;
}

.margintop-80 {
    margin-top: 80px !important;
}

.margintop-90 {
    margin-top: 90px !important;
}

.margintop-100 {
    margin-top: 100px !important;
}

.marginleft-10 {
    margin-left: 10px !important;
}

.marginleft-20 {
    margin-left: 20px !important;
}

.marginleft-30 {
    margin-left: 30px !important;
}

.marginleft-40 {
    margin-left: 40px !important;
}

.marginleft-50 {
    margin-left: 50px !important;
}

.marginleft-60 {
    margin-left: 60px !important;
}

.marginleft-70 {
    margin-left: 70px !important;
}

.marginleft-80 {
    margin-left: 80px !important;
}

.marginleft-90 {
    margin-left: 90px !important;
}

.marginleft-100 {
    margin-left: 100px !important;
}

.marginright-10 {
    margin-right: 10px !important;
}

.marginright-20 {
    margin-right: 20px !important;
}

.marginright-30 {
    margin-right: 30px !important;
}

.marginright-40 {
    margin-right: 40px !important;
}

.marginright-50 {
    margin-right: 50px !important;
}

.marginright-60 {
    margin-right: 60px !important;
}

.marginright-70 {
    margin-right: 70px !important;
}

.marginright-80 {
    margin-right: 80px !important;
}

.marginright-90 {
    margin-right: 90px !important;
}

.marginright-100 {
    margin-right: 100px !important;
}

.paddingbottom-10 {
    padding-bottom: 10px !important;
}

.paddingbottom-20 {
    padding-bottom: 20px !important;
}

.paddingbottom-30 {
    padding-bottom: 30px !important;
}

.paddingbottom-40 {
    padding-bottom: 40px !important;
}

.paddingbottom-50 {
    padding-bottom: 50px !important;
}

.paddingbottom-60 {
    padding-bottom: 60px !important;
}

.paddingbottom-70 {
    padding-bottom: 70px !important;
}

.paddingbottom-80 {
    padding-bottom: 80px !important;
}

.paddingbottom-90 {
    padding-bottom: 90px !important;
}

.paddingbottom-100 {
    padding-bottom: 100px !important;
}

.paddingtop-10 {
    padding-top: 10px !important;
}

.paddingtop-20 {
    padding-top: 20px !important;
}

.paddingtop-30 {
    padding-top: 30px !important;
}

.paddingtop-40 {
    padding-top: 40px !important;
}

.paddingtop-50 {
    padding-top: 50px !important;
}

.paddingtop-60 {
    padding-top: 60px !important;
}

.paddingtop-70 {
    padding-top: 70px !important;
}

.paddingtop-80 {
    padding-top: 80px !important;
}

.paddingtop-90 {
    padding-top: 90px !important;
}

.paddingtop-100 {
    padding-top: 100px !important;
}

.paddingleft-10 {
    padding-left: 10px !important;
}

.paddingleft-20 {
    padding-left: 20px !important;
}

.paddingleft-30 {
    padding-left: 30px !important;
}

.paddingleft-40 {
    padding-left: 40px !important;
}

.paddingleft-50 {
    padding-left: 50px !important;
}

.paddingleft-60 {
    padding-left: 60px !important;
}

.paddingleft-70 {
    padding-left: 70px !important;
}

.paddingleft-80 {
    padding-left: 80px !important;
}

.paddingleft-90 {
    padding-left: 90px !important;
}

.paddingleft-100 {
    padding-left: 100px !important;
}

.paddingright-10 {
    padding-right: 10px !important;
}

.paddingright-20 {
    padding-right: 20px !important;
}

.paddingright-30 {
    padding-right: 30px !important;
}

.paddingright-40 {
    padding-right: 40px !important;
}

.paddingright-50 {
    padding-right: 50px !important;
}

.paddingright-60 {
    padding-right: 60px !important;
}

.paddingright-70 {
    padding-right: 70px !important;
}

.paddingright-80 {
    padding-right: 80px !important;
}

.paddingright-90 {
    padding-right: 90px !important;
}

.paddingright-100 {
    padding-right: 100px !important;
}


.col-xl-five-1,
.col-lg-five-1,
.col-md-five-1,
.col-sm-five-1,
.col-xs-five-1,
.col-xl-five-2,
.col-lg-five-2,
.col-md-five-2,
.col-sm-five-2,
.col-xs-five-2,
.col-xl-five-3,
.col-lg-five-3,
.col-md-five-3,
.col-sm-five-3,
.col-xs-five-3,
.col-xl-five-4,
.col-lg-five-4,
.col-md-five-4,
.col-sm-five-4,
.col-xs-five-4 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col-xs-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
}

.col-xs-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
}

.col-xs-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
}

.col-xs-five-4 {
    width: 80%;
    flex: 0 0 80%;
    float: left;
}

@media (min-width: 468px) {
    .col-sm-five-1 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }

    .col-sm-five-2 {
        width: 40%;
        flex: 0 0 40%;
        float: left;
    }

    .col-sm-five-3 {
        width: 60%;
        flex: 0 0 60%;
        float: left;
    }

    .col-sm-five-4 {
        width: 80%;
        flex: 0 0 80%;
        float: left;
    }
}

@media (min-width: 768px) {
    .col-md-five-1 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }

    .col-md-five-2 {
        width: 40%;
        flex: 0 0 40%;
        float: left;
    }

    .col-md-five-3 {
        width: 60%;
        flex: 0 0 60%;
        float: left;
    }

    .col-md-five-4 {
        width: 80%;
        flex: 0 0 80%;
        float: left;
    }

    .col-md-offset-five-1 {
        margin-left: 4.3333333%;
    }
}

@media (min-width: 992px) {
    .col-lg-five-1 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }

    .col-lg-five-2 {
        width: 40%;
        flex: 0 0 40%;
        float: left;
    }

    .col-lg-five-3 {
        width: 60%;
        flex: 0 0 60%;
        float: left;
    }

    .col-lg-five-4 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-xl-five-1 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }

    .col-xl-five-2 {
        width: 40%;
        flex: 0 0 40%;
        float: left;
    }

    .col-xl-five-3 {
        width: 60%;
        flex: 0 0 60%;
        float: left;
    }

    .col-xl-five-4 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }
}


/*gridのgutter調整*/

.row-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.row-0>div {
    padding-right: 0px;
    padding-left: 0px;
}

.row-10 {
    margin-left: -5px;
    margin-right: -5px;
}

.row-10>div {
    padding-right: 5px;
    padding-left: 5px;
}

.row-20 {
    margin-left: -10px;
    margin-right: -10px;
}

.row-20>div {
    padding-right: 10px;
    padding-left: 10px;
}



.row-40 {
    margin-left: -15px;
    margin-right: -15px;
}

.row-40>div {
    padding-right: 20px;
    padding-left: 20px;
}

.row-50 {
    margin-left: -15px;
    margin-right: -15px;
}

.row-50>div {
    padding-right: 25px;
    padding-left: 25px;
}

.row-60 {
    margin-left: -15px;
    margin-right: -15px;
}

.row-60>div {
    padding-right: 30px;
    padding-left: 30px;
}



@keyframes fadeInUpMin {
    from {
        opacity: 0;
        transform: translate3d(0, 8%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUpMin {
    animation-name: fadeInUpMin;
}



@keyframes fadeInDownMin {
    from {
        opacity: 0;
        transform: translate3d(0, -8%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDownMin {
    animation-name: fadeInDownMin;
}


@keyframes fadeInLeftMin {
    from {
        opacity: 0;
        transform: translate3d(-8%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeftMin {
    animation-name: fadeInLeftMin;
}




@keyframes fadeInRightMin {
    from {
        opacity: 0;
        transform: translate3d(8%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRightMin {
    animation-name: fadeInRightMin;
}




.page-item.active .page-link {
    background-color: #006cc4;
    border-color: #006cc4;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #006cc4;
    background-color: #fff;
    border: 1px solid #006cc4;
}






/*  header  */

.navbar-brand {
    font-size: 1.8rem;
}


.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, .7);
    border-color: rgba(0, 0, 0, .3);
    background-color: rgba(255, 255, 255, .1);
}


/*  headmenu  */

#main-menu {}

.sctop {
    display: block;
}

.scstart {
    display: none;
}





.custom-logo-link img {
    padding: 10px 0;
    width:100%;
    max-width: 305px;
}

.navbar-toggler {
    position: absolute;
    right: 10px;
    top: 15px;
}

.navbar-nav {
    padding-left: 0px;

}



.navbar-brand {
    padding-left: 20px;
}

.nav-link {
    padding: 0 1rem;
}


#navbarNavDropdown {
    z-index: 1000;

}


#navbarNavDropdown ul {
    margin: 0;
    padding: 0;
}



#navbarNavDropdown ul li a {
    display: block;

    text-decoration: none;
    color: #45352B;
    font-weight: 600;
    text-align: center;
    background: #fff;
    font-size: 2.2rem;
    line-height: 0.8;

    padding: .1em .5em;
    letter-spacing: .1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.menu_jp {
    font-size: 1.1rem;
    line-height: 0.6;
    font-weight: 400;
}

.menu-item a {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}


.dropdown:hover>.dropdown-menu {
    display: block;
    //For animation
    max-height: 400px;
    opacity: 1;
}

.dropdown>.dropdown-menu {
    margin: 0;
    // For animation
    transition: all 0.3s;
    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}


#navarea button {}

.navbar-toggler-icon {}

.navbar-toggler {
    position: absolute;
    right: 10px;
    top: 10px;
}

.navbar-toggler {
    padding: 1.5rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}


#headnav {
    width: 100%;
    background: #003281;
    text-align: center;
}

.navbar,
.navbar .container {
    padding: 0rem 0rem 0rem 0rem;
    height: 100px;
}

#gnav {
    display: block;
    text-align: left;
}



#gnav>ul {
    list-style: none;
    margin: 0;
    padding: 0;

    width: 100%;

}

#gnav>ul>li {
    display: inline-block;
    padding: 1em 0;
}

#gnav>ul>li:hover {
    color: #fff;
    background-color: #003281;
}

#gnav>ul>li:hover>a {
    color: #ddd;
}

#gnav>ul>li:hover .menu {
    max-height: 9999px;
    opacity: 1;
}

#gnav>ul>li>a {
    transition: all .2s ease-in;

    display: block;
    padding: 0 1em;
    text-decoration: none;
    color: #fff;
    background: #003281;
    text-align: center;
    border-right: 1px solid #fff;
}

#gnav>ul .menu {
    transition: all .2s ease-in;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    left: 0;
    text-align: center;
    position: absolute;
    background-color: #19192b;
    z-index: 999;
    margin-top: 7px;
}

#gnav>ul .menu .menu_inner {
    padding: 1em 0;
}

#gnav>ul .menu .menu_inner li {
    display: inline-block;
    margin: 0 .5em;
}

#gnav>ul .menu a {
    color: #fff;
}

.mmimg {
    padding: 30px 10px 10px 10px;
}

.morebtn {
    text-align: center;
    width: 160px;
    margin: 2rem auto 5px auto;
}

.morebtn a {
    border: 1px solid #E37800;
    padding: 5px 0px;
    font-size: 16px;
    display: block;
    background: #E37800;
    color: #fff;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;


    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.morebtn a:hover {
    border: 1px solid #E37800;
    background: #fff;
    color: #45352B;
    text-decoration: none;
}


.rightbnr {
    font-size: 0;
    margin-left: 20px;
}


.recruitbtn {
    text-align: center;
    width: auto;
    margin: 0 -3px 0 0;
    display: inline-block;
    height: 100px;
    width: 150px;
}

.recruitbtn a {
    white-space: nowrap;
    padding: 0 15px;
    font-size: 1.4rem;
    font-weight: 700;
    width: 100%;
    letter-spacing: 0;
    display: block;
    color: #006cc4;
    background: #fff;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.recruitbtn a:hover {
    background: #006cc4;
    color: #fff;
    text-decoration: none;
}

.recruitbtn i {
    display: block;

}


.recruitbtn.sc {
    text-align: center;
    width: auto;
    margin: 0 -3px 0 0;
    display: inline-block;
    height: 100px;
    width: 150px;
}

.recruitbtn.sc a {
    white-space: nowrap;
    padding: 0 15px;
    font-size: 1.4rem;
    font-weight: 700;
    width: 100%;
    letter-spacing: 0;
    display: block;
    color: #fff;
    background: #006cc4;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.recruitbtn.sc a:hover {
    background: #fff;
    color: #006cc4;
    text-decoration: none;
}








.contactbtn {
    text-align: center;
    width: auto;
    margin: 0 0 0 0;
    display: inline-block;
    height: 100px;
    width: 150px;
}

.contactbtn a {
    white-space: nowrap;
    width: 100%;
    color: #fff;
    padding: 0 15px;
    font-size: 1.4rem;
    letter-spacing: 0;
    display: block;
    background: #2e2e2e;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.contactbtn a:hover {
    background: #85C0DB;
    color: #fff;
    text-decoration: none;
}


.contactbtn i {
    display: block;

}








.backlistbtn {
    text-align: center;
    width: auto;
    margin: 0 10px 5px auto;
}

.backlistbtn a {
    white-space: nowrap;
    border: 1px solid #E37800;
    padding: 5px 5px;
    font-size: 16px;

    display: block;
    color: #fff;
    background: #E37800;

    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;

    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.backlistbtn a:hover {
    border: 1px solid #E37800;
    background: #fff;
    color: #45352B;
    text-decoration: none;
}




/*
Smart phone menu
*/


#head3Menu {
    width: 100%;
    position: fixed;
    left: 0;
    top: 67px;
    z-index: -1;
    background-color: #034da2;
    padding: 0px 0px 0px 0px;
    line-height: 100%;

}

#head3Menu {
    display: none;
}


.foot3btn {

    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0;
}

.foot3btn i {

    margin-bottom: 4px;
}

.foot3btn a {
    padding: 8px 8px;
    line-height: 100%;
    display: block;
    color: #ffffff;
    border-right: 1px solid #fff;
    line-height: 120%;


    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}

.taiken.foot3btn a {
    color: #ffff01;
}

.foot3btn a:hover {

    background: #fff;
    color: #034da2;
    text-decoration: none;
}


.foot3btn:last-child a {
    border-right: none;

}






/*
Side bnr button 
*/

#bnrslide {
    margin: 5em 0;
}


#side-bnr {
    position: fixed;
    top: -200px;
    right: 0px;
    z-index: 1000;

}

#side-bnr a {
    display: block;
    text-align: left;
    /* background color transition */
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    padding: 19px 11px;
    display: block;
    background: #45352B;
    ;
    /* rounded corners */
    -webkit-border-radius: 15px 0px 0px 15px;
    -moz-border-radius: 15px 0px 0px 15px;
    border-radius: 15px 0px 0px 15px;
    /* background color transition */
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
    width: 50px;
    color: #fff;


    font-size: 16px;
    font-weight: 600;
    writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright;

}

#side-bnr a:hover {
    color: #000;
    width: 70px;
    padding-right: 30px;
}

#side-bnr a:hover {
    background-color: #fded02;
}


#side-bnr .fa-lg {
    margin-right: 0;
}

#side-bnr .fa-lg {
    line-height: 100%;
    vertical-align: 0;
}


.bnrslidesp {
    display: none;
}









/*  footer  */

.mainfooter {
    padding: 6rem 0;
}




#footcontact {
    padding: 5rem 0;

}

.fctitle {
    color: #006cc4;
}

.fctxt {
    font-weight: 600;
}


#wrapper-footer section {
    margin-bottom: 0 !important;
}

.footmenucontent {
    margin-bottom: 3rem;
    letter-spacing: .2rem;
}

.footmenucontent a {
    font-size: 1.3rem;
}


.tel-number {
    font-size: 2.6rem;
    line-height: 1.0;
}


.footmenucontent a {
    color: #fff;
}

.footercontentlink {
    color: #fff;
    font-weight: 700;
    border-left: 2px solid #fff;
    padding-left: 1rem;

}

.footmenucontent ul {
    margin: 1rem 0 0 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

.footmenucontent li {
    margin: 0 0 .7rem 1.2rem;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

#wrapper-footer-full,
#wrapper-static-hero {
    background-color: #2e2e2e;
}



.subfooter {
    background: #45352B;

}

.subfooter a {
    color: #fff;
}


#footersns {
    padding-top: 3rem;
    padding-bottom: 0px;
}


#footersns p {
    color: #45352B;
}




.footer_cn {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.4rem;
    line-height: 1;
}

.footadd {
    font-size: 1.3rem;
    margin-bottom: 0;
    font-weight: 400;
    line-height: .6;
}

.foottel {
    font-size: 2.6rem;
    margin-bottom: 0rem;
}



.footurl {
    font-weight: 600;
    line-height: .6;
}


.site-info {
    position: relative;
}

.footerpolicy {
    font-size: 1.2rem;

}

.pbarea {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}


.copyright {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin: 1em 0;
}







/*
Smart phone menu
*/


#foot2Menu {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 200;
    background-color: #45352B;
    padding: 8px 0px 8px 0px;
    line-height: 100%;
    font-size: 0;
}

.footsp {
    display: none;
}


.foot2btn {
    width: 48.5%;
    margin-left: 1%;
    margin-right: 0;
    display: inline-block;
    text-align: center;
    font-size: 15px;
}

.foot2btn a {
    padding: 8px 8px;
    line-height: 100%;
    display: block;
    color: #ffffff;
    border: 1px solid #fff;
    line-height: 120%;

    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}


.foot2btn a:hover {
    border: 1px solid #fff;
    background: #fff;
    color: #111;
    text-decoration: none;
}

#footerFloatingMenu .fa {
    color: #fff;
}

.fa-lg {
    margin-right: .6rem;
}





/*
Back to top button 
*/

footer {
    position: relative;
}


.pagetop {
    text-align: center;
    position: fixed;
    right: 32px;
    bottom: 82px;
    opacity: 0;
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: multiply;
}

.pagetop.is-active {
    pointer-events: auto;
}



.pagetop a {
    background: #E37800;
    display: block;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;

}

.pagetop a span {
    display: block;
    width: 53px;
    height: 53px;
    line-height: 46px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.pagetop a span img {
    width: 14px;
}

.pagetop a span.top {
    top: 0;
}

.pagetop a span.bottom {
    top: 53px;
}

.pagetop a:hover span.top {
    top: -53px;
}

.pagetop a:hover span.bottom {
    top: 0;
}


.is-active {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    opacity: 1;
}



/*
content
*/

#pagetitle {
    background-color: #034da2;
    margin-bottom: 6em;

}

#pagetitle h2 {
    color: #fff;
    font-size: 2.4rem;
    margin-bottom: 0;
    margin-top: 4em;
    padding-bottom: 4em;
}

#pagetitle h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
    margin: 0;
    padding: 0;

}



#pagetitle p {
    margin-top: 2em;
}

.brsp {
    display: none;
}

#pagetitle h4 {
    margin-bottom: 2em;
}

.subtitlebox {
    margin-bottom: 4rem;
}

.subtitle {
    font-size: 7rem;
    display: inline-block;
    margin-bottom: 0;
}

.subtitle_white {
    color: #fff;
}

.suben {
    font-size: 1.2rem;
    margin: 0 0 3rem 0;
    color: #000;
    font-weight: 400;
}

.titleintrotxt {
    margin-bottom: 6rem;
}



.page-hero {
    position: relative;
}

.page-hero .hero-title {
    position: static;
}



/*
top page
*/




#intro {
    padding-top: 90px;
    position: relative;
    overflow: hidden;
    background: #fff;
}


.servicename {
    font-size: 1.2rem;
}


#service {
    background: #eee;

    padding-top: 60px;
    padding-bottom: 90px;
}


#employment {
    background: #fff;

    padding-top: 60px;
    padding-bottom: 90px;

}


























.l-news {
    z-index: 1;
    position: relative;
    padding-left: 10.9375vw;
    margin-bottom: 14.84375vw;
    padding-top: 10vw;
    overflow: hidden;
    margin-top: -10rem;
}

.l-news .h2 {
    margin-bottom: 30px;
    font-weight: normal;
    letter-spacing: 1px;
    font-size: 36px
}

@media all and (max-width: 768px) {
    .l-news .h2 {
        font-size: 22px;
        line-height: 40px
    }
}

.l-news .button {
    text-align: right;
    margin-right: 10.9375vw
}

@media all and (max-width: 768px) {
    .l-news .button {
        margin-right: 0
    }
}

@media all and (max-width: 768px) {
    .l-news {
        padding-left: 6.66667vw;
        padding-right: 6.66667vw
    }
}

.l-news-bg {
    display: block;
    width: 100%;
    height: 26vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #E37800
}

@media all and (max-width: 768px) {
    .home .l-news-bg {
        display: none
    }
}







#topinformation {
    padding-bottom: 5rem;
}




.toptopics {
    z-index: 1;
    position: relative;
    padding-left: 10.9375vw;
    margin-bottom: 14.84375vw;
    padding-top: 10vw;
    overflow: hidden;
}



.news {
    padding-top: 20px
}

@media all and (max-width: 768px) {
    .news-items .l-col {
        padding: 0
    }
}

.news-items .news-item {
    width: 306px;
    margin-right: 40px
}

@media all and (max-width:768px) {
    .news-items .news-item {
        width: 50%;
        margin-right: 4%
    }
}



.news-items .news-item a {
    width: 100%
}

.news-topic {
    line-height: 1.1;
    padding: 2px 4px;
    color: #fff;
    display: none;
    border-color: #red;
    font-family: "futura-pt", sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;
    position: absolute;
    top: 30px;
    left: -30px;
    background-color: #3AC7CC
}

.news-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    width: 100%
}

.news-img::after {
    content: "";
    display: block;
    padding-bottom: 60%
}

.news-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 5px
}

.news-data time {
    font-family: "futura-pt", sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;
    text-align: left;
    flex-grow: 1
}

.news-data span {
    font-family: "futura-pt", sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;
    font-size: 10px;
    line-height: 1;
    text-align: left;
    padding: 2px 8px 1px 8px;
    border: solid 1px #594b3c;
    letter-spacing: .1em;
    margin-right: 5px;
    color: #594b3c;
    background: #fff;
}

.news-inner {
    padding: 0 0px 20px 0;
    text-align: left
}

.news-inner p {
    font-weight: bold;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 28px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif
}


.product-midashi {
    margin-bottom: 10px;
    margin-top: 5px;
    font-size: 18px;
    font-weight: 600;
    color: #45352B;
}

.product-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 5px;
    font-size: 13px;
}

.product-inner {
    padding: 5px 0px 10px 0;
    text-align: left
}

@media all and (max-width: 768px) {
    .news-inner p {
        font-size: 12px
    }
}

.news .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.news .swiper-container {
    width: 100%;
    height: 100%;
    overflow: visible !important
}


.product-gray .news .swiper-wrapper {
    overflow: hidden: !important;
}



.news .swiper-container ul {
    padding-inline-start: 0px;
}



.news .swiper-button-wrap {
    width: 100px;
    height: 30px;
    position: absolute;
    right: 15px;
    top: -50px
}

.news .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.news .swiper-button-prev,
.news .swiper-container-rtl .swiper-button-next,
.news .swiper-button-next,
.news .swiper-container-rtl .swiper-button-prev {
    background-image: none;
    top: 0;
    width: 30px;
    height: 30px;
    margin-top: 0
}

.news .swiper-button-prev .link,
.news .swiper-button-prev .link-line {
    transform: rotate(180deg)
}

.js-news-slider {
    padding-top: 80px
}

@media all and (max-width: 768px) {
    .l-news-items .news.news-item {
        width: 50%
    }
}


@media all and (max-width: 768px) {
    body:not(.home) .news-items .news-item {
        width: 46%;
        margin: 0 2% 2%
    }
}




/* -------------------------------------------------------------------------- */

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

.servicetitle {
    background: #336699;
    padding: .5rem 0;
    color: #fff;

}





/* -------------------------------------------------------------------------- */

/*  informaiton page
/* ---------------------------------------------*---------------------------- */

#topinfo {
    background: #006cb6;
    padding: 45px 0;
}

.post_desc,
.post_desc a {
    color: #fff;
}

.topinfolist {
    position: relative;
}

.topinfomore {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 1.5rem;
}

.topinfomore a {
    color: #fff;
}


.topItemList {
    margin-bottom: 0.2rem;
}

.news_title {
    font-size: 1.5rem;
}

.news_date {
    font-size: 1.3rem;
}

.news_title {
    margin-left: 3rem;
}






#information {
    margin: 5rem 0 10rem 0;
}


#information h2 {
    font-size: 22px;
    font-weight: bold;

    margin-bottom: 4px;
    color: #45352B;
}


#information p {
	margin-bottom:3rem
}




.newsbox {
    border-top: 1px dotted #333;
    margin-bottom: 5rem;
}

.newslist {
    border-bottom: 1px dotted #333;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 2em;
}

.newslist a {
    width: 100%;
    display: inline-block;
}

.newslist .fa-circle {
    color: #034da2;
}

.newslist .fa-chevron-circle-right {
    color: #034da2;
}

.newsdate {
    display: inline-block;
    font-size: 1.2rem;
    padding: 1rem 1rem 0 1rem;
}

.newsheadline {
    display: inline-block;
}

.morenews {
    margin-top: 30px;
}

.morenews a {
    border: 1px solid #fff;
    padding: 4px 10px 4px 20px;
    background-color: rgba(255, 255, 255, .7);
}

.morenews .fa-stack {
    margin-top: -3px;
}

.newsleft {
    display: inline-flex;
    margin-right: 2rem;
}

.newsright {
    display: inline-flex;
    flex-basis: auto;
}


.nwtxt {
    white-space: nowrap;
}


.scname {
    font-family: "futura-pt", sans-serif, "游ゴシック体", "Yu Gothic", YuGothic;

    padding: 2px 8px 1px 8px;

    background: #fff;
    border: solid 1px #594b3c;
    font-size: 10px;
    color: #594b3c;
    text-align: left;
    display: inline-block;
    line-height: 1.4em;
    letter-spacing: .1em;
    margin-right: 5px;
}






.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1.6rem;
    line-height: 1.5;
    border-radius: .25rem;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}


.container-fluid.recruitinfo .col-md {
    padding-right: 0px !important;
    padding-left: 0px !important;

}


.card {
    margin-bottom: 2rem;
}

.card-text {
    padding: 0 1rem 1rem 1rem;
}


.card-block {
    position: relative;
}


.tabtag {
    position: absolute;
    left: 5px;
    top: 5px;
}


.newsheadtitle {
    background: #fff;
    color: #006cc4;
    padding: 0rem 1rem 0 1rem;
    font-size: 1.5rem;
}

.newsheadtitle a {
    color: #45352B;
    font-weight: 600;
}

.posttxt {
    margin-bottom: 2rem;
    font-size: 1.2rem;
}


.entry-icon-new {
    margin: 0.5rem 1rem 0 1rem;
    background: #fff;
    border-radius: 2px;
    color: #e05d48;
    display: inline-block;
    font-weight: 600;
    font-size: .8rem;
    padding: 2px 5px;
    text-align: center;
    border: 2px solid #e05d48;
}

.thumbimg {

    position: relative;
    overflow: hidden;
}

.thumbimg a img {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}


.thumbimg a img:hover {

    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}


.recruit .scname,
.scname.recruit {}

.sougou .scname,
.scname.sougou {}







.equipmenttable {}

.equipmenttable table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 6rem;
    border: 1px solid #bbb;
}

.equipmenttable th {
    background: #006cb6;
    color: #fff;
    padding: 12px 10px;
    border-right: 1px solid #bbb;
    text-align: center;
}

.equipmenttable td {
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #bbb;
    padding: 12px 10px;
    text-align: center;
}

.goukei {
    background: #ecf3f7;
}


.tabletitle {
    float: left;
}

.tableyear {
    float: right;
}


/* -------------------------------------------------------------------------- */

/*  kakou page
/* ---------------------------------------------*---------------------------- */





/* -------------------------------------------------------------------------- */

/*  privacy policy page
/* ---------------------------------------------*---------------------------- */

#policyarea h3 {
    color: #006cc4;
    font-size: 2.2rem;
    margin-top: 3rem;
}





/* -------------------------------------------------------------------------- */

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

#mailmain {
    padding-top: 1rem;
    margin: 3rem 0 2rem 0;
}

#mailmain h3 {
    font-size: 26px;
    margin-bottom: 3rem;
    color: #E37800;
}

.contmark {

    padding: 16px 0 16px 0px;

}

.conttext {
    padding: 16px 0 0px 0px;
    margin: 0 0 2em 0;
}


.titlecontact {
    position: relative;
    background: url(../imgs/contacthead.jpg) no-repeat center top;
    background-size: cover;
    height: 350px;
}

#pagetitle .titlecontact h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 3rem;

}

input,
button,
select,
textarea {
    font-weight: 300;
    font-family: 'Titillium Web', sans-serif;
    outline: 0;

}

input:focus,
textarea:focus,
input[type="text"]:focus {
    outline: 0;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #7F8289;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #7F8289;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #7F8289;
}



#formarea {
    margin-bottom: 0;
}

#formarea p {
    margin-bottom: 1px;
}

#formarea input,
#formarea textarea {
    border: none;
    -webkit-border-radius: .8rem;
    -moz-border-radius: .8rem;
    border-radius: .8rem;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: #fbfbfb;
    color: #333;
    font-size: 14px;
    height: auto;
    padding: 12px;
    margin: 0;
    border: 1px solid #cfcfcf;
    resize: none;
}


.soushin {
    margin: 0 auto;
    text-align: center;
}


#formarea .submit {
    background: #45352B;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 8px 40px;
    text-align: center;
    vertical-align: middle;
    width: auto;
    margin: 30px 0;
    border: 1px solid #45352B;
    letter-spacing: .2rem;

    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;


    -webkit-transition: background 0.1s linear 0s, color 0.1s linear 0s;
    -moz-transition: background 0.1s linear 0s, color 0.1s linear 0s;
    -o-transition: background 0.1s linear 0s, color 0.1s linear 0s;
    transition: background 0.1s linear 0s, color 0.1s linear 0s;
}

#formarea .submit:hover {
    background: #fff;
    color: #45352B;
    border: 1px solid #45352B;
}


#formarea select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    box-sizing: content-box;
    cursor: pointer;
}

@-moz-document url-prefix() {
    #mailformpro select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }
}

#formarea select::-ms-expand {
    display: none;
}

@supports (-ms-ime-align:auto) {
    #formarea select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }
}




#formarea select {
    box-sizing: border-box;
    width: 100%;
    max-width: 870px;
    cursor: pointer;
    max-height: initial;
    margin-bottom: 10px;
    padding: 12px 9px 9px 9px;
    background-color: #fbfbfb;
    color: #333 !important;
    font-size: 1.4rem;
    letter-spacing: .05em;
    -webkit-appearance: button;

    border-radius: 0px;
    -ms-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;

    border: 1px solid #cfcfcf;
}


#formarea select {
    -webkit-appearance: none;
    /* ベンダープレフィックス(Google Chrome、Safari用) */
    -moz-appearance: none;
    /* ベンダープレフィックス(Firefox用) */
    appearance: none;
    /* 標準のスタイルを無効にする */
}

::-ms-expand {
    /* select要素のデザインを無効にする（IE用） */
    display: none;
}


.select {
    position: relative;
}


.select:after {
    display: block;
    position: absolute;
    top: 13px;
    right: 10px;
    bottom: 8px;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 8px 6px 0 6px;
    border-style: solid;
    border-color: #034da2 transparent transparent transparent;
    content: "";
}


label {
    margin-bottom: 0;
    font-weight: 400;
}



input[type=checkbox],
input[type=radio] {
    width: 20px;
}


.checkarea {
    border: 1px solid #ccc;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #FBFBFB;
}




.marktxt {
    font-size: 80%;
}

.smallcap {
    font-size: 60%;
}


.dl-horizontal dt {
    text-align: left;
}




.confirmpage .contactcell {

    border-bottom: 1px dotted #aaa;
    padding-bottom: 5px;
    margin-bottom: 15px;
}


.confirmpage .select:after {
    display: none !important;
}

.confirmpage .must {
    display: none !important;
}

#mailformtitle h2 {
    font-size: 1.8rem;
    margin-top: 2em;
}

#mailformtitle p {

    margin-top: 2em;
}



.contactline {
    overflow: hidden;
    border: 1px solid #aaa;
    margin-top: 2rem;
    margin-bottom: 3rem;
    -webkit-border-radius: 23px 23px 23px 23px;
    -moz-border-radius: 23px 23px 23px 23px;
    border-radius: 23px 23px 23px 23px;
}

.mailon {
    background: #E37800;
    letter-spacing: 0;
    padding: 8px 0 8px 33px;
    position: relative;
    color: #fff;
    font-weight: 600;
}

.mailon:after {
    display: block;
    position: absolute;
    top: 0px;
    right: -23px;
    overflow: visible;


    width: 46px;
    height: 46px;
    border-radius: 0 23px 23px 0;
    -webkit-border-radius: 0 23px 23px 0;
    -moz-border-radius: 0 23px 23px 0;
    background: #E37800;

    content: "";
    z-index: 10;
}



.mailoff {

    background: #fff;
    letter-spacing: 0;
    padding: 8px 0 8px 25px;
    position: relative;
}

.mailoff:after {
    display: block;
    position: absolute;
    top: 0px;
    right: -23px;
    overflow: visible;

    width: 46px;
    height: 46px;
    border-radius: 0 23px 23px 0;
    -webkit-border-radius: 0 23px 23px 0;
    -moz-border-radius: 0 23px 23px 0;
    border: 1px solid #aaa;
    border-left: 0;
    border-top: 0;


    content: "";
    z-index: 10;
}



.mailoffcenter {

    background: #fff;
    letter-spacing: 0;
    padding: 8px 0 8px 30px;
    position: relative;
}

.mailoffcenter:after {
    display: block;
    position: absolute;
    top: 0px;
    right: -23px;
    overflow: visible;
    width: 46px;
    height: 46px;
    border-radius: 0 23px 23px 0;
    -webkit-border-radius: 0 23px 23px 0;
    -moz-border-radius: 0 23px 23px 0;
    background: #fff;




    content: "";
    z-index: 10;
}


.mailend {

    background: #fff;
    letter-spacing: 0;
    padding: 8px 0 8px 25px;
    position: relative;
}

.mailcomplete {
    background: #E37800;
    letter-spacing: 0;
    padding: 8px 0 8px 25px;
    position: relative;
    color: #fff;
}



.douitxt {
    background: #efefef;
    padding: 5rem 6rem 5rem 6rem;
    margin: 30px 0 50px 0;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
}




/* -------------------------------------------------------------------------- */

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


.titlecompany {
    position: relative;
    background: url(../imgs/diecast_head.jpg) no-repeat center center;
    background-size: cover;
    height: 400px;
}


.proftable {
    margin-bottom: 8rem;
}


.proftitle {
    background: #ecf3f7;
    padding: 1.5rem 1rem;
    font-size: 1.6rem;
    line-height: 180%;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.proftxt {
    padding: 1.5rem 1rem;
    font-size: 1.6rem;
    margin-bottom: 0;
}

.profline {
    border-bottom: 1px solid #aaa;
}

.proftable .profline:first-of-type {
    border-top: 1px solid #aaa;
}





/* -------------------------------------------------------------------------- */

/*  employment page
/* ---------------------------------------------*---------------------------- */

.parttimecontact {
    background: #efefef;
    padding: 2rem 2rem;
}



/* -------------------------------------------------------------------------- */

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


.rechead {
    position: relative;
    background: url(../imgs/rec_headimg.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}





.recmenubg {
    background-color: rgba(255, 255, 255, 1.0) !important;
}

.recmenubg.scbg {
    background-color: rgba(255, 255, 255, 1.0) !important;
}



#navbarNavDropdown.recruitlist ul li a {
    border-right: 1px solid #d2d2d2;
    color: #111;
    padding: .4em 1.6em;
    letter-spacing: .2rem;
}





#navbarNavDropdown ul li.slon a {
    color: #45352B;
    text-align: center;
}


.recruitlist .active {
    border-bottom: 6px solid;
    border-image: linear-gradient(to right, #a0dccc 0%, #0080cd 100%);
    border-image-slice: 0 0 1 0;
    height: 100px;
    margin-top: 0px;
}

.recruitlist li {
    height: 100px;
    margin-top: -3px;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;

    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}


.nosakaimg {
    margin-top: -45px;
}


#recpagetitle {
    background-color: #0084d2;
    margin-bottom: 6em;

}


#recpagetitle h2 {
    color: #fff;
    font-size: 2.4rem;
    margin-bottom: 0;
    margin-top: 4em;
    padding-bottom: 4em;
}

#recpagetitle h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
    margin: 0;
    padding: 0;

}





.databtn {
    text-align: center;

    width: auto;
    margin: 0 0 0 0;
    display: inline-block;


    position: relative;
}

.databtn a {
    white-space: nowrap;
    color: #E37800;
    padding: .6rem 2rem;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-decoration: none;
    display: block;
    transition: 0.5s;
    border: 1px solid #E37800;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}


.databtn a:hover {
    background-position: 0 0;
    background: #E37800;
    color: #fff;
    text-decoration: none;
}



.databtn i {
    display: block;
    margin-left: .5rem;

}





.entrybtn {
    text-align: center;

    width: auto;
    margin: 0 0 0 0;
    display: inline-block;


    position: relative;
}

.entrybtn a {
    white-space: nowrap;
    color: #fff;
    padding: .6rem 2rem;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-decoration: none;
    display: block;
    transition: 0.5s;
    border: 1px solid #E37800;
    background: #E37800;

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}


.entrybtn a:hover {
    background: none;
    color: #E37800;
    text-decoration: none;
    border: 1px solid #E37800;
}



.entrybtn i {
    display: block;
    margin-left: .5rem;

}

.rec-text-box {
    font-size: 100px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
    color: #fff;
}

.rec-smalltxt {
    font-size: 2rem;
    line-height: 3rem;
    display: block;
}

#message {
    background: #f5f9f8;
    padding-top: 8rem;
    overflow: hidden;
}

#message p {
    line-height: 2.142;
}



.messagetitle {
    font-size: 5rem;
    color: #0084d2;
    display: inline-block;
    margin-bottom: 2px;
}


#person {
    padding: 100px 0;
    background: url(../imgs/personbg.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.persontitlebox {
    margin-bottom: 8rem;
}

.persontitle {
    font-size: 5rem;
    color: #fff;
    display: inline-block;
    margin-bottom: 2px;
}

.subenb {
    margin: 0;
    color: #222;
    font-size: 1.6rem;
}

.subenw {
    margin: 0;
    color: #fff;
    font-size: 1.6rem;
}

.recsubtitle {
    color: #0084d2;
    font-size: 4rem;
    margin-bottom: 0;

}


.personblock {
    background: #fff;
    padding: 50px 10px;
    color: #0084d2;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: .2rem;
    line-height: 2.142;
}





.adjust-box {
    position: relative;
    width: 100%;
    height: auto;
    background: #fff;
}

.box-1x1:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.adjust-box .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #0084d2;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .2rem;
    line-height: 1.9;
    padding: 15px;
}

.adjust-box .center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}



.slidebg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

.slidebg img {
    width: 100%;
    height: 100%;
}





#ourworks {
    padding-top: 8rem;
    background: #f5f9f8;
    padding-bottom: 12rem;
    position: relative;
    overflow: hidden;
}

.ourworksbg {
    padding-top: 20rem;
    background: url(../imgs/ourworks_bg.jpg) no-repeat center center;
    background-size: cover;
}


#ourworks .whitebg {
    background: rgba(255, 255, 255, 1.0);
    -webkit-transform: skewX(-6deg) scale(1.0);
    -ms-transform: skewX(-6deg) scale(1.0);
    transform: skewX(-6deg) scale(1.0);
    margin-bottom: -60px;
    padding: 80px;
}

#ourworks .whitebg .inner {
    -webkit-transform: skewX(6deg) scale(1.0);
    -ms-transform: skewX(6deg) scale(1.0);
    transform: skewX(6deg) scale(1.0);

}


.recmorebtn {
    text-align: center;

}

.recmorebtn a {
    position: relative;
    white-space: nowrap;
    color: #fff;
    margin: 0 auto;
    width: 150px;
    padding: 10px 15px;
    font-size: 1.6rem;
    letter-spacing: 0;
    text-decoration: none;
    display: block;
    transition: 0.5s;
    background: linear-gradient(90deg, #a0dccc, #a0dccc 150px, #a0dccc 350px, #0080cd);
    background-position: 100% 0;
    background-size: 500px 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


.recmorebtn a:hover {
    background-position: 0 0;
    color: #fff;
    text-decoration: none;
}

.recmorebtn i {
    position: absolute;
    right: 10px;
    top: 13px;
}

.owspimg {
    display: none;
}

.auspimg {
    display: none;
}


#recvoice {
    padding-top: 8rem;
    background: #f5f9f8;
    overflow: hidden;
}

.staffname {
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: .1rem;
}

.staffnameen {
    color: #0084d2;
    font-size: 1.2rem;
    letter-spacing: .05rem;
    display: inline-block;
}

.busyo {
    letter-spacing: .1rem;
}

#aboutus {
    padding-top: 8rem;
    background: #f5f9f8;
    padding-bottom: 12rem;
    position: relative;
    overflow: hidden;
}

.aboutusbg {
    padding-top: 25rem;
    background: url(../imgs/aboutus_bg.jpg) no-repeat center center;
    background-size: cover;

}


#aboutus .whitebg {
    background: rgba(255, 255, 255, 1.0);
    -webkit-transform: skewX(-6deg) scale(1.0);
    -ms-transform: skewX(-6deg) scale(1.0);
    transform: skewX(-6deg) scale(1.0);
    margin-bottom: -60px;
    padding: 80px;
}

#aboutus .whitebg .inner {
    -webkit-transform: skewX(6deg) scale(1.0);
    -ms-transform: skewX(6deg) scale(1.0);
    transform: skewX(6deg) scale(1.0);

}



#recruitfootcontact {
    margin-bottom: 6rem;
    background: url(../imgs/footer_contact.jpg) no-repeat center center;
    background-size: cover;
}

#recruitfootcontact a {
    padding: 10rem 0 8rem 0;
    background: #E37800;
    display: block;
    margin-bottom: 6rem;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -o-transition: 0.1s linear;
    transition: 0.1s linear;

}

#recruitfootcontact a:hover {
    background: none;
}



.recfctitle {
    color: #fff;
    font-size: 5rem;
    margin-bottom: 0;
}

.recfctxt {
    color: #fff;
}



.recentrybtn {
    text-align: center;

    margin: 0 0 5px 0;






}

.recentrybtn a {
    position: relative;
    color: #fff;
    width: 320px;
    height: 85px;
    padding: 12px 0px;
    font-size: 16px;
    display: block;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
}


.recentrybtn a:hover {
    border: 1px solid #fff;
    background: #fff;
    color: #0084d2;
    text-decoration: none;
}

.recentrybtn a i {
    position: absolute;
    right: 14px;
    top: 35px;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -o-transition: 0.1s linear;
    transition: 0.1s linear;
}

.recentrybtn a:hover>i {
    right: 10px;
}




/* -------------------------------------------------------------------------- */

/*  recruit ourjob page
/* ---------------------------------------------*---------------------------- */


#ojintro {
    padding-top: 90px;
    position: relative;
    overflow: hidden;
}


.rectitle {
    margin-top: 99px;
    margin-bottom: 0 !important;
}

.titleourworks {
    position: relative;
    background: url(../imgs/ourworks_head.jpg) no-repeat center center;
    background-size: cover;
    height: 400px;
}

#sigoto {
    background: #f5f9f8;
    padding-top: 90px;
    padding-bottom: 90px;

}

.owtitle {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.owtxt {
    background: #fff;
    padding: 60px 90px;
    margin-top: -120px;
}

.owbox {
    margin-bottom: 90px;
}


.ojmaptitle {
    border-left: 8px solid;
    border-image: linear-gradient(to bottom, #a0dccc 0%, #0080cd 100%);
    border-image-slice: 0 0 0 1;
    padding-left: 8px;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 2rem;
}



#kankyo {
    padding: 8rem 0 5rem 0;
    margin-bottom: 90px;
    background: linear-gradient(90deg, #a0dccc, #0080cd);
    color: #fff;
}


.kankyobox {
    padding: 4rem 4rem 2rem 4rem;
    background: #fff;
    color: #222;

}


.accesstitle {
    color: #0084d2;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}


.titleinterview {
    position: relative;
    background: url(../imgs/interview_head.jpg) no-repeat center center;
    background-size: cover;
    height: 400px;
}



#interviewmenu {
    padding-top: 90px;
}


.interviewbtn {
    text-align: center;

}

.interviewbtn a {
    position: relative;
    white-space: nowrap;
    color: #fff;
    margin: 0 auto;
    width: 300px;
    padding: 10px 15px;
    font-size: 1.6rem;
    letter-spacing: 0;
    text-decoration: none;
    display: block;
    transition: 0.5s;
    background: linear-gradient(90deg, #a0dccc, #a0dccc 300px, #a0dccc 650px, #0080cd);
    background-position: 100% 0;
    background-size: 900px 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


.interviewbtn a:hover {
    background-position: 0 0;
    color: #fff;
    text-decoration: none;
}

.interviewbtn i {
    position: absolute;
    right: 10px;
    top: 13px;
}

.interviewdetail {
    margin-bottom: 5rem;
}




.intbtn a {
    position: relative;
    white-space: nowrap;
    margin: 0;
    padding: 10px 10px;
    font-size: 1.6rem;
    letter-spacing: 0;
    text-decoration: none;
    display: block;
    background: #f5f5f5;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
}



.intbtn a:hover {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, #a0dccc, #0080cd);
}


#intkakou01,
#inthinshitu {
    background: #f5f9f8;

}

.intbox {
    padding: 8rem 0;
}



.titleemploymente {
    position: relative;
    background: url(../imgs/employmente_head.jpg) no-repeat center center;
    background-size: cover;
    height: 400px;
}


#joblist {
    padding: 8rem 0;
    margin-bottom: 90px;
    background: #fff;
}

.jobtable {
    margin-top: 5rem;
}

.jobtable .profline:first-of-type {
    border-top: 1px solid #aaa;
}


.titleentry {
    position: relative;
    background: url(../imgs/contacthead.jpg) no-repeat center center;
    background-size: cover;
    height: 400px;
}


.saiyoname {
    font-size: 2.7rem;
    font-weight: 600;
}