@charset "UTF-8";

main{
    width: 100%;
    margin: 0 auto;
    padding: 145px 0 0;
    position: relative;
}
section#section01,
section#section02{
    padding: 0 0 0;

    h3{
        color: var(--color04);
        font-size: var(--font24-30);
        line-height: 1.6em;
        text-align: center;
        width: 100%;
        margin: 0 auto 5%;
        padding: 0 0 0;
    }
}
section#section01{
    max-width: var(--width03);
    width: 98%;
    margin: 0 auto 5%;
    padding: 0 0 0;

    h2{
        color: var(--color04);
        font-family: var(--font02);
        font-weight: 500;
        font-size: var(--font32-50);
        text-align: center;
        width: 100%;
        margin: 0 auto 3%;
        padding: 3% 0 0;
    }

    p{
        color: var(--color04);
        line-height: 1.8em;    
        margin: 0 auto 5%;
    }

    figure{
        text-align: center;
        width: 100%;
    }
    figure img{
        margin: 0 auto;
    }
}
section#section02{
    width: 100%;
    margin: 0 auto;
    padding: 0;

    .inner{
        max-width: var(--width04);
        width: 98%;
        margin: 0 auto 5%;

        h2{
            border-bottom: 1px solid var(--colorB);
            color: var(--color04);
            font-family: var(--font02);
            font-weight: 500;
            font-size: var(--font24-30);
            text-align: center;
            width: 100%;
            margin: 0 auto 5%;
            padding: 0 0 20px;
            position: relative;

            &:after{
                content: "";
                background: var(--colorB);
                border-radius: 20px;
                height: 6px;
                width: 26%;
                position: absolute;
                bottom: -3px;
                left: 37%;
            }
        }
        .outlineSet{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width:95%;
            margin: 0 auto 2%;
            padding: 0;

            .madori{
                color: var(--color03);
                display: flex;
                flex-wrap: wrap;
                width: 50%;

                b{
                    font-size: var(--font32-50);
                    padding: 0 10px 0 0;
                }
            }
            .menseki{
                color: var(--colorB);
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                width: 50%;

                dl.sikichi,
                dl.yuka{
                    display: flex;
                    flex-wrap: wrap;
                    width: 50%;

                    dt{
                        font-size: 12px;
                        width: 100%;
                    }
                    dd{
                        display: flex;
                        align-items: baseline;
                        width: 100%;

                        b{
                            font-size: var(--font32-50);
                        }
                    }
                }
                p{
                    font-size: 14px;
                    text-align: right;
                    width: 100%;
                    margin: 10px 0 0;
                }
            }
        }

        .photoSet{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            width: 100%;
            margin: 0 auto 5%;
            padding: 0;

            .main{
                width: calc(65% - 10px);
                overflow: hidden;

                img{
                    object-fit: cover;
                    height: 100%;
                }
            }
            .sub{
                width: 35%;

                img{
                    display: block;

                    &:first-child{
                        margin: 0 0 10px;
                    }
                }
            }
        }
    }
}
section#information{
    margin: 0 auto 5%;
}

@media all and (max-width:768px){
main{
    padding: 65px 0 0;

    img{
        object-fit: cover;
        height: 270px;
    }
}
section#section01{
    padding: 30px 0 0;

    p{
        width: 90%;
        margin: 0 auto 8%;
    }
}
section#section01,
section#section02{
    h2{
        width: 90%;
        margin: 0 auto 8%;
    }
    h3{
        width: 95%;
        margin: 0 auto 8%;
    }
}
section#section02{
    .inner{
        margin: 0 auto 8%;

        .outlineSet{
            margin: 0 auto 5%;
            .madori{
                width: 100%;
                margin: 0 0 10px;
            }
            .menseki{
                width: 100%;

                dl{
                    width: 50%;
                }
                p{
                    font-size: 12px;
                }
            }
        }
        .photoSet{
            .main{
                width: 100%;
                margin: 0 0 10px;
            }
            .sub{
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                overflow: hidden;

                img{
                    width: calc(50% - 5px);

                    &:first-child{
                        margin: 0;
                    }
                }
            }
        }
    }
}
}

@media all and (min-width:769px) and (max-width:960px){
    main{
        padding:165px 0 0;
    }
}