@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/
/* header */
body {
    background-color: #f4f4f4;
}

#header {
    background: transparent;
    transition: all .3s;
}

#header .headerBar .logo img {
    display: none;
}

#header .headerBar .logo img.logoTop {
    display: block;
}

#header.scroll {
    background: rgba(244, 244, 244, 0.8);
}

#header.scroll .headerBar .logo img {
    display: block;
}

#header.scroll .headerBar .logo img.logoTop {
    display: none;
}

#fixH {
    display: none;
}

#content {
    overflow: hidden;
}

/* mainTop */
#mainTop {
    position: relative;
}

#mainTop .mainBcr {
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 517px 365px 0 0;
    border-color: transparent #1B5B0F;
    transform: rotate(180deg);
}

#mainTop .mainPhoto {
    height: 100vh;
}

#mainTop .mainPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#mainTop .mainBox {
    position: absolute;
    top: 50.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1007px;
    padding: 0 60px;
}

#mainTop .mainTitle {
    font-size: 52px;
    font-weight: bold;
    color: #fff;
    line-height: 1.1;

}

#mainTop .mainTitle .titleEng {
    display: block;
    font-size: 133px;
    line-height: 1.1;
    margin-left: -7px;
	text-shadow: 3px 3px 0px #1b5b0f;
}

#mainTop .mainTitle .tutleJp {
    display: block;
	text-shadow: 2px 2px 0px #1b5b0f;
}

.innerLeft {
    padding-left: calc((100% - 1097px)/2);
}

.frameWhite {
    position: relative;
}



/* areaDesign */
.areaDesign {
    position: relative;
    padding: 176px 0 118px;
}

.areaDesign::before {
    content: "";
    position: absolute;
    top: 297px;
    right: 0;
    border-style: solid;
    border-width: 137vh 55.8vw 0 0;
    border-color: transparent #fff;
    z-index: -1;
}

.areaDesign .titleBig {
    position: absolute;
    top: 0;
    left: 3px;
    font-size: 160px;
    font-weight: bold;
    line-height: 1.06;
    letter-spacing: 0.4px;
    color: #fff;
    z-index: -1;
}

.areaDesign .designCnt {
    position: relative;
    padding-bottom: 57px;
}

.areaDesign .designCnt .designTitle {
    font-size: 42px;
    color: #1B5B0F;
    letter-spacing: 2.1px;
    line-height: 1.74;
    margin-bottom: 17px;
}

.areaDesign .designCnt .designTxt {
    font-size: 16px;
    color: #4D4D4D;
    line-height: 1.89;
    padding-left: 3px;
    letter-spacing: 0.9px;
}

.areaDesign .designCnt .designPhotoSub {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
}

.areaDesign .designPhoto {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}

.areaDesign .designPhoto span {
    display: block;
    width: 52.2%;
    height: 36.7vw;
}

.areaDesign .designPhoto span:first-child {
    max-height: 529px;
    max-width: 759px;
}

.areaDesign .designPhoto span:nth-child(2) {
    display: none;
}

.areaDesign .designPhoto span:last-child {
    width: 36.8%;
}

.areaDesign .designPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* areaService */
.areaService {
    margin-bottom: 186px;
}

.areaService .innerLeft {
    margin-left: -28px;
}

.areaService .areaTitle {
    margin-left: -10px;
    margin-bottom: 53px;
}

.areaService .listService {
    display: flex;
}

.areaService .listService>li a {
    position: relative;
    display: block;
    color: #fff;
}

.areaService .listService>li a::before,
.areaService .listService>li a::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    transition: opacity .35s, transform .35s, -webkit-transform .35s;
    z-index: 2;
}

.areaService .listService>li a::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
}

.areaService .listService>li a::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
}

.areaService .listService>li .serviceBcr {
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 193px 136px 0 0;
    border-color: transparent #1B5B0F;
    transform: rotate(180deg);
}

.areaService .listService>li .servicehHover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #3A9F34;
    transition: all .3s;
    opacity: 0;
}

.areaService .listService>li .serviceCnt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 12vw 70px 20px;
}

.areaService .listService>li .serviceCnt .serviceTitle {
    font-size: 35px;
    font-weight: normal;
    line-height: 1.25;
    letter-spacing: 2.3px;
    margin-bottom: 13px;
    transition: all .3s;
}

.areaService .listService>li .serviceCnt .serviceTitle span {
    display: block;
    font-size: 57px;
    font-weight: bold;
    margin-left: -4px;
    letter-spacing: 0;
}

.areaService .listService>li .serviceCnt .serviceTxt {
    font-size: 16px;
    letter-spacing: 0.6px;
    margin-bottom: 24px;
}

.areaService .listService>li .serviceCnt .serviceTxt li+li {
    margin-top: 4px;
}

.areaService .listService>li .serviceCnt .iconLink {
    width: 58px;
    margin-left: 2px;
}

/* areaRecruit */
.areaRecruit {
    position: relative;
}

.areaRecruit .recruitCnt {
    position: absolute;
    top: 51.4%;
    left: 49.6%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 30px;
    color: #fff;
    text-align: center;
}

.areaRecruit .recruitCnt .areaTitle {
    margin-bottom: 38px;
}

.areaRecruit .recruitCnt .areaTitle .titleEn {
    color: #fff;
    font-size: 107px;
    line-height: 1.25;
}

.areaRecruit .recruitCnt .areaTitle .titleJp {
    color: #fff;
    font-size: 19px;
}

.areaRecruit .recruitCnt .recruitTxt {
    font-size: 26px;
    line-height: 1.75;
    margin-bottom: 41px;
}

.areaRecruit .recruitCnt .recruitBtn {
    width: 100%;
    max-width: 304px;
    margin: 0 auto;
}

.areaRecruit .recruitCnt .recruitBtn a {
    display: block;
    text-align: center;
    font-size: 22px;
    color: #fff;
    background: #FF6600;
    padding: 27px 0;
    border-radius: 70px;
    font-weight: 500;
    letter-spacing: 2.2px;
    transition: all .3s;
}

.areaRecruit .recruitCnt .recruitBtn a span {
    position: relative;
    padding-right: 41px;
}

.areaRecruit .recruitCnt .recruitBtn a span::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    background: url(../images/index/icon-arrow.svg) no-repeat center center/100%;
    width: 22px;
    height: 16px;
    transition: all .3s;
}

.areaFrame {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.areaFrame::before {
    content: "";
    position: absolute;
    top: 51.1vw;
    right: 0;
    border-style: solid;
    border-width: 114vw 76.5vw 0 0;
    border-color: transparent #1B5B0F;
}

/* areaCsr */
.areaCsr {
    position: relative;
    padding: 85px 0 114px;
}

.areaCsr::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: #F4F4F4;
    width: 64.84%;
    height: 36.1vw;
    z-index: 1;
}

.areaCsr .areaTitle {
    margin-left: -14px;
    margin-bottom: 67px;
}

.areaCsr .crsWrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    z-index: 2;
}

.areaCsr .crsWrap .crsItem {
    width: 41.05%;
}

.areaCsr .crsWrap .crsItem a {
    position: relative;
    display: block;
}

.areaCsr .crsWrap .crsItem a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #3A9F34;
    transition: all .3s;
    opacity: 0;
}

.areaCsr .crsWrap .crsItem a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: all .3s;
}

.areaCsr .crsWrap .crsItem .crsPhoto {
    transition: all .3s;
}

.areaCsr .crsWrap .crsItem .crsCnt {
    position: absolute;
    bottom: 45px;
    left: 0;
    color: #fff;
    width: 100%;
    padding: 0 40px;
    transition: all .3s;
}

.areaCsr .crsWrap .crsItem .crsCnt .crsTitle {
    font-size: 35px;
    font-weight: normal;
    letter-spacing: 2.4px;
    margin-bottom: 6px;
}

.areaCsr .crsWrap .crsItem .crsCnt .crsTxt {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 1px;
}

/* areaNews */
.areaNews {
    position: relative;
    margin-bottom: 146px;
}

.areaNews .innerLeft {
    display: flex;
    justify-content: space-between;
    padding-left: calc((100% - 1137px) / 2);
}

.areaNews .areaTitle {
    padding-top: 78px;
    margin-left: 2px;
}

.areaNews .newsWrap {
    background: #F4F4F4;
    width: calc(100% - 327px);
    padding: 84px 69px 88px;
}

.areaNews .newsWrap .newsBox {
    padding-right: calc((100% - 359px) / 2);
}

.areaNews .newsWrap .listNews {
    margin-bottom: 43px;
}

.areaNews .newsWrap .listNews li {
    display: flex;
    border-top: 1px solid #E6EAEE;
    padding: 33px 13px;
}

.areaNews .newsWrap .listNews li:last-child {
    border-bottom: 1px solid #E6EAEE;
}

.areaNews .newsWrap .listNews li .date {
    width: 117px;
    font-size: 16px;
    color: #1B5B0F;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.areaNews .newsWrap .listNews li .newTitle {
    width: calc(100% - 117px);
}

.areaNews .newsWrap .listNews li .newTitle a {
    position: relative;
    display: block;
    font-size: 16px;
    letter-spacing: 0.9px;
    padding-right: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% + 15px);
}

.areaNews .newsWrap .listNews li .newTitle a::before {
    content: "";
    position: absolute;
    top: 57%;
    transform: translateY(-52%);
    right: 24px;
    background: url(../images/index/icon-arrow.svg) no-repeat center center/100%;
    width: 23px;
    height: 17px;
    filter: brightness(0);
    -webkit-filter: brightness(0);
    transition: all .3s;
}

.areaNews .newsWrap .viewList {
    text-align: right;
}

.areaNews .newsWrap .viewList a {
    position: relative;
    padding-right: 86px;
    font-size: 16px;
    letter-spacing: 1px;
}

.areaNews .newsWrap .viewList a::before {
    content: "";
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    right: 7px;
    background: url(../images/index/link-arrow.svg) no-repeat center center/100%;
    width: 52px;
    height: 52px;
    filter: brightness(0);
    -webkit-filter: brightness(0);
    transition: all .3s;
}

/* areaCompany */
.areaCompany {
    position: relative;
    padding-bottom: 235px;
    z-index: 2;
}

.areaCompany::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background: #1B5B0F;
    width: 100%;
    height: 49vw;
    z-index: -1;
}

.areaCompany .inner {
    display: flex;
    justify-content: space-between;
    margin-left: 98px;
    max-width: 1116px;
    padding: 0 64px;
}

.areaCompany .companyBox {
    width: 46.2%;
}

.areaCompany .companyBox .areaTitle {
    margin-bottom: 39px;
}

.areaCompany .companyBox .companyLocation {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 38px;
}

.areaCompany .companyBox .companyPhoto {
    margin-left: calc((100% - 792px)/2);
}

.areaCompany .companyBox .companyPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.areaCompany .companyCnt {
    width: 37.2%;
    padding-top: 66px;
}

.areaCompany .companyCnt .listLink {
    margin-bottom: 68px;
}

.areaCompany .companyCnt .listLink li+li {
    margin-top: 22px;
}

.areaCompany .companyCnt .listLink li a {
    display: block;
    font-size: 19px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    padding: 22px 37px 26.5px;
    background: url(../images/index/icon-arrow.svg) no-repeat right 34px top 50%/ 20px;
    transition: all .3s;
}

.areaCompany .companyCnt .companyVideo {
    position: relative;
    width: 93%;
    margin: 0 auto;
    cursor: pointer;
}

.areaCompany .companyCnt .companyVideo::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    background: url(../images/index/company-video.jpg) no-repeat center center/101%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.areaCompany .companyCnt .companyVideo::after {
    content: "";
    position: absolute;
    top: 50.5%;
    left: 49%;
    transform: translate(-50%, -50%);
    background: url(../images/index/icon-play.svg) no-repeat center center/100%;
    width: 111px;
    aspect-ratio: 1/1;
    z-index: 2;
}

.areaCompany .companyCnt .companyVideo.play::before,
.areaCompany .companyCnt .companyVideo.play::after {
    content: "";
    display: none;
}

.areaCompany .companyCnt .companyVideo video {
    width: 100%;
}

@media(min-width:1441px) {
    .areaCompany .inner {
        max-width: 1252px;
        margin: 0 auto;
    }

    .areaCompany .companyBox .companyPhoto {
        height: auto;
    }
}

@media(max-width:1280px) and (min-width:769px) {

    .areaNews .innerLeft,
    .innerLeft {
        padding-left: 30px;
        margin-left: 0 !important;
    }

    .areaCompany .inner,
    .areaNews .areaTitle,
    .areaService .areaTitle {
        margin-left: 0;
    }

    .areaNews .newsWrap .newsBox {
        padding-right: 30px;
    }

    .areaCompany .companyBox .areaTitle {
        padding-left: 0;
    }
}

@media(max-width:1200px) and (min-width:769px) {

    #mainTop .mainTitle {
        font-size: 4.3vw;
    }

    #mainTop .mainTitle .titleEng {
        font-size: 11.1vw;
    }

    .areaTitle .titleEn {
        font-size: 7.5vw;
    }

    .areaTitle .titleJp {
        font-size: 1.4vw;
    }

    /* areaDesign */
    .areaDesign {
        position: relative;
        padding: 14.7vw 0 9.8vw;
    }

    .areaDesign .titleBig {
        font-size: 12.8vw;
    }

    .areaDesign .designCnt .designTitle {
        font-size: 3.4vw;
    }

    .areaDesign .designCnt .designTxt {
        font-size: 1.4vw;
    }

    .areaDesign .designCnt .designPhotoSub {
        width: 24vw;
    }

    /* areaService */
    .areaService {
        margin-bottom: 15.5vw;
    }

    .areaService .areaTitle {
        margin-bottom: 4.4vw;
    }

    .areaService .listService>li a::before,
    .areaService .listService>li a::after {
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .areaService .listService>li .serviceCnt {
        padding: 7vw 4vw 20px;
    }

    .areaService .listService>li .serviceCnt .serviceTitle {
        font-size: 2.9vw;
    }

    .areaService .listService>li .serviceCnt .serviceTitle span {
        font-size: 4.8vw;
    }

    .areaService .listService>li .serviceCnt .serviceTxt {
        font-size: 1.4vw;
    }

    .areaService .listService>li .serviceCnt .iconLink {
        width: 4.8vw;
        margin-left: 2px;
    }

    /* areaRecruit */
    .areaRecruit .recruitCnt {
        top: 50%;
    }

    .areaRecruit .recruitCnt .areaTitle .titleEn {
        font-size: 8.9vw;
    }

    .areaRecruit .recruitCnt .areaTitle .titleJp {
        font-size: 1.6vw;
    }

    .areaRecruit .recruitCnt .recruitTxt {
        font-size: 1.8vw;
    }

    .areaRecruit .recruitCnt .recruitBtn a {
        font-size: 1.8vw;
        padding: 1.8vw 0;
    }

    /* areaCsr */
    .areaCsr {
        padding: 7.1vw 0 9.5vw;
    }

    .areaCsr .areaTitle {
        margin-bottom: 5.6vw;
    }

    .areaCsr .crsWrap .crsItem .crsCnt .crsTitle {
        font-size: 2.9vw;
    }

    .areaCsr .crsWrap .crsItem .crsCnt .crsTxt {
        font-size: 1.4vw;
    }

    /* areaNews */
    .areaNews {
        margin-bottom: 12.1vw;
    }

    .areaNews .newsWrap {
        padding: 6.9vw 5.8vw;
    }

    .areaNews .newsWrap .listNews li {
        padding: 2.7vw 1vw;
    }

    .areaNews .newsWrap .viewList a,
    .areaNews .newsWrap .listNews li .date,
    .areaNews .newsWrap .listNews li .newTitle a {
        font-size: 1.4vw;
    }

    .areaNews .newsWrap .listNews {
        margin-bottom: 3.7vw;
    }

    /* areaCompany */
    .areaCompany {
        padding-bottom: 26.6vw;
    }

    .areaCompany .companyBox .areaTitle {
        margin-bottom: 3.3vw;
    }

    .areaCompany .companyBox .companyLocation {
        margin-bottom: 3.3vw;
    }

    .areaCompany .companyCnt {
        width: 37%;
        padding-top: 66px;
        padding-top: 5.5vw;
    }

    .areaCompany .companyCnt .listLink {
        margin-bottom: 5.5vw;
    }

    .areaCompany .companyCnt .listLink li a {
        padding: 2vw 3vw;
        font-size: 1.6vw;
    }

}

@media(max-width:1024px) and (min-width:769px) {
    .areaFrame::before {
        border-width: 275vh 113vw 0 0;
    }

    .areaCompany::before {
        height: 50vw;
    }
}

@media(max-width:950px) and (min-width:769px) {
    .areaNews .newsWrap {
        width: calc(100% - 267px);
    }

    .areaNews .newsWrap .newsBox {
        padding-right: 0;
    }

    .areaFrame::before {
        top: 36.1vw;
        border-width: 220vw 120vw 0 0;
    }

    .areaCompany .inner {
        flex-direction: column;
    }

    .areaCompany .companyBox {
        width: 100%;
    }

    .areaCompany .companyCnt {
        width: 100%;

    }

    .areaCompany .companyBox .companyPhoto {
        width: 80%;
        margin: 0 auto;
    }

    .areaCompany .companyCnt .listLink {
        max-width: 300px;
        margin: 0 auto 4vw;
    }

    .areaCompany .companyCnt .companyVideo {
        width: 63%;
        margin: 0 auto;
    }
}

@media(max-width:900px) and (min-width:769px) {

    .areaNews .newsWrap .viewList a,
    .areaNews .newsWrap .listNews li .date,
    .areaNews .newsWrap .listNews li .newTitle a,
    .areaCsr .crsWrap .crsItem .crsCnt .crsTxt,
    .areaRecruit .recruitCnt .areaTitle .titleJp,
    .areaTitle .titleJp,
    .areaDesign .designCnt .designTxt,
    .areaService .listService>li .serviceCnt .serviceTxt {
        font-size: 14px;
    }

    .areaService .listService>li .serviceCnt {
        padding-top: 3vw;
    }

    .areaRecruit .recruitCnt .areaTitle .titleEn,
    .areaTitle .titleEn {
        font-size: 64px;
    }
}

@media(max-width:820px) and (min-width:769px) {
    .areaFrame::before {
        border-width: 380vh 128vw 0 0;
    }
}

@media(min-width:769px) {

    .areaService .listService>li a:hover::after,
    .areaService .listService>li a:hover::before {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .areaService .listService>li a:hover .serviceCnt .serviceTitle {
        margin-top: 30px;
    }

    .areaService .listService>li a:hover .servicehHover {
        opacity: 0.6;
    }

    .areaRecruit .recruitCnt .recruitBtn a:hover {
        background-color: #1b5b0f;
    }

    .areaRecruit .recruitCnt .recruitBtn a:hover span::before {
        right: -21px;
    }

    .areaCsr .crsWrap .crsItem a:hover::before {
        opacity: 0.8;
    }

    .areaCsr .crsWrap .crsItem a:hover::after {
        height: 10px;
    }

    .areaCsr .crsWrap .crsItem a:hover .crsPhoto {
        opacity: 0.5;
    }

    .areaCsr .crsWrap .crsItem a:hover .crsCnt {
        bottom: 30px;
    }

    .areaNews .newsWrap .viewList a:hover,
    .areaNews .newsWrap .listNews li .newTitle a:hover {
        color: #FF6600;
    }

    .areaNews .newsWrap .listNews li .newTitle a:hover::before {
        right: 9px;
    }

    .areaNews .newsWrap .viewList a:hover::before {
        right: -8px;
    }

    .areaCompany .companyCnt .listLink li a:hover {
        background-position: right 19px top 50%;
        background-color: #FF6600;
    }

}

@media (max-width: 768px) {

    #header .headerBar {
        background: transparent;
    }

    #mainTop .mainBcr {
        border-width: 80vw 54vw 0 0;
    }

    #mainTop .mainPhoto {
        min-height: 655px;
    }

    #mainTop .mainBox {
        padding: 0 3%;
    }

    #mainTop .mainTitle {
        font-size: 5vw;
        line-height: 1.7;
    }

    #mainTop .mainTitle .titleEng {
        font-size: 15vw;
        margin-left: 0;
    }

    .innerLeft {
        padding: 0 3%;
    }

    /* areaDesign */
    .areaDesign {
        padding: 18vw 0;
    }

    .areaDesign::before {
        display: none;
    }

    .areaDesign .titleBig {
        font-size: 20vw;
        left: -3px;
    }

    .areaDesign .designCnt {
        padding-bottom: 12vw;
    }

    .areaDesign .designCnt .designTitle {
        font-size: 4.8vw;
        letter-spacing: 0;
        margin-bottom: 3vw;
    }

    .areaDesign .designCnt .designTxt {
        font-size: clamp(15px, 3.6vw, 27px);
        padding-left: 0;
        letter-spacing: 0;
    }

    .areaDesign .designPhoto {
        display: block;
    }

    .areaDesign .designPhoto span {
        height: auto;
        margin-bottom: 4.5vw;
    }

    .areaDesign .designPhoto span:first-child {
        width: 100%;
    }

    .areaDesign .designPhoto span:nth-child(2) {
        display: block;
        float: right;
        width: 43%;
    }

    .areaDesign .designPhoto span:last-child {
        width: 70%;
    }

    /* areaService */
    .areaService {
        position: relative;
        padding-bottom: 22vw;
        margin-bottom: 0;
    }

    .areaService::before {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        border-style: solid;
        border-width: 200vw 125vw 0 0;
        border-color: transparent #fff;
        z-index: -1;
    }

    .areaService .innerLeft {
        margin: 0;
        padding: 0 9%;
    }

    .areaService .areaTitle {
        margin: 0 0 13vw;
    }

    .areaService .listService {
        display: block;
    }

    .areaService .listService li {
        width: 100%;
        margin-bottom: -1px;
    }

    .areaService .listService>li .serviceBcr {
        border-width: 34vw 27vw 0 0;
    }

    .areaService .listService li .serviceCnt {
        padding: 17vw 11vw;
    }

    .areaService .listService li .serviceCnt .serviceTitle {
        font-size: 7.7vw;
        margin-bottom: 4vw;
    }

    .areaService .listService li .serviceCnt .serviceTitle .roboto {
        font-size: 11vw;
    }

    .areaService .listService li .serviceCnt .serviceTxt {
        font-size: clamp(15px, 3.8vw, 29px);
        margin-bottom: 5vw;
    }

    .areaService .listService li .serviceCnt .serviceTxt li+li {
        margin-top: 1.7vw;
    }

    .areaService .listService li .serviceCnt .iconLink {
        width: 12vw;
    }

    /* areaRecruit */
    .areaRecruit {}

    .areaRecruit .recruitMain {
        height: 147vw;
    }

    .areaRecruit .recruitMain img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .areaRecruit .recruitCnt .areaTitle {
        margin-bottom: 10vw;
    }

    .areaRecruit .recruitCnt .areaTitle .titleEn {
        font-size: 16vw;
    }

    .areaRecruit .recruitCnt .areaTitle .titleJp {
        font-size: 3.8vw;
    }

    .areaRecruit .recruitCnt .recruitTxt {
        font-size: 5vw;
        margin-bottom: 9vw;
    }

    .areaRecruit .recruitCnt .recruitBtn {
        width: 83%;
        max-width: 100%;
    }

    .areaRecruit .recruitCnt .recruitBtn a {
        padding: 3.9vw 0;
        font-size: 4.8vw;
    }

    .areaRecruit .recruitCnt .recruitBtn a span::before {
        top: 56%;
        width: 5vw;
        height: 4vw;
    }

    /* areaFrame */
    .areaFrame {}

    .areaFrame::before {
        display: none;
    }

    .areaCsr::before {
        display: none;
    }

    .areaFrame .areaCsr {
        padding: 24vw 0 0;
    }

    .areaFrame .areaCsr .areaTitle {
        margin: 0 0 13vw;
        padding: 0 7%;
    }

    .areaFrame .areaCsr .crsWrap {
        display: block;
    }

    .areaFrame .areaCsr .crsWrap .crsItem {
        width: 100%;
        margin-bottom: -1px;
    }

    .areaFrame .areaCsr .crsWrap .crsItem .crsCnt {
        padding: 0 8%;
        bottom: 6vw;
    }

    .areaFrame .areaCsr .crsWrap .crsItem .crsCnt .crsTitle {
        font-size: 7vw;
    }

    .areaFrame .areaCsr .crsWrap .crsItem .crsCnt .crsTxt {
        font-size: 3vw;
    }

    /* areaNews */
    .areaNews {
        margin-bottom: 0;
        z-index: 4;
    }

    .areaNews .innerLeft {
        display: block;
        padding: 0;
    }

    .areaNews .areaTitle {
        padding: 20vw 7% 0;
        margin-bottom: 9vw;
    }

    .areaNews .newsWrap {
        width: 100%;
        padding: 12vw 7%;
    }

    .areaNews .newsWrap .newsBox {
        padding: 0;
    }

    .areaNews .newsWrap .listNews {
        margin-bottom: 7vw;
    }

    .areaNews .newsWrap .listNews li {
        position: relative;
        display: block;
        padding: 7vw 0;
        border-color: #c9c9c9 !important;
    }

    .areaNews .newsWrap .listNews li::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        background: url(../images/index/icon-arrow.svg) no-repeat center center / 100%;
        width: 4vw;
        min-width: 20px;
        aspect-ratio: 1 / 1;
        filter: brightness(0);
        -webkit-filter: brightness(0);
    }

    .areaNews .newsWrap .listNews li .date {
        font-size: clamp(16px, 3.6vw, 27px);
        width: 100%;
    }

    .areaNews .newsWrap .listNews li .newTitle {
        width: 100%;
    }

    .areaNews .newsWrap .listNews li .newTitle a {
        font-size: clamp(16px, 3.6vw, 27px);
        padding-right: 6vw;
        width: 100%;
    }

    .areaNews .newsWrap .listNews li .newTitle a::before {
        display: none;
    }

    .areaNews .newsWrap .viewList a {
        font-size: 4.3vw;
        padding-right: 13vw;
    }

    .areaNews .newsWrap .viewList a::before {
        top: 50%;
        width: 9vw;
        height: 9vw;
    }

    /* areaCompany */
    .areaCompany {
        padding-top: 19vw;
        padding-bottom: 35vw;
    }

    .areaCompany::after {
        content: "";
        position: absolute;
        top: -7vw;
        right: 0;
        border-style: solid;
        border-width: 200vh 179vw 0 0;
        border-color: transparent #1B5B0F;
        z-index: -1;
    }

    .areaCompany .inner {
        display: block;
        margin: 0;
        padding: 0 7%;
    }

    .areaCompany .companyBox {
        width: 100%;
    }

    .areaCompany .companyBox .areaTitle {
        margin-bottom: 7vw;
    }

    .areaCompany .companyBox .companyLocation {
        font-size: 3.8vw;
        letter-spacing: 1.1px;
        margin-bottom: 4vw;
    }

    .areaCompany .companyBox .companyPhoto {
        margin: 0 auto;
        width: 97%;
    }

    .areaCompany .companyCnt {
        width: 100%;
    }

    .areaCompany .companyCnt .listLink {
        width: 81%;
        margin: 0 auto 13vw;
    }

    .areaCompany .companyCnt .listLink li+li {
        margin-top: 3vw;
    }

    .areaCompany .companyCnt .listLink li a {
        font-size: 4.3vw;
        text-align: center;
        padding: 3.2vw 0;
        background: transparent;
    }

    .areaCompany .companyCnt .companyVideo {
        width: 100%;
    }

    @media all and (orientation:landscape) {
        .areaCompany::after {
            top: -20vw;
            border-width: 273vh 102vw 0 0;
        }

        .areaCompany::before {
            height: 300vh;
        }

        #mainTop .mainTitle [data-aos][data-aos][data-aos-delay="1250"].aos-animate,
        #mainTop .mainTitle [data-aos][data-aos][data-aos-delay="950"].aos-animate,
        #mainTop .mainTitle [data-aos][data-aos][data-aos-delay="650"].aos-animate {
            transition-delay: initial;
        }

    }
}

@media (max-width:430px) {
    .areaCompany {
        padding-bottom: 58vw;
    }

    .areaCompany::after {
        border-width: 200vh 268vw 0 0;
    }

    .areaFrame .areaCsr .crsWrap .crsItem .crsCnt .crsTxt {
        font-size: 12px;
    }
}
@media (min-width: 1426px) {
		.areaFrame::before {
    top: 36.1vw;
}
	.areaCompany::before {
    height: 36vw;
}

}
@media (min-width: 769px) and (max-width: 820px) {
		.areaFrame::before {
    top: 46.1vw;
}
	.areaCompany::before {
    height: 100vh;
}

}