@charset "utf-8";

/* 共通タイトル設定 */
.works_section_title {
    /* 中央配置 */
    text-align: center;
    /* 文字を大きめにする */
    font-size: var(--size-lg);
    /* タイトル下に線を引く */
    border-bottom: 1px solid var(--sub-color);
    /* 線との余白 */
    padding-bottom: var(--gutter-base);
    /* キャプションとの余白 */
    margin-bottom: var(--gutter-base);
}

.works_section_caption {
    /* 中央配置 */
    text-align: center;
    /* コンテンツとの余白 */
    margin-bottom: var(--content-gutter);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .works_section_title {
        /* 文字を1サイズ大きくする */
        font-size: var(--size-xl);
        /* 線との余白を倍にする */
        padding-bottom: var(--gutter-2x);
        /* キャプションとの余白を倍にする */
        margin-bottom: var(--gutter-2x);
    }

    .works_section_caption {
        /* 中央配置 */
        text-align: center;
        /* コンテンツとの余白 PC版 */
        margin-bottom: var(--content-gutter-pc);
    }
}

/*=====min-width:950px=====*/

/* 料金の設定 */
.price_wrap {
    /* 最大幅の設定 */
    max-width: 950px;
    /* 次のセクションとの余白 */
    margin-bottom: var(--section-gutter);
}

.price_inner {
    /* テキスト左右余白 */
    margin: 0 var(--gutter-base);
}

.price_box_wrap:not(:last-child) {
    /* 料金表ごとに下余白 最後以外 */
    margin-bottom: var(--content-gutter);
}

.price_title {
    /* 料金表の名前の背景色 */
    background-color: var(--main-color);
    /* 背景色の大きさを設定 */
    padding: var(--gutter-2x) var(--gutter-2x);
}

.price_box {
    /* 料金表周りに線を引く */
    border: 1px solid var(--main-color);
    /* 横に2つ並びにする */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.price_box_title {
    /* 料金表のタイトルの背景色 */
    border-right: 1px solid var(--main-color);
    /* 料金表タイトル文字周り余白 */
    padding: var(--gutter-2x);
}

.price_box_text {
    /* 料金表項目文字周り余白 */
    padding: var(--gutter-2x);
}

/* 料金表が2段の時 */
.price_box_text.two_racks {
    /* 余白を0にする */
    padding: 0;
    /* 上下2段にする */
    display: grid;
    grid-template-rows: repeat(2, 1fr);
}

.price_box_value {
    display: block;
    /* 周囲に余白を設ける */
    padding: var(--gutter-2x);
}

.price_box_supplement {
    display: block;
    /* 背景色をsub-colorにし、周囲に余白を設ける */
    background-color: var(--main-color);
    padding: var(--gutter-2x);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .price_wrap {
        /* 中央配置 */
        margin-left: auto;
        margin-right: auto;
        /* 次のセクションとの余白 PC版 */
        margin-bottom: var(--section-gutter-pc);
    }

    .price_box_wrap:not(:last-child) {
        /* 料金表ごとの下余白PC版 最後以外 */
        margin-bottom: var(--content-gutter-pc);
    }

    .price_title {
        /* 料金表のタイトル文字を大きくする */
        font-size: var(--size-lg);
    }

}

/*=====min-width:950px=====*/

/* 事例紹介の設定 */
.case_wrap {
    /* 最大幅の設定 */
    max-width: 950px;
}

.case_inner {
    /* テキスト左右余白 */
    margin: 0 var(--gutter-base);
}

.case_sorting_title {
    text-align: center;
    font-size: var(--size-md);
    margin-bottom: var(--gutter-2x);
}

.case_box_wrap:not(:last-child) {
    /* 事例ごとに下余白 最後以外 */
    margin-bottom: var(--content-gutter);
}

.case_box {
    /* 事例周りに線を引く */
    border: 1px solid var(--main-color);
    /* スマホだと字が詰まって読みづらいので下に余白を設ける */
    margin-bottom: var(--gutter-2x);
}

.case_box_title {
    /* ケースの名前の背景色 */
    background-color: var(--main-color);
    /* 背景色の大きさを設定 */
    padding: var(--gutter-2x) var(--gutter-2x);
}

.case_box_title_number {
    /* ケース〇の右に余白を設ける */
    margin-right: var(--gutter-2x);
}

.case_box_text {
    /* 字詰めを多めにとって読みやすくする */
    line-height: 1.6;
    /* テキスト周りの余白 */
    padding: var(--gutter-base);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .case_wrap {
        /* 中央配置 */
        margin-left: auto;
        margin-right: auto;
    }

    .case_sorting_title {
        font-size: var(--size-lg);
        margin-bottom: var(--gutter-4x);
    }

    .case_box {
        /* スマホだと字が詰まって読みづらいので下に余白を設ける */
        margin-bottom: var(--gutter-4x);
    }

    .case_box_title {
        font-size: var(--size-lg);
    }

    .case_box_title_number {
        /* ケース〇の右の余白を倍にする */
        margin-right: var(--gutter-4x);
        font-size: var(--size-md);
    }

    .case_box_text {
        /* テキスト周りの余白を倍にする */
        padding: var(--gutter-2x);
    }

    .case_box_wrap:not(:last-child) {
        /* 事例ごとに下余白 最後以外 PC版 */
        margin-bottom: var(--content-gutter-pc);
    }



}

/*=====min-width:950px=====*/

/* 240727追記 */
/* トップ画像を設定 */
.page_title_wrap {
    background-image: url(../../img/works_top_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 42%;
}

/* 240727追記ここまで */