/*---------
共通
----------*/

.l-page {
    padding-bottom: calc(100px / 2);
    padding-top: calc(120px / 2);
}

[class^="section_content--"]:not(:last-child) {
    padding-bottom: calc(80px / 2);
}

.section_title {
    font-size: calc(60px / 2);
    font-weight: bold;
    color: var(--main-color);
    line-height: calc(30 / 30);
    font-family: var(--main-font);
    text-align: center;
    margin-bottom: calc(10px / 2);
}

.section_title span {
    color: var(--text-color);
}

.section_subtitle {
    font-size: calc(28px / 2);
    font-weight: bold;
    color: var(--main-color);
    line-height: calc(14 / 14);
    font-family: var(--sub-font);
    text-align: center;
}

.section_title_block {
    position: relative;
    margin-bottom: calc(60px / 2);
}


.section_title_block::after {
    content: "";
    position: absolute;
    background: #0089D4;
    width: calc(70px / 2);
    height: calc(3px / 2);
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.title_icon {
    display: block;
    width: calc(174px / 2);
    height: calc(99px / 2);
    margin: 0 auto 10px;
}


@media (min-width:768px) {

    /*---------
        共通
    ----------*/

    .l-page {
        padding-top: 88px;
        padding-bottom: 100px;
    }

    [class^="section_content--"]:not(:last-child) {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0;
    }

    .section_title_block {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 25px;
        margin-bottom: 40px;
    }

    .section_title {
        font-size: clamp(36px, calc(50px + 50vw - 570px), 50px);
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .section_subtitle {
        font-size: 24px;
        line-height: 1.2;
    }

    .title_icon {
        width: 174px;
        height: 99px;
        margin: 0;
    }

    .section_title_block::after {
        width: 60px;
        height: 2px;
        top: 120%;
    }
}


/*-------- メイン ----------*/

/*---------
mv
----------*/


/* スマホ画像表示 */
.slider-list .sp_in {
    display: block;
}

/* PC画像表示 */
.slider-list .pc_in {
    display: none;
}


.mv {
    padding-bottom: calc(80px / 2);
}

.top_view {
    position: relative;
    width: 100%;
    height: calc(1094px / 2);
    overflow: hidden;
}

/* 前面固定エリア */
.mv-fixed-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* スライダーより上 */
    pointer-events: none;
}

.mv-container {
    position: relative;
    z-index: 12;
    max-width: calc(670px / 2);
    /* コンテンツ幅に合わせて調整 */
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: calc(35px / 2);
}

.main_catch {
    width: calc(670px / 2);
}

.main_catch img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 青い透過レイヤー（左から右へ透明に） */
.mv-overlay {
    position: absolute;
    top: calc(55px / 2);
    right: 0;
    width: calc(310px / 2);
    height: calc(297px / 2);
    background: url("../images/top/mv-overlay_bg_sp.png") no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 11;
}

/* 背面スライダー */
.mv-inner {
    position: relative;
    z-index: 1;
    /* 一番下 */
}

.slider-list,
.slider-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slider-list img {
    width: 100%;
    height: calc(1094px / 2);
    /* .top_view と合わせる */
    object-fit: cover;
}


@media (min-width:768px) {


    /* スマホ画像表示 */
    .slider-list .sp_in {
        display: none;
    }

    /* PC画像表示 */
    .slider-list .pc_in {
        display: block;
    }

    .mv {
        padding-bottom: 80px;
    }

    .top_view {
        position: relative;
        width: 100%;
        height: 752px;
        overflow: hidden;
    }

    /* 前面固定エリア */
    .mv-fixed-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        /* スライダーより上 */
        pointer-events: none;
        /* スライダーの操作を邪魔しない */
    }

    .mv-container {
        position: relative;
        z-index: 12;
        max-width: 1400px;
        /* コンテンツ幅に合わせて調整 */
        margin: 0 auto;
        height: 100%;
        align-items: center;
        /* 上下中央 */
        padding-left: clamp(25px, calc(55px + 50vw - 620px), 55px);
        padding-top: 0;
    }

    .main_catch {
        width: clamp(350px, calc(503px + 50vw - 570px), 503px);
    }

    .mv-container::after {
        content: "";
        position: absolute;
        background: url("../images/top/main_catch_deco.png") center / cover no-repeat;
        width: 100%;
        height: 100%;
        width: clamp(286px, calc(386px + 50vw - 770px), 386px);
        height: clamp(247px, calc(347px + 50vw - 770px), 347px);
        top: 40%;
        left: clamp(0px, calc(900px - 50vw), 150px);
        transform: translate(-50%, -50%);
    }


    /* 青い透過レイヤー（左から右へ透明に） */
    .mv-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../images/top/mv-overlay_bg.png") no-repeat;
        background-position: left center;
        background-size: 100% 100%;
        z-index: 11;
    }

    /* 背面スライダー */
    .mv-inner {
        position: relative;
        z-index: 1;
        /* 一番下 */
    }

    .slider-list,
    .slider-list li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .slider-list img {
        width: 100%;
        height: 752px;
        /* .top_view と合わせる */
        object-fit: cover;
        /* 画像を枠いっぱいに収める */
    }

}



/*---------
reason
----------*/

/*----共通ブロック ----*/

.section_content--reason .section_title {
    position: relative;
    margin-bottom: calc(80px / 2);
}

.section_content--reason .section_title::after {
    content: "";
    position: absolute;
    background: #0089D4;
    width: calc(70px / 2);
    height: calc(3px / 2);
    top: 140%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*----コンテンツブロック ----*/

.reason_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, 153.5px);
    gap: calc(40px / 2);
    justify-content: center;
    margin-bottom: calc(40px / 2);
}

.reason_item {
    max-width: calc(307px / 2);
    width: 100%;
    height: calc(215px / 2);
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.45);
}

.reason_detail {
    background: url("../images/top/reason_item_bg_sp.png") center / cover no-repeat;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.reason_detail_num {
    width: calc(120px / 2);
    height: calc(35px / 2);
    border-radius: 30px;
    background: linear-gradient(to bottom, #0089D4 0%, #0089D4 50%, #5FC6FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(24px / 2);
    font-weight: 500;
    font-family: var(--sub-font);
    color: var(--sub-text-color);
    margin: 0 auto 5px;
}

.reason_detail_text {
    font-size: calc(32px / 2);
    font-weight: 600;
    color: var(--main-color);
    line-height: calc(24 / 16);
    text-align: center;
}

.note_text {
    font-size: calc(28px / 2);
    line-height: calc(15 / 14);
}



@media (min-width:768px) {

    /*----共通ブロック ----*/

    .l-page .section_content--reason {
        padding-bottom: 80px;
    }

    .section_content--reason .section_title {
        margin-bottom: 70px;
    }

    .section_content--reason .section_title::after {
        width: 60px;
        height: 2px;
        top: 120%;
    }


    .section_content--reason .content_box {
        max-width: 1240px;
        margin: 0 auto;
    }

    /*----コンテンツブロック ----*/

    .note_text.pc_in {
        display: block;
    }

    .note_text.sp_in {
        display: none;
    }

    .reason_list {
        gap: 50px;
        grid-template-columns: repeat(auto-fit, 380px);
        margin-bottom: 0;
    }

    .reason_item {
        max-width: 380px;
        height: 218px;
    }

    .reason_detail {
        background: url("../images/top/reason_item_bg.png") center / cover no-repeat;
    }

    .reason_detail_num {
        width: 120px;
        height: 35px;
        font-size: 24px;
        font-weight: 500;
        margin: 0 auto 10px;
    }

    .reason_detail_text {
        font-size: 32px;
        line-height: calc(40 / 32);
    }

    .note_text {
        font-size: 14px;
        line-height: calc(28 / 14);
        margin-top: 10px;
    }

}



/*---------
availability
----------*/


/*----共通ブロック ----*/

.l-page .section_content--availability {
    background: url("../images/top/availability_contents_bg.jpg") center / cover no-repeat;
    padding: 30px 0;
}

.section_content--availability .title_block {
    margin-bottom: 20px;
}


/*----コンテンツブロック ----*/

.news_list {
    display: flex;
    flex-direction: column;
    gap: calc(30px / 2);
    margin-bottom: calc(60px / 2);
}

.news_item {
    padding: 0 15px 15px;
    border-bottom: 1px solid #333333;
}

.news_item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.news_detail {
    display: flex;
    flex-direction: column;
    gap: calc(10px / 2);
    position: relative;
}

.date_text {
    font-size: calc(28px / 2);
    font-weight: 400;
    color: var(--text-color);
    font-family: var(--main-font);
}

.news_bottom_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news_title {
    font-size: calc(32px / 2);
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--main-font);
    display: flex;
    align-items: center;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding-right: 20px;
}

.news_detail::after {
    content: "";
    position: absolute;
    background: url("../images/availability/news_title_arrow.png") center / cover no-repeat;
    width: calc(30px / 2);
    height: calc(30px / 2);
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@media (min-width:768px) {

    /*----共通ブロック ----*/

    .l-page .section_content--availability {
        padding: 60px 20px;
    }

    .section_content--availability .title_block {
        margin-bottom: 40px;
    }

    .section_content--availability .content_box {
        max-width: 960px;
        margin: 0 auto;
    }

    /*----コンテンツブロック ----*/

    .news_list {
        gap: 30px;
        margin-bottom: 60px;
    }

    .news_item {
        padding: 0 30px 30px;
        border-bottom: 1px solid #333333;
    }

    .news_detail {
        align-items: center;
        flex-direction: row;
        gap: 50px;
    }

    .date_text {
        font-size: 16px;
    }

    .news_title {
        font-size: 16px;
        padding-right: 30px;
    }


    /* PCホバー時に動く */
    .news_detail:hover::after {
        transform: translateY(-50%) translateX(10px);
    }

    .news_detail::after {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
        top: 50%;
        transform: translateY(-50%);
    }

}


/*---------
car lease lineup
----------*/

/*----共通ブロック ----*/

.l-page .section_content--car-lease {
    padding: 40px 0;
}

.section_content--car-lease .section_space {
    width: 100%;
}

/*----コンテンツブロック ----*/

.car-lease_list {
    margin-bottom: calc(40px / 2);
    align-items: stretch;
}

.car-lease_detail {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.45);
    padding: calc(30px / 2);
}

.car-lease_photo {
    margin-bottom: calc(30px / 2);
}

.car-lease_photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.car-lease_meta {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.car-lease_en_title {
    font-size: calc(32px / 2);
    font-weight: 500;
    font-family: var(--sub-font);
    color: var(--text-color);
    margin-bottom: calc(10px / 2);
}

.car-lease_title {
    font-size: calc(56px / 2);
    font-weight: bold;
    color: var(--text-color);
    padding-bottom: calc(20px / 2);
    margin-bottom: calc(20px / 2);
    border-bottom: 1px solid #333333;
}

.car-lease_meta_text {
    font-size: calc(32px / 2);
    font-weight: 400;
    font-family: var(--main-font);
    color: var(--text-color);
    line-height: calc(28 / 16);
    margin-bottom: calc(40px / 2);
}

.car-lease_item .ui_btn--blue {
    font-size: calc(28px / 2);
    font-weight: 600;
    max-width: calc(410px / 2);
    width: 100%;
    height: calc(70px / 2);
    margin-top: auto;
}

/* ページャー */
.pager_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(40px / 2);
    margin-right: 20px;
}

.pager_btn_left,
.pager_btn_right {
    width: calc(72px / 2);
    height: calc(72px / 2);
}

.pager_btn_left {
    background: url("../images/top/pager_btn_left_icon.png") center / cover no-repeat;
}

.pager_btn_right {
    background: url("../images/top/pager_btn_right_icon.png") center / cover no-repeat;
}

/* 無効時 */
.pager_btn_left.swiper-button-disabled,
.pager_btn_right.swiper-button-disabled {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed;
    pointer-events: none;
}

.car-lease_item {
    position: relative;
    height: 100%;
    display: flex;
}

.car-lease_meta_bottom {
    margin-top: auto;
    display: flex;
    /* フレックスボックス化 */
    flex-direction: column;
    /* 縦並び */
    flex-grow: 1;
    /* 余白があればエリアを下に伸ばす */
}


@media (min-width: 768px) {
    /*----共通ブロック ----*/

    .l-page .section_content--car-lease {
        padding: 120px 0;
        position: relative;
        overflow: visible;
    }

    .section_content--car-lease .section_title_block {
        margin-bottom: 60px;
    }

    .section_content--car-lease::before {
        content: "";
        position: absolute;
        background: url("../images/top/section_content-car-lease_deco01.png") center / cover no-repeat;
        width: clamp(400px, calc(539px + 50vw - 570px), 539px);
        height: clamp(412px, calc(562px + 50vw - 570px), 562px);
        top: -210px;
        right: 0;
        z-index: 0;
        pointer-events: none;
    }

    .section_content--car-lease::after {
        content: "";
        position: absolute;
        background: url("../images/top/section_content-car-lease_deco02.png") center / cover no-repeat;
        width: 254px;
        height: 1088px;
        bottom: -430px;
        left: 0;
        z-index: -1;
        pointer-events: none;
    }

    .section_content--car-lease .section_space {
        width: 100%;
    }

    .section_content--car-lease .section_subtitle {
        text-align: left;
        margin-left: 30px;
    }

    /*----コンテンツブロック ----*/

    .car-lease_list {
        margin-bottom: 0;
    }

    .car-lease_detail {
        display: block;
        width: 400px;
        padding: 30px;
    }

    .car-lease_photo {
        margin-bottom: 20px;
    }

    .car-lease_en_title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .car-lease_title {
        font-size: 30px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .car-lease_meta_text {
        font-size: 16px;
        line-height: calc(28 / 16);
        margin-bottom: 30px;
    }

    .car-lease_item .ui_btn--blue {
        font-size: 16px;
        max-width: 240px;
        height: 42px;
    }

    .car-lease_detail:hover .ui_btn--blue {
        color: #0089D4;
        border: 1px solid #0089D4;
    }

    /* 親(detail)がホバーされたとき、子(btn)の背景スライドを動かす */
    .car-lease_detail:hover .ui_btn--blue::before {
        transform: skewX(0) translateX(0);
    }

    /* 親(detail)がホバーされたとき、子(btn)のアイコンを変える */
    .car-lease_detail:hover .ui_btn--blue::after {
        background: url("../images/common/ui_btn-white_icon.png") center / cover no-repeat;
    }

    .car-lease_swiper.swiper {
        overflow: visible;
    }

    /* リスト：flex-wrapを有効にして、カードが折り返されるようにする */
    .car-lease_list.swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        transform: none !important;
        /* Swiperの移動を無効化 */
    }

    .car-lease_item.swiper-slide {
        display: flex;
        max-width: fit-content;
    }

    .pager_box {
        display: none;
    }
}

/*---------
price
----------*/


/*----共通ブロック ----*/

.card_photo {
    margin-bottom: calc(30px / 2);
}

.card_text {
    font-size: calc(32px / 2);
    font-weight: 400;
    line-height: calc(28 / 16);
    margin-bottom: calc(60px / 2);
}


/*----コンテンツブロック ----*/


@media (min-width:768px) {

    /*----共通ブロック ----*/

    .l-page .section_content--price {
        padding-bottom: 120px;
    }

    .section_content--price .title_block {
        margin-right: 200px;
    }


    .section_content--price .section_title_block {
        margin-bottom: 70px;
    }


    /*----コンテンツブロック ----*/

    .content_card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 50px;
        margin-bottom: 0;
    }

    .card_photo {
        max-width: 640px;
        margin-bottom: 0;
    }

    .card_des {
        flex: 1 1 50%;
        max-width: 480px;
    }

    .card_text {
        font-size: 16px;
        margin-bottom: 50px;
    }

}


/*---------
guidance
----------*/

/*----共通ブロック ----*/

.l-page .section_content--guidance {
    padding: 30px 0;
}

.section_content--guidance {
    background: url("../images/top/guidance_contents_bg.jpg") center / cover no-repeat;
}


/*----コンテンツブロック ----*/

.guidance_list {
    max-width: calc(654px / 2);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: calc(40px / 2);
}

[class*="guidance_item--"] {
    max-width: calc(654px / 2);
}

[class*="guidance_item--"] .guidance_detail {
    width: 100%;
    height: calc(460px / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

[class*="guidance_item--"] .guidance_detail::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.guidance_item--how_to_use .guidance_detail {
    background: url("../images/top/guidance_item--how_to_use_img.jpg") center / cover no-repeat;
}

.guidance_item--compensation .guidance_detail {
    background: url("../images/top/guidance_item--compensation_img.jpg") center / cover no-repeat;
}

.guidance_title_box {
    position: relative;
    z-index: 2;
}

.guidance_title_icon {
    display: block;
    width: calc(174px / 2);
    height: calc(99px / 2);
    margin: 0 auto 10px;
}

.guidance_title_block {
    text-align: center;
    color: var(--sub-text-color);
}

.guidance_title {
    font-size: calc(60px / 2);
    font-weight: bold;
    margin-bottom: calc(5px / 2);
}

.guidance_subtitle {
    font-size: calc(28px / 2);
    font-weight: bold;
    font-family: var(--sub-font);
}

@media (min-width:768px) {

    /*----共通ブロック ----*/

    .l-page .section_content--guidance {
        padding: 60px 0;
    }

    .section_content--guidance {
        background: url("../images/top/guidance_contents_bg.jpg") center / cover no-repeat;
    }


    /*----コンテンツブロック ----*/

    .guidance_list {
        max-width: 100%;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 60px;
    }

    [class*="guidance_item--"] {
        flex: 1 1 50%;
        max-width: 550px;
    }

    [class*="guidance_item--"] .guidance_detail {
        max-width: 100%;
        width: 100%;
        height: 400px;
    }

    .guidance_title_icon {
        width: 174px;
        height: 99px;
        margin: 0 auto 10px;
    }

    .guidance_title {
        font-size: clamp(36px, calc(50px + 50vw - 570px), 50px);
        margin-bottom: 10px;
    }

    .guidance_subtitle {
        font-size: 24px;
    }

    /* ホバー時 */
    [class*="guidance_item--"] .guidance_detail:hover {
        opacity: .7;
    }

}

/*---------
buying & sales
----------*/


/*----共通ブロック ----*/

.section_content--buy_and_sel {
    padding-top: calc(80px / 2);
}

.section_content--buy_and_sel .section_title_block::after {
    top: 120%;
}

/*----コンテンツブロック ----*/

@media (min-width:768px) {


    /*----共通ブロック ----*/

    .l-page .section_content--buy_and_sel {
        padding: 100px 0;
    }

    .section_content--buy_and_sel .section_title_block::after {
        width: 480px;
    }

    .section_content--buy_and_sel .section_title_block {
        justify-content: flex-start;
    }

    .section_content--buy_and_sel .section_subtitle {
        text-align: left;
    }

    /*----コンテンツブロック ----*/

}

/* レスポンシブレイアウト用 */
@media (min-width: 768px) and (max-width: 1170px) {

    .section_content--buy_and_sel .content_card {
        flex-direction: column-reverse;
    }


}



/*---------
company
----------*/

/*----共通ブロック ----*/

.l-page .section_content--company {
    padding: 30px 0;
}

.section_content--company {
    background: url("../images/top/company_contents_bg_sp.jpg") center / cover no-repeat;
}

.section_content--company .title_block {
    padding-bottom: calc(20px / 2);
    margin-bottom: calc(20px / 2);
    border-bottom: 1px solid #fff;
}

.section_content--company .section_title,
.section_content--company .section_subtitle {
    text-align: left;
    color: var(--sub-text-color);
}

.section_content--company .section_title {
    font-size: calc(56px / 2);
    margin-bottom: calc(20px / 2);
}

.section_content--company .section_subtitle {
    font-size: calc(32px / 2);
}

.section_content--company .card_text {
    color: #fff;
}



@media (min-width:768px) {


    /*----共通ブロック ----*/

    .l-page .section_content--company {
        padding: 60px 0;
    }

    .section_content--company {
        background: url("../images/top/company_contents_bg.jpg") center / cover no-repeat;
    }

    .section_content--company .card_photo {
        max-width: 550px;
    }

    .card_meta {
        flex: 1 1 50%;
        max-width: 480px;
    }

    .section_content--company .title_block {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #fff;
    }

    .section_content--company .section_title,
    .section_content--company .section_subtitle {
        text-align: left;
        color: var(--sub-text-color);
    }

    .section_content--company .section_title {
        font-size: clamp(36px, calc(50px + 50vw - 570px), 50px);
        margin-bottom: 10px;
    }

    .section_content--company .section_subtitle {
        font-size: 24px;
    }

    .section_content--company .card_text {
        color: #fff;
    }
}


/*---------
contact
----------*/

/*----共通ブロック ----*/

.section_content--contact {
    padding-top: calc(80px / 2);
}

.section_content--contact .section_title,
.section_content--contact .section_subtitle {
    color: var(--sub-text-color);
}

.section_content--contact .title_block {
    margin-bottom: calc(40px / 2);
}

.section_content--contact .section_title {
    line-height: calc(40 / 30);
}



/*----コンテンツブロック ----*/

.contact-qa .c-btn-qa {
    max-width: calc(654px / 2);
    height: calc(92px / 2);
    background: linear-gradient(to bottom, #0089D4 0%, #0089D4 50%, #5FC6FF 100%);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(20px / 2);
    margin: 0 auto 50px;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.45);
    position: relative;
}

.contact-qa .c-btn-qa::after {
    content: "";
    position: absolute;
    background: url("../images/top/c-btn-qa_icon.png") center / cover no-repeat;
    width: calc(30px / 2);
    height: calc(30px / 2);
    top: 0;
    right: 5%;
    bottom: 0;
    margin: auto;
}

.c-btn-qa__label {
    width: calc(106px / 2);
    height: calc(40px / 2);
    background: #fff;
    border-radius: 30px;
    font-size: calc(28px / 2);
    font-weight: bold;
    color: var(--main-color);
    font-family: var(--sub-font);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-btn-qa__text {
    font-size: calc(36px / 2);
    font-weight: bold;
    color: var(--sub-text-color);
    font-family: var(--main-font);
}

.contact_main-box {
    background: url("../images/top/contact_main-box_bg.jpg") center / cover no-repeat;
    padding: 30px 27px;
}

.contact-body__lead {
    font-size: calc(32px / 2);
    font-weight: bold;
    color: var(--sub-text-color);
    font-family: var(--main-font);
    line-height: calc(27 / 16);
    text-align: center;
    margin-bottom: calc(30px / 2);
}

.contact-tel {
    margin-bottom: calc(50px / 2);
}

.contact-tel__number {
    font-size: calc(48px / 2);
    font-weight: bold;
    color: var(--sub-text-color);
    font-family: var(--sub-font);
    line-height: calc(20 / 24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(10px / 2);
}

.contact-tel__number::before {
    content: "";
    background: url("../images/common/contact-tel_icon.png") center / cover no-repeat;
    width: calc(30px / 2);
    height: calc(35px / 2);
    margin-right: calc(10px / 2);
}

.contact-tel__time {
    font-size: calc(32px / 2);
    font-weight: 500;
    color: var(--sub-text-color);
    font-family: var(--main-font);
    line-height: calc(16 / 16);
    text-align: center;
}

.contact-action {
    max-width: calc(540px / 2);
    margin: 0 auto;
}

.c-btn-primary {
    max-width: calc(540px / 2);
    height: calc(80px / 2);
    background: var(--sub-color);
    border-radius: 60px;
    display: flex;
    align-items: center;
    font-size: calc(36px / 2);
    font-weight: 600;
    font-family: var(--main-font);
    color: var(--text-color);
    position: relative;
    padding-left: calc(55px / 2);
}

.c-btn-primary::after {
    content: "";
    position: absolute;
    background: url("../images/common/c-btn-primary_btn_icon.png") center / cover no-repeat;
    width: calc(40px / 2);
    height: calc(40px / 2);
    top: 0;
    right: 5%;
    bottom: 0;
    margin: auto;
}

@media (min-width:768px) {


    /*----共通ブロック ----*/

    .section_content--contact {
        padding: 100px 20px 0;

    }

    .section_content--contact .title_block {
        margin-bottom: 20px;
    }

    .section_content--contact .section_title {
        line-height: calc(40 / 30);
    }



    /*----コンテンツブロック ----*/

    .contact-qa .c-btn-qa {
        max-width: 790px;
        height: 92px;
        border-radius: 50px;
        gap: 30px;
        margin: 0 auto 100px;
        position: relative;
    }

    .contact-qa .c-btn-qa:hover {
        opacity: .7;
    }

    .contact-qa .c-btn-qa::after {
        width: 30px;
        height: 30px;
    }

    .c-btn-qa__label {
        width: 106px;
        height: 40px;
        border-radius: 30px;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .c-btn-qa__text {
        font-size: 38px;
    }

    .contact_main-box {
        padding: 60px 20px;
    }

    .contact-body__lead {
        font-size: 24px;
        line-height: calc(30 / 24);
        word-break: keep-all;
        margin-bottom: 30px;
    }

    .contact-body_bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(50px, calc(100px + 50vw - 570px), 100px);
    }

    .contact-tel {
        margin-bottom: 0;
    }

    .contact-tel__number {
        font-size: 46px;
        line-height: calc(40 / 46);
        margin-bottom: 10px;
    }

    .contact-tel__number::before {
        width: 30px;
        height: 35px;
        margin-right: 10px;
    }

    .contact-tel__time {
        font-size: 18px;
        line-height: calc(30 / 18);
    }

    .contact-action {
        flex: 1 1 50%;
        max-width: 330px;
        margin: 0;
    }

    .contact-action:hover {
        opacity: .7;
    }


    .c-btn-primary {
        max-width: 100%;
        height: 70px;
        border-radius: 40px;
        justify-content: center;
        font-size: 18px;
        padding: 0;
    }

    .c-btn-primary::after {
        width: 22px;
        height: 22px;
    }
}