@charset "utf-8";
/* base */
.wrap-base-link {position: relative; z-index: 1; height:10rem; margin-top: -10rem; backdrop-filter: blur(1rem);}
.wrap-base-link .inner {max-width:160rem; width:100%; margin:0 auto;}
.wrap-base-link ul {display: flex;}
.wrap-base-link ul li {width:25%; position: relative;}
.wrap-base-link ul li:last-child a {border-right:0;}
.wrap-base-link a {display: flex; align-items: center; width: 100%; height:10rem; padding:0 3rem 0 3.5rem; background:rgba(0,0,0,0.2); border-right:0.1rem solid #fff; font-family: psb; font-size: 2.5rem; color:#fff; transition: all .3s;}
.wrap-base-link a::after {content:''; position: absolute; right:3rem; top:50%; width: 3rem; height: 3rem; margin-top:-1.5rem; background:#fff url('../../images/main/ic-link-arrow.png') no-repeat center; border-radius:50%;}
.wrap-base-link a:hover {background:#FF9499; border-right:0.1rem solid #FF9499}
/* .wrap-base-link a::before {content:''; position: absolute; left:0; top:0; width: calc(100% + 0.2rem); height:100%; background:#FF9499;} */
.wrap-base-link a:hover::after {background:#fff url('../../images/main/ic-link-arrow-on.png') no-repeat center;}
/* .wrap-base-link a:hover::before {display: none;} */
.wrap-base-link .img-box {margin-right: 1.8rem;}

@media screen and (max-width: 1680px) {
    /* .wrap-base-link{padding: 0 4rem;} */
}

@media screen and (max-width: 1200px) {
    .wrap-base-link .img-box {flex-shrink: 0;}
    .wrap-base-link a {justify-content: center; padding:0;}
    .wrap-base-link a::after{display: none;}
}
@media screen and (max-width:950px) {
    .wrap-base-link a {font-size: 2.2rem;}
}
@media screen and (max-width: 768px) {
    .wrap-base-link .img-box{margin-right: 0; height: 3.2rem; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem;}
    .wrap-base-link a{flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; font-size: 2rem; padding: 0;}
    .wrap-base-link li:nth-child(1) img{width: 3.4rem;}
    .wrap-base-link li:nth-child(2) img{width: 3.4rem;}
    .wrap-base-link li:nth-child(3) img{width: 2.5rem;}
    .wrap-base-link li:nth-child(4) img{width: 3rem;}
}

.wrap-pko {position: relative; display: flex; align-items: center; min-height:70rem; background: url('../../images/main/bg-pko.jpg') no-repeat center / cover;}
.wrap-pko .flex-box {display:flex;}
.wrap-pko .left {width: 53rem; margin-right: 5.5rem;}
.wrap-pko .right {flex:1;}
.wrap-pko .right img {width: 100%;}
.wrap-pko .text {text-align: center;}
.wrap-pko .text strong {font-family: pb; font-size: 5rem; color:#fff;}
.wrap-pko .text p {margin-top: 2.7rem; font-family: pr; font-size: 2.2rem; line-height: 3.5rem; color:#fff;}
.wrap-pko .text p .color {color:#FFDB7A;}
.wrap-pko .num-box {background: #313131; display: flex; align-items: center; min-height:18rem; margin-top: 7rem; padding:0 4rem;}
.wrap-pko .num-box ul {display: flex; justify-content: space-between; flex:1;}
.wrap-pko .num-box li {padding:2rem 1rem 0 1rem;}
.wrap-pko .num-box p {font-family: pr; font-size: 2rem; text-align: center; color:#bbb;}
.wrap-pko .num-box strong {font-family: pm; font-size: 6rem; color:#F1EC88;}

@media screen and (max-width: 1200px) {
    .wrap-pko{background: url(../../images/main/bg-pkot.jpg) no-repeat center / cover; min-height: 76rem;}
    .wrap-pko .flex-box{flex-wrap: wrap; flex-direction: column;}
    .wrap-pko .left{width: 100%; margin-right: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; margin-bottom: 4.4rem; margin-top: .8rem;}
    .wrap-pko .right{padding: 0 1.3rem;}
    .wrap-pko .text strong{font-size: 4rem;}
    .wrap-pko .text p{font-size: 2rem; line-height: 3rem; margin-top: 1.8rem;}
    .wrap-pko .num-box{margin-top: 0; min-height: auto; padding: 2.4rem 4rem;}
    .wrap-pko .num-box ul{gap: 6.7rem;}
    .wrap-pko .num-box li{padding: 0;}
    .wrap-pko .num-box p{font-size: 1.8rem;}
    .wrap-pko .num-box strong{font-size: 5rem; margin-top: .5rem;}
}
@media screen and (max-width:900px) {
    .wrap-pko .left{flex-direction: column; align-items: center; justify-content: center; margin-top: 0; margin-bottom: 4rem;}
    .wrap-pko .num-box{margin-top: 2.5rem;}
}
@media screen and (max-width: 768px) {
    .wrap-pko{min-height: auto; padding: 5.2rem 0 6.3rem;}
    .wrap-pko .text strong{font-size: 3rem;}
    .wrap-pko .text p{font-size: 1.8rem; line-height: 2.5rem; margin-top: 2.8rem;}
    .wrap-pko .num-box{margin-top: 2.5rem; padding: 2.2rem 4.3rem;}
    .wrap-pko .num-box p{font-size: 1.6rem;}
    .wrap-pko .num-box strong{font-size: 3.5rem; margin-top: 0;}
    .wrap-pko .right{padding: 0;}
}


/* multi-box */
div:has( > .multi-box)::before {content:''; position: absolute; left:0; top:0; width:100%; height: 39rem; background:url('../../images/main/bg-gallery.png') no-repeat center top / cover;}
.multi-box {display:grid; grid-template-columns: minmax(0, 50.625%) minmax(0, 1fr); grid-template-rows: 1.125fr 1fr; max-width:160rem; margin:0 auto; padding:12rem 0 12.5rem 0;}
.multi-box > div:first-child {grid-row: 1 / span 2;}
@media screen and (max-width:1800px) {
    .multi-box {padding:12rem 4rem 12.5rem 4rem;}
}
@media screen and (max-width:1200px) {
    div:has( > .multi-box)::before {height:100%; background-size:100% 100%;}
    .multi-box {display:block; padding:9rem 0 0 0;}
    .multi-box > div {padding: 0 9.5rem;}
}
@media screen and (max-width:850px) {
    .multi-box > div {padding:0 4rem;}
}
@media screen and (max-width:768px) {
    .multi-box {padding: 6rem 2rem 0 2rem;}
    .multi-box > div {padding:0;}
}

/* wrap-link */
.wrap-link {position: relative; height:100%; padding:4rem 5rem 0 7.5rem;}
.wrap-link ul {display: flex; justify-content: space-between; gap:0 5rem;}
.wrap-link li {position: relative;}
.wrap-link li:first-child::before {content:''; position: absolute; right:0; top:0; width:7.5rem; height:6rem; background:url('../../images/main/ic-service-logo1.png') no-repeat right top / cover; filter: saturate(0%) opacity(0.45);transition:filter .3s;}
.wrap-link li:last-child::before {content:''; position: absolute; right:0; top:0; width:6rem; height:6rem; background:url('../../images/main/ic-service-logo2.png') no-repeat center center / contain; filter: saturate(0%) opacity(0.45);transition:filter .3s; border-radius:50%;}
.wrap-link a {display: block;}
.wrap-link .box strong {position: relative; display: block; padding-top: 5.2rem; padding-bottom: 1.5rem; font-family: psb; font-size: 2.5rem; color:#111;}
.wrap-link .box strong::before {content:''; position: absolute; bottom:0; left:0; width: 100%; height:0.1rem; background:#000; filter: saturate(0%) opacity(0.45); transition:filter .3s;}
.wrap-link .box strong::after {content:''; position: absolute; bottom:1px; right:0; width:0.6rem; height: 0.6rem; border-left:0.3rem solid #000; border-bottom:0.3rem solid #000; border-right:0.3rem solid transparent; border-top:0.3rem solid transparent; filter: saturate(0%) opacity(0.45); transition:filter .3s;}
.wrap-link .box p {position: relative; margin-top:2rem; font-family: pr; font-size: 1.8rem; color:#777; line-height: 3rem;}
.wrap-link li:has(a):hover .box strong::before { filter: saturate(100%) opacity(1);}
.wrap-link li:has(a):hover .box strong::after { filter: saturate(100%) opacity(1);}
.wrap-link li:has(a):hover::before { filter: saturate(100%) opacity(1);}

@media screen and (min-width:2500px) {
    .wrap-link li:last-child::before {width:6.5rem; height:6.5rem;}
    .wrap-link .box strong::after {overflow:hidden; width:0.6rem; height:0.6rem; background:linear-gradient(45deg, #000 50%, #fff 50%); border:none; }
    /* .wrap-link .box strong::after {width:12px; height:12px; border-left:6px solid #000; border-bottom:6px solid #000; border-right:6px solid transparent; border-top:6px solid transparent;} */
    /* .wrap-link .box strong::after {width:14px; height:14px; border-left:7px solid #000; border-bottom:7px solid #000; border-right:7px solid transparent; border-top:7px solid transparent;} */
}
@media screen and (max-width:1200px) {
    .wrap-link {max-width:81rem; margin:0 auto; padding:4.8rem 0 8rem 0;}
    .wrap-link .frame {padding:0 7.5rem}
    div:has( > .wrap-link) {background:#fff;}
}
@media screen and (max-width:768px) {
    .wrap-link {padding:3.3rem 0 5.5rem 0;}
    div:has( > .wrap-link) {width:calc(100% + 4rem) !important; left:-2rem;}
    .wrap-link .frame {padding:0 2rem;}
    .wrap-link li::before {background-size:cover !important;}
    .wrap-link li:first-child::before {width: 6.5rem; height:5.2rem;}
    .wrap-link li:last-child::before {width: 5.2rem; height:5.2rem;}
    .wrap-link .box strong {font-size: 2.2rem; padding-top: 2.5rem; padding-bottom: 2.5rem;}
    .wrap-link .box p {font-size: 1.6rem; line-height: 2.5rem;}
}


@media screen and (max-width:1200px) {
    #menu539_obj450 {width:58.33%; float:left;}
    #menu539_obj646 {width:41.66%; float:right;}
}
@media screen and (max-width:1024px) {
    #menu539_obj450 {width:50%;}
    #menu539_obj646 {width:50%;}
}
@media screen and (max-width:900px) {
    #menu539_obj450 {width:100%;}
    #menu539_obj646 {width:100%;}
}