/*! このCSSファイルは書き換えないで下さい。（クライアント様のほうで追記したい場合は、「custom.css」に追記してください。）*/
/*! */
/*! */
* {
    box-sizing: border-box
}

html {
    font-size: 62.5%;
    overflow-y: scroll
}

@media screen and (max-width:959px) {
    html {
        font-size: 59.5238095238%
    }
}

@media screen and (max-width:559px) {
    html {
        font-size: 56.8181818182%
    }
}

body {
    color: #252525;
    font-family: YakuHanJP, "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.08rem
}

@media screen and (max-width:959px) {
    body {
        line-height: 1.85
    }
}

@media screen and (max-width:559px) {
    body {
        line-height: 1.8
    }
}

#page {
    background: #fff;
    padding-top: 88px;
    position: relative
}

@media screen and (max-width:959px) {
    #page {
        padding-top: 56px;
        overflow: hidden
    }
}

#page.page--child--eng,
#page.page--eng {
    font-family: "Ubuntu", sans-serif;
    letter-spacing: 0.02rem
}

#footer,
#header,
#main {
    min-width: 1240px;
    position: relative
}

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

    #footer,
    #header,
    #main {
        min-width: 0
    }
}

a {
    color: #252525;
    text-decoration: underline
}

@media screen and (min-width:959px) {
    a:hover {
        text-decoration: none
    }
}

.hd-h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 4.8rem 0 3.2rem;
    padding: 0 0 3.2rem;
    position: relative;
    clear: both
}

@media screen and (max-width:959px) {
    .hd-h2 {
        font-size: 2.1818181818rem
    }
}

@media screen and (max-width:559px) {
    .hd-h2 {
        font-size: 2rem
    }
}

.hd-h2:before {
    content: "";
    background: #252525;
    width: 48px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 12px;
    z-index: 2
}

@media screen and (max-width:959px) {
    .hd-h2:before {
        width: 40px;
        left: 8px
    }
}

@media screen and (max-width:559px) {
    .hd-h2:before {
        width: 32px;
        left: 4px
    }
}

.hd-h3 {
    border-left: 6px solid #0c61a8;
    font-size: 2rem;
    font-weight: 700;
    margin: 4.8rem 0 1.6rem;
    padding: 0 0 0 1.6rem;
    position: relative;
    clear: both
}

@media screen and (max-width:559px) {
    .hd-h3 {
        border-width: 4px
    }
}

.hd-h4 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 3.2rem 0 0.8rem;
    position: relative;
    clear: both
}

.hd-h5 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 3.2rem 0 0.8rem;
    position: relative;
    clear: both
}

.hd-h6 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 3.2rem 0 0.8rem;
    position: relative;
    clear: both
}

p.p {
    margin: 0 0 1.6rem
}

p.p.big {
    margin: 0 0 2.4rem
}

.btn {
    font-size: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 320px
}

@media screen and (max-width:959px) {
    .btn {
        width: 260px
    }
}

@media screen and (max-width:559px) {
    .btn {
        width: 220px
    }
}

.btn a {
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 100px
}

.btn a:before {
    content: "";
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: scale(-1, 1);
    transition: all 0.4s ease
}

.btn a .btn--inner {
    position: relative;
    z-index: 3
}

@media screen and (min-width:959px) {
    .btn a:hover:before {
        opacity: 0
    }
}

.btn.btn--l {
    width: auto !important
}

.btn.btn--l a {
    font-size: 2.2rem;
    font-weight: 700;
    padding: 4.8rem 0;
    border-radius: 0
}

@media screen and (max-width:959px) {
    .btn.btn--l a {
        font-size: 2rem;
        padding: 3.2rem 0
    }
}

.readmore {
    text-align: right
}

.readmore a {
    color: #c70013;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.1rem;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 0;
    position: relative
}

.readmore a:before {
    content: "";
    background: #c70013;
    width: 50%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.2s ease
}

@media screen and (max-width:959px) {
    .readmore a:before {
        width: 100%
    }
}

@media screen and (min-width:959px) {
    .readmore a:hover:before {
        width: 100%
    }
}

.readmore.readmore--white a {
    color: #fff
}

.readmore.readmore--white a:before {
    background: #fff
}

.attention {
    border: 1px solid #cfcfcf;
    background: #f4f4f4;
    margin: 4.8rem 0;
    padding: 5px
}

.attention .attention--inner {
    background: #fff;
    padding: 2.4rem 3.2rem
}

.gradient-cover {
    content: "";
    background: #19244c;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.85;
    z-index: 2
}

.hamburger-btn {
    background: #fff;
    text-align: center;
    line-height: 56px;
    width: 56px;
    height: 56px;
    position: fixed;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 500;
    transition: all 0.5s ease;
    transform: translate(0, 0)
}

.hamburger-btn .hamburger-btn--icn {
    width: 18px;
    height: 18px;
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.hamburger-btn .hamburger-btn--icn:before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%)
}

.hamburger-btn--txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11px;
    margin: auto
}

.hamburger-btn--txt:before {
    color: #252525;
    font-size: 8px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    line-height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#hamburger-fixedarea {
    background: #fff;
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 501;
    transition: all 0.6s ease
}

#hamburger-fixedarea #logo--sp {
    text-decoration: none;
    line-height: 0;
    width: 150px;
    margin: 12px 0 0 4%;
    float: left;
    display: block
}

#hamburger-fixedarea #hamburger-btn--tel {
    right: 56px
}

#hamburger-fixedarea #hamburger-btn--tel a {
    width: 100%;
    height: 100%;
    display: block
}

#hamburger-fixedarea #hamburger-btn--tel a .hamburger-btn--icn:before {
    background: url(../image/hamburger_phone.png) no-repeat center center/cover
}

#hamburger-fixedarea #hamburger-btn--tel a .hamburger-btn--txt:before {
    content: "お電話"
}

.page--child--eng #hamburger-fixedarea #hamburger-btn--tel a .hamburger-btn--txt:before,
.page--eng #hamburger-fixedarea #hamburger-btn--tel a .hamburger-btn--txt:before {
    content: "TEL"
}

#hamburger-fixedarea #hamburger-btn--toggle .hamburger-btn--icn:before {
    background: url(../image/hamburger_open.png) no-repeat center center/cover
}

#hamburger-fixedarea #hamburger-btn--toggle .hamburger-btn--txt:before {
    content: "メニュー"
}

.page--child--eng #hamburger-fixedarea #hamburger-btn--toggle .hamburger-btn--txt:before,
.page--eng #hamburger-fixedarea #hamburger-btn--toggle .hamburger-btn--txt:before {
    content: "MENU"
}

#hamburger-fixedarea #hamburger-btn--toggle.hamburger-btn--toggle--opened .hamburger-btn--icn:before {
    background: url(../image/hamburger_close.png) no-repeat center center/cover
}

.page--child--eng #hamburger-fixedarea #hamburger-btn--toggle.hamburger-btn--toggle--opened .hamburger-btn--txt:before,
.page--eng #hamburger-fixedarea #hamburger-btn--toggle.hamburger-btn--toggle--opened .hamburger-btn--txt:before {
    content: "CLOSE"
}

#hamburger-hidden {
    background: #fff;
    width: 100%;
    height: 100vh;
    padding: 88px 16px 64px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 500;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    transform: translateY(-105%);
    transition: all 0.3s ease
}

#hamburger-hidden.hamburger-hidden--show {
    transform: translate(0, 0)
}

#telnum--sp {
    margin: 0 0 2.4rem
}

.nav--main ul li a {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.12rem
}

#nav--sp {
    border-top: 1px dotted #cfcfcf;
    margin: 0 0 3.2rem
}

#nav--sp .footer_sdgs {
    display: none !important
}

#nav--sp ul li {
    position: relative
}

#nav--sp ul li.nav--service--duplication {
    display: none
}

#nav--sp ul li a {
    border-bottom: 1px dotted #cfcfcf;
    color: #252525;
    text-decoration: none;
    padding: 1.4rem 56px 1.4rem 12px;
    display: block;
    position: relative
}

#nav--sp ul li a:before {
    content: "";
    background: url(../image/arrow--gray.png) no-repeat center center/cover;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(0, -50%)
}

#nav--sp ul li.nav--parent>.nav--btn-toggle {
    background: #e5e5e5;
    width: 42px;
    height: 42px;
    position: absolute;
    top: 5px;
    right: 0;
    cursor: pointer;
    z-index: 2
}

@media screen and (max-width:559px) {
    #nav--sp ul li.nav--parent>.nav--btn-toggle {
        top: 4px
    }
}

#nav--sp ul li.nav--parent>.nav--btn-toggle:before {
    content: "";
    background: url(../image/toggle_open.png) no-repeat center center/cover;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#nav--sp ul li.nav--parent>a:before {
    content: none
}

#nav--sp ul li.nav--parent.nav-li--opened {
    background: #f4f4f4
}

#nav--sp ul li.nav--parent.nav-li--opened>.nav--btn-toggle:before {
    background: url(../image/toggle_close.png) no-repeat center center/cover
}

#nav--sp ul li .nav--child {
    display: block;
    display: none
}

#nav--sp ul li .nav--child li a {
    padding: 1.4rem 2.4rem
}

#nav--sp ul li .nav--child li a .nav--child--img {
    display: none
}

#nav--sp ul li .nav--child li a:after,
#nav--sp ul li .nav--child li a:before {
    right: 20px
}

#nav--sp ul li .nav--child li ul {
    display: none
}

#nav-sub--sp {
    padding: 0 0 3.2rem
}

#nav-sub--sp ul li a {
    color: #252525
}

@media screen and (max-width:959px) {
    #nav-language--sp {
        text-align: center;
        margin: 0;
        padding: 0 0 6.4rem;
        display: block
    }
}

@media screen and (max-width:959px) {
    #nav-language--sp ul li a {
        margin: 0 0.4rem
    }
}

#header--pc {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
    background: #19244c;
    height: 88px;
    width: 100%;
    min-width: 1240px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 402;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

@media screen and (max-width:959px) {
    #header--pc {
        min-width: 0;
        display: none
    }
}

@media print {
    #header--pc {
        position: absolute !important
    }
}

#logo--header {
    background: #fff;
    text-decoration: none;
    line-height: 0;
    width: 248px;
    height: 88px;
    padding: 22px 24px 0;
    float: left;
    display: block
}

#btn--header {
    width: 240px;
    float: right
}

@media screen and (max-width:1384px) {
    #btn--header {
        width: 180px
    }
}

#btn--header a {
    height: 88px;
    padding: 28px 0 0;
    border-radius: 0
}

#nav-language--header {
    margin: 35px 24px 0;
    float: right
}

@media screen and (max-width:1384px) {
    #nav-language--header {
        margin-left: 16px;
        margin-right: 16px
    }
}

#nav-language--header ul li a {
    border: none
}

.nav-language {
    font-size: 0;
    display: inline-block;
    vertical-align: middle
}

.nav-language ul li {
    display: inline-block;
    vertical-align: middle
}

.nav-language ul li a {
    border: 1px solid #cfcfcf;
    text-decoration: none;
    line-height: 0;
    width: 24px;
    margin: 0 0.8rem 0 0;
    display: block;
    transition: all 0.3s ease
}

@media screen and (max-width:959px) {
    .nav-language ul li a {
        width: 32px
    }
}

@media screen and (max-width:559px) {
    .nav-language ul li a {
        width: 28px
    }
}

@media screen and (min-width:959px) {
    .nav-language ul li a:hover {
        opacity: 0.8
    }
}

#nav--header {
    font-size: 0;
    text-align: right;
    float: right
}

#nav--header .footer_sdgs {
    display: none !important
}

#nav--header .no-engheader {
    display: none
}

#nav--header ul .nav--column {
    display: inline
}

#nav--header ul .nav--list {
    display: inline
}

#nav--header ul .nav--list>li {
    text-align: center;
    display: inline-block;
    vertical-align: middle
}

#nav--header ul .nav--list>li.nav--contact,
#nav--header ul .nav--list>li.nav--home {
    display: none
}

#nav--header ul .nav--list>li>a {
    color: #fff;
    text-decoration: none;
    line-height: 1;
    height: 88px;
    padding: 34px 14px 0;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease
}

@media screen and (max-width:1384px) {
    #nav--header ul .nav--list>li>a {
        padding-left: 12px;
        padding-right: 12px
    }
}

#nav--header ul .nav--list>li>a:before {
    content: "";
    background: #fff;
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: right top;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1)
}

@media screen and (min-width:959px) {
    #nav--header ul .nav--list>li>a:hover:before {
        transform: scaleX(1);
        transform-origin: left top
    }
}

#nav--header ul .nav--list>li.nav--current>a:before,
#nav--header ul .nav--list>li.nav--parent--active>a:before {
    transform: scaleX(1) !important;
    transform-origin: left top !important
}

/* #nav--header ul .nav--list>li.nav--parent--active>a {
    background: #fff;
    color: #252525
} */

#nav--header ul .nav--list>li .nav--child {
    text-align: center;
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.1s ease, padding 0.3s ease
}

#nav--header ul .nav--list>li .nav--child.nav--child--show {
    opacity: 1;
    height: auto;
    padding-top: 0;
    z-index: 403
}

#nav--header ul .nav--list>li .nav--child>ul {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    background: #fff;
    padding: 32px 32px 16px;
    overflow: hidden
}

#nav--header ul .nav--list>li .nav--child>ul li {
    width: 200px;
    margin: 0 0 12px;
    display: inline-block;
    vertical-align: middle
}

#nav--header ul .nav--list>li .nav--child>ul li a {
    color: #252525;
    text-decoration: none;
    padding: 2px 6px;
    display: inline-block;
    position: relative
}

#nav--header ul .nav--list>li .nav--child>ul li a .nav--child--img {
    line-height: 0;
    display: block;
    margin: 0 0 6px;
    position: relative
}

#nav--header ul .nav--list>li .nav--child>ul li a .nav--child--txt {
    font-size: 1.4rem
}

#nav--header ul .nav--list>li .nav--child>ul li>ul {
    display: none
}

#pttl-section {
    background: url(../image/pttl.jpg) no-repeat center center/cover;
    position: relative
}

@media screen and (max-width:559px) {
    #pttl-section {
        background-image: url(../image/pttl--xs.jpg)
    }
}

#page.page--company #pttl-section {
    background-image: url(../image/pttl_company.jpg)
}

@media screen and (max-width:559px) {
    #page.page--company #pttl-section {
        background-image: url(../image/pttl--xs_company.jpg)
    }
}

#page.page--service #pttl-section {
    background-image: url(../image/pttl_service.jpg)
}

@media screen and (max-width:559px) {
    #page.page--service #pttl-section {
        background-image: url(../image/pttl--xs_service.jpg)
    }
}

#page.page--sales_agency #pttl-section {
    background-image: url(../image/pttl_sales_agency.jpg)
}

@media screen and (max-width:559px) {
    #page.page--sales_agency #pttl-section {
        background-image: url(../image/pttl--xs_sales_agency.jpg)
    }
}

#page.page--find_partner #pttl-section {
    background-image: url(../image/pttl_find_partner.jpg)
}

@media screen and (max-width:559px) {
    #page.page--find_partner #pttl-section {
        background-image: url(../image/pttl--xs_find_partner.jpg)
    }
}

#page.page--ec #pttl-section {
    background-image: url(../image/pttl_ec.jpg)
}

@media screen and (max-width:559px) {
    #page.page--ec #pttl-section {
        background-image: url(../image/pttl--xs_ec.jpg)
    }
}

#page.page--export #pttl-section {
    background-image: url(../image/pttl_export.jpg)
}

@media screen and (max-width:559px) {
    #page.page--export #pttl-section {
        background-image: url(../image/pttl--xs_export.jpg)
    }
}

#page.page--partner #pttl-section {
    background-image: url(../image/pttl_partner.jpg)
}

@media screen and (max-width:559px) {
    #page.page--partner #pttl-section {
        background-image: url(../image/pttl--xs_partner.jpg)
    }
}

#page.page--case #pttl-section {
    background-image: url(../image/pttl_case.jpg)
}

@media screen and (max-width:559px) {
    #page.page--case #pttl-section {
        background-image: url(../image/pttl--xs_case.jpg)
    }
}

#page.page--blog #pttl-section,
#page.page--post #pttl-section {
    background-image: url(../image/pttl_post.jpg)
}

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

    #page.page--blog #pttl-section,
    #page.page--post #pttl-section {
        background-image: url(../image/pttl--xs_post.jpg)
    }
}

#page.page--contact #pttl-section,
#page.page--contact_confirm #pttl-section,
#page.page--contact_error #pttl-section,
#page.page--contact_thanks #pttl-section {
    background-image: url(../image/pttl_contact.jpg)
}

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

    #page.page--contact #pttl-section,
    #page.page--contact_confirm #pttl-section,
    #page.page--contact_error #pttl-section,
    #page.page--contact_thanks #pttl-section {
        background-image: url(../image/pttl--xs_contact.jpg)
    }
}

#pttl-section .gradient-cover {
    opacity: 0.65
}

#pttl {
    color: #fff;
    text-align: center;
    padding: 5rem 0 8rem;
    position: relative;
    z-index: 9
}

@media screen and (max-width:559px) {
    #pttl {
        padding: 3rem 0 6rem
    }
}

#pttl #pttl--eng,
#pttl #pttl--jpn {
    line-height: 1.75;
    display: block
}

#pttl #pttl--eng {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    padding: 0 0 1.2rem;
    position: relative
}

#pttl #pttl--eng:before {
    content: "";
    background: #fff;
    width: 16px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2
}

#pttl #pttl--jpn {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 0.12rem
}

@media screen and (max-width:959px) {
    #pttl #pttl--jpn {
        font-size: 2.8571428571rem
    }
}

@media screen and (max-width:559px) {
    #pttl #pttl--jpn {
        font-size: 2.2222222222rem
    }
}

#breadcrumb {
    color: #fff;
    font-size: 1.2rem;
    padding: 0.8rem 0;
    margin: 0 0 0 -4px
}

#breadcrumb span[property=itemListElement] {
    margin: 0 4px
}

#breadcrumb a {
    color: #fff
}

.particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 2
}

@media screen and (max-width:559px) {
    .particles-js {
        display: none
    }
}

#primary {
    width: 684px;
    margin-right: 40px;
    float: left
}

@media screen and (max-width:959px) {
    #primary {
        width: auto;
        margin: 0 auto 8rem;
        float: none
    }
}

#secondary {
    width: 300px;
    float: right;
    padding: 0 0 4rem
}

@media screen and (max-width:959px) {
    #secondary {
        width: auto;
        float: none
    }
}

.section {
    padding: 9.6rem 0;
    position: relative
}

@media screen and (max-width:959px) {
    .section {
        padding: 8rem 0
    }
}

@media screen and (max-width:559px) {
    .section {
        padding: 6.8571428571rem 0
    }
}

.section--s {
    padding: 6.4rem 0;
    position: relative
}

@media screen and (max-width:959px) {
    .section--s {
        padding: 5.3333333333rem 0
    }
}

@media screen and (max-width:559px) {
    .section--s {
        padding: 4.5714285714rem 0
    }
}

.bg--white {
    background-color: #fff
}

.bg--gray {
    background-color: #f4f4f4
}

.bg--lightblue {
    background: #f1f4fa;
    background: linear-gradient(to left top, #f1f4fa 0%, #ffffff 100%)
}

.bg--darknavy,
.bg--navy {
    color: #fff
}

.bg--navy {
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%)
}

.bg--darknavy {
    background: #19244c
}

.white-block {
    box-shadow: -8px -8px 16px -4px #fff, 8px 8px 16px -4px rgba(0, 0, 0, 0.04);
    background: #fff;
    padding: 4.8rem 5.6rem;
    border-radius: 48px 0 48px 0
}

@media screen and (max-width:959px) {
    .white-block {
        border-radius: 24px 0 24px 0
    }
}

@media screen and (max-width:559px) {
    .white-block {
        border-radius: 16px 0 16px 0
    }
}

.section-ttl {
    font-size: 4rem;
    font-weight: 800;
    text-align: center;
    margin: 0 0 4rem
}

@media screen and (max-width:959px) {
    .section-ttl {
        font-size: 3.0769230769rem;
        margin: 0 0 3.3333333333rem
    }
}

@media screen and (max-width:559px) {
    .section-ttl {
        font-size: 2.5rem;
        margin: 0 0 2.8571428571rem
    }
}

.section-sub-ttl {
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    margin: 0 0 3.2rem
}

@media screen and (max-width:559px) {
    .section-sub-ttl {
        font-size: 1.5rem
    }
}

.engjpn-ttl {
    text-align: center;
    margin: 0 0 4rem;
    position: relative;
    z-index: 2
}

.engjpn-ttl .engjpn-ttl--eng,
.engjpn-ttl .engjpn-ttl--jpn {
    font-weight: 700;
    line-height: 1.5;
    display: block
}

.engjpn-ttl .engjpn-ttl--eng {
    font-size: 5.6rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase
}

@media screen and (max-width:959px) {
    .engjpn-ttl .engjpn-ttl--eng {
        font-size: 4.3076923077rem
    }
}

@media screen and (max-width:559px) {
    .engjpn-ttl .engjpn-ttl--eng {
        font-size: 3.5rem
    }
}

.engjpn-ttl .engjpn-ttl--jpn {
    font-size: 1.8rem;
    letter-spacing: 0.1rem
}

@media screen and (max-width:959px) {
    .engjpn-ttl .engjpn-ttl--jpn {
        font-size: 1.6363636364rem
    }
}

@media screen and (max-width:559px) {
    .engjpn-ttl .engjpn-ttl--jpn {
        font-size: 1.5rem
    }
}

.engjpn-ttl.engjpn-ttl--left {
    text-align: left
}

#kv {
    height: 780px;
    min-height: 780px;
    position: relative
}

@media screen and (max-width:959px) {
    #kv {
        height: 65vw !important;
        min-height: 0 !important
    }
}

#kv .gradient-cover {
    opacity: 0.2;
    z-index: 201
}

#kv .ctt-width-ll {
    height: 100%;
    position: relative
}

#kvtxt {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    width: auto;
    height: 304px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 202
}

@media screen and (max-width:959px) {
    #kvtxt {
        height: 28vw
    }
}

#kvtxt #kvtxt--01 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.3rem
}

@media screen and (max-width:959px) {
    #kvtxt #kvtxt--01 {
        font-size: 3.8vw;
        letter-spacing: 0.18rem
    }
}

@media screen and (max-width:559px) {
    #kvtxt #kvtxt--01 {
        font-size: 3.6vw;
        letter-spacing: 0.12rem
    }
}

#kvtxt #kvtxt--02 {
    font-size: 68px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.4rem;
    margin-bottom: 3rem
}

@media screen and (max-width:959px) {
    #kvtxt #kvtxt--02 {
        font-size: 6.4vw;
        letter-spacing: 0.25rem;
        margin-bottom: 2.4vw
    }
}

@media screen and (max-width:559px) {
    #kvtxt #kvtxt--02 {
        font-size: 6.2vw;
        letter-spacing: 0.18rem
    }
}

.page--eng #kvtxt #kvtxt--02 {
    font-size: 48px;
    letter-spacing: 0.12rem
}

@media screen and (max-width:959px) {
    .page--eng #kvtxt #kvtxt--02 {
        font-size: 3.8vw;
        letter-spacing: 0.08rem
    }
}

@media screen and (max-width:559px) {
    .page--eng #kvtxt #kvtxt--02 {
        font-size: 3.6vw;
        letter-spacing: 0.06rem
    }
}

#kvtxt #kvtxt--03 {
    font-size: 18px;
    font-weight: 600;
    line-height: 2.3;
    letter-spacing: 0.26rem
}

@media screen and (max-width:959px) {
    #kvtxt #kvtxt--03 {
        font-size: 2.4vw;
        line-height: 2;
        letter-spacing: 0.12rem
    }
}

.page--eng #kvtxt #kvtxt--03 {
    font-size: 17px;
    letter-spacing: 0.08rem
}

@media screen and (max-width:959px) {
    .page--eng #kvtxt #kvtxt--03 {
        font-size: 2.2vw;
        letter-spacing: 0.06rem
    }
}

#slideshow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200
}

#slideshow .slide-viewport {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0
}

#slideshow .slide {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 780px;
    min-height: 780px
}

@media screen and (max-width:959px) {
    #slideshow .slide {
        height: 65vw !important;
        min-height: 0 !important
    }
}

#slideshow .slide#slide-01 {
    background-image: url(../image/slideshow_01.webp)
}

@media screen and (max-width:559px) {
    #slideshow .slide#slide-01 {
        background-image: url(../image/slideshow--xs_01.webp)
    }
}

#slideshow .slide#slide-03 {
    background-image: url(../image/slideshow_03.webp)
}

@media screen and (max-width:559px) {
    #slideshow .slide#slide-03 {
        background-image: url(../image/slideshow--xs_03.webp)
    }
}

#autoslide-section {
    background: #fafafa;
    padding: 2.4rem 0;
    text-align: center;
    overflow: hidden
}

@media screen and (max-width:959px) {
    #autoslide-section {
        padding: 2.1818181818rem 0
    }
}

@media screen and (max-width:559px) {
    #autoslide-section {
        padding: 2rem 0
    }
}

#autoslide-section #autoslide-area {
    display: flex;
    align-items: center;
    overflow: hidden
}

#autoslide-section #autoslide-area #autoslide-list {
    display: flex;
    align-items: center;
    animation: loop-slide 28s infinite linear 1s both
}

#autoslide-section #autoslide-area #autoslide-list li {
    line-height: 0;
    width: 160px;
    margin: 0 0.4rem
}

@media screen and (max-width:959px) {
    #autoslide-section #autoslide-area #autoslide-list li {
        width: 128px
    }
}

@media screen and (max-width:559px) {
    #autoslide-section #autoslide-area #autoslide-list li {
        width: 106.6666666667px
    }
}

@keyframes loop-slide {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

.frontpost-section .frontpost-btn {
    width: 240px;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width:959px) {
    .frontpost-section .frontpost-btn {
        width: 220px;
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (max-width:559px) {
    .frontpost-section .frontpost-btn {
        width: 200px
    }
}

.frontpost-section .frontpost-btn a {
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 100px;
    font-size: 1.4rem
}

.frontpost-section .frontpost-btn a:before {
    content: "";
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: scale(-1, 1);
    transition: all 0.4s ease
}

.frontpost-section .frontpost-btn a .btn--inner {
    position: relative;
    z-index: 3
}

@media screen and (min-width:959px) {
    .frontpost-section .frontpost-btn a:hover:before {
        opacity: 0
    }
}

.frontpost-section .post-area {
    position: relative
}

@media screen and (max-width:959px) {
    .frontpost-section .post-area .post-list-wrap {
        margin-bottom: 4rem
    }
}

#frontabout-section {
    background: url(../image/about_bg.webp) no-repeat center center/cover
}

@media screen and (max-width:559px) {
    #frontabout-section {
        background-image: url(../image/about_bg_sp.webp)
    }
}

#frontabout-section #frontabout-txt {
    font-size: 1.7rem;
    font-weight: 500;
    text-align: center;
    line-height: 2.2;
    margin: 0 0 4rem
}

@media screen and (max-width:959px) {
    #frontabout-section #frontabout-txt {
        font-size: 1.6rem;
        line-height: 2
    }
}

@media screen and (max-width:559px) {
    #frontabout-section #frontabout-txt {
        font-size: 1.5rem
    }
}

#outline-section #outline-img {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto
}

.frontpartner-section .frontpartner-wrap {
    margin: 6.4rem 0 0
}

.frontpartner-section .frontpartner-wrap .one-frontpartner {
    text-align: center;
    margin: 0 0 3.2rem
}

.frontpartner-section .frontpartner-wrap .one-frontpartner:last-child {
    margin-bottom: 0 !important
}

.frontpartner-section .frontpartner-wrap .one-frontpartner .frontpartner-ttl {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 1.6rem
}

.frontpartner-section .frontpartner-wrap .one-frontpartner .frontpartner-list li {
    line-height: 0;
    width: 150px;
    margin: 0 0.8rem 1.6rem;
    display: inline-block;
    vertical-align: middle
}

@media screen and (max-width:959px) {
    .frontpartner-section .frontpartner-wrap .one-frontpartner .frontpartner-list li {
        width: 120px
    }
}

@media screen and (max-width:559px) {
    .frontpartner-section .frontpartner-wrap .one-frontpartner .frontpartner-list li {
        width: 100px
    }
}

#navpage-section #navpage-wrap .one-navpage {
    text-decoration: none;
    line-height: 0;
    margin: 0 0 2.4rem;
    display: block;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease
}

#navpage-section #navpage-wrap .one-navpage .navpage-engtxt {
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
    white-space: nowrap;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.16rem;
    text-transform: uppercase;
    position: absolute;
    top: 16px;
    left: 32px;
    z-index: 2;
    letter-spacing: 0.2rem;
    text-align: justify;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl
}

@media screen and (max-width:959px) {
    #navpage-section #navpage-wrap .one-navpage .navpage-engtxt {
        text-align: justify;
        writing-mode: tb-rl;
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -moz-writing-mode: horizontal-tb;
        -o-writing-mode: horizontal-tb;
        top: 24px;
        left: 16px
    }
}

#navpage-section #navpage-wrap .one-navpage .navpage-txt {
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 56px;
    padding: 0 12px 0 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    color: #252525;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 56px;
    display: block
}

@media screen and (max-width:959px) {
    #navpage-section #navpage-wrap .one-navpage .navpage-txt {
        height: 48px
    }
}

@media screen and (max-width:559px) {
    #navpage-section #navpage-wrap .one-navpage .navpage-txt {
        font-size: 14px;
        height: 40px
    }
}

@media screen and (max-width:959px) {
    #navpage-section #navpage-wrap .one-navpage .navpage-txt {
        line-height: 48px
    }
}

@media screen and (max-width:559px) {
    #navpage-section #navpage-wrap .one-navpage .navpage-txt {
        line-height: 40px
    }
}

#navpage-section #servicedetail-wrap {
    margin: 4rem 0 0
}

#navpage-section #servicedetail-wrap .one-servicedetail {
    color: #fff;
    text-decoration: none;
    margin: 0 0 4rem;
    display: block
}

@media screen and (max-width:959px) {
    #navpage-section #servicedetail-wrap .one-servicedetail {
        margin: 0 0 2.4rem
    }
}

.page--service #navpage-section #servicedetail-wrap .one-servicedetail {
    color: #252525
}

#navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-img {
    line-height: 0;
    margin: 0 0 0.8rem;
    position: relative
}

#navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-img:before {
    content: "";
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

#navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-img .servicedetail-img--txt {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3
}

@media screen and (max-width:959px) {
    #navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-img .servicedetail-img--txt {
        font-size: 1.4166666667rem
    }
}

@media screen and (max-width:559px) {
    #navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-img .servicedetail-img--txt {
        font-size: 1.2142857143rem
    }
}

#navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-ctt .servicedetail-ttl {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.4rem
}

@media screen and (max-width:959px) {
    #navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-ctt .servicedetail-ttl {
        font-size: 1.8181818182rem
    }
}

@media screen and (max-width:559px) {
    #navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-ctt .servicedetail-ttl {
        font-size: 1.6666666667rem
    }
}

#navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-ctt .servicedetail-txt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3rem
}

.page--service #navpage-section #servicedetail-wrap .one-servicedetail .servicedetail-ctt .servicedetail-txt {
    color: #252525
}

#navscroll-section #navscroll {
    margin: 0 -0.4rem
}

#navscroll-section #navscroll ul li {
    width: 25%;
    float: left
}

@media screen and (max-width:959px) {
    #navscroll-section #navscroll ul li {
        width: 50%
    }
}

@media screen and (max-width:559px) {
    #navscroll-section #navscroll ul li {
        width: auto;
        float: none;
        margin: 0 0 4px
    }
}

#navscroll-section #navscroll ul li a {
    background: #f4f4f4;
    color: #252525;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    margin: 0 0.4rem 0.8rem;
    padding: 2.4rem;
    display: block;
    position: relative
}

#navscroll-section #navscroll ul li a:before {
    content: "";
    background: url(../image/arrow--gray.png) no-repeat center center/cover;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -8px;
    transform: translate(0, -50%) rotate(90deg);
    transition: all 0.3s ease;
    opacity: 0
}

@media screen and (min-width:959px) {
    #navscroll-section #navscroll ul li a:hover:before {
        opacity: 1;
        margin-top: 0
    }
}

#service-section #service-wrap {
    position: relative
}

#service-section #service-wrap .one-service {
    background: url(../image/service_bg--right.jpg) repeat-y center center/contain;
    margin: 0 0 6.4rem;
    position: relative
}

@media screen and (max-width:959px) {
    #service-section #service-wrap .one-service {
        background: none !important
    }
}

#service-section #service-wrap .one-service:last-child {
    margin-bottom: 0 !important
}

#service-section #service-wrap .one-service:before {
    content: "";
    background: #fff;
    width: 100%;
    height: 52px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

@media screen and (max-width:959px) {
    #service-section #service-wrap .one-service:before {
        content: none
    }
}

#service-section #service-wrap .one-service .service-ctt {
    padding: 1.6rem 0 3.2rem;
    position: relative
}

@media screen and (max-width:959px) {
    #service-section #service-wrap .one-service .service-ctt {
        background: #f4f4f4;
        margin: 0 0 0 -1.6rem;
        padding: 1.6rem 2.4rem
    }
}

@media screen and (max-width:559px) {
    #service-section #service-wrap .one-service .service-ctt {
        background: none;
        margin: 0 0 0.8rem;
        padding: 0
    }
}

#service-section #service-wrap .one-service .service-ctt .service-ttl {
    color: #0c61a8;
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1.75;
    margin: 0 0 1.6rem
}

@media screen and (max-width:959px) {
    #service-section #service-wrap .one-service .service-ctt .service-ttl {
        font-size: 3rem;
        margin: 0 0 0.8rem
    }
}

@media screen and (max-width:559px) {
    #service-section #service-wrap .one-service .service-ctt .service-ttl {
        font-size: 2.5714285714rem
    }
}

#service-section #service-wrap .one-service .service-ctt .service-engttl {
    color: rgba(12, 97, 168, 0.08);
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    font-style: italic;
    white-space: nowrap;
    text-transform: capitalize;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width:959px) {
    #service-section #service-wrap .one-service .service-ctt .service-engttl {
        font-size: 6.6666666667rem;
        left: auto;
        right: 0
    }
}

@media screen and (max-width:559px) {
    #service-section #service-wrap .one-service .service-ctt .service-engttl {
        font-size: 5.7142857143rem
    }
}

#service-section #service-wrap .one-service .service-ctt p {
    position: relative;
    z-index: 3
}

#service-section #service-wrap .one-service .service-ctt .service-ol {
    counter-reset: item;
    list-style: none;
    position: relative;
    z-index: 3
}

#service-section #service-wrap .one-service .service-ctt .service-ol li {
    list-style: none;
    text-indent: 0px;
    padding: 0 0 6px
}

#service-section #service-wrap .one-service .service-ctt .service-ol li:before {
    counter-increment: item;
    content: counter(item) "";
    background: #0c61a8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: "Ubuntu", sans-serif;
    text-align: center;
    text-indent: 0px;
    line-height: 22px;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    left: auto;
    border-radius: 100px
}

@media screen and (max-width:959px) {
    #service-section #service-wrap .one-service .service-ctt .service-ol li:before {
        font-size: 13px
    }
}

@media screen and (max-width:559px) {
    #service-section #service-wrap .one-service .service-ctt .service-ol li:before {
        font-size: 12px;
        line-height: 21px;
        text-indent: 1px
    }
}

#service-section #service-wrap .one-service .service-img {
    line-height: 0
}

#service-section #service-wrap .one-service.one-service--inversion {
    background-image: url(../image/service_bg--left.jpg)
}

.service-section #serviceflowicn-wrap {
    margin: 0 0 4rem
}

.service-section #serviceflowicn-wrap .one-serviceflowicn {
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    color: #fff;
    text-decoration: none;
    margin: 0 0 1.6rem;
    padding: 3.2rem 2.4rem;
    display: block;
    position: relative
}

@media screen and (max-width:959px) {
    .service-section #serviceflowicn-wrap .one-serviceflowicn {
        padding: 2.9090909091rem 3.6363636364rem
    }
}

@media screen and (max-width:559px) {
    .service-section #serviceflowicn-wrap .one-serviceflowicn {
        padding: 2.6666666667rem 3.3333333333rem;
        margin: 0 0 0.8rem
    }
}

.service-section #serviceflowicn-wrap .one-serviceflowicn:before {
    content: "";
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: scale(-1, 1);
    transition: all 0.4s ease
}

.service-section #serviceflowicn-wrap .one-serviceflowicn .serviceflowicn-icn {
    background: #fff;
    line-height: 0;
    width: 75px;
    height: 75px;
    margin: 0 auto 0.8rem;
    padding: 1.2rem;
    border-radius: 50%;
    position: relative;
    z-index: 2
}

@media screen and (max-width:959px) {
    .service-section #serviceflowicn-wrap .one-serviceflowicn .serviceflowicn-icn {
        width: 60px;
        height: 60px;
        padding: 0.8rem
    }
}

@media screen and (max-width:559px) {
    .service-section #serviceflowicn-wrap .one-serviceflowicn .serviceflowicn-icn {
        width: 50px;
        height: 50px;
        padding: 0.6rem;
        margin: 0 auto
    }
}

.service-section #serviceflowicn-wrap .one-serviceflowicn .serviceflowicn-ttl {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.75;
    position: relative;
    z-index: 2
}

@media screen and (max-width:559px) {
    .service-section #serviceflowicn-wrap .one-serviceflowicn .serviceflowicn-ttl {
        text-align: left
    }
}

@media screen and (min-width:959px) {
    .service-section #serviceflowicn-wrap .one-serviceflowicn:hover:before {
        opacity: 0
    }
}

.service-section #servicecontents-wrap .one-servicecontents {
    background: #f4f4f4;
    margin: 0 0 2.4rem;
    padding: 3.2rem 4rem
}

@media screen and (max-width:959px) {
    .service-section #servicecontents-wrap .one-servicecontents {
        padding: 2.9090909091rem 4rem 1.1
    }
}

@media screen and (max-width:559px) {
    .service-section #servicecontents-wrap .one-servicecontents {
        padding: 2.6666666667rem 4rem 1.2
    }
}

.service-section #servicecontents-wrap .one-servicecontents:last-child {
    margin-bottom: 0 !important
}

.service-section .schedule-wrap .schedule-ctt {
    background: #f4f4f4;
    padding: 4rem 2rem
}

@media screen and (max-width:959px) {
    .service-section .schedule-wrap .schedule-ctt {
        margin: 0 0 2.4rem
    }
}

.service-section .schedule-wrap .schedule-ctt .schedule-list {
    margin-bottom: 2.3rem
}

.service-section .schedule-wrap .schedule-ctt .schedule-list li {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75;
    margin: 0 0 1.2rem
}

.service-section .schedule-wrap .schedule-ctt .schedule-list li ul {
    padding: 0.8rem 0 0.8rem 1.6rem
}

.service-section .schedule-wrap .schedule-ctt .schedule-list li ul li {
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 0.2rem
}

.service-section .schedule-wrap .schedule-img {
    margin: 0 0 2.4rem
}

.service-section #plan-table {
    margin: 2.4rem 0 0
}

.service-section #plan-table table {
    border-collapse: separate;
    border-spacing: 8px 0
}

@media screen and (max-width:959px) {
    .service-section #plan-table table {
        border-spacing: 4px 0
    }
}

@media screen and (max-width:559px) {
    .service-section #plan-table table {
        border-spacing: 2px 0
    }
}

.service-section #plan-table table tr td,
.service-section #plan-table table tr th {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.75;
    padding: 1.6rem
}

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

    .service-section #plan-table table tr td,
    .service-section #plan-table table tr th {
        font-size: 1.3rem;
        padding: 1rem
    }
}

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

    .service-section #plan-table table tr td,
    .service-section #plan-table table tr th {
        font-size: 1.2rem;
        padding: 0.6rem
    }
}

.service-section #plan-table table tr th {
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    color: #fff;
    text-align: center;
    width: 184px
}

@media screen and (max-width:559px) {
    .service-section #plan-table table tr th {
        line-height: 1.65
    }
}

.service-section #plan-table table tr th b {
    font-size: 2rem;
    font-weight: 700
}

@media screen and (max-width:959px) {
    .service-section #plan-table table tr th b {
        font-size: 1.6rem
    }
}

@media screen and (max-width:559px) {
    .service-section #plan-table table tr th b {
        font-size: 1.4rem
    }
}

.service-section #plan-table table tr td {
    background: #f4f4f4;
    text-align: left
}

.case-section #caselogo-wrap {
    margin: 4rem 0 2.4rem
}

.case-section #caselogo-wrap .one-caselogo {
    padding: 0 1.2rem
}

.case-section #caselogo-wrap .one-caselogo .one-caselogo--inner {
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.05);
    background: #fff;
    margin: 0 0 2.4rem;
    padding: 3.2rem
}

@media screen and (max-width:959px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner {
        padding: 2.6666666667rem
    }
}

@media screen and (max-width:559px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner {
        padding: 0
    }
}

.case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-img {
    border: 4px solid #f4f4f4;
    background: #fff;
    line-height: 0;
    margin: 0 0 1.6rem
}

@media screen and (max-width:559px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-img {
        border: none;
        margin: 0
    }
}

@media screen and (max-width:559px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-ctt {
        line-height: 1.7;
        padding: 1rem 1.2rem
    }
}

.case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-ctt .caselogo-ttl {
    font-size: 1.7rem;
    font-weight: 700
}

@media screen and (max-width:959px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-ctt .caselogo-ttl {
        font-size: 1.6rem
    }
}

@media screen and (max-width:559px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-ctt .caselogo-ttl {
        font-size: 1.5rem;
        margin: 0 0 0.4rem
    }
}

@media screen and (max-width:559px) {
    .case-section #caselogo-wrap .one-caselogo .one-caselogo--inner .caselogo-ctt .caselogo-txt {
        font-size: 1.2rem
    }
}

.company-section #mvv-hd {
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    margin: -2.4rem 0 5.6rem
}

@media screen and (max-width:959px) {
    .company-section #mvv-hd {
        font-size: 2.3333333333rem;
        margin: -2.1818181818rem 0 5.0909090909rem
    }
}

@media screen and (max-width:559px) {
    .company-section #mvv-hd {
        font-size: 2rem;
        margin: -2rem 0 4.6666666667rem
    }
}

.company-section #mvv-wrap .one-mvv {
    text-align: center;
    margin: 0 0 5.6rem;
    position: relative
}

@media screen and (max-width:959px) {
    .company-section #mvv-wrap .one-mvv {
        margin: 0 0 5.0909090909rem
    }
}

@media screen and (max-width:559px) {
    .company-section #mvv-wrap .one-mvv {
        margin: 0 0 4.6666666667rem
    }
}

.company-section #mvv-wrap .one-mvv:before {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 170px;
    height: 170px;
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
    opacity: 0.05
}

@media screen and (max-width:959px) {
    .company-section #mvv-wrap .one-mvv:before {
        width: 141.6666666667px;
        height: 141.6666666667px
    }
}

@media screen and (max-width:559px) {
    .company-section #mvv-wrap .one-mvv:before {
        width: 121.4285714286px;
        height: 121.4285714286px
    }
}

.company-section #mvv-wrap .one-mvv.one-mvv--mission:before {
    background-image: url(../image/mvv--mission.webp)
}

.company-section #mvv-wrap .one-mvv.one-mvv--vision:before {
    background-image: url(../image/mvv--vision.webp)
}

.company-section #mvv-wrap .one-mvv.one-mvv--value:before {
    background-image: url(../image/mvv--value.webp)
}

.company-section #mvv-wrap .one-mvv:last-child {
    margin-bottom: 0 !important
}

.company-section #mvv-wrap .one-mvv .mvv-ttl {
    margin: 0 0 2rem;
    position: relative;
    z-index: 3
}

.company-section #mvv-wrap .one-mvv .mvv-ttl .mvv-ttl--eng,
.company-section #mvv-wrap .one-mvv .mvv-ttl .mvv-ttl--jpn {
    line-height: 1.5;
    display: block
}

.company-section #mvv-wrap .one-mvv .mvv-ttl .mvv-ttl--eng {
    color: #0c61a8;
    font-size: 1.9rem;
    font-weight: 700
}

.company-section #mvv-wrap .one-mvv .mvv-ttl .mvv-ttl--jpn {
    font-size: 2.4rem;
    font-weight: 700
}

@media screen and (max-width:959px) {
    .company-section #mvv-wrap .one-mvv .mvv-ttl .mvv-ttl--jpn {
        font-size: 2.1818181818rem
    }
}

@media screen and (max-width:559px) {
    .company-section #mvv-wrap .one-mvv .mvv-ttl .mvv-ttl--jpn {
        font-size: 2rem
    }
}

.company-section #mvv-wrap .one-mvv .mvv-txt {
    font-size: 1.6rem;
    position: relative;
    z-index: 3
}

@media screen and (max-width:559px) {
    .company-section #mvv-wrap .one-mvv .mvv-txt {
        font-size: 1.5rem
    }
}

.company-section #value-ol {
    text-align: left;
    display: inline-block;
    counter-reset: li;
    position: relative;
    z-index: 3
}

.company-section #value-ol li {
    border-bottom: 1px solid #0c61a8;
    list-style: none;
    font-size: 1.6rem;
    margin: 0 0 2.4rem;
    padding: 0 35px 8px 71px;
    position: relative;
    border-radius: 100px 0 0 100px
}

@media screen and (max-width:959px) {
    .company-section #value-ol li {
        padding: 0 35px 6px 65px
    }
}

@media screen and (max-width:559px) {
    .company-section #value-ol li {
        text-align: center;
        padding: 29px 0 0.6rem;
        border-radius: 0
    }
}

.company-section #value-ol li:before {
    border: 1px solid #0c61a8;
    background: #fff;
    color: #0c61a8;
    font-size: 22px;
    font-weight: 500;
    font-family: "Ubuntu", sans-serif;
    text-align: center;
    line-height: 45px;
    width: 46px;
    height: 46px;
    position: absolute;
    bottom: -2px;
    left: -1px;
    border-radius: 50%;
    z-index: 3
}

@media screen and (max-width:959px) {
    .company-section #value-ol li:before {
        font-size: 20px;
        line-height: 39px;
        width: 40px;
        height: 40px
    }
}

@media screen and (max-width:559px) {
    .company-section #value-ol li:before {
        font-size: 18px;
        line-height: 28px;
        width: 28px;
        height: 28px;
        top: -4px;
        left: 0;
        right: 0;
        bottom: auto;
        margin: 0 auto
    }
}

.company-section #value-ol li.value-ol--01:before {
    content: "1"
}

.company-section #value-ol li.value-ol--02:before {
    content: "2"
}

.company-section #value-ol li.value-ol--03:before {
    content: "3"
}

.company-section #value-ol li.value-ol--04:before {
    content: "4"
}

.company-section #value-ol li.value-ol--05:before {
    content: "5"
}

.company-section #value-ol li.value-ol--06:before {
    content: "6"
}

.company-section #value-ol li.value-ol--07:before {
    content: "7"
}

.company-section #value-ol li.value-ol--08:before {
    content: "8"
}

.company-section #value-ol li.value-ol--09:before {
    content: "9"
}

.company-section #value-ol li.value-ol--10:before {
    content: "10"
}

@media screen and (max-width:959px) {
    .company-section #ceo-img {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (max-width:559px) {
    .company-section #ceo-img {
        max-width: 66.6%
    }
}

.company-section #ceo-name {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin: 0.4rem 0 0
}

.company-section #ceo-name b {
    font-size: 2.2rem;
    margin: 0 0 0 0.8rem
}

.company-section #profile-txt {
    font-size: 1.4rem
}

.company-section #profile-txt p {
    margin: 0 0 1rem
}

.company-section #profile-txt p:last-child {
    margin-bottom: 0 !important
}

@media screen and (max-width:959px) {
    .company-section .career-wrap {
        margin: 2.4rem 0 0
    }
}

.company-section .career-wrap .career-table {
    margin: 0.8rem 0 0
}

.company-section .career-wrap .career-table tr td,
.company-section .career-wrap .career-table tr th {
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
    font-size: 1.4rem;
    padding: 1rem 1.4rem
}

.company-section .career-wrap .career-table tr th {
    text-align: left;
    font-weight: 400;
    width: 200px
}

@media screen and (max-width:959px) {
    .company-section .career-wrap .career-table tr th {
        width: 148px
    }
}

@media screen and (max-width:559px) {
    .company-section .career-wrap .career-table tr th {
        width: 104px !important
    }
}

.company-section .team-wrap .one-team {
    margin: 0 0 4.8rem
}

.company-section .team-wrap .one-team:last-child {
    margin-bottom: 0
}

.page--eng .company-section .team-wrap .one-team {
    margin: 0 0 4rem
}

@media screen and (max-width:959px) {
    .page--eng .company-section .team-wrap .one-team {
        margin-bottom: 3.2rem
    }
}

@media screen and (max-width:559px) {
    .page--eng .company-section .team-wrap .one-team {
        margin-bottom: 2.4rem
    }
}

.company-section .team-wrap .one-team .team-img {
    line-height: 0;
    border-radius: 50%;
    overflow: hidden
}

.page--eng .company-section .team-wrap .one-team .team-img {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.8rem
}

@media screen and (max-width:959px) {
    .page--eng .company-section .team-wrap .one-team .team-img {
        width: 108px;
        height: 108px
    }
}

@media screen and (max-width:559px) {
    .page--eng .company-section .team-wrap .one-team .team-img {
        width: 96px;
        height: 96px
    }
}

.company-section .team-wrap .one-team .team-ctt .team-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.8rem;
    display: inline-block;
    vertical-align: baseline
}

.page--eng .company-section .team-wrap .one-team .team-ctt .team-name {
    text-align: center;
    margin: 0;
    display: block
}

.company-section .team-wrap .one-team .team-ctt .team-position {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 0 0.8rem;
    display: inline-block;
    vertical-align: baseline
}

.page--eng .company-section .team-wrap .one-team .team-ctt .team-position {
    text-align: center;
    margin: 0;
    display: block
}

.company-section .team-wrap .one-team .team-ctt .team-position:before {
    content: "／"
}

.page--eng .company-section .team-wrap .one-team .team-ctt .team-position:before {
    content: none
}

.company-section .google-map {
    line-height: 0;
    margin: 0 0 3.2rem;
    position: relative
}

@media screen and (max-width:959px) {
    .company-section .google-map:before {
        content: "";
        padding-top: 56.25%;
        display: block
    }

    .company-section .google-map #map_canvas,
    .company-section .google-map iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: block
    }
}

@media screen and (max-width:559px) {
    .company-section .google-map {
        margin-left: 8px !important;
        margin-right: 8px !important
    }
}

@media screen and (max-width:559px) {
    .company-section #data-wrap .one-data {
        margin-bottom: 4rem
    }
}

.company-section #data-wrap .one-data .data-ttl {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1.6rem
}

#partner-section #partner-wrap {
    margin: 6.4rem 0 0
}

#partner-section #partner-wrap .one-partner {
    margin: 0 0 4rem
}

#partner-section #partner-wrap .one-partner .partner-country {
    font-weight: 700;
    text-align: center;
    line-height: 1.5
}

#partner-section #partner-wrap .one-partner .partner-ttl {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.75;
    margin: 0 0 0.8rem
}

#privacy-section {
    font-size: 1.4rem
}

.telnum {
    text-align: center;
    line-height: 1
}

.telnum a {
    color: #252525;
    text-decoration: none
}

.telnum .telnum--num {
    font-size: 0
}

.telnum .telnum--num .telnum--num--icn,
.telnum .telnum--num .telnum--num--num {
    display: inline-block;
    vertical-align: middle
}

.telnum .telnum--num .telnum--num--icn {
    background: url(../image/tel.png) no-repeat center center/cover;
    width: 25px;
    height: 25px;
    margin: 0 1rem 0 0;
    position: relative;
    top: 1px
}

@media screen and (max-width:959px) {
    .telnum .telnum--num .telnum--num--icn {
        width: 20.8333333333px;
        height: 20.8333333333px;
        top: 1px
    }
}

@media screen and (max-width:559px) {
    .telnum .telnum--num .telnum--num--icn {
        width: 17.8571428571px;
        height: 17.8571428571px;
        top: 0
    }
}

#email--footer .telnum .telnum--num .telnum--num--icn {
    background-image: url(../image/mail.png)
}

.telnum .telnum--num .telnum--num--num {
    font-size: 36px;
    font-weight: 500;
    position: relative;
    top: -2px
}

@media screen and (max-width:959px) {
    .telnum .telnum--num .telnum--num--num {
        font-size: 30px
    }
}

@media screen and (max-width:559px) {
    .telnum .telnum--num .telnum--num--num {
        font-size: 25.7142857143px
    }
}

#email--footer .telnum .telnum--num .telnum--num--num {
    font-size: 24px
}

@media screen and (max-width:959px) {
    #email--footer .telnum .telnum--num .telnum--num--num {
        font-size: 20px
    }
}

@media screen and (max-width:559px) {
    #email--footer .telnum .telnum--num .telnum--num--num {
        font-size: 17.1428571429px
    }
}

.telnum .telnum--metatxt {
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0.4rem 0 0
}

#tocontact-section {
    background: url(../image/tocontact_bg.webp) no-repeat center center/cover;
    text-align: center;
    position: relative
}

@media screen and (max-width:959px) {
    #tocontact-section {
        margin: 0 !important
    }
}

@media screen and (max-width:559px) {
    #tocontact-section {
        background-image: url(../image/tocontact_bg--xs.webp)
    }
}

#tocontact-section .engjpn-ttl {
    color: #fff
}

#tocontact-section #tocontact-list {
    text-align: center;
    margin: 1.6rem 0 0
}

#tocontact-section #tocontact-list ul {
    text-align: left;
    margin: 0;
    display: inline-block
}

#tocontact-section #tocontact {
    border: 10px solid #f4f4f4;
    background: #fff
}

@media screen and (max-width:959px) {
    #tocontact-section #tocontact #telnum--footer {
        padding: 4rem 2rem
    }
}

#sitemap-section {
    background: #fff;
    position: relative
}

#sitemap-section #sitemap-inner {
    border-bottom: 1px solid #cfcfcf;
    padding: 6.4rem 0
}

@media screen and (max-width:959px) {
    #sitemap-section #sitemap-inner {
        padding: 5.3333333333rem 0 0
    }
}

@media screen and (max-width:559px) {
    #sitemap-section #sitemap-inner {
        padding: 4.5714285714rem 0 0
    }
}

#companyinfo-area {
    width: 320px;
    float: left
}

@media screen and (max-width:959px) {
    #companyinfo-area {
        width: auto;
        float: none
    }
}

#companyinfo {
    text-align: center;
    margin: 0 0 3.2rem
}

#companyinfo #logo--footer {
    text-decoration: none;
    line-height: 0;
    max-width: 120px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block
}

@media screen and (max-width:959px) {
    #companyinfo #logo--footer {
        max-width: 96px
    }
}

@media screen and (max-width:559px) {
    #companyinfo #logo--footer {
        max-width: 80px
    }
}

#companyinfo #companyinfo-adress {
    font-size: 1.3rem;
    margin: 1.6rem 0 0
}

@media screen and (max-width:959px) {
    #companyinfo #companyinfo-adress {
        text-align: center;
        float: none
    }
}

#companyinfo #companyinfo-adress b {
    font-size: 1.8rem;
    font-weight: 700
}

#nav--sns--footer {
    margin: 0 0 2.4rem
}

.nav--sns {
    text-align: center;
    font-size: 0;
    line-height: 0
}

.nav--sns li {
    display: inline-block
}

.nav--sns li a {
    text-decoration: none;
    line-height: 0;
    margin: 0 4px;
    width: 36px;
    height: 36px;
    display: inline-block;
    transition: all 0.3s ease
}

@media screen and (max-width:959px) {
    .nav--sns li a {
        margin: 0 8px;
        width: 30px;
        height: 30px
    }
}

@media screen and (min-width:959px) {
    .nav--sns li a:hover {
        transform: scale(1.1)
    }
}

#nav--footer {
    line-height: 1.25;
    width: 900px;
    float: right
}

@media screen and (max-width:1384px) {
    #nav--footer {
        width: 820px
    }
}

@media screen and (max-width:959px) {
    #nav--footer {
        width: auto;
        float: none
    }
}

#nav--footer ul .nav--column {
    border-left: 1px solid #cfcfcf;
    width: 33.3333333333%;
    min-height: 240px;
    float: left
}

@media screen and (max-width:959px) {
    #nav--footer ul .nav--column {
        border: none !important;
        width: auto;
        min-height: 0;
        float: none
    }
}

#nav--footer ul .nav--column.nav--column--one {
    width: 31.3333333333%
}

#nav--footer ul .nav--column.nav--column--two {
    width: 38.3333333333%
}

#nav--footer ul .nav--column.nav--column--three {
    width: 30.3333333333%;
    border: none
}

#nav--footer ul .nav--column .nav--list {
    padding: 2.4rem 4rem
}

@media screen and (max-width:959px) {
    #nav--footer ul .nav--column .nav--list {
        padding: 0 0 2.4rem
    }
}

#nav--footer ul .nav--column .nav--list li {
    margin: 0 0 2rem
}

#nav--footer ul .nav--column .nav--list li a {
    color: #252525;
    text-decoration: none;
    padding: 0 16px 0 0;
    display: inline-block;
    position: relative
}

@media screen and (min-width:959px) {
    #nav--footer ul .nav--column .nav--list li a:hover {
        text-decoration: underline
    }
}

#nav--footer ul .nav--column .nav--list li.nav--parent a:after {
    content: "";
    background: url(../image/arrow.png) no-repeat center center/cover;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translate(0, -60%) rotate(90deg)
}

#nav--footer ul .nav--column .nav--list li ul {
    margin: 2.4rem 0;
    padding: 1px 0 1px 2rem
}

#nav--footer ul .nav--column .nav--list li ul li {
    margin: 0 0 1.2rem
}

#nav--footer ul .nav--column .nav--list li ul li a {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0;
    position: relative
}

#nav--footer ul .nav--column .nav--list li ul li a .nav--child--img {
    display: none
}

#nav--footer ul .nav--column .nav--list li ul li a:before {
    content: "";
    background: rgba(37, 37, 37, 0.5);
    width: 6px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: -12px;
    z-index: 2
}

#nav--footer ul .nav--column .nav--list li ul li a:after {
    content: none !important
}

#nav--footer ul .nav--column .nav--list li ul li ul {
    display: none
}

#copyright-section {
    background: #fff;
    padding: 4rem 0
}

#nav-sub--footer {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4rem 0 0
}

@media screen and (max-width:959px) {
    #nav-sub--footer {
        text-align: center;
        margin: 0 0 2.4rem;
        display: block
    }
}

#nav-sub--footer ul li a {
    color: #252525;
    font-size: 1.4rem;
    text-decoration: none
}

@media screen and (min-width:959px) {
    #nav-sub--footer ul li a:hover {
        text-decoration: underline
    }
}

@media screen and (max-width:959px) {
    #nav-language--footer {
        text-align: center;
        margin: 0 0 2.4rem;
        display: block
    }
}

@media screen and (max-width:959px) {
    #nav-language--footer ul li a {
        margin: 0 0.4rem
    }
}

#copyright {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: right
}

@media screen and (max-width:959px) {
    #copyright {
        text-align: center
    }
}

.scrlFadeIn--pagetop-wrap {
    position: relative;
    z-index: 300
}

#pagetop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 300;
    background: #0c61a8;
    background: linear-gradient(30deg, #1e2b5a 0%, #153994 40%, #2585b5 100%);
    text-decoration: none;
    text-align: center;
    line-height: 0;
    width: 55px;
    height: 55px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    transition: all 0.5s ease
}

@media screen and (max-width:959px) {
    #pagetop {
        width: 50px;
        height: 50px;
        bottom: 22px;
        right: 22px
    }
}

@media screen and (max-width:559px) {
    #pagetop {
        width: 45.8333333333px;
        height: 45.8333333333px;
        bottom: 20px;
        right: 20px
    }
}

@media screen and (min-width:959px) {
    #pagetop:hover {
        opacity: 0.8
    }
}

#pop-wrap {
    display: none;
    background: #fff;
    color: #252525;
    width: 600px;
    height: 286px;
    padding: 2.4rem 2.4rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 6px;
    z-index: 591
}

@media screen and (max-width:959px) {
    #pop-wrap {
        width: 520px;
        height: 292px
    }
}

@media screen and (max-width:559px) {
    #pop-wrap {
        width: 308px;
        height: 318px
    }
}

#pop-wrap.pop--hidden {
    visibility: hidden;
    z-index: -1
}

#pop-wrap #logo--pop {
    max-width: 200px;
    margin: 0 auto 1.2rem;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width:959px) {
    #pop-wrap #logo--pop {
        max-width: 181.8181818182px
    }
}

@media screen and (max-width:559px) {
    #pop-wrap #logo--pop {
        max-width: 166.6666666667px
    }
}

#pop-wrap #pop-ill {
    max-width: 100px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width:959px) {
    #pop-wrap #pop-ill {
        max-width: 90.9090909091px
    }
}

#pop-wrap #pop-ctt #pop-ttl {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.6rem
}

#pop-wrap #pop-ctt #pop-txt {
    font-size: 1.4rem;
    margin: 0 0 1.2rem
}

#pop-wrap #pop-ctt #pop-btn a {
    font-size: 1.5rem;
    padding: 0.6rem 0.8rem 0.8rem;
    border-radius: 8px
}

#pop-close {
    display: none;
    width: 24px;
    height: 24px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: translate(332px, -132px);
    z-index: 592
}

@media screen and (max-width:959px) {
    #pop-close {
        transform: translate(250px, -172px)
    }
}

@media screen and (max-width:559px) {
    #pop-close {
        transform: translate(146px, -186px)
    }
}

#pop-close.pop--hidden {
    visibility: hidden;
    z-index: -1
}

#pop-overlay {
    display: none;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 590
}

#pop-overlay.pop--hidden {
    visibility: hidden;
    z-index: -1
}