@charset "utf-8";
img{
    max-width: 100%;
    height: auto;
}

body#buy .main_img{
    background-image: url(/grantact/img/buy/buy_main.jpg);
    background-position: center top;
}

.sec_pickup{
    padding: 10rem 0;
    background: linear-gradient(#221222, #795A84);
    color: #fff;
}
.sec_tokyu > .contents,
.sec_pickup > .contents{
    position: relative;
    z-index: 2;
}
.sec_tokyu h3,
.sec_pickup h3{
    font-size: 4.2rem;
    font-weight: 300;
    margin: 0 0 5rem;
}
.sec_tokyu .ex,
.sec_pickup .ex{
    font-size: 1.7rem;
    margin-bottom: 10rem;
}
.sec_pickup h4{
    border-left: 3px solid #ded4bd;
    font-size: 3.2rem;
    margin-bottom: 3rem;
    line-height: 1.5;
    font-weight: 600;
    padding-left: 3rem;
}
.sec_pickup h4 p{
    font-size: 1.6rem;
    font-weight: 300;
    margin-top: 1rem;
}
.pickup_area{
	margin: 8rem 0 0;
}
.pickup_slide{
     /*width: calc(100% + (100vw - 100%) / 2);*/
}
.pickup_box{
	max-width: 350px;
	margin: 0 20px;
	position: relative;
	font-size: 0;
}
.pickup_box .image_container{
    width: 100%;
    padding-bottom: 146.53%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ccc;
}
.pickup_box img.pickup_icon{
	width: 96px;
	position: absolute;
	top: 0;
	left: 0;
}
.pickup_box_txt{
	padding: 15px;
	background-color: #fff;
    color: #000;
}
.pickup_box_txt p{
    color: #402944;
    min-height: 3em;
	margin: 0 0 12px;
	font-size: 2.7rem;
    line-height: 1.5;
    text-align: center;
}
body.EN .pickup_box_txt p.name{
	font-size: 2.2rem;
    line-height: 2.5rem;
    min-height: 3.75em;
}
.pickup_box_icon{
	font-size: 12px;
	text-align: center;
	color: #fff;
	display: block;
	padding: 3px 0 4px;
	background-color: #6c4b6d;
    font-size: 2rem;
    font-weight: 700;
}
.pickup_box_icon.new{
	background-color: #744370;
}

.pickup_box_dataA{
	font-size: 2rem;
	display: block;
    text-align: center;
    font-weight: 300;
}
.pickup_box_dataC{
	font-size: 2.8rem;
	display: block;
    text-align: center;
}
.pickup_box_dataB{
	font-size: 15px;
	display: inline-block;
	margin: 0 15px 0 0;
}

a.pickup_box:hover {
    opacity: 1;
}
a .pickup_head{
    position:relative;
}
a p.link_hover{
    position: absolute;
    top: 0;
	display: block;
    width: 100%;
    height: 100%;
    background-color:rgba(255,255,255,0.6);
    text-align: center;
    padding: 0;
    line-height: 20;
	opacity: 0;
	font-size: 20px;
	transition: all 0.6s ease;
	color: #000;
    font-weight: 700;
}
a p.link_hover span{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    margin-left: 1rem;
    vertical-align: 3px;
    transform: rotate(45deg);
}
a:hover p.link_hover{
	opacity: 1;
}

.sec_pickup .search{
    margin-top: 7.5rem;
}

.sec_pickup .search .conditionList{
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 8rem 0 0;
}
.sec_pickup .search .conditionList > li{
width: calc( (100% - 7.5rem) / 6 );
background: #6c4b6d;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}
.sec_pickup .search .conditionList > li .txt{
flex: 1;
      font-size: 1.4rem;
padding: 1rem;
background: url(/grantact/img/common/icon_link_white.svg) right 1rem center / auto 1.4rem no-repeat;
}
.sec_pickup .search .conditionList > li.x2{
width: calc( (100% - 3rem) / 3 );
}
.sec_pickup .search .conditionList > li .img{
height: 12rem;
}
.sec_pickup .search .conditionList > li img{
width: 100%;
height: 100%;
        object-fit: cover;
        object-position: center;
        vertical-align: bottom;
}
.sec_pickup .search .conditionList > li.x2 .img{
width: calc( (100% - 1.5rem ) / 2 );
}
.sec_pickup .search .conditionList > li.x2 .img img{
height: 100%;
}
.sec_pickup .search .conditionList > li.x2 .txt{
    padding-left: 1.5rem;
}
.sec_pickup .search .conditionList > li .flex{
    align-items: center;
}

.link{
    margin: 7.5rem 0 0;
}
.link .flex {
    justify-content: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}
.link .flex .btn_secondary {
    text-align: left;
    padding: 1.2rem 0 1.2rem 2rem;
    width: 30rem;
    margin: 0;
    background: #402944 url(/grantact/img/common/icon_link_white.svg) right 2em center / auto 1.2rem no-repeat;
}
.sec_tokyu .reccomend h4{
    font-size: 2.7rem;
    margin-bottom: 5rem;
}
.sec_tokyu .reccomend .serviceList{
    flex-wrap: wrap;
    gap: 3rem;
}
.sec_tokyu .reccomend .serviceList > li{
    width: calc( (100% - 6rem) / 3 );
}
.sec_tokyu .reccomend .serviceList > li img{
    width: 100%;
}
.sec_tokyu .reccomend .serviceList > li h4{
    font-size: 2rem;
    padding: 1rem 2rem 1rem 0;
    color: #6c4b6d;
    font-weight: 600;
    background: url(/grantact/img/common/icon_exlink_color.svg) right .5rem center / auto 1.4rem no-repeat;
    margin-bottom: 1rem;
}
.sec_tokyu .reccomend .serviceList > li.inlink h4{
    background: url(/grantact/img/common/arrow_link.svg) right .5rem center / auto 1.4rem no-repeat;
}
.sec_tokyu .reccomend .serviceList > li p{
    margin-top: 1rem;
    font-size: 1.7rem;
    font-weight: 300;
}

.contents.pickup{
    max-width: unset;
    padding: 0;
}
.contents.pickup > .ttl{
    max-width: 130rem;
    padding: 0 5rem;
    margin: 0 auto;
}
.slick-list.draggable{
    width: 100vw;
}
.slick-arrow.slick-prev, .slick-arrow.slick-next{
    top: -12rem;
    right: unset;
    left: unset;
}
.slick-arrow.slick-prev{
    right: calc(((100vw - 120rem) / 2) + 5rem);
}
.slick-arrow.slick-next{
    right: calc((100vw - 120rem) / 2);
}

.breadcrumb{
    background: #fff;
    border-bottom: 1px solid #dbdbdb;
}
@media screen and (max-width: 1366px){
    .sec_tokyu h3,
    .sec_pickup h3{
        font-size: 3.6rem;
    }
    .sec_pickup .search .conditionList > li{
        width: calc( (100% - 4.5rem) / 4 );
    }
    .sec_pickup .search .conditionList > li.x2{
        width: calc( (100% - 1.5rem) / 2 );
    }
    .sec_pickup .search .conditionList > li.x2 .img{
        width: calc( (100% - 1.5rem ) / 2 );
        height: calc( 12rem + 5rem );
        overflow: hidden;
    }
    .sec_tokyu .reccomend .serviceList > li{
        width: calc( (100% - 3rem) / 2 );
    }

    .slick-arrow.slick-prev{
        right: calc( 5% + 5rem);
    }
    .slick-arrow.slick-next{
        right: 5%;
    }
}

@media screen and (max-width: 820px){
    .contents{
        width: calc(100% - 30px);
    }
    section.bg{
        padding: 5rem 0 7rem;
    }
    section.sec_pickup{
        padding: 2rem 0 6rem;
    }
    section.sec_tokyu{
        padding: 5rem 0 2.5rem;
    }
    .sec_pickup h3{
        font-size: 4.7rem;
        margin-bottom: 8rem;
        letter-spacing: .05em;
        line-height: 1.42;
    }
    .sec_pickup h4{
        padding-left: 1.5rem;
    }
    .sec_tokyu .ex, .sec_pickup .ex {
        font-size: 1.6rem;
        margin-bottom: 4rem;
        line-height: 1.75;
    }
    .sec_tokyu .ex{
        margin-bottom: 6rem;
    }
    .pickup_slide{
        width: calc(100% + (100vw - 100%) / 2);
        margin-left: -3%;
    }
    .sec_pickup .search .conditionList > li{
        width: calc( (100% - 1.5rem) / 2 );
    }
    .sec_pickup .search .conditionList > li.x2{
        width: 100%;
    }
    .sec_pickup .search .conditionList > li .img{
        height: 10.7rem;
    }
    .sec_pickup .search .conditionList > li.x2 .img{
        width: calc( (100% - 1.5rem ) / 2 );
        height: 10.7rem;
        overflow: hidden;
    }
    .sec_pickup .link .flex li{
        width: 100%;
    }
    .sec_pickup .link .flex .btn{
        border-right: none;
        width: calc(100vw - 30px);
        max-width: unset;
        font-size: 1.6rem;
        padding: 2rem;
        margin-left: auto;
        display: block;
        background-position: right 3rem center;
    }
    .sec_pickup .link {
        margin: 3rem -30px 0 0;
    }
    .sec_tokyu .reccomend{
        padding: 0 15px;
    }
    .sec_tokyu h3{
        font-size: 2.8rem;
        margin-bottom: 4rem;
    }
    .sec_tokyu .reccomend .serviceList > li{
        width: 100%;
    }

    .contents.pickup > .ttl{
        max-width: 100%;
        padding: 0;
    }
    .slick-arrow.slick-prev{
        right: calc(5rem + 15px);
    }
    .slick-arrow.slick-next{
        right: 15px;
    }
    .contents.pickup{
        padding: 0 15px;
    }
    .sec_tokyu .reccomend,
    .sec_pickup .search{
        width: 100%;
    }
    .sec_pickup .search .conditionList > li .txt{
        padding: 1rem 2rem 1rem 1rem;
        position: relative;
        height: 4.4rem;
        background: url(/grantact/img/common/icon_link_white.svg) right 1rem center / auto 1rem no-repeat;
    }
    .sec_pickup .search .conditionList > li .txt p{
        position: absolute;
        line-height: 1.25;
        left: 1rem;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.3rem;
    }
    .sec_pickup .search .conditionList > li.x2 .txt p{
        left: 1.8rem;
    }
    .sec_pickup h4{
        font-size: 2.8rem;
        letter-spacing: .15em;
        font-weight: 600;
        margin-bottom: 6rem;
    }
    body.EN .sec_pickup h4{
        letter-spacing: 0;
    }
    .sec_pickup h4 > p{
        font-size: 1.2rem;
        letter-spacing: 0;
        line-height: 1.75;
    }
    .sec_pickup .search{
        margin-top: 9rem;
    }
}

/*pickup*/


.contents.pickup > .ttl{
    position: relative;
}
.top_pickup {
    position: relative;
    z-index: 3;
    transition: left 0.4s ease-in-out 0s;
    left: 0;
}
.pickupList{
    display: flex;
    width:calc( 350px * 5 + 16rem);
    gap: 1.5rem;
    flex-wrap: nowrap;
    padding-left: calc(((100vw - 1200px) / 2) - 7px );
    position: relative;
    left: 0;
    transition: left .4s ease-in-out;
}
.pickupList > *{
    width: 350px;
}
.pickupList > *:first-child{
}
.pickupList .pickup_box{
    display: block;
    width: 350px;
    margin: 0;
}
.pickup .pickupBtn{
    position: absolute;
    right: 5rem;
    top: 50%;
    transform: translateY(-50%);
}
.pickupBtn button{
    padding: 1rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all .2s ease-out;
}
.pickupBtn button + button{
    margin-left: 2rem;
}
.pickupBtn button span{
    display: block;
    width: 2rem;
    height: 4.5rem;
}
.pickupBtn button.pickupPrev span{
    background: url(/grantact/img/common/icon_slider_prev.svg) center / contain no-repeat;
}
.pickupBtn button.pickupNext span{
    background: url(/grantact/img/common/icon_slider_next.svg) center / contain no-repeat;
}
.pickupBtn button:hover{
    opacity: 0.4;
}
.pickupBtn button[disabled]{
    cursor: default;
    opacity: 0.6;
}
@media screen and (max-width: 1366px){
    .pickupList{
        padding-left: 50px;
    }
    .pickupList .pickup_box{
        width: 305px;
    }
    a p.link_hover{
        line-height: 17;
    }
      
}
@media screen and (max-width: 820px){
    .sec_buy .pickup{
        padding: 40px 0;
        width: 94%;
        margin: 0 auto;
    }
    .pickupList{
        padding-left: calc(-30px);
    }
    .pickupList .pickup_box{
        margin: 0 !important;
        max-width: unset !important;
    }
    .pickup .pickupBtn{
        right: 0;
    }
    .pickupList .pickup_box{
        width: 210px;
    }
    .pickup_box_txt{
        padding: 1.5rem 1.5rem 2.2rem;
    }
    .pickup_box_txt p{
        font-size: 1.8rem;
        margin: 0;
    }
    .pickup_box_dataC {
        font-size: 2rem;
        margin: 0 !important;
        color: #221814;
    }
    a p.link_hover{
        line-height: 12;
    }
    .pickup_box_icon{
        font-size: 1.4rem;
        letter-spacing: .1em;
        padding: .5rem;
        line-height: 1.85;
    }
    body.EN .pickup_box_icon{
        font-size: 1.1rem;
        letter-spacing: 0;
    }
    .pickup_box_dataA {
        font-size: 1.5rem;
        margin: 0;
        line-height: 1.85;
    }
    body.EN .pickup_box_txt p.name {
        font-size: 1.75rem;
        line-height: 1.25;
    }
    .sec_tokyu .reccomend h4{
        margin-bottom: 4rem;
        font-size: 2rem;
    }
    .sec_tokyu .reccomend .serviceList{
        gap: 4.5rem;
    }
    .sec_tokyu .reccomend .serviceList > li h4{
        font-size: 1.8rem;
        
    }
    .sec_tokyu .reccomend .serviceList > li p{
        font-size: 1.4rem;
    }
}