@charset "utf-8";

/* ==================================================================
   ガレージ復旧支援LP  PC用 (min-width: 769px)
   デザイン: docs/1006_熊本地震LPフレームデザイン.pdf
   デザイン基準幅 1352px = 100vw （design 1px ≒ 0.074vw）
   ※「完成までの流れ」は garage_farmer.css の .garage_farmer_flow を流用
================================================================== */

.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 {
    width: 100vw;
    margin-left: -6vw;
    margin-right: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid rgba(0, 0, 0, .22);  /* 設計：KV下の細い線（全幅） */
}

.recovery_kv_logo {
    width: 26vw;
    height: 29vw;
    flex: none;
    background-image: url(/common/img/common/garuxgarage_logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19vw;
}

.recovery_kv {
    position: relative;
    width: 74vw;
    height: 29vw;
    padding: 2vw;
    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: 74vw;
    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, .10) 0%, rgba(0, 0, 0, .35) 100%);
    width: 74vw;
    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: 1.8vw;
    margin-bottom: 1.2vw;
}

.recovery_kv h1 {
    width: 60vw;
    margin: 0 auto 1.4vw;
    padding: 1vw 1vw;
    background-color: rgba(0, 0, 0, .3);
    font-size: 3vw;
    font-weight: bold;
    line-height: 1.4;
}

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

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

.recovery_message h2 {
    font-size: 2.45vw;
    line-height: 1.5;
    letter-spacing: .04em;
}

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

.recovery_message_body {
    width: 68vw;
    margin: 1.8vw auto 0;
    text-align: left;
    font-size: 1.55vw;
    line-height: 2;
}

.recovery_message_body p {
    font-size: 1.55vw;
    line-height: 1.9;
}

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

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

.recovery_needs_title_wrap h2 {
    font-size: 2.41vw;            /* 設計 字面幅476px */
    line-height: 1.5;
}

.recovery_needs_title_wrap h2.txt_type_03 {
    width: 39.05vw;               /* 設計 528px */
}

.recovery_needs_boxs {
    display: flex;
    gap: 1.55vw;                     /* 設計 21px */
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 1.5vw 5.92vw 2.2vw;     /* 設計 左右 80px */
}

.recovery_needs_box {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;                     /* 5枚で等分（設計 222px = 16.4vw 相当） */
    min-width: 0;
    background-color: transparent;
    border-radius: 0;                /* 設計は4隅とも直角 */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .13);
    overflow: hidden;
}

.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;
    flex: none;
    width: 100%;
    height: 9.69vw;                  /* 設計 131px */
    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: 9.69vw;
    left: 50%;
    margin-left: -1.4vw;
    margin-top: -1.4vw;
    width: 2.8vw;                    /* 設計 38px */
    height: 2.8vw;
    line-height: 2.8vw;
    font-size: 2vw;
    text-align: center;
    background-color: #fff;
    color: #768c98;
    border-radius: 100vw;
}

.recovery_needs_box p {
    position: relative;              /* 写真の上に重ねる */
    background-color: #fff;
    flex: 1 1 auto;
    margin: -.3vw 0 0;               /* 角丸の分だけ写真に重ねる */
    border-radius: .3vw .3vw 0 0;    /* 白い面の上だけ角丸（設計 4px） */
    padding: 2.18vw 1.41vw 2.63vw;   /* 設計 上29.5px 左右19px 下35.5px */
    min-height: 10vw;
    font-size: 1.04vw;
    line-height: 2;                  /* 設計 行送り28px */
    text-align: center;
}

/* ------------------------------------
    POINT 01〜04
------------------------------------- */
.recovery_points h2.txt_type_01 {
    font-size: 2.44vw;            /* 設計 字面幅774px */
    line-height: 1.5;
}

.recovery_point {
    display: flex;
    align-items: flex-start;         /* 設計は上揃え。中央揃えだと文字が下がる */
    justify-content: space-between;
    gap: 2vw;
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 2.96vw 9.87vw 2.51vw;   /* 設計 上40px 左右133px 下34px */
    margin-bottom: 2vw;
}

/* DOM は「写真 → テキスト」の順。写真を右に置く回だけ入れ替える */
.recovery_point_img_right {
    flex-direction: row-reverse;
}

.recovery_point_img {
    width: 35.5vw;
    flex: none;
}

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

.recovery_point_txt {
    width: 42.08vw;                  /* 設計 569px。行の高さの分だけ字面が下がるので上の余白は入れない */
}

.recovery_point_txt p.recovery_point_no {
    font-size: 1.53vw;            /* 設計 字面幅91px。
                                     .recovery_point_txt p に負けるのでセレクタを強くする */
    font-weight: 700;
    letter-spacing: .08em;
    color: #938460;
    margin-bottom: .2vw;
}

.recovery_point_txt h3 {
    font-size: 2.14vw;            /* 設計 字面幅566px */
    line-height: 1.5;
    color: #967326;
    padding-bottom: .9vw;
    margin-bottom: 1.2vw;
    border-bottom: 1px solid #c7c2b4;
}

.recovery_point_txt p {
    font-size: 1.26vw;            /* 設計と同じ折り返しになる大きさ */
    line-height: 2.04;            /* 設計 行送り34px */
}

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

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

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

.recovery_subsidy_note {
    text-align: left;
    padding-left: 4.2vw;
    margin: 1.4vw 0 2.6vw;
    font-size: 1.2vw;
    line-height: 1.7;
    color: #7d7a74;
}

.recovery_subsidy_boxs {
    display: flex;
    justify-content: center;
    gap: 2.6vw;
}

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

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

.recovery_subsidy_box_body {
    padding: 2.9vw 2.8vw 3.6vw;
}

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

.recovery_subsidy_box p {
    font-size: 1.2vw;
    line-height: 2.05;
}

/* ------------------------------------
    お客様の声
------------------------------------- */
.recovery_voc_head {
    margin-left: -6vw;
    width: 100vw;
    height: 23.08vw;             /* 設計 312px */
    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: 59.3vw;                /* 設計 802px */
    padding: .98vw 1vw;           /* 設計 ボックス高 148px */
    background-color: rgba(0, 0, 0, .3);   /* 設計の濃さ。.8 では背景が透けない */
    color: #fff;
    font-size: 2.92vw;            /* 設計 字面幅658px・行送り60px */
    line-height: 1.5;
    text-align: center;
}

/* プロフィール */
.recovery_voc_profile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5vw;
    background-color: #ECE9E1;
    margin-left: -6vw;
    width: 100vw;
    padding: 2.22vw 6.43vw 2.59vw 5.92vw;  /* 設計 上30px 下35px（左の写真の下端が基準） */
}

.recovery_voc_profile_main {
    width: 51.85vw;               /* 設計 701px */
    padding-top: 1.18vw;          /* 設計：リード文の字面が帯の上から28px */
}

.recovery_voc_lead {
    font-size: 2.35vw;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 2.17vw;        /* 設計：写真の上端が帯の上から147px */
}

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

.recovery_voc_card {
    width: 34.32vw;               /* 設計 464px */
    flex: none;
    background-color: #fff;
    padding: 2.66vw 3.92vw 2.81vw; /* 設計 上36px 左右53px 下38px */
    box-shadow: 4px 6px 14px rgba(0, 0, 0, .12);
    text-align: center;
}

.recovery_voc_face {
    width: 16.57vw;               /* 設計 224px */
    height: 16.57vw;
    margin: 0 auto 1.48vw;        /* 設計 写真下20px */
    border-radius: 50%;
    object-fit: cover;
    background-color: #eceff1;
}

.recovery_voc_name {
    font-size: 1.5vw;             /* 設計 字面20px・行送り31px */
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 2.81vw;        /* 設計 名前の下38px */
}

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

.recovery_voc_card dl {
    display: flex;
    align-items: stretch;
    text-align: left;
    margin-bottom: 2vw;           /* 設計 27px */
}

.recovery_voc_card dl:last-of-type {
    margin-bottom: 0;
}

.recovery_voc_card dt {
    width: 9.69vw;                /* 設計 131px */
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.93vw .4vw;         /* 2行の「今回の／被災状況」で設計の高さ111pxになる */
    background-color: #ECE9E1;
    font-size: 1.15vw;
    font-weight: 700;
    line-height: 2;
    text-align: center;
}

.recovery_voc_card dd {
    display: flex;
    align-items: center;
    padding: .17vw 0 .17vw 1.7vw; /* 設計 dtの右から23px */
    font-size: 1.1vw;
    line-height: 2;               /* 設計 行送り 29.5px */
}

/* インタビュー */
.recovery_voc_interviews {
    padding: 2vw .36vw 1vw .88vw; /* 点線の左右端を設計(93〜1266px)に合わせる */
}

.recovery_voc_interview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3vw;
    padding: 4.4vw 3vw;
    /* 設計の点線：点2px・間隔6px（周期8px）・色 rgb(227,226,226)。
       CSS の dotted は周期4px になるため背景で描く。3本目の下にも入る。 */
    background-image: linear-gradient(to right, #e3e2e2 2px, transparent 2px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.recovery_voc_img_right {
    flex-direction: row-reverse;
}

.recovery_voc_interview_img {
    width: 35vw;
    flex: none;
}

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

.recovery_voc_interview_txt {
    width: 41vw;
}

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

.recovery_voc_interview_txt p {
    font-size: 1.25vw;
    line-height: 2;
}

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

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

.recovery_outro p {
    font-size: 1.5vw;
    line-height: 1.8;
}