@charset "utf-8";

/* mv */
.common_mv_img::after{
    background-color: #e8e8e8;
}
.common_mv_ttl {
    font-weight: 700;
}
.common_mv_subttl {
    letter-spacing: 0.02em;
}
.section {
    margin-inline: auto;
}
@media (min-width: 751px) {
    .common_mv_inner {
        padding: 25rem 0 0 0;
    }
    .common_mv_img {
        background: url(../../images/compare/mv_img.jpg) no-repeat center / cover;
    }
    .common_mv_txt_wrap {
        padding-bottom: 478rem;
    }
    .common_mv_ttl {
        font-size: 50rem;
        opacity: 0.8;
    }
    .common_mv_subttl {
        margin-top: 15rem;
    }
    .page_contents_wrap {
        padding-top: 107rem;
    }
    .section {
        width: 1110rem;
    }
}
@media (max-width: 750px) {
    .common_mv_img {
        background: url(../../images/compare/mv_img_sp.jpg) no-repeat center / cover;
    }
    .common_mv_ttl {
        font-size: 74rem;
    }
    .common_mv_txt_wrap {
        margin-top: -472rem;
    }
    .common_mv_inner {
        padding: 5rem 25rem 476rem;
    }
    .common_mv_ttl {
        font-size: 40rem;
        line-height: calc(50 / 40);
    }
    .section {
        width: 325rem;
    }
}

/* lead */
.lead_wrap {
    overflow: hidden;
}
.lead {
    position: relative;
}
.lead::before {
    content: '';
    height: 100%;
    border-radius: 15rem 0 0 15rem;
    background-color: #f7f3ed;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.lead_inner {
    position: relative;
}
.lead_img > img {
    display: block;
}
@media (min-width: 751px) {
    .lead_wrap {
        padding-bottom: 100rem;
    }
    .lead {
        margin-top: 60rem;
        display: flex;
        justify-content: space-between;
    }
    .lead::before {
        width: calc(100% + (50vw - 50%));
    }
    .lead_inner {
        padding: 75rem 0 100rem 55rem;
    }
    .lead_ttl {
        font-size: 34rem;
        line-height: calc(62 / 34);
    }
    .lead_txt {
        margin-top: 50rem;
        font-size: 18rem;
        line-height: calc(44 / 18);
    }
    .lead_img {
        position: absolute;
        top: 140rem;
        right: -165rem;
    }
    .lead_img > img {
        width: 644rem;
    }
    .lead_swiper {
        margin-top: 36rem;
    }
    .lead_swiper .swiper-slide,
    .lead_swiper .swiper-slide img {
        width: 202rem;
    }
    .lead_swiper .swiper-slide + .swiper-slide {
        margin-left: 19rem;
    }
}
@media (max-width: 750px) {
    .lead {
        margin-top: 82rem;
        padding: 50rem 25rem 50rem;
    }
    .lead::before {
        width: calc(100% + 25rem);
    }
    .lead_ttl {
        font-size: 28rem;
        line-height: calc(45 / 28);
        white-space: nowrap;
    }
    .lead_txt {
        margin-top: 30rem;
        font-size: 16rem;
        line-height: calc(33 / 16);
    }
    .lead_img {
        margin-top: 38rem;
        margin-right: -50rem;
        position: relative;
    }
    .lead_img > img {
        width: 325rem;
    }
    .lead_swiper {
        margin-top: 22rem;
    }
    .lead_swiper .swiper-slide,
    .lead_swiper .swiper-slide img {
        width: 145rem;
    }
    .lead_swiper .swiper-slide + .swiper-slide {
        margin-left: 11rem;
    }
}


/* select */
.select {
    position: relative;
}
.select::before {
    content: '';
    border-radius: 0 10rem 10rem 0;
    background-color: #e3e3e3;
    box-shadow: 0 0 15rem rgba(0, 0, 0, 0.13);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.select_ttl {
    font-weight: 700;
    color: #fff;
    background-color: #a39684;
    transform: translateY(-50%);
}
.select_txt img {
    width: 100%;
}

.select_swiper_wrap {
    position: relative;
    --color-black: #383b45;
}
.select_item_wrap {
    border-top: solid var(--main-blue);
    border-bottom: solid var(--main-blue);
}
.select_swiper_wrap .swiper-slide:has( .select_item_gray) {
    border-top-color: #383b45;
    border-bottom-color: #383b45;
}
.select_swiper_wrap .swiper-slide {
    height: 100%;
}
.select_item {
    border-left: 1rem solid #707070;
    background-color: #f7f3ed;
    display: flex;
    flex-direction: column;
}
.select_swiper_wrap .swiper-slide:last-child .select_item {
    border-right: 1rem solid #707070;
}
.select_item_gray {
    color: var(--color-black);
    background-color: #e8e8e8;
}
.select_item_ttl_wrap {
    text-align: center;
    color: #5c5c5c;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}
.select_item_ttl_s {
    display: block;
}
.select_item_txt {
    color: var(--main-blue);
    font-weight: 700;
}
.select_item_ttl_list {
    text-align: left;
}
.select_item_ttl_list > li {
    position: relative;
}
.select_item_ttl_list > li::before {
    content: '';
    background: url(../../images/compare/icon_check.svg) no-repeat left center;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.select_item_img_wrap {
    position: relative;
}
.select_item_img_wrap::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(163, 150, 132, 0.56);
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
}
.select_item_price,
.select_item_info_list {
    color: var(--color-black);
}
.select_item_price_num,
.select_item_price_unit {
    font-weight: 700;
    display: inline-block;
}
.select_item_price_unit {
    vertical-align: text-bottom;
}
.select_item_price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.select_item_price_tax {
    text-align: right;
    color: #383B45;
    margin-top: -12rem;
}
.select_item_public,
.select_item_priceless {
    text-align: center;
    color: #383B45;
    font-weight: 700;
}
.select_item_priceless {
    position: relative;
}
.select_item_priceless + .select_item_priceless::before{
    content: '';
    background: url(../../images/compare/icon_batu.svg) no-repeat center/ auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
} 
.select_item_btn_list {
    display: flex;
    flex-direction: column;
}
.select_item_btn {
    font-weight: 700;
    border-radius: 5rem;
    display: block;
    position: relative;
}
.select_item_btn::before {
    content: '';
    margin: auto;
    background: no-repeat 50% / contain;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.select_item_btn_more::before {
    background-image: url(../../images/compare/arrow_blue.svg);
}
.select_item_btn_material::before {
    background-image: url(../../images/compare/arrow_white.svg);
}
.select_item_btn_more {
    color: var(--color-black);
    background-color: #ffdc26;
}
.select_item_btn_material {
    color: #fff;
    background-color: #a39684;
}
.select_item_info_list_item {
    border-bottom: 1rem solid rgba(112, 112, 112, 0.21);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.select_item_info_list_item > dd {
    font-weight: 700;
}
.select_item_info_list_icon_circle {
    vertical-align: middle;
}
.select_swiper_wrap .swiper-pagination {
    display: flex;
}
.select_swiper_wrap .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.select_swiper_wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
}
.select_swiper_wrap .swiper-pagination-bullet {
    width: 100%;
    height: 1rem;
    border-radius: 0;
    background-color: var(--main-blue);
    opacity: 1;
}
.select_swiper_wrap .swiper-pagination-bullet-active {
    scale: 1 6;
}
.select_swiper_wrap .swiper-button {
    width: 54rem;
    height: 54rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: auto;
    bottom: 0;
}
.select_swiper_wrap .swiper-button-prev {
    border: 1rem solid var(--main-blue);
}
.select_swiper_wrap .swiper-button-next {
    background-color: var(--main-blue);
}
.select_swiper_wrap .swiper-button::after {
    content: '';
    margin: auto;
    background: no-repeat 50% / contain;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.select_swiper_wrap .swiper-button-prev::after {
    rotate: 180deg;
    background-image: url(../../images/compare/arrow_blue.svg);
}
.select_swiper_wrap .swiper-button-next::after {
    background-image: url(../../images/compare/arrow_white.svg);
}
@media (min-width: 751px) {
    .select {
        margin-top: 125rem;
        padding-bottom: 115rem;
    }
    .select::before {
        width: calc(50% - 555rem + 1016rem);
        height: 665rem;
    }
    .select_ttl {
        width: 267rem;
        padding: 10rem 24rem 6rem;
        font-size: 14rem;
        line-height: calc(30 / 14);
    }
    .select_txt {
        width: 813rem;
        margin-top: 10rem;
    }

    .select_swiper_wrap {
        margin-top: 25rem;
        padding-bottom: 104rem;
    }
    .select_swiper {
        box-shadow: 0 0 40rem rgba(93, 95, 101, 0.31);
    }
    .select_swiper_wrap .swiper-slide {
        width: 257rem;
    }
    .select_item_wrap {
        border-top-width: 16rem;
        border-bottom-width: 16rem;
    }
    .select_item {
        min-height: 734rem;
        padding: 15rem 28rem 22rem;
        gap: 10rem;
    }
    .select_item_ttl_wrap {
        gap: 10rem;
    }
    .select_item_ttl_s {
        font-size: 15rem;
        line-height: calc(28 / 15);
    }
    .select_item_txt {
        font-size: 14rem;
        line-height: calc(19 / 14);
        margin-top: 20rem;
    }
    .select_item_ttl_list {
        font-size: 12rem;
        margin-top: 15rem;
    }
    .select_item_ttl_list > li + li {
        margin-top: 5rem;
    }
    .select_item_ttl_list > li {
        padding-left: 16rem;
    }
    .select_item_ttl_list > li::before {
        width: 11rem;
        height: 7rem;
    }
    .select_item_ttl img {
        width: 214rem;
        margin-top: 10rem;
    }
    .select_item_ttl_1 {
        margin-bottom: 17rem;
    } 
    .select_item_img {
        width: 201rem;
    }
    .select_item_price_txt {
        padding-bottom: 8rem;
        font-size: 11rem;
        line-height: calc(13 / 11);
    }
    .select_item_price_num {
        font-size: 37rem;
        line-height: calc(46 / 37);
    }
    .select_item_price_unit {
        font-size: 16rem;
        line-height: calc(20 / 16);
    }
    .select_item_price_tax {
        font-size: 11rem;
    }
    .select_item_public {
        font-size: 29rem;
        margin-block: 10rem;
    }
    .select_item_priceless {
        font-size: 18rem;
    }
    .select_item_priceless + .select_item_priceless::before{
        width: 10px;
        height: 10px;
        top: -11px;
    } 
    .select_item_btn_list {
        gap: 16rem;
    }
    .select_item_btn_list > li,
    .select_item_btn {
        height: 45rem;
    }
    .select_item_btn {
        padding: 12rem 14rem;
        font-size: 16rem;
    }
    .select_item_btn::before {
        width: 20rem;
        height: 13rem;
        right: 17rem;
    }
    .select_item_info_list_item {
        padding-block: 6rem;
        font-size: 14rem;
    }
    .select_item_info_list_icon_circle {
        width: 14rem;
    }
    .select_swiper_wrap .swiper-pagination {
        width: 890rem;
        bottom: 24rem;
    }
    .select_swiper_wrap .swiper-button::after {
        width: 20rem;
        height: 13rem;
    }
    .select_swiper_wrap .swiper-button-prev {
        left: auto;
        right: 78rem;
    }
    .select_swiper_wrap .swiper-button-next {
        right: 0;
    }
}
@media (max-width: 750px) {
    .select {
        margin-top: 80rem;
        padding-bottom: 95rem;
    }
    .select::before {
        width: 350rem;
        height: 665rem;
    }
    .select_ttl {
        width: 267rem;
        padding: 8rem 24rem;
        font-size: 14rem;
        line-height: calc(30 / 14);
    }
    .select_txt {
        width: 294rem;
    }

    .select_swiper_wrap {
        margin-top: 35rem;
        padding-bottom: 128rem;
    }
    .select_swiper {
        box-shadow: 0 0 20rem rgba(93, 95, 101, 0.31);
        overflow: visible;
    }
    .select_swiper_wrap .swiper-slide {
        width: 246rem;
    }
    .select_item_wrap {
        border-top-width: 13rem;
        border-bottom-width: 13rem;
    }
    .select_item {
        min-height: 670rem;
        padding: 13rem 25rem 20rem;
        gap: 10rem;
    }
    .select_item_ttl_wrap {
        gap: 5rem;
    }
    .select_item_ttl_s {
        font-size: 12rem;
        line-height: calc(24 / 12);
    }
    .select_item_txt {
        font-size: 12rem;
        line-height: calc(16 / 12);
        margin-top: 20rem;
    }
    .select_item_ttl_list {
        font-size: 11rem;
        margin-top: 15rem;
    }
    .select_item_ttl_list > li + li {
        margin-top: 5rem;
    }
    .select_item_ttl_list > li {
        padding-left: 14rem;
    }
    .select_item_ttl_list > li::before {
        width: 10rem;
        height: 7rem;
    }
    .select_item_ttl img {
        width: 184rem;
        margin-top: 12rem;
    }
    .select_item_ttl_1 {
        margin-bottom: 16rem;
    }
    .select_item_img {
        width: 100%;
    }
    .select_item_price_txt {
        padding-bottom: 6rem;
        font-size: 10rem;
        line-height: calc(12 / 10);
    }
    .select_item_price_num {
        font-size: 34rem;
        line-height: calc(42 / 34);
    }
    .select_item_price_unit {
        font-size: 14rem;
        line-height: calc(18 / 14);
        margin-left: -8rem; 
    }
    .select_item_price_tax {
        font-size: 10rem;
    }
    .select_item_public {
        font-size: 25rem;
        margin-block: 9rem 10px;
    }
    .select_item_priceless {
        font-size: 15rem;
    }
    .select_item_priceless + .select_item_priceless {
        margin-top: 2rem;
    }
    .select_item_priceless + .select_item_priceless::before{
        width: 9px;
        height: 9px;
        top: -10px;
    } 
    .select_item_btn_list {
        gap: 13rem;
    }
    .select_item_btn_list > li {
        height: 37rem;
    }
    .select_item_btn {
        padding: 13rem 12rem 11rem;
        font-size: 14rem;
    }
    .select_item_btn::before {
        width: 17rem;
        height: 11rem;
        right: 14rem;
    }
    .select_item_info_list_item {
        padding-block: 5rem;
        font-size: 12rem;
    }
    .select_item_info_list_icon_circle {
        width: 13rem;
    }
    .select_swiper_wrap .swiper-pagination {
        bottom: 83rem;
    }
    .select_swiper_wrap .swiper-button::after {
        width: 20rem;
        height: 13rem;
    }
    .select_swiper_wrap .swiper-button-prev {
        left: auto;
        right: calc(50% + 12rem);
    }
    .select_swiper_wrap .swiper-button-next {
        left: calc(50% + 12rem);
        right: auto;
    }
}
@media (min-width: 751px) {
    @media (hover:hover) {
        .select_item_btn {
            overflow: hidden;
        }
        .select_item_btn_inner,
        .select_item_btn_shadow {
            display: block;
        }
        .select_item_btn_inner {
            translate: 0 0;
            transition: translate 0.6s 0s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .select_item_btn_shadow {
            margin-top: 20rem;
        }
        .select_item_btn:hover .select_item_btn_inner {
            translate: 0 -40rem;
        }
        .select_swiper_wrap .swiper-button {
            transition: opacity 0.3s;
        }
        .select_swiper_wrap .swiper-button:hover {
            opacity: 0.7;
        }
    }
}