@charset "UTF-8";

@charset "UTF-8";

/*#mv*/
#mv .mv_textimg {
    display: none !important;
}

/*#about*/
#about+section .content_wrapper>.heading.block_header_1 p::after {
    position: absolute;
    display: block;
    content: "";
    width: 165px;
    height: 165px;
    top: -25px;
    left: -130px;
    background: url(/common/upload_data/rontgroup0501com/image/scroll_down.png) no-repeat top left / 160px;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
    animation: rotate 30s linear infinite;
}

@media screen and (max-width: 900px) {
    #about+section .content_wrapper>.heading.block_header_1 p::after {
        width: 125px;
        height: 125px;
        left: -90px;
        background-size: 120px;
    }
}

/*#flow*/
a#flow_hd+div .inner_item_img img {
    width: 25% !important;
    height: auto !important;
    padding-top: 30px;
}

/*-------------------------MV調整-------------------------------*/
#mv {
    z-index: 1;
}

#mv .mv_img {
    z-index: 6;
    position: fixed;
}

main {
    z-index: 2;
}

#mv .mv_pointer {
    display: none;
}

/*-------------------------MVテキスト追加-----------------------------*/
#mv {
    height: 125vh;
    max-height: none !important;
}

#mv .mv_text {
    bottom: 50% !important;
    transform: translateY(50%);
}

#mv .mv_text>div {
    width: 90%;
}

#mv .mv_text>div h2 {
    font-size: 8.0rem !important;
    line-height: 1.3;
    margin-bottom: 20px;
}

#mv .mv_text p span.mv_title {
    font-size: 4.0rem !important;
    font-weight: 600;
    /*font-family: "M PLUS Rounded 1c", sans-serif !important;*/
    line-height: 1.4;
    letter-spacing: 0.2rem;
    white-space: nowrap;
}

#mv .mv_text p span.mv_sub_title {
    font-size: 1.7rem !important;
    /*font-family: "Murecho", 'Noto Serif JP', "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
    letter-spacing: 0.2rem !important;
    font-weight: 600;
    margin-top: 10px;
    display: block;
}

#mv .mv_text p {
    font-size: 1.65rem;
    /*font-family: 'Murecho', "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
    line-height: 1.9;
    letter-spacing: 0.02rem;
    font-weight: 500;
    -webkit-text-size-adjust: 100%;
    width: 60%;
}

@media screen and (min-width: 901px) and (max-height: 700px) {
    #mv {
        height: 165vh;
    }
}

@media screen and (max-width: 900px) and (max-height: 700px) {
    #mv {
        height: 180vh;
    }
}

@media screen and (max-width: 800px) {
    #mv .mv_text p span.mv_title {
        font-size: 3.5rem !important;
    }

    #mv .mv_text p span.mv_sub_title {
        font-size: 1.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    #mv {
        height: 130vh;
    }
}

@media screen and (min-width: 701px) {
    .sp_br {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    #mv .mv_text p:not(.static) {
        display: block !important;
    }

    #mv .mv_text>div h2 {
        font-size: 6.0rem !important;
    }
}

@media screen and (max-width: 480px) {
    #mv {
        height: 155vh;
    }

    #mv .mv_text>div h2 {
        font-size: 4.5rem !important;
    }

    #mv .mv_text p {
        width: 80%;
    }

    #mv .mv_text p span.mv_title {
        font-size: 3.0rem !important;
    }
}

@media screen and (max-width: 389px) {
    #mv {
        height: 175vh;
    }
}

/* ----------以下から追記2025/11/06---------- */

/* 屋根塗装について */
#roof+section .heading.block_header_2 .h {
    color: var(--i_main_color);
    font-size: 5rem !important;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.2rem;
    padding-left: 0;
}

#roof+section .heading.block_header_2 .h::before {
    display: none;
}

#roof+section .heading.block_header_2 p {
    color: var(--i_sub_color);
    font-size: 2.4rem !important;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: "Homemade Apple", "Zen Kaku Gothic New", cursive !important;
    padding-left: 0;
}

#roof+section .inner_item_img img {
    border-radius: 0 30px 30px 0;
}

#roof+section .inner_item_txt {
    padding-left: 5%;
}

@media screen and (max-width: 900px) {
    #roof+section .inner_item_img {
        width: 95%;
        margin-right: 5%;
    }
}

@media screen and (max-width: 800px) {
    #roof+section .heading.block_header_2 .h {
        font-size: 2.6rem !important;
    }

    #roof+section .heading.block_header_2 p {
        font-size: 1.1rem !important;
    }
}

/* リフォームメニュー */
#reform+div .heading.block_header_6 {
    flex-direction: column-reverse !important;
}

#reform+div .heading.block_header_6 .h {
    color: var(--i_bg_color);
}

#reform+div .heading.block_header_6 p {
    margin-top: 0;
}

#reform+div .wrapper_item {
    align-items: start;
    overflow: visible;
}

#reform+div .inner_item {
    position: relative;
    border-radius: 15px;
}

#reform+div .inner_item::before {
    position: absolute;
    display: block;
    content: "Wall Painting";
    font-size: clamp(1.8rem, 2vw, 2.5rem);
    letter-spacing: .1em;
    font-family: "Homemade Apple", "Zen Kaku Gothic New", cursive !important;
    color: var(--i_sub_color);
    top: -30px;
    left: -20px;
    transform: rotate(-5deg);
    font-style: italic;
    z-index: 1;
}

#reform+div .inner_item:nth-of-type(2):before {
    content: "Roof Painting";
}

#reform+div .inner_item:nth-of-type(3):before {
    content: "Roof Overlay";
}

#reform+div .inner_item_img img {
    border-radius: 15px 15px 0 0;
}

@media screen and (min-width: 769px) {
    #reform+div .inner_item:nth-of-type(2) {
        margin-top: 50px;
    }

    #reform+div .inner_item:nth-of-type(3) {
        margin-top: 100px;
    }

    #reform+div .heading.block_header_4 .h {
        font-size: 2.6rem !important;
    }
}

@media screen and (max-width: 768px) {
    #reform+div .inner_item {
        padding-bottom: 40px;
    }

    #reform+div .inner_item::before {
        top: -20px;
    }
}

/* ロントが選ばれる理由 */
a[id^="reason"]+section .heading.block_header_2 {
    padding-bottom: 40px;
}

a[id^="reason"]+section .heading.block_header_2::before {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
    background: url("/common/upload_data/rontgroup0501com/image/hd.png.webp") no-repeat bottom left / 75px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a[id^="reason"]+section .heading.block_header_2 .h {
    padding-left: 50px;
}

a[id^="reason"]+section .heading.block_header_2 .h::before {
    width: 40px;
    height: 1px;
    border: none;
    border-radius: none;
    background: var(--i_main_color);
}

a[id^="reason"]+section .heading.block_header_2 p {
    font-size: 4rem !important;
    line-height: 1.5;
    padding-left: 0;
}

a[id^="reason"]+section .inner_item_txt {
    padding: 0 4% !important;
}

a[id^="reason"]+section .inner_item_img img {
    border-radius: 30px;
    border: 3px solid var(--i_main_color);
    box-sizing: border-box;
}

/* --- */
#reason+section .inner_item_img img {
    border-radius: 30px 0 0 30px;
    border-right: none;
}

@media screen and (max-width: 900px) {
    #reason+section .inner_item_img {
        width: 100%;
        padding: 0 20px;
    }

    #reason+section .inner_item_img img{
        border-radius: 30px;
        border: 3px solid var(--i_main_color);
    }
}

@media screen and (max-width: 800px) {
    #reason+section {
        padding-top: 45px;
    }

    a[id^="reason"]+section .heading.block_header_2 {
        padding-bottom: 30px;
    }

    a[id^="reason"]+section .heading.block_header_2::before {
        background-size: 50px;
    }

    a[id^="reason"]+section .heading.block_header_2 .h {
        font-size: 1.45rem !important;
    }

    a[id^="reason"]+section .heading.block_header_2 p {
        font-size: 2.5rem !important;
    }
}

/* ご利用の流れ */
#flow+div .wrapper_item {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px 10px;
}

#flow+div .inner_item {
    margin: 0 !important;
    width: 15% !important;
    position: relative;
}

#flow+div .inner_item:not(:last-of-type)::before {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    background: var(--i_main_color);
    mask-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%234b4b4b%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%22243.3%200%20202.7%2040.5%20389.5%20227.3%2012.7%20227.3%2012.7%20284.7%20389.5%20284.7%20202.7%20471.5%20243.3%20512%20499.3%20256%20243.3%200%22%2F%3E%3C%2Fsvg%3E');
}

#flow+div .inner_item_img img {
    max-width: 150px;
}

#flow+div .heading.block_header_4 .h {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--i_main_color);
    padding-bottom: 5px;
    display: inline-block;
}

#flow+div .heading.block_header_4 p {
    font-size: 1.5rem;
    line-height: 1.4;
}

@media screen and (max-width: 900px) {
    #flow+div .wrapper_item {
        flex-wrap: wrap;
    }

    #flow+div .inner_item {
        width: 45% !important;
    }

    #flow+div .inner_item:not(:last-of-type)::before {
        display: none;
    }
}

/* イベント */
a[id^="blog"]+div>.content_wrapper {
    display: grid;
    align-items: flex-start;
    gap: 0 5%;
}

a[id^="blog"]+div ul {
    grid-area: 1 / 2 / 3 / 3;
    gap: 20px;
    flex-wrap: nowrap !important;
}

#blog+div .content_wrapper>ul>li {
    width: 48%;
    background: var(--i_bg_color);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, .1);
    border-radius: 20px;
    padding: 20px 5% 40px;
    margin: 0 !important;
    box-sizing: border-box;
}

a[id^="blog"]+div .contents_btn01 {
    grid-area: 3 / 2 / 4 / 3;
}

a[id^="blog"]+div .contents_btn01>.content_wrapper {
    text-align: right !important;
}

a[id^="blog"]+div .contents_btn01 a {
    background: transparent;
    color: var(--i_main_color) !important;
    padding: 15px 85px 15px 0 !important;
    min-width: auto !important;
}

a[id^="blog"]+div .contents_btn01 a::before {
    content: ">";
    font-size: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--i_main_color);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    box-sizing: border-box;
}

a[id^="blog"]+div .contents_btn01 a span {
    padding: 0;
}

a[id^="blog"]+div .contents_btn01 a:hover::before {
    color: var(--i_main_color);
    background: var(--i_bg_color);
}

#blog+div li ol li {
    color: var(--i_sub_color);
    border: 1px solid var(--i_sub_color) !important;
    padding: 1px 5px 4px;
    opacity: 1;
}

@media screen and (max-width: 1200px) {
    a[id^="blog"]+div>.content_wrapper {
        display: block;
    }
}

/* コラム */
#blog2+div li a {
    padding: 8% 50px 8% 0;
    position: relative;
}

#blog2+div li a::before {
    position: absolute;
    display: block;
    content: ">";
    font-size: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 50px;
    height: 50px;
    background: var(--i_bg_color);
    color: var(--i_main_color);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    box-sizing: border-box;
    transition: 0.4s ease-in-out;
}

#blog2+div li a:hover::before {
    background: var(--i_main_color);
    color: var(--i_bg_color);
}

#blog2+div li a>p::before {
    display: none;
}

#blog2+div li a>* {
    padding-left: 0;
}

@media screen and (max-width: 1200px) {
    #blog2+div ul {
        min-width: 100%;
    }
}

@media screen and (max-width: 500px) {
    #blog2+div li a {
        display: flex;
        gap: 1rem;
    }
}

/* 区切り線 */
.contents_hr.block_line_2 hr {
    border-bottom: 5px dotted var(--i_main_color);
}

/* link */
#link+section {
    height: 143px;
}

@media screen and (max-width: 1920px) {
    #link+section {
        background-size: cover !important;
    }
}