@charset "UTF-8";

html {
    font-family: "游ゴシック", "Yu Gothic", "Yu Gothic Medium", "游ゴシック体", YuGothic, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
    font-size: 14px;
    font-feature-settings: "palt";
}

a,
a:hover {
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

a {
    color: #000;
    font-size: 14px;
    line-height: 2em;
    transition: all .3s;
}

html main {
    font-size: 78%;
}

body {
    font-size: 1.6rem;
}


/* Padding */
.pa_t60 {
    padding-top: 60px;
}

@media screen and (min-width: 769px) {
    .pa_t10 {
        padding-top: 10px;
    }

    .pa_t20 {
        padding-top: 20px;
    }

    .pa_t40 {
        padding-top: 40px;
    }

    .pa_t50 {
        padding-top: 50px;
    }

    .pa_t80 {
        padding-top: 80px;
    }

    .pa_t90 {
        padding-top: 90px;
    }

    .pa_b40 {
        padding-bottom: 40px;
    }

    .pa_b50 {
        padding-bottom: 50px;
    }

    .pa_b60 {
        padding-bottom: 60px;
    }

    .pa_b80 {
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 768px) {
    .pa_t10 {
        padding-top: calc(10 / 750 * 100vw);
    }

    .pa_t20 {
        padding-top: calc(20 / 750 * 100vw);
    }

    .pa_t40 {
        padding-top: calc(40 / 750 * 100vw);
    }

    .pa_t50 {
        padding-top: calc(50 / 750 * 100vw);
    }

    .pa_t80 {
        padding-top: calc(80 / 750 * 100vw);
    }

    .pa_t90 {
        padding-top: calc(90 / 750 * 100vw);
    }

    .pa_b40 {
        padding-bottom: calc(40 / 750 * 100vw);
    }

    .pa_b50 {
        padding-bottom: calc(50 / 750 * 100vw);
    }

    .pa_b60 {
        padding-bottom: calc(60 / 750 * 100vw);
    }

    .pa_b80 {
        padding-bottom: calc(80 / 750 * 100vw);
    }
}

/* 背景色 */
.bc-grey {
    background: #f1f1f1;
}

.bc-blue-g {
    background: #d9e0eb;
}

.bc-blue {
    background: #012e7b;
}

/* 文字位置 */
.-center {
    text-align: center;
    margin: 0 auto;
}

.-left {
    text-align: left;
    float: left;
}

.-right {
    text-align: right;
    float: right;
}

.is_pc {
    display: block;
}

.is_sp {
    display: none;
}

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

    .is_sp {
        display: block;
    }
}



/* セクション幅 */
section.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

@media screen and (max-width: 768px) {
    section.wrapper {
        position: relative;
        margin: 0 auto;
        padding: 0 calc(25 / 750 * 100%) 0;
    }

    #office.wrapper,
    #g_companies.wrapper,
    #csr.wrapper,
    #relation.wrapper,
    #onlineshop.wrapper,
    #sns.wrapper,
    #sustainability.wrapper {
        padding-bottom: calc(120 / 750 * 100%);
    }

}

/* 見出し */
.dl-svg {
    display: block;
    margin: 0 auto 20px;
    width: 100%;
}

.dl-svg>img {
    width: 100%;
    max-width: 100%;
}

.pc-svg-dl-01 {
    max-width: 190px;
    width: calc(190 / 1100 * 100vw);
}

.pc-svg-dl-02 {
    max-width: 534px;
    width: calc(534 / 1100 * 100vw);
}

.pc-svg-dl-03 {
    max-width: 105px;
    width: calc(105 / 1100 * 100vw);
}

.pc-svg-dl-04 {
    max-width: 263px;
    width: calc(263 / 1100 * 100vw);
}

.pc-svg-dl-05 {
    max-width: 375px;
    width: calc(375 / 1100 * 100vw);
}

.pc-svg-dl-06 {
    max-width: 367px;
    width: calc(367 / 1100 * 100vw);
}

.pc-svg-dl-07 {
    max-width: 443px;
    width: calc(443 / 1100 * 100vw);
}

.title-area p.sub-title {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.12em;
}

@media screen and (min-width: 1025px) {
    .title-area p.sub-title {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 1024px) {
    .pc-svg-dl-01 {
        width: calc(235 / 750 * 100vw);
    }

    .title-area p.sub-title {
        font-size: 14px;
        padding-bottom: calc(60 / 750 * 100vw);
    }

    .dl-svg {
        margin: 0 auto 15px;
    }

    .pc-svg-dl-01 {
        max-width: none;
        width: calc(153 / 750 * 100vw);
    }

    .pc-svg-dl-02 {
        max-width: none;
        width: calc(267 / 750 * 100vw);
    }

    .pc-svg-dl-03 {
        max-width: none;
        width: calc(87 / 750 * 100vw);
    }

    .pc-svg-dl-04 {
        max-width: none;
        width: calc(220 / 750 * 100vw);
    }

    .pc-svg-dl-05 {
        max-width: none;
        width: calc(304 / 750 * 100vw);
    }

    .pc-svg-dl-06 {
        max-width: none;
        width: calc(304 / 750 * 100vw);
    }
    
    .pc-svg-dl-07 {
        max-width: none;
        width: calc(574 / 1100 * 100vw);
    }



}

/*TabSize*/
@media screen and (min-width: 414px) {
    #toppage {
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .slideNext {
        display: block;
        margin-top: 0;
    }
}

/*PcSize*/
@media screen and (min-width: 1025px) {
    #toppage {
        position: relative;
        width: 100%;
        max-width: 2000px;
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .slideNext {
        display: block;
        margin-top: 0;
    }
}

/* パンくず */
.footer_breadcrumbs {
    background: #fff;
    padding: 20px 0;
    color: #7b7b7b;
    font-size: 12px;
}

.footer_breadcrumbs_inner {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.footer_breadcrumbs ul li {
    display: inline-block;
    position: relative;
}

.footer_breadcrumbs a {
    text-decoration: underline;
    color: #7b7b7b;
}

.footer_breadcrumbs ul li::after {
    content: '>';
    padding: 0 17px;
}

.footer_breadcrumbs ul li:last-child::after {
    content: none;
}


/* ******************** */
/* mv */
/* ******************** */
#mv {
    background: url("../img/mv.png") no-repeat center;
    background-size: cover;
    min-height: 400px;
}

.mv-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.mv-inner h1 {
    font-size: 21px;
    font-weight: normal;
    padding-top: 25px;
    padding-left: 20px;
    color: #012e7b;
    font-family: " メイリオ", Meiryo, " ヒラギノ角ゴPro W3", "Hiragino KakuGothicPro", Osaka, "ＭＳＰゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
}


/* .mv img {
    width: 100%;
    height: auto;
    vertical-align: top;
} */

@media screen and (max-width: 768px) {
    #mv {
        background: url("../img/sp/mv.png") no-repeat top;
        background-size: cover;
        min-height: 262px;
    }

    .mv-inner {
        padding: 0 calc(25 / 750 * 100%) 0;
    }

    .mv-inner h1 {
        padding-left: 0;
    }
}


/* link */
.link-wrap {
    margin: 0 auto;
    padding: calc(60 / 1100 * 100%) 0;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .link-wrap {
        flex-direction: column;
        padding: calc(70 / 750 * 100%) 0;
    }

    .link-wrap>div:first-child {
        margin-bottom: 20px;
    }
}

.link-wrap>div {
    border-radius: 10px;
    text-align: center;
    border: #012e7b 2px solid;
}

.link-wrap>.i01,
.link-wrap>.i02 {
    width: calc(530 / 1100 * 100%);
    height: calc(200 / 1100 * 100%);
    max-height: 200px;
    margin-right: calc(20/ 1100 * 100%);
}

.link-wrap>.i02 {
    margin-right: 0;
}

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

    .link-wrap>.i01,
    .link-wrap>.i02 {
        width: 100%;
        height: auto;
    }
}

.link-wrap>.i01 {
    background: #012e7b url("../img/link_company.png") no-repeat;
    background-position: left;
    background-size: contain;
}

.link-wrap>.i02 {
    background: #012e7b url("../img/link_history.png") no-repeat;
    background-position: left;
    background-size: contain;
}

.i01 .link-inner {
    padding: calc(75 / 531 * 100%) calc(43 / 531 * 100%) calc(75 / 531 * 100%) calc(302 / 531 * 100%);
}

.i02 .link-inner {
    padding: calc(75 / 531 * 100%) calc(43 / 531 * 100%) calc(75 / 531 * 100%) calc(320 / 531 * 100%);
}

@media screen and (max-width: 768px) {
    .link-wrap>.i01 {
        background: #012e7b url("../img/sp/link_company.png") no-repeat;
        background-size: 50%;
        background-position-y: center;
    }

    .link-wrap>.i02 {
        background: #012e7b url("../img/sp/link_history.png") no-repeat;
        background-size: 50%;
        background-position-y: center;
    }

    .i01 .link-inner {
        padding: calc(65 / 750 * 100%) calc(68 / 750 * 100%) calc(65 / 750 * 100%) calc(453 / 750 * 100%);
    }

    .i02 .link-inner {
        padding: calc(65 / 750 * 100%) calc(84 / 750 * 100%) calc(65 / 750 * 100%) calc(459 / 750 * 100%);
    }

    .link-wrap>.i01,
    .link-wrap>.i02 {
        margin-right: 0;
    }
}

/* ******************** */
/* office */
/* ******************** */
.card-wrap {
    display: flex;
    flex-wrap: wrap;
}

.card-wrap>.card {
    width: calc(352 / 1100 * 100%);
    margin-right: calc(22 / 1100 * 100%);
    margin-bottom: calc(40 / 1100 * 100%);
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-inner {
    position: relative;
    /* padding: 34% 0; */
    padding: calc(216 / 352 * 100%) calc(35 / 352 * 100%) calc(40 / 352 * 100%);
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .card-inner {
        padding: calc(280 / 352 * 100%) calc(35 / 352 * 100%) calc(40 / 352 * 100%);
    }
}

@media screen and (max-width: 768px) {
    .card-inner {
        padding: calc(170 / 334 * 100%) calc(25 / 334 * 100%) calc(30 / 334 * 100%);
    }
}

.card-wrap .t01,
.card-wrap .t02,
.card-wrap .t03,
.card-wrap .t04,
.card-wrap .t05,
.card-wrap .t06,
.card-wrap .t07,
.card-wrap .t08 {
    background-size: unset;
    background-position: top;
}

.card-wrap .t01 {
    background: #fff url("../img/01.png") no-repeat;
}

.card-wrap .t02 {
    background: #fff url("../img/02.png") no-repeat;
}

.card-wrap .t03 {
    background: #fff url("../img/03.png") no-repeat;
}

.card-wrap .t04 {
    background: #fff url("../img/04.png") no-repeat;
}

.card-wrap .t05 {
    background: #fff url("../img/05.png") no-repeat;
}

.card-wrap .t06 {
    background: #fff url("../img/06.png") no-repeat;
}

.card-wrap .t07 {
    background: #fff url("../img/07.png") no-repeat;
}

.card-wrap .t08 {
    background: #fff url("../img/08.png") no-repeat;
}

.card-wrap .t09 {
    background: #fff url("../img/09.png") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tBeijing {
    background: #fff url("../img/beijing-SR-1.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tBeijing_2 {
    background: #fff url("../img/beijing_2.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tShenzhen {
    background: #fff url("../img/Shenzheng-SR.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tShanghai {
    background: #fff url("../img/shanghai-showroom6.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tHongKong {
    background: #fff url("../img/Hongkong-SR.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tMalaysia {
    background: #fff url("../img/malysia.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tThailand {
    background: #fff url("../img/thailand.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tIndonesia {
    background: #fff url("../img/Indonesia.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-wrap .tAustralia {
    background: #fff url("../img/Australia.jpg") no-repeat;
    margin-bottom: calc(80 / 1100 * 100%);
}

.card-ttl {
    color: #012e7b;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    /* padding-top: calc(35 / 352 * 100%); */
    padding-bottom: calc(24 / 352 * 100%);
}

.card-ttl a {
    color: #012e7b;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    /* padding-top: calc(35 / 352 * 100%); */
    padding-bottom: calc(24 / 352 * 100%);
    text-decoration: underline;
}

.card-txt {
    margin-bottom: 20px;
}

.btn {
    margin-top: auto;
}

.card-wrap>.card:nth-child(3n),
.card-wrap>.card:last-child {
    margin-right: 0;
}

div.card.t08 {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .card-wrap>.card:last-child {
        margin-bottom: 0;
    }
}


/* ボタン */
a.btn-05 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 38px;
    position: relative;
    background: #fff;
    border: #012e7b 2px solid;
    border-radius: 30px;
    box-sizing: border-box;
    padding: 17px 0;
    color: #012e7b;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: .2s;
    max-width: 245px;
    margin: 0 auto;
}

.btn-05:hover {
    background: #bcceee;
}

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

    a.btn-04.btn-04-s,
    a.btn-05 {
        font-size: 12px;
    }
}


.card-logo-img,
.link-wrap,
.link-wrap>.i01,
.link-wrap>.i02 {
    transition: .2s;
}

a .card-logo-img:hover,
.link-wrap>.i01:hover,
.link-wrap>.i02:hover {
    opacity: .8;
}

@media screen and (max-width: 768px) {
    .cont-area {
        /* margin: 0 calc(20 / 750 * 100vw); */
    }

    .card-wrap>.card {
        max-width: 300px;
        width: calc(300 / 750 * 100%);
        margin-right: calc(20 / 750 * 100%);
        margin-bottom: calc(40 / 750 * 100%);
        display: flex;
        /* padding: calc(80 / 750 * 100%) calc(22 / 750 * 100%) calc(40 / 750 * 100%); */
        background-position-x: center;
        background-size: 100%;
    }

    .card-wrap>.card:nth-child(3n) {
        margin-right: calc(20 / 750 * 100%);
    }

    .footer_breadcrumbs {
        padding: calc(30 / 750 * 100vw) calc(20 / 750 * 100vw);
    }

    .card-wrap .card-inner.t01,
    .card-wrap .card-inner.t02,
    .card-wrap .card-inner.t03,
    .card-wrap .card-inner.t04,
    .card-wrap .card-inner.t05 {
        background-size: contain;
    }

    .card-ttl {
        padding-top: 20px;
        padding-bottom: 14px;
    }
}

@media screen and (max-width: 768px) {
    .card-wrap>.card:nth-child(2n) {
        margin-right: 0;
    }

    .card-wrap>.card {
        max-width: 334px;
        width: calc((100% - calc((20) / 700 * 100%)) / 2);
        justify-content: center;
    }
}



/* ******************** */
/* group companies */
/* ******************** */
.card-wrap>.card-logo {
    width: calc(352 / 1100 * 100%);
    margin-right: calc(22 / 1100 * 100%);
    margin-bottom: calc(40 / 1100 * 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-wrap>.card-logo:nth-child(3n),
.card-wrap>.card-logo:last-child {
    margin-right: 0;
}

.card-logo-img {
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    border: #e5e5e5 1px solid;
    /* padding: 120px 352px 0 0; */
    padding: calc(352 / 1100 * 100%) calc(120 / 1100 * 100%) 0 0;
    height: auto;
}

.card-logo-img.l01 {
    background: url("../img/logo01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l02 {
    background: url("../img/logo02.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l03 {
    background: url("../img/logo03.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l04 {
    background: url("../img/logo04.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l05 {
    background: url("../img/logo05.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l06 {
    background: url("../img/logo06.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l07 {
    background: url("../img/logo07.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l08 {
    background: url("../img/logo08.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l09 {
    background: url("../img/logo09.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l10 {
    background: url("../img/logo10.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l11 {
    background: url("../img/logokokuyomark.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l12 {
    background: url("../img/logohokkaido.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l13 {
    background: url("../img/logotouhoku.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l14 {
    background: url("../img/logohokuriku.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l15 {
    background: url("../img/logokitakanto.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l16 {
    background: url("../img/logotokai.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-img.l17 {
    background: url("../img/logosanyo.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.card-logo-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-logo-ttl {
    color: #012e7b;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: calc(25 / 352 * 100%);
    padding-bottom: calc(20 / 352 * 100%);
}

.card-logo-txt {
    line-height: 2;
    margin: 0 .5em 20px;
}

@media screen and (max-width: 768px) {
    .card-wrap>.card-logo {
        /* width: calc(352 / 750 * 100%); */
        width: 48%;
        margin-right: calc(18 / 750 * 100%);
        margin-bottom: calc(50 / 750 * 100%);
    }

    .card-wrap>.card-logo:nth-child(3n) {
        margin-right: calc(18 / 750 * 100%);
    }

    .card-wrap>.card-logo:nth-child(2n),
    .card-wrap>.card-logo:last-child {
        margin-right: 0;
    }

    .card-logo-ttl {
        font-size: 1.4rem;
    }

    .card-logo-txt {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    .card-logo-img {
        padding: calc(345 / 750 * 100%) calc(155 / 750 * 100%) 0 0;
    }

    .card-logo-img.l01 {
        background: url("../img/sp/logo01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l02 {
        background: url("../img/sp/logo02.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l03 {
        background: url("../img/sp/logo03.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l04 {
        background: url("../img/sp/logo04.png") no-repeat;
        background-size: contain;
        background-position: center;
    }

    .card-logo-img.l05 {
        background: url("../img/sp/logo05.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l06 {
        background: url("../img/sp/logo06.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l07 {
        background: url("../img/sp/logo07.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l08 {
        background: url("../img/sp/logo08.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l09 {
        background: url("../img/sp/logo09.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-logo-img.l10 {
        background: url("../img/sp/logo10.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .card-wrap>.card-logo:last-child {
        margin-bottom: 0;
    }

    #sns>div.cont-area>div>div:nth-child(5),
    #sns>div.cont-area>div>div:nth-child(6) {
        margin-bottom: 0%;
    }
}




/* ******************** */
/* csr SUSTAINAVILITY */
/* ******************** */
.card-wrap>.card-logo._3col {
    width: calc(352 / 1100 * 100%);
    margin-right: calc(20 / 1100 * 100%);
    margin-bottom: calc(40 / 1100 * 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-wrap>.card-logo._3col:nth-child(4n),
.card-wrap>.card-logo._3col:last-child {
    margin-right: 0;
}

.card-wrap.jscontent-cen {
    justify-content: center;
}

._3col .card-logo-img {
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    border: #e5e5e5 1px solid;
    /* padding: 120px 260px 0 0; */
    padding: calc(500 / 1100 * 100%) calc(120 / 1100 * 100%) 0 0;
}

._3col .card-logo-img.l01 {
    background: url("../img/csr01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

/* ._3col .card-logo-img.l02 {
    background: url("../img/csr02.png") no-repeat;
    background-size: cover;
    background-position: center;
} */
._3col .card-logo-img.l03 {
    background: url("../img/sustainability01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._3col .card-logo-img.l04 {
    background: url("../img/csr03.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._3col .card-logo-img.l05 {
    background: url("../img/sustainability02.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._3col .card-logo-img.l06 {
    background: url("../img/sustainability03.png") no-repeat;
    background-size: cover;
    background-position: center;
}

@media screen and (max-width: 768px) {
    #csr .card-wrap {}

    .card-wrap>.card-logo._3col {
        width: 49%;
    }

    .card-wrap>.card-logo._3col:nth-child(2n) {
        margin-right: 0;
    }

    ._3col .card-logo-img.l01 {
        background: url("../img/sp/csr01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._3col .card-logo-img.l02 {
        background: url("../img/sp/csr02.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._3col .card-logo-img.l03 {
        background: url("../img/sp/sustainability01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._3col .card-logo-img.l04 {
        background: url("../img/sp/csr03.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._3col .card-logo-img {
        padding: calc(345 / 750 * 100%) calc(155 / 750 * 100%) 0 0;
    }

    #csr>div.cont-area>div>div:nth-child(3),
    #csr>div.cont-area>div>div:nth-child(4) {
        margin-bottom: 0;
    }
}


/* ******************** */
/* relation */
/* ******************** */
.card-wrap>.card-logo._4col {
    width: calc(260 / 1100 * 100%);
    margin-right: calc(20 / 1100 * 100%);
    margin-bottom: calc(40 / 1100 * 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-wrap>.card-logo._4col:nth-child(4n),
.card-wrap>.card-logo._4col:last-child {
    margin-right: 0;
}

._4col .card-logo-img {
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    border: #e5e5e5 1px solid;
    /* padding: 120px 260px 0 0; */
    padding: calc(500 / 1100 * 100%) calc(120 / 1100 * 100%) 0 0;
}

._4col .card-logo-img.l01 {
    background: url("../img/csr01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l02 {
    background: url("../img/csr02.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l03 {
    background: url("../img/sustainability01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l04 {
    background: url("../img/csr03.png") no-repeat;
    background-size: cover;
    background-position: center;
}

@media screen and (max-width: 768px) {
    #csr .card-wrap {}

    .card-wrap>.card-logo._4col {
        width: 49%;
    }

    .card-wrap>.card-logo._4col:nth-child(2n) {
        margin-right: 0;
    }

    ._4col .card-logo-img.l01 {
        background: url("../img/sp/csr01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l02 {
        background: url("../img/sp/csr02.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l03 {
        background: url("../img/sp/sustainability01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l04 {
        background: url("../img/sp/csr03.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img {
        padding: calc(345 / 750 * 100%) calc(155 / 750 * 100%) 0 0;
    }

    #csr>div.cont-area>div>div:nth-child(3),
    #csr>div.cont-area>div>div:nth-child(4) {
        margin-bottom: 0;
    }
}

._4col .card-logo-img.l05 {
    background: url("../img/relation01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l06 {
    background: url("../img/relation02.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l07 {
    background: url("../img/relation03.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l08 {
    background: url("../img/relation04.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l09 {
    background: url("../img/relation05.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l10 {
    background: url("../img/relation06.png") no-repeat;
    background-size: cover;
    background-position: center;
}

._4col .card-logo-img.l11 {
    background: url("../img/relation07.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#relation .card-wrap {
    margin-bottom: 40px;
}

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

    #relation .card-wrap,
    .card-wrap>.card-logo._4col:last-child {
        margin-bottom: 0;
    }

    ._4col .card-logo-img.l05 {
        background: url("../img/sp/relation01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l06 {
        background: url("../img/sp/relation02.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l07 {
        background: url("../img/sp/relation03.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l08 {
        background: url("../img/sp/relation04.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l09 {
        background: url("../img/sp/relation05.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l10 {
        background: url("../img/sp/relation06.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    ._4col .card-logo-img.l11 {
        background: url("../img/sp/relation07.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

}

/* ******************** */
/* online shop */
/* ******************** */

.onlineshop_wrap {
    padding-bottom: 80px;
}

.onlineshop_wrap img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .onlineshop_wrap {
        padding-bottom: 0;
    }
}

/* ******************** */
/* sns */
/* ******************** */
#sns .card-logo-img.l01 {
    background: url("../img/sns01.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.l02 {
    background: url("../img/sns02.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.l03 {
    background: url("../img/sns03.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.l04 {
    background: url("../img/sns04.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.l05 {
    background: url("../img/sns05.png") no-repeat;
    background-size: cover;
    background-position: center;
}
#sns .card-logo-img.lsnsdesign {
    background: url("../img/snsdesign.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.l06 {
    background: url("../img/sns06.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.l07 {
    background: url("../img/sns07.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-img.ltwi {
    background: url("../img/snstwi.png") no-repeat;
    background-size: cover;
    background-position: center;
}

#sns .card-logo-txt {
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    #sns .card-logo-img.l01 {
        background: url("../img/sp/sns01.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    #sns .card-logo-img.l02 {
        background: url("../img/sp/sns02.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    #sns .card-logo-img.l03 {
        background: url("../img/sp/sns03.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    #sns .card-logo-img.l04 {
        background: url("../img/sp/sns04.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    #sns .card-logo-img.l05 {
        background: url("../img/sp/sns05.png") no-repeat;
        background-size: cover;
        background-position: center;
    }
    #sns .card-logo-img.lsnsdesign {
        background: url("../img/sp/snsdesign.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    #sns .card-logo-img.l06 {
        background: url("../img/sp/sns06.png") no-repeat;
        background-size: cover;
        background-position: center;
    }

    #sns .card-logo-img.l07 {
        background: url("../img/sp/sns07.png") no-repeat;
        background-size: cover;
        background-position: center;
    }
    #sns .card-logo-img.ltwi {
        background: url("../img/sp/snstwi.png") no-repeat;
        background-size: cover;
        background-position: center;
    }
}


/* ******************** */
/* modal */
/* ******************** */
.popup-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.popup-wrap .inner {
    border-radius: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
    max-width: 980px;
    width: 100%;
    padding: 60px;
}

.popup-wrap .desc {
    max-width: 280px;
    width: 100%;
}

.popup-wrap .ttl {
    color: #012e7b;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 23px;
}

.popup-wrap .txt {
    font-size: 14px;
    margin-bottom: 17px;
}

.popup-wrap img {
    border-radius: 10px;
    width: 100%;
}

.iframe-wrap {
    max-width: 625px;
    width: 100%;
    margin-left: calc(75 / 1100 * 100%);
    position: relative;
}

.iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.mfp-close-btn-in .mfp-close {}

@media screen and (max-width: 768px) {
    .mfp-close-btn-in .mfp-close {}

    .popup-wrap {
        margin-left: calc(20 / 750 * 100%);
        margin-right: calc(20 / 750 * 100%);
    }

    .popup-wrap .inner {
        flex-direction: column;
        padding: calc(50 / 750 * 100%) calc(25 / 750 * 100%);
        align-items: center;
    }

    .popup-wrap .desc {
        display: flex;
        max-width: none;
        justify-content: center;
    }

    .popup-wrap .desc>div {
        padding-right: calc(30 / 750 * 100%);
    }

    .iframe-wrap {
        margin-left: 0;
        margin-top: calc(50 / 750 * 100%);
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }

    .iframe-wrap iframe {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


.titlenashi {
    padding-top: 1em;
}

/* ******************** */
/* ancer */
/* ******************** */
.company__anc {
    margin-top: -96px;
    padding-top: 96px;
}

@media screen and (max-width: 1024px) {
    .company__anc {
        margin-top: -150px;
        padding-top: 150px;
    }
}