@charset 'UTF-8';

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

main {
    max-width: 1200px;
    width:100%;
    margin: 1rem auto;
  
}

article,  footer, header, main, nav {
    display: block
}

img {
    max-width: 100%;
}

/*ヘッダー*/
header {
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    left: 0;
    top: 0;
    z-index: 1;
    /*backgroud調整*/
    background-color: #ffffff;
    box-shadow: #bbb 0 0 .2rem;
    height: 5rem;
}

.keasapo_logo{
    margin:-3.5rem 0 0 0;
}

.title_header {
    position: fixed;

    width: 100%;

    display: flex;
    
}

/*ヘッダー要素*/
.header_nav {
    height: 100%;
    font-family: "IBM Plex Sans JP",sans-serif;
    font-size: 1rem;
    font-weight:500;
    display: flex;
    padding-right: 5rem;
}

.header_nav li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1.4rem;
    border-radius: .3rem;
}
    .header_nav li :hover {
        opacity: 0.2;
    }

.header_nav_min{
    display:none;
}
/*スクロール*/
#about, #about2, #id_printlist, #id_price, #id_inquiry {
    margin-bottom: 10rem;
}

/*body*/
h1 {
    font-family: "IBM Plex Sans JP",sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    text-shadow:.3rem .3rem .3rem #eeeeee;
}
h2 {
    font-family: "IBM Plex Sans JP",sans-serif;
    font-weight: 600;
    font-size: 2rem;
}

article {
    text-align: center;
}

.title_img
{
    width: 5rem;
    height: 3rem;
    margin-top: -1rem;
    
}
.explain {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-size: 1.4rem;
}

/*色設定*/
.title_color {
    color: #FF9DFA;
}
.title_color2 {
    /*blue*/
    color: #498FFF; 
}
.title_color3 {
    /*green*/
    color: #FFCB66;
    border-bottom: solid 5px #FFF41C;
}
/*文章設定*/
.explain_border {
    border-bottom: solid 5px #FFF41C;
}

.explain_font {
    font-family: "M PLUS 1p",sans-serif;
}
/*タイトル*/
.top_visual {
    align-content: center;
    margin-top:6rem;
}
.top_day {
    text-align: center;
    font-size: 2rem;
    margin-top:4rem;
}
.top_decoretion_img {
    width: 5rem;
    height: 3rem;
    margin-top: -1rem;
}
/*ケアサポとは*/
.what_care_support {
    /* margin: 5rem 0 0 0;*/
}
.about_explain_list {
    margin-top: 4rem;
}
.about_explain {
    margin-bottom: 4rem;

}

/*何ができるの？*/
.what_main {
    display: flex;
    flex-direction: column;
}


.what_sub_title {
    margin-top: 5rem;
}
.what_sub_title span {
    background-color: aliceblue;
    border-radius: 4rem;
    padding:1rem 4rem 1rem 4rem;
    box-shadow: .3rem .3rem #e7e7f8 ;
}

.what_sub_title_content {
    background-color: aliceblue;
    /*小タイトル全体のpaddingとmargin設定*/
    padding: 3rem;
    margin: 4rem 1rem 2rem 1rem;
    border-radius: 4rem;
}

.img_explain {
    display: flex;
    flex-direction: column;
    margin: 1rem 0 0 0;
}
.what_explain{
    margin: 2rem 0;
 
}


/*印刷書類一覧*/
.print_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 4rem;
    width: 100%;
    /*background調整*/
    background-color: #FFE0EA;
    padding: 2rem 2rem 2rem 2rem;
    border-radius: 4rem;
}

.lum-lightbox.lum-open {
    z-index: 10;
}

.print_decoretion {
    margin-top: 4rem;
}

/*価格*/
.price_img_content {
        display: flex;
    justify-content: center;
    flex-direction: column;

    margin-top: 4rem;
    width: 100%;
}
.price_img {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    width: 100%;
    height: auto;
    gap: 1rem;
}
.price_explain{
    margin-top:3rem;
}
/*お問い合わせ*/

.inquiry_content {
    /*background調整*/
    margin:4rem 0;
    width: 100%;
    background-color: #FFE0EA;
    padding: 3rem 6rem;
    border-radius: 4rem;
}

@media ( max-width: 800px) {
    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.3rem;
    }
    .header_nav{
        font-size:.6rem
    }
    .top_decoretion_img {
        width: 3rem;
        height: 2rem;
        margin-top: -3rem;
    }

    .explain {
        font-size: 1rem;
    }


    .main_nav {
        font-size: .7rem;
    }
    .what_sub_title_content {
        padding: 2rem;
    }

    .what_sub_title_content {
        padding: 3rem;
    }
    .print_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 4rem;
        width: 100%;
        /*background調整*/
        background-color: #FFE0EA;
        padding: 2rem 5rem;
        border-radius: 4rem;
    }

    .inquiry_content {
        /*background調整*/
        padding: 3rem 5rem;
    }


}

@media ( max-width: 700px) {

    .header_nav li {
        display: none;
    }

    .header_nav_min {
        display: flex;
    }

        .header_nav_min li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            /*        padding: 2rem;*/
            margin-top: -1.5rem;
            margin-right: -1rem;
            border-radius: .3rem;
        }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    .top_decoretion_img {
        width: 2rem;
        height: 1rem;
        margin-top: -5rem;
    }

    .explain {
        font-size: 1rem;
    }

    .what_sub_title_content {
        padding: 2rem;
    }

    .print_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 4rem;
        width: 100%;
        /*background調整*/
        background-color: #FFE0EA;
        padding: 2rem 3rem;
        border-radius: 4rem;
    }

    .inquiry_content {
        /*background調整*/
        padding: 3rem 3rem;
    }
}


@media ( max-width: 600px) {

    .header_nav li {
        display: none;
    }

    .header_nav_min {
        display: flex;
    }

        .header_nav_min li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            /*        padding: 2rem;*/
            margin-top: -1.5rem;
            margin-right: -1rem;
            border-radius: .3rem;
        }

    h1 {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1rem;
    }

    .top_decoretion_img {
        width: 2rem;
        height: 1rem;
        margin-top: -5rem;
    }

    .explain {
        font-size: .9rem;
    }

    .what_sub_title_content {
        padding: 1.5rem;
    }

    .print_grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 1rem;
        margin-top: 4rem;
        width: 100%;
        /*background調整*/
        background-color: #FFE0EA;
        padding: 2rem 2rem 2rem 2rem;
        border-radius: 4rem;
    }

    .inquiry_content {
        /*background調整*/
        padding: 3rem 2rem;
    }
}


@media ( max-width: 500px) {

    .header_nav li {
        display: none;

    }
    .header_nav_min{
        display: flex;
    }
    .header_nav_min li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
/*        padding: 2rem;*/
        margin-top:-1.5rem;
        margin-right:-1rem;
        border-radius: .3rem;
    }

        .header_nav_min li :hover {
            opacity: 0.2;
        }
    h1 {
        font-size: 1rem;
    }

    h2 {
        font-size: .6rem;
    }
    .top_decoretion_img {
        width: 2rem;
        height: 1rem;
        margin-top: -5rem;
    }
    .explain {
        font-size: .7rem;
    }

    .what_sub_title_content {
        padding: 1.5rem;
 
    }

    .print_grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 1rem;
        margin-top: 4rem;

        width: 100%;
        /*background調整*/
        background-color: #FFE0EA;
        padding: 2rem 2rem 2rem 2rem;
        border-radius: 4rem;
    }
    .inquiry_content {
        /*background調整*/
        padding: 3rem 2rem;

    }

}