@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;
}

#midashi{
    width: 100%;
    background: var(--cream);
    padding: 14rem 0 4rem;
    position: relative;
    overflow: hidden;

    hgroup{
        width: min(1280px,90%);
        margin: 0 auto 8rem;
        text-align: center;

        .h2-about{
            width: 200px;
            aspect-ratio: 188/56;
            margin: 0 auto 1rem;
        }
        .h2-pp{
            width: 416px;
            aspect-ratio: 416/76;
            margin: 0 auto;
        }
        .wave-line-gray{
            width: 6rem;
            margin: 0 auto 2.5rem;
        }
        p{
            display: block;
            width:  100%;
            margin: 0 auto;
            line-height: 3.1;
            .sp-br{
                display: none;
                line-height: 0;
            }
        }
    }
}
#midashi02{
    width: 100%;
    background: var(--cream);
    padding: 10rem 0 0;

    hgroup{
        width: min(1280px,90%);
        text-align: center;
        margin: 0 auto 6rem;

        .h2-about{
            width: 224px;
            aspect-ratio: 188/56;
            margin: 0 auto 1rem;
        }
        .h2-pp{
            width: 416px;
            aspect-ratio: 416/76;
            margin: 0 auto;
        }
        .wave-line-gray{
            margin: 0 auto 2.5rem;
            width: 13rem;
        }
        p{
            display: block;
            width:  100%;
            margin: 0 auto;
            line-height: 3.1;
            .sp-br{
                display: none;
                line-height: 0;
            }
        }
    }
}

table{
    width: 100%;
    background: var(--cream);
    tbody{
        display: block;
        width: min(1102px,90%);
        margin: 0 auto;
        border-top: 1px solid var(--black);
        border-left: 1px solid var(--black);
        border-right: 1px solid var(--black);
        box-sizing: border-box;
        tr{
            height: 100%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--black);
            background: #F9EDDD;
            box-sizing: border-box;
            th{
                width: 31.49%;
                height: 100%;
                padding: 0 2rem;
                font-weight: normal;
            }
            td{
                width: 68.51%;
                height: 100%;
                background: var(--white);
                padding: 2rem;
                border-left: 1px solid var(--black);
                box-sizing: border-box;
                font-weight: normal;
            }
        }
    }
}
#main-bottom{
    width: 100%;
    background: var(--cream);
    padding: 10rem 0;
    color: var(--white);
    overflow: hidden;
    position: relative;
}

@media screen and (max-width:935px){
    #midashi02{
        hgroup{
            p{
                .sp-none{
                    display: none;
                }
            }
        }
    }
}

@media screen and (max-width:820px){
    #midashi,#midashi02{
        padding: 10rem 0 2rem;

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

            .h2-guide{
                width: 160px;
            }
            .h2-dantai{
                width: 153px;
            }
            .h2-about{
                width: 121px;
            }
            .h2-pp{
                width: 197px;
            }
            .wave-line-gray{
                width: 100%;
            }
            p{
                .sp-none{
                    display: none;
                }
            }
        }
    }
    #main-bottom{
        padding: 8rem 0;
    }
}

@media screen and (max-width:767px){
    table{
        tbody{
            tr{
                flex-direction: column;
                th{
                    width: 100%;
                    padding: 1rem 2rem;
                }
                td{
                    width: 100%;
                    border-top: 1px solid var(--black);
                    border-left: none;
                    padding: 1rem 2rem;
                }
            }
        }
    }
}

@media screen and (max-width:540px){
    #midashi,#midashi02{
        padding: 9rem 0 0;
    }
    #main-bottom{
        padding: 6rem 0;
    }
}