:root{
    --gxzeh-accent-color01:#004C4C;
}

/* === mainVisual === */
#gxzeh{
    max-width:1260px;
    margin:0 auto;
    position:relative;
    & .txt{
        font-size:16px;
    }
    & .mainVisual{
        width:100%;
        padding:3rem 0;
        position:relative;
        &::before{
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:80%;
            height: 100%;
            background:#F6F6F6;
            z-index:-1;
        }
        & .inner{
            display:flex;
            flex-wrap:wrap;
            position:relative;
            justify-content:flex-end;
            & h1{
                position:absolute;
                width:62%;
                left:0;
                top:50%;
                transform:translateY(-50%);
                z-index:1;
            }
            & figure{margin:0;}
            & > p{
                width:72.222222%;
            }
            & > .price{
                width:26.666666667%;
                position:absolute;
                right:2rem;
                bottom:2rem;
                z-index:2;
            }
        }

        & .txtBox{
            width:80%;
            padding:2rem 2rem 0;

            & > p{
                padding-bottom:1rem;
            }
            & > small{
                display:block;
                font-size:12px;
                text-indent:-16px;
                padding-left:16px;
            }
        }
        
    }
}

/* === about === */
#gxzeh{
    & .sectionBox{
        padding:0 2rem;
        & h2{
            color:var(--gxzeh-accent-color01);
            font-size:35px;
            margin-top:70px;
            text-align:center;
            padding-bottom:8px;
            position:relative;

            &::after{
                content:"";
                position:absolute;
                bottom:0;
                left:50%;
                transform:translateX(-50%);
                width:100px;
                height: 3px;
                background:var(--gxzeh-accent-color01);
            }
        }
    }
    & .about{
        & p{
            text-align:center;
            margin:30px 0;
            line-height:1.8;
        }
        & .imgBox{
            max-width:100%;
            margin:0 auto;
            display:block;
            padding:10px 0;
        }
    }
}

/* === merit === */
#gxzeh{
    & .merit{
        & ul{
            display:flex;
            flex-wrap:wrap;
            gap:32px;
            margin-top:50px;
            & li{
                width:calc(50% - 32px / 2);
                background:#F6F6F6;
                & section{
                    padding:42px 30px 30px;
                    position:relative;
                    & .ttl{
                        font-size:20px;
                        color:#FFF;
                        background:var(--gxzeh-accent-color01);
                        padding:0 10px;
                        font-weight:bold;
                        display:inline-block;
                        vertical-align:baseline;
                        position:absolute;
                        left:0;
                        top:0;
                        & p{
                            position:relative;
                            & > span{
                                font-size:26px;
                                font-family: "Roboto", sans-serif;
                                vertical-align:baseline;
                            }
                            &::after{
                                content: "";
                                position: absolute;
                                top: 0;
                                right: -29px;
                                width: 20px;
                                height: 100%;
                                background-color: var(--gxzeh-accent-color01);
                                clip-path: polygon(0 0, 100% 0, 0 100%);
                            }
                        }
                    }
                    & h3{
                        font-size:26px;
                        text-decoration: underline;
                        text-decoration-thickness: 0.5em;
                        text-decoration-color:#FFF4A9;
                        text-underline-offset: -0.2em;
                        text-decoration-skip-ink: none;
                        text-align:center;
                        padding-bottom:20px;

                        & + p{
                            line-height:1.8;
                        }
                    }
                }
            }
        }
    }
}

/* === btnBox === */
#gxzeh{
    & .btnBox{
        max-width:560px;
        margin: 80px auto 0;
        position:relative;
        background:#000;
        color:#FFF;
        font-size:22px;
        padding:15px;
        display:block;
        font-weight:bold;
        text-align:center;
        transition: opacity .3s ease;

        &::after {
            content: "\f105";
            font-size:22px;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-family: FontAwesome;
            font-weight: bold;
            color:#FFF;
        }
        &:hover{
            opacity:0.6;
        }
    }
}

/* === actie用 === */

#gxzeh{
    margin-top:80px;
    & .btnBox{
        margin: 80px auto;
    }
}



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

}
@media screen and (max-width: 1023px){
    /* === merit === */
    #gxzeh{
        & .merit{
            & ul{
                gap:20px;
                & li{
                    width:calc(50% - 20px / 2);
                    & section{
                        padding:42px 20px 30px;
                        & .ttl{
                            font-size:18px;
                            & p{
                                & > span{
                                    font-size:22px;
                                }
                                &::after{
                                    right: -29px;
                                    width: 20px;
                                }
                            }
                        }
                        & h3{
                            font-size:22px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 767px) {
    #gxzeh{
        & .txt{
            font-size:14px;
        }
        & .mainVisual{
            width:100%;
            &::before{
                width:96%;
            }
            & .inner{
                & h1{
                    width:96%;
                    top:56%;
                    transform:translateY(0);

                    & + figure{
                        width:96%;
                    }
                }
                & > p{
                    width:96%;
                }
                & > .price{
                    width:50%;
                    position:absolute;
                    right:0;
                    bottom:0;
                    left: 7vw;
                    top: 4vw;
                    z-index:2;
                }
            }

            & .txtBox{
                width:96%;

                & > p{
                    padding-bottom:1rem;
                    padding-top:40px;
                    font-size:14px;
                }
                & > small{
                    display:block;
                    font-size:10px;
                    text-indent:-12px;
                    padding-left:12px;
                }
            }
            
        }
    }

    /* === about === */

    #gxzeh{
        & .sectionBox{
            & h2{
                font-size:26px;
                margin-top:40px;
                & br{
                    display:none;
                }
            }
        }
        .about{
            & p{
                margin:15px 0;
                & .sp-none{
                    display:none;
                }
            }
        }
    }

    /* === merit === */
    #gxzeh{
        & .merit{
            & ul{
                margin-top:30px;
                & li{
                    width:100%;
                    & section{
                        padding:42px 10px 20px;
                    }
                }
            }
        }
    }

    /* === btnBox === */
    #gxzeh{
        & .btnBox{
            margin: 40px auto 0;
            font-size:16px;
            &::after {
                font-size:16px;
            }
        }
    }

    /* === actie用 === */
    #gxzeh{
        & .btnBox{
            margin: 40px auto;
        }
    }

}