@charset "utf-8";

/* ==================================================================
   ガレージ復旧支援LP  SP用 (max-width: 768px)
   デザインはPC版のみ支給。縦積みに組み替えている
================================================================== */

.garage_recovery {
    color: #595757;
    line-height: 1.8;
}

.garage_recovery img {
    display: block;
    max-width: 100%;
}

.garage_recovery h2,
.garage_recovery h3 {
    font-weight: 700;
}

/* ------------------------------------
    キービジュアル
------------------------------------- */
.recovery_kv_wrap {
    display: block;
    width: 100vw;
    margin-left: -6vw;
    margin-right: 0;
    border-top: 1px solid #eee;
}

.recovery_kv_logo {
    width: 100vw;
    height: 24vw;
    background-image: url(/common/img/common/garuxgarage_logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 42vw;
}

.recovery_kv {
    position: relative;
    width: 100vw;
    height: 76vw;
    padding: 6vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.recovery_kv:after {
    content: "";
    display: block;
    background-image: url(/common/img/garage_recovery/kv_recovery_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
}

.recovery_kv:before {
    content: "";
    display: block;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .4) 100%);
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.recovery_kv * {
    color: #fff;
    text-shadow: #000 1px 0 10px;
}

.recovery_kv_lead {
    font-size: 3.2vw;
    line-height: 1.6;
    margin-bottom: 3vw;
}

.recovery_kv h1 {
    width: 88vw;
    margin: 0 auto 3.5vw;
    padding: 3vw 2vw;
    background-color: rgba(0, 0, 0, .25);
    font-size: 4.4vw;
    font-weight: bold;
    line-height: 1.5;
}

.recovery_kv_sub {
    font-size: 3vw;
    line-height: 1.8;
}

/* ------------------------------------
    お見舞い
------------------------------------- */
.recovery_message {
    padding: 10vw 0 9vw;
    text-align: center;
}

.recovery_message h2 {
    font-size: 4.8vw;
    line-height: 1.5;
}

.recovery_message h2:after {
    content: "";
    display: block;
    width: 88vw;
    margin: 4vw auto 0;
    border-bottom: 2px dotted #c9c4b6;
}

.recovery_message_body {
    width: 88vw;
    margin: 4vw auto 0;
    text-align: left;
    font-size: 3.5vw;
    line-height: 2;
}

.recovery_message_body p+p {
    margin-top: 2.5vw;
}

/* ------------------------------------
    こんなことに困っていませんか？
------------------------------------- */
.recovery_needs_title_wrap {
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 7vw 6vw 0;
}

.recovery_needs_title_wrap h2 {
    font-size: 4.4vw;
    line-height: 1.5;
}

.recovery_needs_boxs {
    display: block;
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 7vw 6vw 8vw;
}

.recovery_needs_box {
    position: relative;
    width: 100%;
    margin-bottom: 5vw;
    background-color: #fff;
    border-radius: 2vw;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .13);
    overflow: hidden;
}

.recovery_needs_box:last-child {
    margin-bottom: 0;
}

.recovery_needs_box:nth-child(1):before { background-image: url(/common/img/garage_recovery/needs_01.jpg); }
.recovery_needs_box:nth-child(2):before { background-image: url(/common/img/garage_recovery/needs_02.jpg); }
.recovery_needs_box:nth-child(3):before { background-image: url(/common/img/garage_recovery/needs_03.jpg); }
.recovery_needs_box:nth-child(4):before { background-image: url(/common/img/garage_recovery/needs_04.jpg); }
.recovery_needs_box:nth-child(5):before { background-image: url(/common/img/garage_recovery/needs_05.jpg); }

/* 写真はこの帯だけに敷く（カード全体に敷くと拡大されすぎる） */
.recovery_needs_box:before {
    content: "";
    display: block;
    width: 100%;
    height: 44vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.recovery_needs_box:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f058";
    display: block;
    position: absolute;
    top: 44vw;
    left: 50%;
    margin-left: -5vw;
    margin-top: -5vw;
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
    font-size: 7.5vw;
    text-align: center;
    background-color: #fff;
    color: #768c98;
    border-radius: 100vw;
}

.recovery_needs_box p {
    background-color: #fff;
    padding: 8vw 5vw 6vw;
    font-size: 3.5vw;
    line-height: 1.8;
    text-align: center;
}

/* ------------------------------------
    POINT 01〜04
------------------------------------- */
.recovery_points h2.txt_type_01 {
    font-size: 4.6vw;
    line-height: 1.5;
}

.recovery_point {
    display: block;
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 8vw 6vw;
    margin-bottom: 3vw;
}

.recovery_point_img {
    width: 100%;
}

.recovery_point_img img {
    width: 100%;
    height: auto;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, .18);
}

.recovery_point_txt {
    width: 100%;
    margin-top: 6vw;
}

.recovery_point_no {
    font-size: 3.6vw;
    font-weight: 700;
    letter-spacing: .08em;
    color: #938460;
    margin-bottom: 1vw;
}

.recovery_point_txt h3 {
    font-size: 4.8vw;
    line-height: 1.5;
    color: #967326;
    padding-bottom: 3vw;
    margin-bottom: 4vw;
    border-bottom: 1px solid #c7c2b4;
}

.recovery_point_txt p {
    font-size: 3.5vw;
    line-height: 1.9;
}

/* ------------------------------------
    復旧補助金サポート
------------------------------------- */
.recovery_subsidy {
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 10vw 6vw 8vw;
    text-align: center;
}

.recovery_subsidy h2 {
    font-size: 4.6vw;
    line-height: 1.6;
}

.recovery_subsidy_title_sub {
    display: block;
    font-size: 4vw;
    margin-bottom: 1.5vw;
}

.recovery_subsidy_note {
    text-align: left;
    margin: 4vw 0 7vw;
    font-size: 2.9vw;
    line-height: 1.7;
    color: #7d7a74;
}

.recovery_subsidy_boxs {
    display: block;
}

.recovery_subsidy_box {
    width: 100%;
    margin-bottom: 7vw;
    background-color: #fff;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, .15);
    text-align: left;
}

.recovery_subsidy_box:last-child {
    margin-bottom: 0;
}

.recovery_subsidy_box img {
    width: 100%;
    height: auto;
}

.recovery_subsidy_box_body {
    padding: 6vw 5vw 7vw;
}

.recovery_subsidy_box h3 {
    font-size: 4.2vw;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 4vw;
}

.recovery_subsidy_box p {
    font-size: 3.4vw;
    line-height: 1.9;
}

/* ------------------------------------
    お客様の声
------------------------------------- */
.recovery_voc_head {
    margin-left: -6vw;
    width: 100vw;
    height: 50vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/common/img/garage_recovery/voc_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.recovery_voc_head h2 {
    width: 88vw;
    padding: 5vw 2vw;
    background-color: rgba(0, 0, 0, .3);   /* PC と揃える */
    color: #fff;
    font-size: 4.6vw;
    line-height: 1.6;
    text-align: center;
}

/* プロフィール */
.recovery_voc_profile {
    display: block;
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 8vw 6vw 9vw;
}

.recovery_voc_profile_main {
    width: 100%;
}

.recovery_voc_lead {
    font-size: 4.4vw;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 5vw;
}

.recovery_voc_profile_main img {
    width: 100%;
    height: auto;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, .18);
}

.recovery_voc_card {
    width: 100%;
    margin-top: 7vw;
    background-color: #fff;
    padding: 7vw 5vw;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, .12);
    text-align: center;
}

.recovery_voc_face {
    width: 38vw;
    height: 38vw;
    margin: 0 auto 4vw;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eceff1;
}

.recovery_voc_name {
    font-size: 4vw;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 5vw;
}

.recovery_voc_name span {
    font-size: 3.6vw;
}

.recovery_voc_card dl {
    display: flex;
    align-items: stretch;
    text-align: left;
    margin-bottom: 3vw;
}

.recovery_voc_card dt {
    width: 24vw;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vw 1vw;
    background-color: #ECE9E1;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.recovery_voc_card dd {
    padding: 2.5vw 0 2.5vw 3.5vw;
    font-size: 3.2vw;
    line-height: 1.6;
}

/* インタビュー */
.recovery_voc_interviews {
    padding: 4vw 0 0;
}

.recovery_voc_interview {
    display: block;
    padding: 8vw 0;
    border-bottom: 2px dotted #cfcbbf;
}

.recovery_voc_interview_img {
    width: 100%;
}

.recovery_voc_interview_img img {
    width: 100%;
    height: auto;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, .18);
}

.recovery_voc_interview_txt {
    width: 100%;
    margin-top: 6vw;
}

.recovery_voc_interview_txt h3 {
    font-size: 4.6vw;
    line-height: 1.6;
    padding-bottom: 3vw;
    margin-bottom: 4vw;
    border-bottom: 1px solid #c7c2b4;
}

.recovery_voc_interview_txt p {
    font-size: 3.5vw;
    line-height: 1.9;
}

/* ------------------------------------
    締め
------------------------------------- */
.recovery_outro {
    text-align: center;
    padding: 9vw 0 8vw;
}

.recovery_outro h2 {
    font-size: 4.4vw;
    line-height: 1.6;
    margin-bottom: 3vw;
}

.recovery_outro p {
    font-size: 3.4vw;
    line-height: 1.8;
    text-align: left;
}