@charset "utf-8";
/* .mv - メインビジュアル
---------------------------------------------------------- */
.mv {
    width: 100%;
    max-height: 32rem;
    background-image: url(../images/mv.jpg);
    background-size: cover;
    background-position: 50% 60%;
    margin-bottom: 6rem;
}
.mv_inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}
.mv_title_wrap {
    background-color: rgba(0, 162, 107, 0.95);
    color: #fff;
    display: inline-block;
    padding: 4.8rem;
    margin-top: 10rem;
}
.mv_title {
    font-size: 4.8rem;
    font-weight: 500;
    margin-bottom: 2.8rem;
}

/* .news - お知らせ
---------------------------------------------------------- */
.news_item {
    border-top: 1px solid #ccc;
    padding: 2rem 8rem 2rem 4.8rem;
}
.news_item_inner {
    display: flex;
    align-items: baseline;
    position: relative;
    cursor: pointer;
}
.news_item_inner::after {
    content: '';
    width: 1rem;
    height: 1rem;
    border-top: solid 2px #00A26B;
    border-right: solid 2px #00A26B;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    right: -2em;
    top: 20%;
}
.news_item_inner.close::after{
	transform: rotate(-45deg);
    top: 40%;
}
.news_item:last-child {
    border-bottom: 1px solid #ccc;
}
.news_data {
    color: #00A26B;
    font-family: Century Gothic;
    width: 8rem;
    margin-right: 3rem;
}
.news_title {
    font-weight: 500;
}
.news_text {
    display: none;
    margin-left: 11rem;
    padding-top: 2rem;
}
.news_text ul{padding-left: 1.5rem;margin-top:0.5em }
.news_text ul li{
    margin-left: 1.5rem;
    list-style: disc;
}
.news_text a{text-decoration: unset;}

/* .serviceSection - サービス紹介
---------------------------------------------------------- */
.serviceSection {
    overflow: hidden;
}
.service {
    display: flex;
    margin-bottom: 7rem;
}
.service:last-child {
    margin-bottom: 0;
}
.service:nth-child(2n) {
    flex-direction: row-reverse;
}
.service_img {
    width: 50%;
}
.service_text_wrap {
    width: 50%;
    min-height: 34rem;
    margin-top: 3rem;
    padding: 4rem 3.5rem 4rem;
    background-color: #F3F8F6;
    position: relative;
}
/* 左右に背景を伸ばす */
.service_text_wrap::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: -24rem;
    width: 24rem;
    background-color: #F3F8F6;
    z-index: -1;
}
.service_text_wrap::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: -100rem;
    width: 100rem;
    background-color: #F3F8F6;
    z-index: -1;
}
.service:nth-child(2n) .service_text_wrap::before {
    left: -100rem;
    width: 100rem;
}
.service:nth-child(2n) .service_text_wrap::after {
    right: -24rem;
    width: 24rem;
}
/* // 左右に背景を伸ばす */

.service_title {
    color: #00A26B;
    font-weight: 500;
    font-size: 2.8rem;
    margin-bottom: 3rem;
}
.service_text {
    margin-bottom: 3rem;
    line-height: 1.75;
}
.service_link {
    color: #00A26B;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: right;
}
.service_link a {
    color: #00A26B;
}

/* .shopSection - 海外拠点一覧
---------------------------------------------------------- */



.shop_map{position:relative;background-color:#fff;}
.shop_map a.mapCity{position:absolute;display:block;width:78px;height:78px;transition: all .1s ease; transform-origin: center;z-index:199;}
/*.shop_map a.mapCity{background-color: #f00;opacity: 0.3;}*/
.shop_map a.mapCity img{width:100%;/*display: none;*/}
.shop_map a.mapCity#mapLondon{top: 13.3%;left: 10.65%;}
.shop_map a.mapCity#mapGuangzhou{top: 13.3%;left: 24.34%;}
.shop_map a.mapCity#mapHongkong{top: 13.3%;left: 32%;}
.shop_map a.mapCity#mapBeijin{top: 13.3%;left: 35.8%;}
.shop_map a.mapCity#mapTianjin{top: 13.3%;left: 39.5%;}
.shop_map a.mapCity#mapSeoul{top: 13.3%;left: 46.9%;}

.shop_map a.mapCity#mapShanghai{top: 29.4%;left: 50.85%;}
.shop_map a.mapCity#mapShenzhen{top: 29.4%;left: 20.34%;}
.shop_map a.mapCity#mapShinShanghai{top: 29.4%;left: 58.1%;}
.shop_map a.mapCity#mapTaiwan{top: 45%;left: 50.85%;}
.shop_map a.mapCity#mapBangkok{top: 45%;left: 20.34%;}
.shop_map a.mapCity#mapPhnompenh{top: 60.9%;left: 20.34%;}
.shop_map a.mapCity#mapSingapore{top: 61%;left: 28.0%;}
.shop_map a.mapCity#mapManila{top: 61%;left: 35.4%;}
.shop_map a.mapCity#mapHanoi{top: 45%;left: 20.34%;}
.shop_map a.mapCity#mapHochiminh{top: 61%;left: 20.34%;}
.shop_map a.mapCity#mapKaohsiung{top: 61%;left: 43%;}

.shop_map a.mapCity#mapBoston {top: 13.3%;left: 87.87%;}
.shop_map a.mapCity#mapNewyork{top: 29.4%;left: 87.87%;}
.shop_map a:hover{transform: scale(1.15);z-index: 200;}





.shop_list_wrap {
    margin-bottom: 4rem;
    padding: 0 5.5rem;
}
.shop_list_wrap:last-child {
    margin-bottom: 0;
}
.shop_list_title {
    color: #00A26B;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.shop_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
}
.shop_name {
    width: calc((100% - 3rem *3 )/ 4);
}
.shop_name a {
    padding: 1.6rem;
    border: 1px solid #ccc;
    width: 100%;
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.shop_name a::before {
    /* arrow */
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    border-top: solid 2px #00A26B;
    border-right: solid 2px #00A26B;
    position: absolute;
    right: 10%;
    top: 50%;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}
.shop_name a::after {
    background: #F3F8F6;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}
.shop_name a:hover {
    color: #00A26B;
    font-weight: 500;
}
.shop_name a:hover::after {
    transform: scale(1, 1);
}

@media screen and (max-width: 1080px) {
    .shop_map a.mapCity{width:7vw;height:7vw;}

}
/* ==========================================================================//
// tablet -- 959 ~ 769px
// ========================================================================== */
@media screen and (max-width: 959px) {
    /* .mv */
    .mv {background-position: 50% 80%;}
    .mv_title {font-size: 4.2rem;}

    /* .serviceSection */
    .service_title {font-size: 2.2rem;}
    .service_text_wrap {padding: 4rem 1rem 3rem;}

    /* .shopSection */
    .shop_list_wrap {padding: 0;}
    .shop_list {gap: 2rem;}
    .shop_name {width: calc((100% - 2rem *3 )/ 4);}
}


/* ==========================================================================//
// tablet -- 768 ~ 520px
// ========================================================================== */
@media screen and (max-width: 768px) {
    /* .mv */
    .mv {max-height: 24rem; background-position: 50% 100%;}
    .mv_title_wrap {padding: 2rem 2.5rem; margin-top: 14rem;}
    .mv_title {font-size: 2.2rem; margin-bottom: 1rem;}

    /* .news */
    .news_item {padding: 1.4rem 0;}
    .news_item_inner {flex-wrap: wrap; margin-right: 3rem;}
    .news_item_inner::after {width: 0.8rem; height: 0.8rem; top: 40%;}
    .news_item_inner.close::after {top: 50%;}
    .news_data {width: 100%; margin: 0 auto 0.4rem;}
    .news_text {margin-left: 0; padding-top: 1rem;}

    /* .serviceSection */
    .service {flex-wrap: wrap; margin-bottom: 4rem;}
    .service_img {max-width: 24rem; width: 100%; z-index: 1;}
    .service_text_wrap {width: 100%; min-height: auto; padding: 4rem 2rem; margin-top: -2rem;}
    .service_title {font-size: 1.6rem; margin-bottom: 1rem;}
    .service_text {margin-bottom: 2rem;}
    .service_link {font-size: inherit;}

    /* .shopSection */
    .shop_list {gap: 1rem;}
    .shop_list_title {font-size: 1.4rem;}
    .shop_name {width: calc((100% - 1rem *2 )/ 3);}
    .shop_name a {padding: 0.8rem 0.6rem;}
    .shop_name a::before {width: 0.5rem; height: 0.5rem; right: 8%;}
}


/* ==========================================================================//
// smartphone -- 520px未満
// ========================================================================== */
@media screen and (max-width: 519px) {
    /* .mv */
    .mv {max-height: 60vh; height: 60vh; position: relative; background-size: 220%; margin-bottom: 3rem;}
    .mv_inner {position: absolute; bottom: 0;}
    .mv_title_wrap {width: 100%; padding: 1.5rem; margin-top: 0;}
    .mv_title {font-size: 1.8rem;}

    /* .serviceSection */
    .service {margin-bottom: 2rem;}
    .service_text_wrap {padding: 3.5rem 1rem 2rem;}
    .service_title {font-size: 1.4rem;}
    .service_text {margin-bottom: 1rem;}

    /* .shopSection */
    .shop_list_wrap {margin-bottom: 2rem;}
    .shop_list {gap: 0.8rem 1rem;}
    .shop_list_title {font-size: 1.2rem;}
    .shop_name {width: calc((100% - 1rem)/ 2);}

    .shop_map{margin: 0 -5%;;}
}