@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #333333;
    --orange: #f46e45;
    --orangeOff: #ea8a59;
    --navy: #2a315b;
    --gray: #717070;
    --gray-b3: #b3b3b3;
    --warm-gray: #e1d8d1;
    --cream: #fdf5e8;
    --info-title: #f9ebd7;

    --Caslon: 'Libre Caslon Text',serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    --NotoSansJP: "Noto Sans JP","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}
/* topページのローディングのためのcssを打ち消し。全下層ページに必要 */
#header,#mainvisual,main,footer{opacity: 1;}

#mainvisual{
    picture{
        .guide-fv{
            object-position: top;
        }
        .dantai-fv{
            object-position: bottom;
        }
    }
}

#midashi{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0 6rem;

    hgroup{
        width: min(1280px,76dvw);
        margin: 0 auto 2rem;
        text-align: center;

        .h2-guide{
            width: 289px;
            aspect-ratio: 289/67;
            margin: 0 auto;
        }
        .h2-dantai{
            width: 153px;
            aspect-ratio: 153/48;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 19rem;
            margin: 0 auto 2.5rem;
        }
        p{
            line-height: 3.1;
            .sp-br{
                display: none;
                line-height: 0;
            }
        }
    }
}

main{
    .info-list{
        width: 100%;
        background: var(--cream);
        padding: 0 0 6rem;
        position: relative;
        overflow: hidden;

        h3{
            width: min(790px,90%);
            text-align: 1.17rem;
            line-height: 1.5;
            color: var(--orange);
            background: var(--info-title);
            margin: 0 auto;
            padding: 1rem 0;
            text-align: center;
            .sp-br{display: none;}
        }
        .list-inner{
            width: min(790px,90%);
            margin: 0 auto;
            background: var(--white);
            padding: 2rem 0;

            dl{
                width: 90%;
                margin: 0 auto;
                padding: 1rem 0.5rem;
                border-bottom: 1px solid var(--black);
                text-align: left;
                display: flex;
                justify-content: space-between;
                font-weight: normal;
                dt{
                    white-space: nowrap;
                    .sp-br{
                        display: none;
                        line-height: 0;
                    }
                }
                dd{
                    white-space: wrap;
                    .sp-br{
                        display: none;
                        line-height: 0;
                    }
                }     
            }
            dl:last-of-type{
                border: none;
            }
        }
        .eigyou{
            dl{
                gap: 2rem;
                padding-left: 6dvw;
                dt{
                    width: fit-content;
                    min-width: 52px;
                }
                dd{
                    width: 78%;
                }
            }
        }
        .oseki{
            dl{
                gap: 2rem;
                padding-left: 2dvw;
                dt{
                    width: fit-content;
                    min-width: 300px;
                }
                dd{
                    width: 50%;
                    .sp-br{display: none;}
                }
            }
        }
        .ryoukin{
            dl{
                gap: 2rem;
                padding-left: 2dvw;
                dt{
                    width: fit-content;
                    min-width: 224px;
                }
                dd{
                    width: 60%;
                    .sp-br{display: none;}
                }
            }
        }
        .facility{
            dl{
                flex-direction: column;
                gap: 1rem;
                padding: 2rem 0 4rem;
                border: none;
                dt{
                    width: 420px;
                    margin: 0 auto;
                }
                dd{
                    width: 420px;
                    margin: 0 auto;
                    .sp-br{display: none;}
                }
            }
        }
        .list-inner-center{
            width: min(790px, 90%);
            margin: 0 auto;
            background: var(--white);
            padding: 2rem;
            text-align: center;
            p{
                margin-bottom: 0.5rem;
            }
            .text-left{
                width: fit-content;
                text-align: left;
                margin: 0 auto;
            }
            small{
                font-size: 0.875rem;
                color: var(--orange);
            }
        }
        .yuuryou{
            dl{
                justify-content: center;
                gap: 10dvw;
                dt{
                    width: 136px;
                }
                dd{
                    width: 46px;
                    text-align: right;
                }
            }
        }
    }

    .space-none{
        padding: 0;
    }
}
#main-bottom{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0;
    color: var(--white);
    overflow: hidden;
    position: relative;
}
#main-bottom-guide{
    width: 100%;
    padding: 7rem 0;
    color: var(--white);
    overflow: hidden;
    position: relative;
}

#midashi-gray{
    width: 100%;
    background: var(--gray);
    padding: 8rem 0 6rem;
    color: var(--white);

    hgroup{
        width: min(1280px,76dvw);
        margin: 0 auto;
        text-align: center;

        h2{
            width: 324px;
            aspect-ratio: 324/59;
            margin: 0 auto 0.5rem;
        }
        .wave-line-white{
            width: 15rem;
            margin: 0 auto;
        }
    }
}

.info-list-gray{
    width: 100%;
    padding: 0 0 6rem;
    position: relative;
    overflow: hidden;

    h3{
        width: min(790px,90%);
        text-align: 1.17rem;
        line-height: 1.5;
        color: var(--gray);
        background: #cccccc;
        margin: 0 auto;
        padding: 1rem 0;
        text-align: center;
        .sp-br{display: none;}
        .small{
            display: block;
            width: 90%;
            margin: 0 auto;
            font-size: 1rem;
            color: var(--orange);
        }
    }
    .list-inner{
        width: min(790px,90%);
        margin: 0 auto;
        background: var(--white);
        padding: 2rem 0;

        dl{
            width: 90%;
            margin: 0 auto;
            padding: 1rem 0.5rem;
            border-bottom: 1px solid var(--black);
            display: flex;
            justify-content: center;
            font-weight: normal;
            gap: 4rem;
            dt{
                width: 305px;
                white-space: nowrap;
                text-align: left;
                .sp-br{
                    display: none;
                    line-height: 0;
                }
            }
            dd{
                width: 100px;
                white-space: wrap;
                text-align: left;
                .sp-br{
                    display: none;
                    line-height: 0;
                }
            }
        }
        dl:last-of-type{
            border: none;
        }
    }
    .list-inner-center{
        width: min(790px, 90%);
        margin: 0 auto;
        background: var(--white);
        padding: 2rem;
        text-align: center;
        p{
            margin-bottom: 0.5rem;
            .pc-none{display: none;}
            .red{
                color: var(--orange);
            }
        }
        .text-left{
            width: fit-content;
            text-align: left;
            margin: 0 auto;
        }
    }
    .inner-plus{
        padding: 3rem 2rem;
    }
}
.space-none{
    padding: 0 0 2rem;
}

#faq{
    padding: 10rem 0 0 !important;
    hgroup{
        .wave-line-white{
            width: 100%;
        }
    }
}

@media screen and (max-width:960px){
    #mainvisual{
        picture{
            width: 960px;
            min-width: 0;
        }
    }
}

@media screen and (max-width:836px){
    main{
        .info-list{
            .list-inner{
                flex-direction: column;
                .list-left,.list-right{
                    width: 80%;
                    margin: 0 auto 1.5rem;
                }
            }
        }
    }
}

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

        #midashi{
            padding: 8rem 0 6rem;
    
            hgroup{
                width: min(1280px,76dvw);
                margin: 0 auto;
                text-align: center;
    
                .h2-guide{
                    width: 160px;
                }
                .h2-dantai{
                    width: 153px;
                }
                .wave-line-gray{
                    width: min(302.64px, 80%);
                }
                p{
                    display: block;
                    margin: 0 auto;
                    .sp-br{
                        display: block;
                    }
                }
            }
        }
    
        #midashi-gray{
            padding: 8rem 0 6rem;
            hgroup{
                width: min(1280px,76dvw);
                margin: 0 auto;
                text-align: center;
                h2{
                    width: 240px;
                }
            }
        }
    
        .info-list{
            padding: 0 0 8rem;
        }
        .space-none{
            padding: 0;
        }
        #main-bottom,
        #main-bottom-guide{
            padding: 6rem 0 !important;
        }
        #faq{
            padding: 8rem 0 0 !important;
            hgroup{
                .wave-line-white{
                    width: min(290.01px, 80%);
                }
            }
        }
    }
}

@media screen and (max-width:700px){
    main{
        .info-list{
            .oseki{
                dl{
                    flex-direction: column;
                    text-align: center;

                    gap: .5rem;
                    padding: 1rem 0;
                    dt{
                        width: 100%;
                        min-width: none;
                    }
                    dd{
                        width: 100%;
                        br{display: none;}
                        .sp-br{display: block;}
                    }
                }
            }
            .ryoukin{
                dl{
                    flex-direction: column;
                    
                    gap: .5rem;
                    padding: 1rem 0;
                    dt{
                        width: 100%;
                        min-width: none;
                        text-align: center;
                    }
                    dd{
                        width: fit-content;
                        margin: 0 auto;
                        text-align: left;
                        padding: 0 1rem;
                        .sp-br{display: block;}
                    }
                }
            }
        }
    }
}

@media screen and (max-width:620px){
    main{
        .info-list-gray{
            .list-inner{
                width: min(790px,90%);
                margin: 0 auto;
                background: var(--white);
                padding: 2rem 0;
                dl{
                    flex-direction: column;
                    justify-content: center;
                    gap: 0.75rem;
                    dt{
                        width: 100%;
                        text-align: center;
                        .sp-br{
                            display: block;
                        }
                    }
                    dd{
                        width: 100%;
                        text-align: center;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:540px){
    main{
        #mainvisual{
            picture{
                width: 100%;
                img{
                    object-position: bottom;
                }
            }
        }
        .info-list{
            padding: 0 0 6rem;
                h3 .sp-br{
                    line-height: 0;
                    display: block;
                }
                .facility{
                    dl{
                        dd{
                            width: 100%;
                            white-space: wrap;
                        }
                    }
                }
            }
        #main-bottom,
        #main-bottom-guide{
            padding: 4rem 0 !important;
        }
        #faq{
            padding: 6rem 0 0 !important;
        }
    }
}

@media screen and (max-width:530px){
    main{
        .info-list-gray{
            h3{
                .small{
                    .sp-br{
                        display: block;
                    line-height: 0;}
                }
            }
        }
    }
}
@media screen and (max-width:480px){
    main{
        .info-list-gray{
            .list-inner-center{
                p{
                    .pc-none{
                        display: block;
                        line-height: 0;
                    }
                    .sp-none{display: none;}
                }
            }
            .inner-plus{
                padding: 2rem;
            }
        }
    }
}
@media screen and (max-width:395px){
    main .info-list .ryoukin dl dd .sp-none{
        display: none;
    }
}