@charset "UTF-8";
/* CSS Document */
.wrapper{
    width: min(84%,1400px);
    margin: 0 auto;
    margin-bottom: 18rem;
}
.wrapper ul{
    display: flex;
    gap: 7%;
    flex-wrap: wrap;
}
.wrapper ul li{
    width: calc(50% - 3.5%);
    position: relative;
}
.wrapper ul li::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #DDDDDD;
}
.wrapper ul li::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 15%;
    background-color: #F923B2;
}
.wrapper .page_link{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.wrapper ul li:first-of-type .page_link::before,
.wrapper ul li:nth-of-type(2) .page_link::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #DDDDDD;
}
.wrapper ul li:first-of-type .page_link::after,
.wrapper ul li:nth-of-type(2) .page_link::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 15%;
    background-color: #F923B2;
}
.wrapper .page_link .column{
    padding: min(5rem,55px) 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.wrapper .page_link .column::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 84%;
    display: block;
    background-color: #F7F8F8;
    transform: translateY(-50%)scaleX(0);
    transform-origin: right;
    transition: 0.35s;
    transition-property: transform;
    z-index: 1;
    border-radius: 20px;
}
.wrapper .page_link:hover .column::before{
    transform: translateY(-50%)scaleX(1);
    transform-origin: left;
}
.wrapper .page_link .page_name{
    position: relative;
    z-index: 2;
    transition: 0.35s;
}
.wrapper .page_link:hover .page_name{
    transform: translateX(8px);
}
.wrapper .page_link .page_name p{
    font-size: clamp(15px,1.8rem,18px);
    color: #C7C7C7;
    margin-bottom: max(15px,2rem);
}
.wrapper .page_link .page_name span{
    display: block;
    font-size: clamp(28px,3.8rem,38px);
}
.wrapper .page_link .arrow{
    margin-left: 30px;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(105deg, #FFA1C3 10%, #FF00A4 70%, #ED0FAF);
    transition: 0.35s ease-in;
    z-index: 5;
}
.wrapper .page_link .arrow::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 18px;
    height: 18px;
    display: block;
    overflow: hidden;
    background: url(../img/common/arrow_white.svg)center/100% auto no-repeat;
    transition: 0.4s;
}
.wrapper .page_link .arrow::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 18px;
    height: 18px;
    display: block;
    overflow: hidden;
    background: url(../img/common/arrow_white.svg)left -25px center/100% auto no-repeat;
    transition: 0.4s;
}
.wrapper .page_link:hover .arrow::before{
    background: url(../img/common/arrow_white.svg)left 25px center/100% auto no-repeat;
}
.wrapper .page_link:hover .arrow::after{
    background: url(../img/common/arrow_white.svg)center/100% auto no-repeat;
}


@media print, screen and (max-width: 768px){
    .wrapper {
        width: min(100%,600px);
        padding: 0 6rem;
    }
    .wrapper ul{
        display: block;
    }
    .wrapper ul li{
        width: 100%;
    }
    .wrapper ul li:nth-of-type(2) .page_link::before{
        display: none;
    }
    .wrapper ul li:nth-of-type(2) .page_link::after{
        display: none;
    }
    .wrapper .page_link .column{
        padding: min(7rem,40px) 0;
    }
    .wrapper .page_link .page_name p{
        color: #aaa;
        font-size: clamp(13px,2.8rem,18px);
    }
    .wrapper .page_link .page_name span{
        font-size: clamp(22px,5.4rem,32px);
    }
    .wrapper .page_link .arrow{
        width: 38px;
        height: 38px;
        margin-left: 0;
    }
    .wrapper .page_link .arrow::before,
    .wrapper .page_link .arrow::after{
        width: 16px;
        height: 16px;
    }
}