.header_menu {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px; /* 元々template.cssの5pxが効いているが、コンテンツ部との隙間を無くしたいため、0pxで上書く */
    .header_left {
        display: flex;
        .text_area {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .title {
            width: 200px;
            font-size: 20px;
        }
    }
    .header_right {
        display: flex;
        .text_area {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .left {
            width: 200px;
            font-size: 16px;
            color: #49bcbd;
        }
        .right {
            width: 150px;
            font-size: 20px;
            color: #ffffff;
            background-color: #49bcbd;
        }
        a {
            text-decoration: none;
        }
    }
}
.contents {
    width: 1100px;
    margin: 0px auto;
    .item {
        padding: 30px;
    }
    .item2 {
        .item2_flex {
            display: flex;
            img {
                max-width: calc(50%);
            }
        }
    }
    .item3 {
        color: #ffffff;
        background-color: #49bcbd;
        .item3_grid {
            display: grid; /* flexだと、スマホ表示で文字サイズが意図せず縮小されるため、gridを使いる */
            grid-template-columns: 60% 40%; /* 列の幅を設定 */
            grid-column-gap: 30px; /* 列間の間隔を設定 */
            .description {
                grid-column: 1 / 2; /* 1列目に配置 */
            }
            img {
                grid-column: 2 / 3; /* 2列目に配置 */
                width: calc(100% - 30px); /* 画像の幅を100%に設定したうえで、右側に30pxの余白を確保 */
            }
        }
    }
    .item4 {
        .caption {
            color: #EE8800;
        }
        .item4_grid {
            display: grid; /* flexだと、スマホ表示で文字サイズが意図せず縮小されるため、gridを使いる */
            grid-template-columns: 60% 40%; /* 列の幅を設定 */
            grid-column-gap: 30px; /* 列間の間隔を設定 */
            .description {
                grid-column: 1 / 2; /* 1列目に配置 */
            }
            img {
                grid-column: 2 / 3; /* 2列目に配置 */
                width: calc(100% - 30px); /* 画像の幅を100%に設定したうえで、右側に30pxの余白を確保 */
            }
        }
    }
    .item5 {
        background-color: #CCEEAA;
        .item5_grid {
            display: grid; /* flexだと、スマホ表示で文字サイズが意図せず縮小されるため、gridを使いる */
            grid-template-columns: 60% 40%; /* 列の幅を設定 */
            grid-column-gap: 30px; /* 列間の間隔を設定 */
            .description {
                grid-column: 1 / 2; /* 1列目に配置 */

            }
            .item5_image_flex {
                grid-column: 2 / 3; /* 2列目に配置 */
                width: calc(100% - 30px); /* 画像の幅を100%に設定したうえで、右側に30pxの余白を確保 */
                display: flex;
                .item5_image_flex_left,
                .item5_image_flex_right {
                    display: flex;
                    flex-direction: column;
                    flex: 50%;
                }
                .item5_image_flex_left {
                    padding-right: 5px;
                }
                .item5_image_flex_right {
                    padding-left: 5px;
                }
                .item5_image_flex_top,
                .item5_image_flex_bottom {
                    overflow: hidden;
                    max-width: 100%;
                }
                .item5_image_flex_top {
                    padding-bottom: 5px;
                }
                .item5_image_flex_bottom {
                    padding-top: 5px;
                }
            }
        }
    }
    .item6 {
        color: #ffffff;
        background-color: #49bcbd;
        .item6_flex {
            display: flex;
            img {
                max-width: calc(50%);
            }
        }
    }
    .item7 {
        background-color: #a4ddde;
        .item7_flex {
            display: flex;
            img {
                max-width: calc(50%);
            }
        }
    }
    .item8 {
        .caption_area {
            padding-bottom: 32px;
            background-image : linear-gradient(to right, #cceeaa 3px, transparent 3px);
            background-size: 20px 3px;
            background-repeat: repeat-x; 
            background-position: left calc(100% - 12px);
            .caption {
                margin-bottom: 0;
            }
        }
        .item8_flex {
            display: flex;
            img {
                max-width: calc(50%);
            }
        }
    }
    .item9 {
        background-color: #cceeaa;
        .caption_area {
            padding-bottom: 32px;
            background-image : linear-gradient(to right, #ffffff 3px, transparent 3px);
            background-size: 20px 3px;
            background-repeat: repeat-x; 
            background-position: left calc(100% - 12px);
            .caption {
                margin-bottom: 0;
            }
        }
        .item9_flex {
            display: flex;
            img {
                max-width: calc(50%);
            }
        }
    }
    .item10 {
        .caption_area {
            padding-bottom: 32px;
            background-image : linear-gradient(to right, #cceeaa 3px, transparent 3px);
            background-size: 20px 3px;
            background-repeat: repeat-x; 
            background-position: left calc(100% - 12px);
            .caption {
                margin-bottom: 0;
            }
        }
        .item10_flex {
            display: flex;
            .main_img {
                max-width: calc(48%);
            }
            .sub_img {
                max-width: calc(4%);
                object-fit: contain;
            }
        }
    }
    .item11 {
        background-color: #a4ddde;
        .caption_area {
            padding-bottom: 32px;
            background-image : linear-gradient(to right, #ffffff 3px, transparent 3px);
            background-size: 20px 3px;
            background-repeat: repeat-x; 
            background-position: left calc(100% - 12px);
            .caption {
                margin-bottom: 0;
            }
        }
        .flow {
            margin-top: 20px;
            .item11_grid {
                display: grid; /* flexだと、スマホ表示で文字サイズが意図せず縮小されるため、gridを使いる */
                grid-template-columns: 40% 60%; /* 列の幅を設定 */
                background-color: #ffffff;
                img {
                    grid-column: 1 / 2; /* 1列目に配置 */
                    width: 100%; /* 画像の幅を100%に設定 */
                    align-self: center;
                }
                .description {
                    grid-column: 2 / 3; /* 2列目に配置 */
                    margin: 0;
                    padding: 30px;
                }
            }
            .next_arrow {
                text-align: center;
            }
        }
    }
    .item12 {
        color: #ffffff;
        background-color: #49bcbd;
        text-align: center;
        .top_area {
            text-align: center;
            padding-bottom: 48px;
            background-image : linear-gradient(to right, #ffffff 3px, transparent 3px);
            background-size: 20px 3px;
            background-repeat: repeat-x; 
            background-position: left calc(100% - 12px);
            .head {
                font-size: 32px;
                letter-spacing: 1px;
                line-height: 1;
            }
            a {
                text-decoration: none;
                .link {
                    display: inline-block;
                    margin: 10px 0;
                    border-radius: 30px;
                    padding: 0 30px;
                    color: #007379;
                    background-color: #a4ddde;
                    font-size: 48px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    line-height: 2;
                }
            }
            .remarks {
                font-size: 24px;
                letter-spacing: 1px;
                line-height: 1;
            }
        }
        .bottom_area {
            padding-top: 16px;
            a {
                margin: 0 5px;
                text-decoration: none;
                color: #333333;
                font-size: 20px;
            }
        }
    }
    .caption {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 1;
    }
    .description {
        font-size: 24px;
        letter-spacing: 1px;
        line-height: 1.5;
    }

}
.footer_area {
    width: 1100px;
    margin: 0px auto;
    .copyright_area {
        padding: 20px;
        text-align: center;
        color:#ffffff;
        background-color: #69a17d;
        p {
            margin: 0;
        }
    }
}
.estimate_icon {
    display: inherit;
    position: fixed;
    right: 1rem;
    z-index: 100;
    bottom: 8px;
}
@media (min-width: 576px) {
    .estimate_icon {
        width: 85px; 
    }
}
.estimate_icon a * {
    display: block;
    width: 100% !important;
}