@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*------LV------*/
#lv {
    min-height: 580px !important;
}
#lv p:after {
    content: "";
    position: absolute;
    top: 65px;
    left: calc(50% - 250px);
    width: 500px;
    height: 190px;
    background: url(/common/upload_data/tkc-paintjp/image/20250922131559.png) no-repeat;
    background-size: contain;
}
@media screen and (min-width: 901px) {
    #lv p {
        top: -100px;
    }
}
@media screen and (max-width: 900px) {
    #lv {
        min-height: 400px !important;
    } 
   #lv p {
        top: -90px;
    }
}
@media screen and (max-width: 800px) {
    #lv p:after {
        left: calc(50% - 185px);
        width: 370px;
        height: 140px;
    }
}
@media screen and (max-width: 480px) {
    #lv {
        min-height: 320px !important;
    }
    #lv p {
        top: -60px;
    }
    #lv p:after {
        left: calc(50% - 170px);
        width: 340px;
        height: 130px;
    }
}
/*-------------スーパーガルテクト（カバー工法）-----------------*/
@media screen and (min-width: 769px) {
    a#sp+section {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    a#pc+section {
        display: none;
    }
}

@media screen and (max-width: 600px) {

    a#sp+section img,
    a#img+section img {
        aspect-ratio: unset !important;
    }
}

.contents_box01 .inner_item_img img,
.composite_box01 .inner_item_img img {
    object-fit: contain !important;
}


/* 追記css20250827 */
#ga+.contents_box01::before {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
    background: #D9D9D9;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    width: 80%;
    height: 60%;
    max-width: 700px;
    max-height: 300px;
}

#ga+.contents_box01 .wrapper_item {
    justify-content: center;
}

#ga+.contents_box01 .inner_item_txt {
    background: #fff;
    padding: 25px 4% 50px !important;
}

#ga+.contents_box01 .inner_item_img img {
    aspect-ratio: auto !important;
    max-width: 500px !important;
}

#ga+.contents_box01 .inner_item_txt p:first-of-type {
    font-size: 3.6rem !important;
    margin-bottom: 30px;
    font-family: "MS PMincho", "MSP明朝", "Noto Serif JP", serif;
}

#ga+.contents_box01 .inner_item_txt p:first-of-type strong {
    font-size: 4.8rem !important;
    font-weight: 600;
}

#ga+.contents_box01 .inner_item_txt p:last-of-type {
    font-size: 1.8rem !important;
    font-family: "MS PGothic", "MSPゴシック", "Noto Sans JP", sans-serif;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}

@media screen and (min-width: 901px) {
    #ga+.contents_box01 .inner_item_img {
        margin-top: 130px;
        margin-right: -9vw;
        z-index: 1;
    }
}

@media screen and (min-width: 2001px) {
    #ga+.contents_box01 .inner_item_img {
        margin-right: -150px;
    }
}

@media screen and (max-width: 900px) {
    a#ga+section {
        padding-top: 0;
    }
#ga+.contents_box01 .wrapper_item {
    justify-content: center;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
#ga+.contents_box01 .inner_item_txt {
        width: 100%;
        margin-bottom: 10px;
 }
#ga+.contents_box01::before {
    top: 50%;
}
}


@media screen and (max-width: 800px) {
    #ga+.contents_box01::before {
        max-height: none;
    }

    #ga+.contents_box01 .inner_item_txt p:first-of-type {
        font-size: 1.9rem !important;
        margin-bottom: 10px;
    }

    #ga+.contents_box01 .inner_item_txt p:first-of-type strong {
        font-size: 2.8rem !important;
    }
#ga+.contents_box01::before {
    top: 35%;
}
}




/*---------------壊さず重ねて、新しい屋根へ。----------------*/
a#cover-method01+section .inner_item_txt p {
    font-size: 3.6rem !important;
    font-family: "MS PMincho", "MSP明朝", "Noto Serif JP", serif;
    text-shadow: 1px 2px 3px rgb(25 25 26 / 50%);
}

@media screen and (max-width: 800px) {
    a#cover-method01+section .inner_item_txt p {
    font-size: 2.8rem !important;
}
}

a#cover-method01+section .inner_item_txt p+p {
    font-size: 1.8rem !important;
    font-family: "MS PMincho", "MSP明朝", "Noto Serif JP", serif;
    font-family: "Noto Sans JP", sans-serif;
    text-shadow: none;
}

/*----------------①～③の項目---------------*/
a#flow+div .wrapper_item {
    gap: 40px;
    justify-content: center;
}
a#flow+div .inner_item {
    position: relative;
    margin-left: 0 !important;
    margin-bottom: 0;
}
a#flow+div .inner_item_img:after {
    content: "→";
    position: absolute;
    top: calc(50% - 45px);
    font-size: 30px;
    color: #6a5a5a;
    line-height: 1;
    right: calc(0% - 30px);
}
a#flow+div .inner_item:last-child .inner_item_img:after {
    display: none;
}
a#flow+div img {
    aspect-ratio: 1 / 1;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50%;
    object-fit: cover !important;
}
a#flow+div .heading.block_header_4 .h {
    color: #436F95;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}
@media screen and (max-width: 1182px) {
    a#flow+div .wrapper_item {
        gap: 30px;
    }
    a#flow+div .inner_item_img:after {
        font-size: 24px;
        top: calc(50% - 36px);
    }
}
@media screen and (max-width: 900px) {
    a#flow+div .inner_item {
        width: 30% !important;
    }
    a#flow+div img {
        width: 150px !important;
        height: 150px !important;
    }
}
@media screen and (max-width: 640px) {
    a#flow+div .inner_item {
        width: 25% !important;
    }
    a#flow+div img {
        width: 100px !important;
        height: 100px !important;
    }
    a#flow+div .inner_item_img:after {
        font-size: 20px;
        top: calc(50% - 55px);
        right: calc(0% - 25px);
    }
}
@media screen and (max-width: 480px) {
    a#flow+div img {
        width: 80px !important;
        height: 80px !important;
    }
    a#flow+div .inner_item_img:after {
        top: calc(50% - 75px);
    }
}
/*-------------お家の屋根 こんな状況になっていないですか？------------------*/
a#roof+div .heading.block_header_6 .h {
    font-family: "MS PMincho", "MSP明朝", "Noto Serif JP", serif !important;
    font-size: 3.6rem !important;
    font-weight: bold;
}

@media screen and (max-width: 800px) {
    a#roof+div .heading.block_header_6 .h {
    font-size: 2.8rem !important;
}
}

a#roof+div .heading.block_header_4 .h {
    font-size: 3.2rem !important;
    font-family: "MS PGothic", "MSPゴシック", "Noto Sans JP", sans-serif;
    /* font-family: "Noto Sans JP", sans-serif; */
    color: var(--i_txt_color);
    background: #D9D9D9;
}

@media screen and (max-width: 800px) {
    a#roof+div .heading.block_header_4 .h {
    font-size: 2.5rem !important;
}
}

a#roof+div .inner_item_txt p {
    font-family: "MS PGothic", "MSPゴシック", "Noto Sans JP", sans-serif;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem !important;
}


/*--- SP時流れパーツ(2025/09/12) ---*/
@media only screen and (max-width: 800px) {
    a#flow+div .wrapper_item {
        flex-direction: column;
        gap: 50px;
    }
    a#flow+div .inner_item:not(:last-of-type):after {
        content: '↓';
        position: absolute;
        bottom: -50px;
        left: 13%;
        font-size: 3rem;
        font-weight: bold;
    }
    a#flow+div .inner_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 100% !important;
    }
    a#flow+.composite_box01 .inner_item>a {
        width: 30%;
    }
    a#flow+.composite_box01.block_images_1 a+.inner_item_txt {
        width: 65%;
    }
    a#flow+div .heading.block_header_4 .h {
        text-align: left;
    }
}

/*--- 「見えない屋根の傷みご存知ですか？」パーツ調整(2025/09/12) ---*/
#pain01 + .composite_box01.block_images_9 .inner_item_txt .heading:before {
    content: none;
}
#pain01 + .composite_box01.block_images_9 .inner_item_txt .heading {
    height: auto;
    padding: 0;
    aspect-ratio: 4 / 3;
}
#pain01 + .composite_box01.block_images_9 .inner_item_img {
    height: auto;
}
#pain01 + .composite_box01.block_images_9 .inner_item_txt .heading .h {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    text-align: right;
    padding: 0.5rem;
    font-size: 2.6rem!important;
}
@media only screen and (max-width: 920px) {
    #pain01 + .composite_box01.block_images_9 .inner_item_img,
    #pain01 + .composite_box01.block_images_9 .inner_item_txt .heading {
        height: auto !important;
    }
}

/*--- スーパーガルテクト（カバー工法）(2025/09/12) ---*/
#check-lists + div .wrapper_item {
    max-width: 800px;
    margin: 0 auto;
}
#check-lists + div .inner_item_txt li {
    text-align: left;
    list-style: none;
    position: relative;
    padding-left: 2rem;
    font-size: 18px;
}
#check-lists + div .inner_item_txt ul li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: #c1d1e1;
}
#check-lists + div .inner_item_txt ol li:before {
    content: "✗";
    position: absolute;
    left: 0;
    color: #cccccc;
}
#check-lists + div .inner_item_txt:has(ul) .heading.block_header_4 .h {
    background: #c1d1e1;
    border-radius: 50px;
}
#check-lists + div .inner_item_txt:has(ol) .heading.block_header_4 .h {
    background: #cccccc;
    border-radius: 50px;
}
#check-lists + div  .inner_item_img img {
    width: 50% !important;
    height: auto !important;
}

/*--- 選ばれる3つのポイントPC用画像 (2025/09/12) ---*/
#pc + .contents_box01 .inner_item_img img {
    aspect-ratio: initial !important;
}



/*------スーパーガルテクトとはSP表示用*/
#ga_sp_1+section,
#ga_sp_2+div {
    display: none;
}
@media screen and (max-width: 900px) {
    #ga_sp_1+section,
    #ga_sp_2+div {
        display: block;
    }
    #ga+section {
        display: none;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt {
        background: #fff;
        padding: 25px 4% 50px !important;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt {
        width: 100%;
        margin-bottom: 10px;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt p:first-of-type {
        font-size: 3.6rem !important;
        margin-bottom: 30px;
        font-family: "MS PMincho", "MSP明朝", "Noto Serif JP", serif;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt p:first-of-type strong {
        font-size: 4.8rem !important;
        font-weight: 600;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt p:last-of-type {
        font-size: 1.8rem !important;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 500;
    }
    #ga_sp_1+.contents_box01::before {
        position: absolute;
        display: block;
        content: "";
        pointer-events: none;
        background: #D9D9D9;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        width: 80%;
        height: 60%;
        max-width: 700px;
        max-height: 340px;
    }
    a#ga_sp_1+section {
        padding-top: 0;
    }
    #ga_sp_1+.contents_box01 .wrapper_item {
        justify-content: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt {
        width: 100%;
        margin-bottom: 10px;
     }
}
@media screen and (max-width: 800px) {
    #ga_sp_1+.contents_box01::before {
        max-height: none;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt p:first-of-type {
        font-size: 1.9rem !important;
        margin-bottom: 10px;
    }
    #ga_sp_1+.contents_box01 .inner_item_txt p:first-of-type strong {
        font-size: 2.8rem !important;
    }
    #ga_sp_1+.contents_box01::before {
        top: 35%;
    }
}
@media screen and (max-width: 500px) {
    .contents_box01 .inner_item_img img {
        aspect-ratio: unset!important;
    }
}