@charset "UTF-8";

/*
Theme Name:城南図書館・児童館2026
Description:城南図書館・児童館2026リニューアル用
Version:1.0
Author:Risa Kumamoto
*/


/* 共通部分
-------------------------------------------------*/
html {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 62.5%;
    scroll-behavior: smooth; /*ページ内リンクをなめらかにスクロール*/
}

body {
    color: #504D4D;
    font-size: 1.6rem;
    background-color: #fff;
    line-height: 2.7rem;

    @media screen and (max-width:1024px) {
        font-size: 1.4rem;
        line-height: 2.1rem;
    }
}

img {
    -o-object-fit: cover;
       object-fit: cover;
}

a {
    color: #EE831E;
    transition: all 0.4s ease;
    text-decoration: underline;

    &:hover {
        color: #FFC052;
    }
}


a.a-nohover:hover {
    color: #EE831E;
}

.flex {
    display: flex;
    justify-content: center; /*基本中央寄せ*/
}

.wrapper1080 {
    width: 1080px;
    margin: 0 auto;

     @media (max-width: 1024px) {
        width: 100%;
        padding: 0 15px;
     }
}

.wrapper930 {
    width: 930px;
    margin: 0 auto;

     @media (max-width: 800px) {
        width: 100%;
        padding: 0 15px;
     }
}

.bg-beige {
    background-color: #FFF6ED;
}
.bg-white {
    background-color: #fff;
}

h2 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #5C9B63;
    margin-bottom: 30px;

    @media (max-width: 800px) {
        text-align: center;
     }
}

h3 {
    font-size: clamp(2rem, 2.777vw, 3rem);
    font-weight: 500;
    color: #ee8313;
    margin-bottom: clamp(20px, 2.777vw, 30px);
}

.a_button {
    width: fit-content;
    padding: clamp(10px, 1.388vw, 15px) clamp(12px, 1.851vw, 20px);
    text-decoration: none;
    font-size: clamp(1.6rem, 1.851vw, 2rem);
    font-weight: 500;
    background: #fff;
    border: 1px solid #ee831e;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #B3ADA7;
    margin: 0 auto 20px;
    transition: 0.4s all;

    &::before {
        content: url('images/icon_button_arrow.svg');
        display: inline-block;
        width: 25px;
        height: 25px;
        vertical-align: bottom;

        @media screen and (max-width:1024px) {
            width: 23px;
            height: 23px;
        }
    }

    &:hover {
        box-shadow: none;
        background: #ee8313;
        border: 1px solid #fff;
        color: #fff;

        &::before {
            content: url('images/icon_button_arrow_hover.svg');
        }
    }
}

main {
    padding-bottom: clamp(100px, 17.592vw, 190px);
}

.sp {
    display: none;

    @media screen and (max-width:1024px) {
        display: block;
    }
}

.pc {
    display: block;
    @media screen and (max-width:1024px) {
        display: none;
    }
}

.h2_sougou {
    width: 100%;
    padding-top: clamp(80px, 11.111vw, 120px);
    margin-bottom: 25px;

    h2 {
        color: #fff;
        font-size: clamp(2rem, 3.703vw, 4rem);
        font-weight: 500;
        background: #ee8313;
        text-align: center;
        height: clamp(75px, 18.518vw, 200px);
        line-height: clamp(75px, 18.518vw, 200px);
    }
}

.breadlist {
    margin-bottom: clamp(50px, 6.481vw, 70px);

    ul {
        display: flex;
        flex-wrap: wrap;
        
        li {
            
            a {
                color: #504D4D;
            }

            &::after {
                content: ">";
                margin: 0 5px;
                text-decoration: none;
            }

            &:last-child::after {
                content: none;
            }

            :hover {
                opacity: .5;
            }
        }
    }
}

.left {
    text-align: left;
}

section {
    width: 100%;
    margin-bottom: 50px;
}

.theme-child {

    .hamburger_menu {
        display: none;

        @media screen and (max-width:930px) {
            display: block;
        }
    }

    a {
        color: #FFB44E;
        
        &:hover {
            color: #FFB44E;
        }
    }

    h3 {
        font-size: clamp(1.8rem, 2.314vw, 2.5rem);
        color: #FFB44E;
    }
    
    h2 {
        color: #FFB44E;
    }

    .a_button {
        border: 1px solid #EE831E;
        
        &::before {
            content: url('images/icon_childbutton_arrow.svg');
        }

        &:hover {
            color: #fff;
            background: #ffb44e; 

            &::before {
                content: url('images/icon_childbutton_arrow_hover.svg');
            }
        }
    }

    .p_underbar {
        span {
            &::after {
                background: #FFB44E;
            }
        }
    }

    .news-frame {
        border: #FFB44E 2px solid;
    }

    .breadlist {
        margin: 0 auto;
        padding-top: 20px;
    }

    .footer-bottom {
        background: #FFB44E;

        &::before {
            background: #FFB44E;
        }

        #footer-access .access-card h4 {
            background: #FFB44E;
        }
    }


    .hamburger_icon {
        width: 65px;
        background-color: #fff;
        top: 0;
        right: 0;

        span.hamburger_icon_border,
        span.hamburger_icon_border:before,
        span.hamburger_icon_border:after {
            width: 35px;
            background-color: #FFB44E;
        }
        span.hamburger_icon_border {
            top: 23px;
            right: 15px;
        }
        span.hamburger_icon_border:before {
            bottom: 8px;
        }
        span.hamburger_icon_border:after {
            top: 8px;
        }
        span.hamburger_icon_string:before {
            color: #FFB44E;
            bottom: 5px;
            left: 17px;
        }
    }
    #hamburger_icon_check:checked ~ .hamburger_icon span.hamburger_icon_border {
        background-color: #fff;
    }

    .hamburger_nav {
        top: 60px;
        height: calc(100vh - 60px);

        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iPhoneで慣性スクロール */
    }

    @media screen and (max-width:930px) {
        .header-sticky {
            background: #FFF6EA;
        }
    }

    .postlist {
        width: 100%;

        p {
            @media screen and (max-width:800px) {
                width: 100%;
            }

            &::after {
                content: '→';
                color: #FFB44E;
                position: absolute;
                right: 0;
            } 
        }
    }

    .pagenation {

        color: #FFB44E;
        
        a.page-numbers {
            color: #9A9A9A;
            &:hover {
                color: #FFCB84;
            }
        }

        a.next,
        a.prev  {
            color: #FFB44E;

            &:hover {
                color: #FFCB84;
            }
        }

        @media screen and (max-width:800px) {
            margin-bottom: 90px;
        }

    }

    article {
        width: 100%;
        padding: 0;
    }

    dl.qa {
        dt {
            span {
                background: #FFB44E;
            }
        }

        dd {
            span {
                color: #FFB44E;
                border: 1.5px solid #FFB44E;
            }
        }
    }

}

.theme-library {

    .hamburger_menu {
        display: none;

        @media screen and (max-width:930px) {
            display: block;
        }
    }

    a {
        color: #5C9B63;
        
        &:hover {
            color: #7EC987;
        }
    }

    h3 {
        font-size: clamp(1.8rem, 2.314vw, 2.5rem);
        color: #5C9B63;
    }

    .a_button {
        border: 1px solid #5C9B63;
        
        &::before {
            content: url('images/icon_libbutton_arrow.svg');
        }

        &:hover {
            color: #fff;
            background: #5C9B63;

            &::before {
                content: url('images/icon_libbutton_arrow_hover.svg');
            }
        }
    }

    .breadlist {
        margin: 0 auto;
        padding-top: 20px;
    }

    .footer-bottom {
        background: #7EC987;

        &::before {
            background: #7EC987;
        }

        #footer-access .access-card h4 {
            background: #7EC987;
        }
    }

    .hamburger_icon {
        width: 65px;
        background-color: #fff;
        top: 0;
        right: 0;

        span.hamburger_icon_border,
        span.hamburger_icon_border:before,
        span.hamburger_icon_border:after {
            width: 35px;
            background-color: #5C9B63;
        }
        span.hamburger_icon_border {
            top: 23px;
            right: 15px;
        }
        span.hamburger_icon_border:before {
            bottom: 8px;
        }
        span.hamburger_icon_border:after {
            top: 8px;
        }
        span.hamburger_icon_string:before {
            color: #5C9B63;
            bottom: 5px;
            left: 17px;
        }
    }
    #hamburger_icon_check:checked ~ .hamburger_icon span.hamburger_icon_border {
        background-color: #fff;
    }

    .hamburger_nav {
        top: 60px;
        height: calc(100vh - 60px);

        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iPhoneで慣性スクロール */

        .ul_liv {
            background: #f0fff2;
            border: 1px solid #fff;
            
            a {
                color: #5c9b63;
            }
        }

    }

    .postlist {
        width: 100%;

        p {

            @media screen and (max-width:800px) {
                width: 100%;
            }

            &::after {
                content: '→';
                color: #5C9B63;
                position: absolute;
                right: 0;
            } 
        }
    }

    .pagenation {

        color: #5C9B63;
        
        a.page-numbers {
            color: #9A9A9A;
            &:hover {
                color: #A4E0AB;
            }
        }

        a.next,
        a.prev  {
            color: #5C9B63;

            &:hover {
                color: #A4E0AB;
            }
        }

    }

    article {
        width: 100%;
        padding: 0;
    }

}




.p-bold {
    font-weight: bold;
}

.p-red {
    width: fit-content;
    display: inline;
    color: #E55959;
}

.ol-disc {
    margin-bottom: 20px;

    li::before {
        content: "・";
        font-weight: bold;
    }
}

/*-------------------------------------------------

  index.html トップページ

-------------------------------------------------*/

/* ヘッダー
-------------------------------------------------*/
#sougou-header {
    width: 100%;
    background-color: #FFF9F4;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    position: fixed;
    z-index: 999;
    
    .flex {
        justify-content: space-between;
        align-items: center;
        height: clamp(80px, 11.111vw, 120px);
    }

    h1 {
        font-weight: 500;
        font-size: clamp(1.8rem, 2.592vw, 2.8rem);
        line-height: clamp(2.6rem, 3.518vw, 3.8rem);
    }

    a {
        text-decoration: none;
    }

    ul {
        display: flex;
        font-weight: 500;
        font-size: 2.4rem;
        gap: 60px;
    }
}

/* ハンバーガーアイコン */
.hamburger_icon {
    position: fixed;
    height: 60px;
    width: 30px;
    background-color: #FFF6ED;
    z-index: 999;
    top: 15px;
    right: 15px;

    span.hamburger_icon_border,
    span.hamburger_icon_border:before,
    span.hamburger_icon_border:after {
        content: '';
        display: block;
        height: 2px;
        width: 30px;
        border-radius: 2px;
        background-color: #EE831E;
        position: absolute;
    }
    span.hamburger_icon_border {
        top: 18px;
        right: 10px;
    }
    span.hamburger_icon_border:before {
        bottom: 8px;
    }
    span.hamburger_icon_border:after {
        top: 8px;
    }

    span.hamburger_icon_string {
        display: block;
    }
    span.hamburger_icon_string:before {
        content: 'MENU';
        display: block;
        position: absolute;
        bottom: 8px;
        left: -10px;
        margin: auto;
        color: #EE831E;
        font-size: 1.1rem;
        font-weight: bold;
    }
}
#hamburger_icon_check:checked ~ .hamburger_icon span.hamburger_icon_border {
    background-color: #FFF6ED;
}
#hamburger_icon_check:checked ~ .hamburger_icon span.hamburger_icon_border::before {
    bottom: 0;
    transform: rotate(45deg);
}
#hamburger_icon_check:checked ~ .hamburger_icon span.hamburger_icon_border::after {
    top: 0;
    transform: rotate(-45deg);
}
#hamburger_icon_check:checked ~ .hamburger_icon span.hamburger_icon_string::before {
    content: '閉じる';
}

/* ハンバーガーメニュー(メニュー)
-------------------------------------------------*/
.hamburger_nav {
    width: 100%;
    top: 80px;
    height: auto;
    padding: 30px 15px 0;
    position: fixed;
    bottom: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 998;
    background-color: #FFF6ED;
    transition: all 0.3s;

    a {
        text-decoration: none;
    }

    ul {
        border-radius: 12px;
        background: #fff;
        padding: 5px 0;
        margin-bottom: 15px;

        li {
            width: 100%;
            font-size: 1.6rem;
            font-weight: 500;
            padding: 10px 20px 10px 15px;
            color: #EE831E;

            a {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;

                &::after {
                    content: "▶";
                    font-size: 1.4rem;
                    position: absolute;
                    right: 0px;
                }
            }
        }
    }

    .ul_sougou {
        background: #ffeffc;
        border: 1px solid #fff;

        a {
            color: #FF8BE9;
        }
    }

    .ul_liv {
        background: #f0fff2;
        border: 1px solid #fff;
        
        a {
            color: #5c9b63;
        }
    }

    .ul_child {
        background: #fff3e0;
        border: 1px solid #fff;
        
        a {
            color: #ffb44e;
        }
    }

    .ul_libchild {
        a {
            color: #ED6100;
        }
    }

    .hamburgar_snsarea {
        width: fit-content;
        margin: 30px auto 40px;
        display: flex;
        align-items: center;
        gap: 15px;
    }
}

.p_orange {
    color: #EB6502;
}
.p_green {
    color: #5C9B63;
}
.p_navy {
    color: #44507E;
}
.p_yellow {
    color: #FBB146;
}

#hamburger_icon_check:checked ~ .hamburger_nav {
    left: 0%;/*メニューを画面内へ*/
}

#hamburger_icon_check {
    display: none;
}


/* ヒーロー
-------------------------------------------------*/
.hero {
    width: 100%;
    height: clamp(300px, 72.685vw, 785px);
    z-index: 990;
    background-image: url(images/sougou_top_image.webp);
    background-image: -webkit-image-set(url(images/sougou_top_image.webp) 1x, url(images/sougou_top_image@2x.webp) 2x);
    background-image: image-set(url(images/sougou_top_image.webp) 1x, url(images/sougou_top_image@2x.webp) 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

    .curve{
        position:absolute;
        left:0;
        bottom:-1px;
        width:100%;
        margin-top: clamp(200px, 21.296vw, 230px);
        display:block;
    }
}

/* 図書館・児童館　リンクバナー
-------------------------------------------------*/
#sougou-link {
    padding-bottom: 70px;

    .pagelink {
        gap: clamp(18px, 3.24vw, 35px);
        margin-top: clamp(-250px, -23.148vw, -50px);
        position: relative;
        z-index: 995;

        .pagelink_card {
            display: block;
            padding: clamp(4px, 0.925vw, 10px) clamp(4px, 0.925vw, 10px) clamp(8px, 1.574vw, 17px);
            border-radius: clamp(16px, 2.777vw, 30px);
            text-align: center;
            color: #fff;
            font-size: clamp(1.3rem, 2.5vw, 2.7rem);
            font-weight: bold;
            text-decoration: none;

            .card-img {
                width: clamp(155px, 39.537vw, 427px);
                height: clamp(124px, 19.629vw, 212px);
                border-radius: clamp(16px, 2.777vw, 30px) clamp(16px, 2.777vw, 30px) 0 0;
                overflow: hidden;
                margin-bottom: clamp(8px, 1.574vw, 17px);
                position: relative;

                @media screen and (max-width:1024px) {
                    img {
                        height: 120%;
                        width: 100%;
                    }
                }
            }
        
            &:hover {
                .card-img img {
                    transform: scale(1.1, 1.1);
                    transition: 0.4s all;
                }
            }
        }

        #lib_linkcard {
            background-color: #7EC987;
            
            .card-img img {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

            &:hover {
                background-color: #9ED9A5;
            }
        }

        #child_linkcard {
            background-color: #FFB44E;

            &:hover {
                background-color: #FFC370;
            }
        }
    }
}

/* イベントグリッド
-------------------------------------------------*/
.event-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, clamp(45%, 25.462vw, 275px));
    row-gap: clamp(26px, 4.629vw, 50px);
    column-gap: clamp(20px, 3.24vw, 35px);
    margin-bottom: 45px;
    text-align: left;
    place-content: center;

    @media screen and (max-width:1024px) {
        grid-template-columns: repeat(2, clamp(45%, 25.462vw, 275px));
    }

    a.event-grid_card {
        display: block;
        color: #504D4D;
        text-decoration: none;

        .card-img {
            width: 100%;
            height: clamp(105px, 17.87vw, 193px);
            border-radius: clamp(13px, 2.777vw, 30px);
            overflow: hidden;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }
        }

        .cat-icon {
            margin-bottom: clamp(2px, 1.388vw, 15px);
        }

        time,
        .eventdatetext {
            display: block;
        }

        &:hover {
            .card-img img {
                transform: scale(1.1, 1.1);
                transition: 0.4s all;
            }

            color: #AAAAAA;
        }
    }
}

#sougou-event {
    background-image: url(images/bg_dot.webp);
    background-image: -webkit-image-set(url(images/bg_dot.webp) 1x, url(images/bg_dot@2x.webp) 2x);
    background-image: image-set(url(images/bg_dot.webp) 1x, url(images/bg_dot@2x.webp) 2x);
    padding-bottom: 155px;

    @media screen and (max-width:1024px) {
        width: 100%;
        padding: 0 15px 60px;
    }

    .bg-white {
        padding: clamp(10px, 2.314vw, 25px) clamp(15px, 3.708vw, 40px) 40px;
        width: min(107.407vw, 1160px);
        margin: 0 auto;
        border-radius: clamp(28px, 5.555vw, 60px);
        text-align: center;

        @media screen and (max-width:1024px) {
            width: 100%;
        }

        .event-grid {
            width: 100%;
            grid-template-columns: repeat(3, clamp(150px, 30vw, 324px));
            row-gap: clamp(26px, 5.555vw, 60px);
            column-gap: clamp(15px, 4.629vw, 50px);
            margin-bottom: 30px;
            place-content: center;

            @media screen and (max-width:1024px) {
                grid-template-columns: repeat(2, clamp(150px, 30vw, 324px));
            }

            a.event-grid_card {

                width: clamp(150px, 30vw, 324px);

                .card-img {
                    width: 100%;
                    height: clamp(105px, 21.111vw, 228px);
                    border-radius: clamp(13px, 2.777vw, 30px);
                }

            }
        }
    }

    a {
        display: block;
    }

}

.cat-icon {
    display: inline-block;
    color: #fff;
    font-size: clamp(1.3rem, 1.388vw, 1.5rem);
    line-height: 1.8rem;
    font-weight: 500;
    padding: clamp(1px, 0.4629vw, 5px) clamp(20px, 2.314vw, 25px);
    border-radius: 9px;
}

.cat-lib {
    background: #7ec987;
}

.cat-child {
    background: #ffb44e;
}

.cat-all {
    background: #ff8be9;
}

/* お知らせ
-------------------------------------------------*/
#sougou-news {
    width: 100%;
    background-color: #fff;
    padding: clamp(10px, 6.481vw, 70px) 0 clamp(10px, 6.481vw, 70px);
    position: relative;

    &::before {
        content: "";
        background-color: #fff;
        width: 100%;
        height: clamp(15px, 4.629vw, 50px);
        position: absolute;
        left: 0;
        top: clamp(-60px, -9.259vw, -100px);

        -webkit-mask-image: url(images/bg_topnews_header.svg);
        -webkit-mask-size: cover;
        mask-image: url(images/bg_topnews_header.svg);
        mask-size: cover;
        mask-position: center;
    }

    &::after {
        content: "";
        background-color: #fff;
        width: 100%;
        height: clamp(15px, 4.629vw, 50px);
        position: absolute;
        left: 0;
        bottom: clamp(-60px, -9.259vw, -100px);

        -webkit-mask-image: url(images/bg_topnews_footer.svg);
        -webkit-mask-size: cover;
        mask-image: url(images/bg_topnews_footer.svg);
        mask-size: cover;
        mask-position: center;
    }

    .news-frame {
        width: clamp(300px, 75.925vw, 820px);
        padding: clamp(10px, 3.703vw, 40px) clamp(20px, 5.555vw, 60px) clamp(25px, 4.166vw, 45px);
        border: 2px solid #ee8313;
    }
}

#sougou {
    padding-bottom: 0;
}

.news-frame {
    width: 100%;
    margin: 0 auto;
    border-radius: clamp(9px, 4.814vw, 52px);
    background: #fff;
    border: 2px solid #5C9B63;
    padding: clamp(25px, 3.703vw, 40px) clamp(20px, 2.7777vw, 30px) 25px;

    h3 {
        text-align: center;

        @media screen and (max-width:800px) {
            font-size: 2rem;
        }
    }

    ul {
        margin-bottom: 40px;

        li {
            margin-bottom: 25px;
        }

        a {
            color: #504D4D;
            text-decoration: none;
            display: flex;
            align-items: center;

            @media screen and (max-width:1024px) {
                display: block;
            }


            &:hover {
                color: #AAAAAA;
            }

            time {
                margin-right: clamp(10px, 1.388vw, 15px);
            }

            .cat-icon {
                font-size: 1.4rem;
                margin-right: 1em; 
                line-height: 1.6rem;
                white-space: nowrap;

                @media screen and (max-width:1024px) {
                    width: fit-content;
                    padding: 5px 10px;
                    .sp {
                        display: inline;
                    }
                }

            }

            p {
                font-weight: bold;
            }
        }
    }

    .a_button {
        display: block;
    }

}

/* フッター
-------------------------------------------------*/
footer {
    a {
        text-decoration: none;
    }

    .footer-top {
        background-color: #FFF1E3;
        display: grid;
        justify-content: center;
        align-items: center;
        column-gap: clamp(10px, 2vw, 20px);
        row-gap: clamp(20px, 2.777vw, 30px);
        grid-template-columns: repeat(4, clamp(165px, 20.092vw, 217px));
        text-align: center;
        padding: 100px 0;

        @media screen and (max-width:1024px) {
            grid-template-columns: repeat(2, clamp(165px, 20.092vw, 217px));
        }


        img {
            width: 100%;
        }
    }

    .footer-bottom {
        background-color: #EE8313;
        color: #fff;
        text-align: center;
        position: relative;
        font-weight: 500;
        font-size: clamp(1.5rem, 2.129vw, 2.3rem);
        line-height: clamp(2.7rem, 3.703vw, 4rem);
        padding-top: 30px;
        /* margin-top: -1px; */

        p {
            margin-bottom: 40px;
        }

        a {
            color: #fff;
            &:hover {
                color: #fff;
            }
        }

        &::before {
            content: "";
            background-color: #EE8313;
            width: 100%;
            height: calc(clamp(15px, 4.629vw, 50px) + 1px);
            position: absolute;
            left: 0;
            top: clamp(-50px, -4.629vw, -15px);

            -webkit-mask-image: url(images/bg_footer_header.svg);
            -webkit-mask-size: cover;
            mask-image: url(images/bg_footer_header.svg);
            mask-size: cover;
            mask-position: center;
            /* z-index: -1; */
        }

        #h1_footer {
            font-size: clamp(2.4rem, 3.24vw, 3.5rem);
            font-weight: bold;
            line-height: clamp(3.5rem, 5.555vw, 6rem);
            margin-bottom: clamp(15px, 3.425vw, 37px);
        }

        #footer-access {
            gap: 44px;
            margin-bottom: 30px;
        
            @media screen and (max-width:1024px) {
                width: 100%;
                padding: 0 15px;
                flex-direction: column;
            }

            .access-card {
                width: 446px;
                height: 195px;
                font-size: clamp(1.5rem, 1.481vw, 1.6rem);
                text-align: left;
                line-height: 2.8rem;            
                border-radius: 33px;
                border: 2px solid #fff;
                position: relative;

                @media screen and (max-width:1024px) {
                    width: 100%;
                    height: auto;
                    padding: 15px 20px 15px 0;
                }

                h4 {
                    font-size: 2.3rem;
                    font-weight: 400;
                    margin-bottom: 10px;
                    width: fit-content;
                    background: #EE8313;
                    margin: -15px auto 10px;
                    padding: 0 20px;
                    @media screen and (max-width:1024px) {
                        margin-top: -30px;
                    }
                }

                p {
                    margin-bottom: 0;
                    padding: 0 20px;
                }

                .flex_indent {
                    display: flex;
                    flex-direction: row;
                    p {
                        padding: 0;
                    }

                    .flex_left {
                        padding-left: 20px;
                    }
                }

                .snsarea {
                    position: absolute;
                    text-align: center;
                    right: 0;
                    left: 0;
                    bottom: 17px;
                    margin: auto;
                }
            }
        }
    }
}

/* トップへ
-------------------------------------------------*/
.totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 997;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    a {
        display: block;
        position: relative;
        margin-bottom: 15px;

        img {
            display: block;
        }

    }

    .a_totop {
        margin-top: 35px;
    }

    @media screen and (max-width:1024px) {
        right: 15px;
        bottom: 15px;
        width: 60px;
        text-decoration: none;

        img {
            width: 100%;
        }

        .pc {
            display: none;
        }
    }
}

.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

a:hover .img-hover {
    opacity: 1;
}


/*-------------------------------------------------

  access.html アクセスページ

-------------------------------------------------*/
#googlemap {

    section {
        margin-bottom: 80px;
        text-align: center;
    }

    iframe {
        width: 100%;
        aspect-ratio: 2.16 / 1;
        margin-bottom: clamp(30px, 6.481vw, 70px);

        @media screen and (max-width:800px) {
            aspect-ratio: 1.5 / 1;
        }
        
    }

    .p_access {
        font-weight: 500;
        font-size: clamp(2rem, 2.777vw, 3rem);
        line-height: 3.2rem;
    }

    ul {
        li {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 10px;
        }
    }

}


/*-------------------------------------------------

  news.html お知らせ一覧ページ

-------------------------------------------------*/
.postlist {
    width: clamp(800px, 77.314vw, 835px);
    margin: 0 auto 50px;

    @media screen and (max-width:800px) {
        width: 100%;
        padding: 0 15px;
    }

    .cat-icon {
        padding: clamp(3px, 0.462vw, 5px) clamp(17px, 1.388vw, 15px);
    }

    a {
        display: flex;
        text-decoration: none;
        color: #504D4D;
        justify-content: space-between;
        align-items: center;

        @media screen and (max-width:800px) {
            flex-direction: column;
            justify-content: left;
            align-items: baseline;
        }

        div {
            width: 50%;
            @media screen and (max-width:800px) {
                width: 100%;
                margin-bottom: 8px;
            }

            time, 
            .eventdatetext {
                margin-right: 3.5%;
                font-size: clamp(1.4rem, 1.796vw, 1.5rem);
                font-weight: 500;
            }
        }

        p {
            width: 45%;
            padding-right: 3%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            font-size: 1.6rem;
            @media screen and (max-width:800px) {
                width: 100%;
            }

            &::after {
                content: '→';
                color: #FF7E10;
                position: absolute;
                right: 0;
            } 
        }
        
        &:hover {
            color: #AAAAAA;
        }

    }

    li {
        white-space: nowrap;
        padding-bottom: 10px;
        border-bottom: 5px dotted #EBEBEB;
        margin-bottom: 15px;
    }
}

.pagenation {
    text-align: center;
    /* gap: clamp(15px, 4.166vw, 45px); */
    font-size: clamp(1.4rem, 1.574vw, 1.7rem);
    font-weight: bold;
    color: #EE8313;

    span,a {
        margin-right: clamp(0.5rem, 0.74vw, 0.8rem);
        text-decoration: none;
    }

    a.page-numbers {
        color: #9A9A9A;
        &:hover {
            color: #FFC052;
        }
    }

    a.next,
    a.prev {
        color: #EE8313;
        margin: 0 clamp(15px, 4.166vw, 45px);

        &:hover {
            color: #FFC052;
        }
    }

}

/*-------------------------------------------------

  facilitymap.html 館内マップページ

-------------------------------------------------*/
#facilitymap {
    text-align: center;
    font-size: clamp(1.4rem, 1.851vw, 2rem);
    font-weight: 500;

    .imagearea {
        img {
            width: 80%;
            
            @media screen and (max-width:800px) {
                width: 100%;
            }
        }
        margin-bottom: 10px;
    }

    p {
        img {
            vertical-align: middle;
            padding-bottom: 5px;
        }
    }
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 1000;

    @media screen and (max-width:800px) {
        width: 100%;
        padding: 0 15px;
    }

    .modal__content {
        position: relative;
        max-width: 90vw;
        max-height: 75vw;
    }

    .modal__content img {
        display: block;
        max-width: 90vw;
        max-height: 75vh;
    }

    .modal__close {
        position: absolute;
        top: -50px;
        right: 0;
        color: #707070;
        background-color: #fff;
        border: 1px solid #707070;
        width: 50px;
        height: 50px;
        font-size: 4.5rem;
        text-align: center;
        padding: 0 5px 5px;
    }

}

.modal.is-open {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*-------------------------------------------------

  newspage.html お知らせページ

-------------------------------------------------*/
article {
    width: 100%;
    padding-left: calc((100vw - 1080px) / 2);

     @media (max-width: 1080px) {
        width: 100%;
        padding: 0 15px;
     }

     h3 {
        font-size: clamp(2rem, 2.962vw, 3.2rem);
        color: #504D4D;
        margin-bottom: 15px;
     }

     .post-date {
        margin-bottom: 30px;
     }

     .cat-icon {
        padding: 5px 20px;
        margin-right: 10px;
     }

     p {
        margin-bottom: 20px;
     }

}

/*-------------------------------------------------

  backnumber.html りんくすバックナンバーページ

-------------------------------------------------*/
.pdflist {
    a {
        color: #504D4D;

        &:hover {
            color: #4E92CB;
        }
    }

    li {
        margin-bottom: 16px;

        
        p::before {
            content: url('images/icon_pdf.svg');
            display: inline-block;
            vertical-align: middle;

        }
    }
}

/*-------------------------------------------------

  contact.html お問い合わせページ

-------------------------------------------------*/
.form_contact {
    .form_item {
        margin-bottom: 40px;

        .label_item {
            display: block;
            font-weight: 500;
            margin-bottom: 10px;

            .label_require {
                background: #ED5E5E;
                color: #fff;
                font-size: clamp(1.2rem, 1.093vw, 1.4rem);
                padding: 2px 15px;
                margin-left: 15px;
            }
        }

        .single,
        textarea {
            background: #fff;
            border: 1px solid #707070;
            padding: 5px 10px;
        }

        .single {
            width: min(39.625vw, 500px);
            height: clamp(30px, 3.515vw, 45px);
            @media (max-width: 800px) {
                width: 100%;
            }
        }

        textarea {
            resize: none;
            width: 100%;
            height: clamp(100px, 23.437vw, 300px);
        }

    }

    .a_button {
        display: block;
        margin: 60px auto 0;
        padding: 0 100px;
    }

}

#contactform {

    p {
        text-align: center;
        margin-bottom: 15px;
    }

    .bg-white {
        padding: 40px 0;
    }

    section {
        margin-bottom: 40px;
    }

    .form_contact {
        padding: 80px 0;
    }

    .privacy {
        width: min(73.148vw, 790px);
        margin: 0 auto;
        font-size: 1.4rem;

        h4 {
            color: #E83222;
            margin-bottom: 20px;
            font-size: 1.6rem;
            font-weight: 500;
            text-align: center;
        }

        p {
            line-height: 2rem;
            margin-bottom: 20px;
        }

        a {
            display: block;
            width: fit-content;
            margin: 0 auto;
            color: #4E93CB;
        }
    }
}

.poricy {
    p {
        margin-bottom: 15px;
    }

    .bg-white {
        padding: 40px 0;
    }

    section {
        margin-bottom: 40px;
    }
}

/*-------------------------------------------------

  eventpage.html イベント記事ページ

-------------------------------------------------*/
.postpage_event {
    margin: 0 auto;
    padding: 0;

     @media (max-width: 1080px) {
        width: 100%;
        padding: 0 15px;
     }

    header {
        text-align: center;

        .post-title {
            text-align: center;
            margin-bottom: clamp(25px, 6.018vw, 65px);
        }

        .imgarea {
            margin-bottom: 30px;
            width: 100%;

            img {
                width: 100%;
            }
        }

        .post-date {
            margin-bottom: clamp(30px, 5.555vw, 60px);
            font-size: 1.8rem;
            font-weight: 500;
        }

        @media (max-width: 800px) {
            .cat-icon {
                display: block;
                width: fit-content;
                margin: 0 auto 15px;
            }
        }
    }
}
.post-date {
    margin-bottom: 40px;
}

/*-------------------------------------------------

  volunteer.html ボランティア募集ページ

-------------------------------------------------*/
.sec-volunteer {
    p, .imgarea {
        margin-bottom: 2em;
    }
}

/*-------------------------------------------------

  library.html 図書館トップページ

-------------------------------------------------*/

/* ヘッダー
-------------------------------------------------*/
.header-sticky {
    position: relative;
    top: 550px;    /*スクロールが500px超えたら固定解除*/
    z-index: 998;

    height: 125px;

    h1 {
        width: fit-content;
        font-size: clamp(1.8rem, 3.703vw, 4rem);
        font-weight: 500;
        line-height: 125px;
        padding: 0 60px 0 calc((100vw - 1080px) / 2);
    }

    a {
        display: block;
        width: fit-content;
        text-decoration: none;
    }

    @media (max-width: 930px) {
        position: fixed;
        top: 0;
        width: 100%;
        padding: 0 15px;
        background: #EAFAEC;
        height: 60px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

        h1 {
            line-height: 60px;
            padding: 0;
        }

        .a_libchildpage {
            display: none;
        }
    }
}

.header-sticky.sticky {
    position: -webkit-sticky;
    position: sticky;   /*スクロールが500px超えるまでは固定*/
    top: 0;
}

#header-library {

    h1{
        color: #5C9B63;
        background: #eafaec;
        filter: drop-shadow(3px 3px 3px rgba(34, 101, 14, 0.16));
        border-radius: 0 0 60px 0;

        @media (max-width: 800px) {
            filter: none;
            border-radius: 0;
        }
    }

    a.a_libchildpage {
        padding: 0 14px;
        height: 55px;
        background: #fffbf6;
        border: 2px solid #009a3e;
        border-radius: 10px;
        filter: drop-shadow(1px 1px 1px rgba(95, 96, 95, 0.5));
        font-weight: bold;
        font-size: 2.1rem;
        color: #009a3e;
        position: absolute;
        top: 28px;
        left: calc(((100vw - 1080px) / 2) + 820px );

        p {
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            white-space: nowrap;

            .arrow {
                margin: 0 0 0 8px;
                width: 0;
                opacity: 0;
                overflow: hidden;
                transition: all .3s ease;
            }
        }

        &:hover .arrow {
            width: 1.5em;
            opacity: 1;
        }
    }
}

/* ヘッダーイメージ
-------------------------------------------------*/
.hero-sticky {
    width: 100%;
    height: clamp(200px, 64.814vw, 700px);
    margin-top: -125px;

    @media (max-width: 800px) {
        margin-top: 0;
    }
}

#hero-library {
    background-image: url(images/library_top_image.webp);
    background-image: -webkit-image-set(url(images/library_top_image.webp) 1x, url(images/library_top_image@2x.webp) 2x);
    background-image: image-set(url(images/library_top_image.webp) 1x, url(images/library_top_image@2x.webp) 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ナビメニュー
-------------------------------------------------*/
.nav-sticky {
    width: 100%;
    height: 100px;
    box-shadow: 3px 3px 3px rgba(20, 90, 7, 0.16);
    display: flex;
    align-items: center;

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 997;

    @media (max-width: 930px) {
        display: none;
    }

    a {
        color: #fff;
        text-decoration: none;
        font-size: 1.9rem;
        font-weight: 500;

        &:hover {
            color: #fff;
            opacity: .5;
        }
    }

    ul {
        display: flex;
        justify-content: space-between;

        li {
            padding: 0 8px 0 5px;
            border-right: 2px solid #fff;

            &:last-child {
                border-right: none;
            }
        }
    }
}

#nav-library {
    background: #7ec987;
}

/* サイドバー
-------------------------------------------------*/
aside {
    width: 255px;
    padding: 15px 10px 0;
    height: fit-content;
    background: #FDF0E1;

    @media (max-width: 800px) {
        display: none;
    }

    a {
        display: block;
        margin-bottom: 15px;
    }

    .zosyo {
        padding: 5px 10px 10px;
        margin-bottom: 15px;

        header {
            margin-bottom: 5px;

            h3 {
                font-size: 1.6rem;
                margin: 0;
                display: flex;
                align-items: center;

                img {
                    margin-right: 5px;
                    width: 20%;
                }
            }

            p {
                font-size: 1rem;
                line-height: 1.2rem;
                white-space: nowrap;
            }

        }

        form {
            margin: 0 auto 10px;

            .form-text {
                width: 155px;
                height: 25px;
            }
            .form-button {
                width: 50px;
                height: 25px;
                font-size: 1.3rem;
                line-height: 25px;
            }
        }

        .a-zosyosearch {
            padding: 0 13px;
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            height: 25px;
            line-height: 25px;
            border-radius: 13px;
            font-size: 1.2rem;
        }

    }
}

/* メインラッパー
-------------------------------------------------*/
.flex-wrapper930 {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 930px;
    padding-top: 55px;
    padding-bottom: clamp(100px, 17.592vw, 190px);

    @media (max-width: 800px) {
        flex-direction: column;
        width: 100%;
        padding: 40px 15px clamp(100px, 17.592vw, 190px);
    }

    main {
        width: 585px;
        padding-bottom: 0;

        @media (max-width: 800px) {
            width: 100%;
        }
    }

}

/* 重要なお知らせ
-------------------------------------------------*/
#impotantnews {
    width: 100%;
    height: 112px;
    background: #ffe5e5;
    border: 3px solid #ce3939;
    padding: 0 20px;
    align-items: center;
    border-radius: 10px;

    @media (max-width: 800px) {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }

    h3 {
        margin: 0 30px 0 0;
        font-weight: bold;
        font-size: 2rem;
        color: #ce3939;

        @media (max-width: 800px) {
            margin: 0 0 15px;
        }
    }

    li {
        padding-bottom: 8px;
        border-bottom: 1px solid #707070;

        &:last-child {
            padding: 8px 0 0 0;
            border-bottom: none;
        }
    }

    a {
        color: #504D4D;
        text-decoration: none;
        display: flex;

        &:hover {
            color: #504D4D;
            opacity: .5;
        }

        time {
            margin-right: min(3.24vw, 35px);
        }

        p {
            font-size: clamp(1.6rem, 1.666vw, 1.8rem);
            font-weight: bold;
        }
    }
}

/* 蔵書検索
-------------------------------------------------*/
.zosyo {
    width: 100%;
    padding: clamp(15px, 1.851vw, 20px) clamp(30px, 3.703vw, 40px);
    background: #fff;
    border: 2px solid #7ec987;

    @media (max-width: 800px) {
        .flex {
            flex-direction: column;
            align-items: center;
        }
    }

    header {
        justify-content: baseline;
        margin-bottom: 0;
        align-items: center;
        margin-bottom: 10px;

        h3 {
            font-size: 2.1rem;
            margin: 0 18px 0 0;
            display: flex;
            align-items: center;

            img {
                margin-right: 5px;
            }
        }

    }

    form {

        @media (max-width: 800px) {
            margin-bottom: 15px;
        }

        .form-text {
            width: 230px;
            height: 35px;
            background: #eafbec;
        }
        .form-button {
            width: 50px;
            height: 35px;
            background: #7ec987;
            font-weight: 500;
            line-height: 35px;
            text-align: center;
            color: #fff;
            margin-left: -5px;
        }
    }

    .a-zosyosearch {
        display: block;
        padding: 0 18px;
        height: 35px;
        line-height: 35px;
        border-radius: 16.5px;
        background: #7ec987;
        font-weight: 500;
        font-size: 1.4rem;
        color: #fff;
        text-decoration: none;
        margin-left: 30px;

        @media (max-width: 800px) {
            margin-left: 0;
        }

        &:hover {
            color: #fff;
            background: #A4E0AB;
        }
    }
}


/* 図書館について
-------------------------------------------------*/
.sec-introduction {
    width: 100%;
    border-radius: 26px;
    background: #fff;
    padding: 25px 25px 60px;
    font-weight: 500;

    h3 {
        margin-bottom: 15px;
    }

    .flex-wrapper {
        display: flex;
        justify-content: space-between;
        margin: 30px 0 40px;
        align-items: end;

        .imgarea {
            img {
                width: 68px;
            }
        } 

        .flex {
            @media (max-width: 800px) {
                display: block;
            }
        }
    }

    .flex.photoarea {
        gap: 25px;
        .flex__card {
            width: 48%;

            img {
                width: 100%;
                border-radius: clamp(10px, 2.777vw, 30px);
            }
        }
    }

}

.p_underbar {

    span {
        color: #504d4d;
        position: relative;
        z-index: 1;
        text-shadow:
            -2px  0   0 #fff,
            2px  0   0 #fff,
            0   -2px 0 #fff,
            0    2px 0 #fff,
            -2px -2px 0 #fff,
            2px -2px 0 #fff,
            -2px  2px 0 #fff,
            2px  2px 0 #fff;

        &::after {
            content: "";
            position: absolute;
            left: -10%;
            bottom: -0.3rem; /* 位置調整 */
            width: 120%;
            height: 9px;
            background: #7ec987;
            border-radius: 3px;
            z-index: -1;
        }
    }
}

/* スケジュール
-------------------------------------------------*/
.sec-schedule {
    margin-bottom: 70px;

    @media (max-width: 800px) {
        text-align: center;
    }

    a {
        display: inline-block;
        margin-bottom: 40px;
    }

    .imgarea {
        display: block;
        width: 80%;

        img {
            width: 100%;
        }

        @media (max-width: 800px) {
            margin: 0 auto;
        }
    }

}

/* イベント
-------------------------------------------------*/
.sec-event {
    text-align: center;
    margin-bottom: 80px;
}

/*-------------------------------------------------

  library-usage.html 利用案内ページ

-------------------------------------------------*/

/* サブメニュー
-------------------------------------------------*/
#usagemenu {
    background-color: #FFFDF9;
    padding: 20px 50px 20px 30px;
    border-radius: 20px;
    font-size: clamp(1.6rem, 1.9444vw, 2.1rem);
    font-weight: bold;
    width: fit-content;

    .flex {
        gap: min(7.87vw, 85px);
        align-items: end;

        li {
            margin-bottom: 15px;
        }

        a {
            color: #53aa5e;
            text-decoration: none;

            &::before {
                content: "▼";
                font-size: 1.4rem;
                margin-right: 6px;
                vertical-align: top;
            }

            &:hover {
                color: #A4E0AB;
            }
        }
    }

}

/* ページセクション
-------------------------------------------------*/
.sec-libusage {
    scroll-margin-top: clamp(100px, 11.111vw, 120px);

    h3 {
        font-size: clamp(1.8rem, 2.314vw, 2.5rem);
        color: #504d4d;
        position: relative;
        padding-left: 55px;

        &::before {
            content: url(images/icon_book.svg);
            position: absolute;
            top: -22px;
            left: -20px;
        }
    }

    p {
        margin-bottom: 20px;
    }

    table {
        border: 2px solid #7EC987;
        background: #fff;
        margin-left: 30px;
        margin: 30px 0 30px min(2.777vw, 30px);

        caption {
            color: #707070;
        }

        thead {
            td {
                background: #7EC987;
                color: #fff;
                text-align: center;
                border-right: 2px solid #fff;

                &:last-child {
                    border: none;
                }
            }
        }

        th {
            padding: 10px 15px;
            background: #7EC987;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            font-weight: 500;
        }

        td {
            padding: 10px 15px;
            border: 2px solid #7EC987;
            vertical-align: middle;
            font-weight: 500;
        }

        .td-white {
            background: #fff;
            border: none;
        }
    }
}

.red-frame {
    width: 100%;
    background: #fff;
    border: 2px solid #ed5e5e;
    padding: 30px;
}

/*-------------------------------------------------

  library-facility.html 施設案内ページ

-------------------------------------------------*/

/* サブメニュー
-------------------------------------------------*/
#facilitymenu {
    width: 100%;
    background-color: #fff;
    border-radius: 40px;
    text-align: center;
    padding: 25px 30px 30px;

    h4 {
        font-size: clamp(1.6rem, 1.851vw, 2rem);
        font-weight: 500;
        margin-bottom: 15px;
    }
}

.facilitymenu-grid {
    display: grid;
    align-items: start;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(26px, 4.629vw, 50px);
    column-gap: 20px;
    margin-bottom: 50px;
    
    .facilitymenu-grid-card {
        display: block;
        color: #504D4D;
        font-weight: 500;
        font-size: clamp(1.4rem, 1.851vw, 2rem);
        text-decoration: none;

        .imgarea {
            width: 100%;
            border-radius: clamp(20px, 3.703vw, 40px);
            overflow: hidden;
            margin-bottom: 10px;

            img {
                width: 100%;
            }
        }

        &:hover {
            img {
                transform: scale(1.1, 1.1);
                transition: 0.4s all;
            }
        }

        p {
            margin-top: 5px;
            font-size: 1.4rem;
            line-height: 2rem;
            font-weight: 400;
            text-align: center;
        }
    }
}


/* ページセクション
-------------------------------------------------*/
.sec-libfacility {
    margin-bottom: clamp(60px, 11.111vw, 120px);
    scroll-margin-top: clamp(100px, 11.111vw, 120px);

    @media (max-width: 500px) {
        h3 {
            text-align: center;
        }
    }

    .imgarea {
        width: 465px;
        overflow: hidden;
        border-radius: 20px;
        margin-bottom: 30px;

        @media (max-width: 500px) {
            width: 100%;
        }

        img {
            width: 100%;
        }
    }

    p {
        width: 465px;
        margin-bottom: 1em;

        @media (max-width: 500px) {
            width: 100%;
        }
    }
}

a.a-blue {
    color: #4E92CB;

    &:hover {
        color: #96C0E3;
    }
}

/* 学習室カレンダー
-------------------------------------------------*/
.calendar-area {
    margin: 30px 0 120px;

    h4 {
        font-weight: 500;
        font-size: clamp(1.8rem, 2.314vw, 2.5rem);
        text-align: center;
        color: #5c9b63;
        margin-bottom: 25px;
    }

    iframe {
        width: 100%;
    }

}


/*-------------------------------------------------

  library-event.html 施設案内ページ

-------------------------------------------------*/

/* リンクス
-------------------------------------------------*/
.linksarea {
    width: 100%;
    border-radius: clamp(20px, 2.777vw, 30px);
    background: #fff6ed;
    padding: clamp(20px, 2.777vw, 30px) clamp(10px, 3.703vw, 40px);
    margin-top: 100px;

    h3 {
        text-align: center;
    }

    img {
        width: 100%;
    }
}

/*-------------------------------------------------

  library-move.html 移動図書館ページ

-------------------------------------------------*/
.libmove {
    font-size: clamp(1.6rem, 1.851vw, 2rem);
    line-height: clamp(2.2rem, 1.851vw, 3rem);
    img {
        width: 100%;
    }

    div {
        margin-bottom: 50px;
    }
}

/*-------------------------------------------------

  library-qa.html よくあるご質問

-------------------------------------------------*/
dl.qa {
    font-size: 1.6rem;
    width: 100%;
    padding: clamp(20px, 2.314vw, 25px) clamp(15px, 3.24vw, 35px);
    border-radius: clamp(18px, 2.314vw, 25px);
    background: #f5f5f5;
    margin-bottom: 35px;

    dt, dd {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    dt {
        margin-bottom: 15px;

        span {
            display: inline-flex;
            flex: 0 0 25px;
            width: 25px;
            height: 25px;
            box-sizing: border-box;

            align-items: center;
            justify-content: center;

            background: #5c9b63;
            color: #fff;
            border-radius: 50%;
        }
    }

    dd {
        span {
            display: inline-flex;
            flex: 0 0 25px;
            width: 25px;
            height: 25px;
            box-sizing: border-box;

            align-items: center;
            justify-content: center;

            background: #fff;
            color: #5C9B63;
            border: 1.5px solid #5C9B63;
            border-radius: 50%;
            font-weight: bold;
            line-height: 1;
        }
    }
}

/*-------------------------------------------------

  library-storytime.html おはなしかい

-------------------------------------------------*/
main.theme-libstorytime {

    h2 {
        width: 100%;
        background-image: url(images/bg_storytime.webp);
        background-image: -webkit-image-set(url(images/bg_storytime.webp) 1x, url(images/bg_storytime@2x.webp) 2x);
        background-image: image-set(url(images/bg_storytime.webp) 1x, url(images/bg_storytime@2x.webp) 2x);
        text-align: center;
        padding: 50px 0;

        p {
            font-size: 3rem;
            font-weight: bold;
            margin: 0 auto 35px;
            width: fit-content;
            padding-bottom: 10px;
            border-bottom: 5px dotted #5b9b63;
        }
    }

    .sec-storytime {
        font-size: clamp(1.6rem, 1.851vw, 2rem);
        font-weight: 500;
        margin-bottom: clamp(65px, 11.111vw, 120px);

        h3 {
            width: 100%;
            background-color: #fff;
            padding: clamp(15px, 2.777vw, 30px) 15px;
            font-family: "fot-chiaro-std", sans-serif;
            font-weight: 700;
            font-style: normal;
            @media (max-width: 1080px) {
                text-align: center;
            }
        }

        .sec-storytime__row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            @media (max-width: 1080px) {
                flex-direction: column;
                align-items: baseline;
            }

            .sec-storytime__label {
                display: block;
                color: #5c9b63;
                padding: min(0.462vw, 5px) clamp(10px, 1.296vw, 15px);
                border: 2px solid #5c9b63;
                border-radius: clamp(5px, 0.925vw, 10px);
                margin-right: 20px;
                white-space: nowrap;

                @media (max-width: 1080px) {
                    margin-bottom: 0px;
                }
            }
        }
    }
}

/*-------------------------------------------------

  libchild.html こどものページ

-------------------------------------------------*/
.theme-libchild {
    background-color: #FFFBF6;

    .wrapper930 {
        @media screen and (max-width:930px) {
            width: 100%;
            padding: 0 15px;
        }   
    }

    #header-libchild {
        position: relative;
        padding-top: 90px;
        margin-bottom: clamp(60px, 9.259vw, 100px);

        @media screen and (max-width:930px) {
            padding-top: 110px;
        }  

        .header__linkarea {
            display: flex;
            justify-content: end;
            gap: 15px;
            position: absolute;
            top: 0;
            right: 15px;

            a {
                display: block;
                font-size: clamp(1.3rem, 1.574vw, 1.7rem);
                line-height: clamp(1.9rem, 2.314vw, 2.5rem);
                width: clamp(90px, 11.111vw, 120px);
                height: clamp(90px, 11.111vw, 120px);;
                border-radius: 0 0 clamp(12px, 1.851vw, 20px) clamp(12px, 1.851vw, 20px);
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16);
                color: #fff;
                font-weight: bold;
                text-align: center;
                text-decoration: none;
                padding-top: clamp(40px, 4.692vw, 50px);

                transition:
                    height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    padding-top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                    
                &:hover {
                    height: 150px;
                    padding-top: 80px;
                }

                span {
                    display: inline-block;
                    width: clamp(20px, 2.037vw, 22px);
                    height: clamp(20px, 2.037vw, 22px);
                    border-radius: 50%;
                }
            }
            .a-library {
                background: #eb6115;
                span {
                    background: #ff965d;
                }
            }
            .a-teen {
                background: #FBB03B;
                span {
                    background: #FFCB7B;
                }
            }
        }
    }

    .zosyo {
        width: fit-content;
        padding: clamp(15px, 1.851vw, 20px) clamp(15px, 2.314vw, 25px) clamp(15px, 3.703vw, 40px);
        border-radius: clamp(16px, 2.314vw, 25px);
        background: #fff2c8;
        border: none;
        margin: 0 auto clamp(80px, 11.111vw, 120px);
        color: #603814;
        font-weight: bold;
        text-align: center;
    

        header {
            margin-bottom: 20px;

            h3 {
                font-size: clamp(2.3rem, 3.24vw, 3.5rem);
                color: #603814;

                @media screen and (max-width:930px) {
                    margin-bottom: 15px;
                }  
            }

            img {
                width: clamp(43px, 7.87vw, 85px);
            }
        }

        .form-text {
            width: clamp(250px, 46.296vw, 500px);
            height: clamp(35px, 6.481vw, 70px);
            border-radius: clamp(6px, 1.3888vw, 15px) 0px 0px clamp(6px, 1.3888vw, 15px);
            background: #fff;
            padding: 0 15px;
            text-align: left;
        }
        .form-button {
            width: clamp(80px, 13.888vw, 150px);
            height: clamp(35px, 6.481vw, 70px);
            border-radius: 0 clamp(6px, 1.3888vw, 15px) clamp(6px, 1.3888vw, 15px) 0;
            font-size: clamp(1.6rem, 2.314vw, 2.5rem);

            &:hover {
                background: #49be77;
            }
        }
    }

    .libchild-menu {
        display: grid;
        align-items: center;
        grid-template-columns: repeat(3, clamp(31%, 31.018vw, 335px));
        column-gap: calc((100% - clamp(31%, 31.018vw, 335px) * 3) / 2);
        row-gap: 65px;
        margin-bottom: 200px;

        @media screen and (max-width:800px) {
            grid-template-columns: repeat(1, clamp(280px, 31.018vw, 335px));
            justify-content: center;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: clamp(190px, 20.833vw, 225px);
            font-weight: 900;
            font-size: clamp(2.5rem, 2.777vw, 3rem);
            line-height: 3.5rem;
            text-align: center;
            color: #fff;
            text-decoration: none;
            border-radius: 25px;
            background: #f68b50;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16);
            position: relative;

            span {
                font-size: 1.5rem;
                font-weight: bold;
            }

            &::before {
                content: "";
                position: absolute;
                top: 15px;
                left: 15px;
                right: 15px;
                bottom: 15px;
                border: 3px dashed #fff;
                border-radius: 19px;
                pointer-events: none;
            }

            &:hover {
                background-color: #FF9D69;
            }

        }

        .a-indigo {
            background: #7083bd;
            line-height: 4rem;

            &:hover {
                background: #899AD0;
            }
        }

    }

    footer {
        width: 100%;
        height: clamp(40px, 8.333vw, 90px);
        line-height: clamp(40px, 8.333vw, 90px);
        background: #3f4e7b;
        text-align: center;
        position: relative;

        img {
            display: block;
            position: absolute;
            top: clamp(-152px, -14.07vw, -80px);
            left: 50%;
            transform: translateX(-50%);
            width: clamp(72px, 11.388vw, 123px);

            /* @media screen and (max-width:1080px) {
                right: 15px;
            } */
        }

        .totop {
            a img {
                position: static;
            }
        }

        small {
            font-weight: 500;
            font-size: clamp(1.2rem, 1.851vw, 2rem);
            color: #fff;
        }
    }

    a.a-button {
        display: block;
        width: fit-content;
        border-radius: 19px;
        background: #fbb03b;
        padding: 25px 40px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: clamp(2rem, 2.037vw, 2.2rem);
        box-shadow: 1px 1px 1px rgba(88, 86, 85, 0.39);
        position: relative;
        margin: 0 auto;

        &::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border: 1.5px dashed #fff;
            border-radius: 15px;
            pointer-events: none;
        }

        &:hover {
            background: #ffc365;
        }

    }


    h2 {
        display: flex;
        margin: 0 auto 35px;
        width: fit-content;
        color: #603814;
        font-size: clamp(2rem, 3.24vw, 3.5rem);
        z-index: 1;
        text-align: center;
        text-shadow:
            -2px  0   0 #fff,
            2px  0   0 #fff,
            0   -2px 0 #fff,
            0    2px 0 #fff,
            -2px -2px 0 #fff,
            2px -2px 0 #fff,
            -2px  2px 0 #fff,
            2px  2px 0 #fff;

        p {
            position: relative;
            margin-right: 10px;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 10px; /* 位置調整 */
                width: 100%;
                height: 15px;
                background: #fbb03b;
                opacity: 0.6;
                border-radius: 2px;
                z-index: -1;
                @media screen and (max-width:930px) {
                    bottom: 18px; /* 位置調整 */
                }

            }
        }

        img {
            display: block;
            transform: translateY(-5px);
            @media screen and (max-width:930px) {
                transform: translateY(-10px);
            }
        }
    }

}

/*-------------------------------------------------

  libchild-about.html 熊本市立城南図書館について(こどものページ)

-------------------------------------------------*/
.sec-aboutlibchild {
    margin-bottom: 90px;
    font-weight: 500;
    font-size: clamp(1.8rem, 2.037vw, 2.2rem);
    line-height: clamp(40px, 4.629vw, 50px);
    color: #603814;

    h3 {
        width: fit-content;
        height: clamp(60px, 10.185vw, 110px);
        line-height: clamp(60px, 10.185vw, 110px);
        padding: 0 clamp(20px, 4.166vw, 45px) 0 max(15px, calc((100vw - 1080px) / 2));
        border-radius: 0 clamp(9px, 1.481vw, 16px) clamp(9px, 1.481vw, 16px) 0;
        background: #009a3e;
        margin-bottom: 30px;
        font-weight: 900;
        font-size: clamp(2rem, 3.055vw, 3.3rem);
        color: #fff;
    }

    p {
        margin-bottom: 35px;
    }

    .jyonyan-smile,
    .jyonyan-wink {
        font-weight: bold;
        position: relative;
        margin-bottom: 10px;

        @media screen and (max-width:930px) {
            padding-left: 50px;
        }

        &::before {
            position: absolute;
            content: url('images/icon_jyonyansmaile.svg');
            display: inline-block;
            left: -50px;

            @media screen and (max-width:930px) {
                left: 0;
                top: -8px;
            }

        }
    }

    .jyonyan-wink {
        margin-top: 50px;

        &::before {
            content: url('images/icon_jyonyanwink.svg');
        }
    }

    .flex {
        margin-bottom: 10px;
        justify-content: left;
        gap: 3em;

        p {
            margin-bottom: 0;
        }

        @media screen and (max-width:930px) {
            flex-direction: column;
            gap: 0;
        }

    }

    .news-frame {
        border-radius: 34px;
        background: #fff;
        border: none;
        padding: 35px;
        margin-left: -35px;

        @media screen and (max-width:930px) {
            margin-left: 0;
        }

        .p-underbar {
            width: fit-content;
            position: relative;
            margin-bottom: 10px;
            z-index: 1;
            text-shadow:
                -2px  0   0 #fff,
                2px  0   0 #fff,
                0   -2px 0 #fff,
                0    2px 0 #fff,
                -2px -2px 0 #fff,
                2px -2px 0 #fff,
                -2px  2px 0 #fff,
                2px  2px 0 #fff;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0.3em; /* 位置調整 */
                width: 100%;
                height: 15px;
                background: #fbb03b;
                opacity: 0.6;
                border-radius: 2px;
                z-index: -1;
            }
        }

        p {
            margin-bottom: 20px;
        }
    }

    .green-frame {
        margin-bottom: 35px;
        width: fit-content;
        background: #fff;
        border: 2px solid #009a3e;
        padding: 25px;

        @media screen and (max-width:930px) {
            margin: 0 auto 35px;
        }
    }

    .p-red {
        display: block;
        width: 930px;
        margin: 0 auto;

        @media screen and (max-width:930px) {
            width: 100%;
        }
    }

    .p-caution {
        font-weight: bold;
        position: relative;
        margin-bottom: 10px;
        padding-left: 50px;
        @media screen and (max-width:930px) {
            padding-left: 55px;
        }

        &::before {
            position: absolute;
            content: url('images/icon_caution.svg');
            display: inline-block;
            left: 0;
            @media screen and (max-width:930px) {
                left: 10px;
                top: -5px;
            }
        }
    }

    .imgarea {
        margin: 50px auto;
        text-align: center;
        @media screen and (max-width:500px) {
            width: 100%;
            padding: 15px;

            img {
                width: 100%;
            }
        }
    }

}

/*-------------------------------------------------

  child.html 児童館トップページ

-------------------------------------------------*/

/* ヘッダー
-------------------------------------------------*/
#header-child {

    h1{
        color: #FFB44E;
        background: #FFF6EA;
        border-radius: 0 0 60px 0;

        @media (max-width: 800px) {
            filter: none;
            border-radius: 0;
        }
    }
}

/* ヘッダーイメージ
-------------------------------------------------*/
#hero-child {
    background-image: url(images/child_top_image.webp);
    background-image: -webkit-image-set(url(images/child_top_image.webp) 1x, url(images/child_top_image@2x.webp) 2x);
    background-image: image-set(url(images/child_top_image.webp) 1x, url(images/child_top_image@2x.webp) 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ナビメニュー
-------------------------------------------------*/
#nav-child {
    background: #7ec987;background: #ffb44e;
    box-shadow: 3px 3px 3px rgba(88, 60, 6, 0.16);

    ul {
        li {
            padding: 0 22px 0 0;
        }
    }
}

/* 児童館について
-------------------------------------------------*/
.sec-introduction {
    .red-frame {
        position: relative;
        padding: 10px 5px;
        width: 520px;
        margin-bottom: 40px;
        @media (max-width: 1080px) {
            width: 100%;
        }

        img {
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
            @media (max-width: 1080px) {
                position: static;
                margin: 10px auto;
            }
        }
    }

    a {
        text-decoration: none;
    }

    .a-telnaumber {
        display: block;
        text-align: center;
        width: 400px;
        margin: 0 auto 40px;
        padding: 20px 0 25px;
        color: #514D4D;
        @media (max-width: 1080px) {
            width: 100%;
        }

        background-color: #FFFAEF;
        background-image:
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E),
            linear-gradient(#FFB44E, #FFB44E);
        background-position:
            left top, left top,
            right top, right top,
            left bottom, left bottom,
            right bottom, right bottom;
        background-size:
            14px 2px, 2px 14px,
            14px 2px, 2px 14px,
            14px 2px, 2px 14px,
            14px 2px, 2px 14px;
        background-repeat: no-repeat;

        p {
            font-size: clamp(2.8rem, 3.24vw, 3.5rem);
        }
        .p-red {
            display: inline-block;
            font-size: clamp(1.9rem, 2.314vw, 2.5rem);
            margin-bottom: clamp(10px, 1.851vw, 20px);
        }

        &:hover {
            color: #514D4D;
        }

    }
}

/* インスタグラム
-------------------------------------------------*/
.instaarea {
    width: 100%;
    padding-bottom: 100px;
    margin-top: -100px;
    @media (max-width: 500px) {
        padding: 0 15px 100px;
    }

    .instaframe {
        width: min(86.111vw, 930px);
        padding: 40px;
        border: 6px solid #fff;
        border-radius: 30px;
        margin: 0 auto;
        filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.16));
        background-color: #fff6ed;
        background-image: url(images/bg_instaarea.png);
        background-image: -webkit-image-set(url(images/bg_instaarea.png) 1x, url(images/bg_instaarea@2x.png) 2x);
        background-image: image-set(url(images/bg_instaarea.png) 1x, url(images/bg_instaarea@2x.png) 2x);
        background-repeat: repeat;
        text-align: center;
        @media (max-width: 500px) {
            width: 100%;
        }

        h3 {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            font-size: clamp(2.5rem, 2.777vw, 3rem);

            img {
                height: 45px;
                
            }
        }

        .sbi_item  {
            border: 1px solid #707070;
            border-radius: 15px;
        }

        .a_instabutton {
            color: #fff;
            background: #FFB44E;
            border-radius: 30px;
            text-decoration: none;
            font-size: 2rem;
            padding: 13px 25px;
            margin-top: 20px;

            &::after {
                content: url('images/icon_instabutton_arrow.svg');
                display: inline-block;
                width: 27px;
                height: 27px;
                vertical-align: bottom;

                @media screen and (max-width:1024px) {
                    width: 23px;
                    height: 23px;
                }
            }

            &:hover {
                background: #FFA121;
                color: #fff;
            }
        }
    }
}

/*-------------------------------------------------

  child-usage.html 利用案内ページ

-------------------------------------------------*/
.sec-childusage {
    .imgarea {
        width: 398px;
        border-radius: 38px;
        margin-bottom: 30px;
        overflow: hidden;
        @media screen and (max-width:430px) {
            width: 100%
        }

        img {
            width: 100%;
        }
    }
}
.ul-rice {
    li {
        position: relative;
        padding-left: 1em;

        &:before {
            content: "※";
            position: absolute;
            left: 0;
            top: 0;
        } 
    }
}

.theme-child {

    .facilitymenu-grid-card {

        &:hover {
            img {
                transform: none;
            }
        }

    }

    @media screen and (max-width:540px) {
        .facilitymenu-grid {
            display: block;

            .facilitymenu-grid-card {
                margin-bottom: 60px;
            }
        }
    }

}

/*-------------------------------------------------

  child-otayori.html おたよりページ

-------------------------------------------------*/
.sec-otayori {
    margin-bottom: 80px;

    .imgarea {
        display: flex;
        gap: 30px;
        margin-bottom: 15px;

        a {
            width: calc((100% - 30px) / 2);
            
            img {
                width: 100%;
            }
        }

        @media screen and (max-width:540px) {
            flex-direction: column;

            a {
                width: 100%;
            }
        }
    }

    p {
        color: #939393;
    }
}

.slider {
    margin: 50px auto 70px;
    padding: 0 15px;
}

#metaslider-id-143 {
    width: 100% !important;
    max-width: 680px !important;
}

#metaslider-id-143 img {
    width: 100% !important;
    height: auto !important;
}