@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-style: normal;
    color: #2f2f2f;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 150%;
    background-color: #1370A3;
    overflow-x: hidden;
}
body * {
    box-sizing: border-box;
}
img{
    max-width: 100%;
    height: auto;
}
a{
    text-decoration: none;

}

/*  common PC */
@media screen and (min-width:769px){
body{
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 300%;
}
}


/*  --  お知らせ・開催情報 -- */

    /* sectionと境界線 */
    .section--news{
        background-color: #1370A3;
        position: relative;
        padding-bottom: 170px;
        margin-top: -1px;
    }
    .inner__news{
        margin-top: -1px;
        padding-inline: 5.3%;
    }
    

    .section--news * {
        position: relative;
    }

    /* 文字設定 */
    .news__title{
        color: #FFF;
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 300%;
        padding-inline: 5.3%;
    }

    .news__title{
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .news__title::after{
        content: '';
        width: 33px;
        height: 1px;
        background-color: #FFF;
        display: block; 
    }

    .news__sheel--title{
        color: #D4BC65;
        text-align: center;
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 200%;
        position: relative;
    }
    .date{
        color: #B6B6B6;
        font-family: "Zen Maru Gothic";
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 150%; 
        margin-top: 30px;
    }
    .news__txt{
        line-height: 150%;
        margin-top: 10px;
    }
    .news__linkBtn a{
        color: #E25D20;
        font-size: 1.2rem;
        line-height: 150%;
        border-radius: 50px;
        border: 0.3px solid #E25D20;
        padding: 5px 30px;
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-inline: auto;
    }
    .news__linkBtn a:hover{
        opacity: 0.8;
        scale: 1.05;
        transition: 0.5s;
    }

    .news__linkBtn a {
        color: #E25D20;
        width: fit-content;
    }
    .news__linkBtn a::after{
        content: '';
        display: block;
        width: 7px;
        height: 10px;
        background-image: url(../img/5_news/news_arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .kakomi2{
        margin-top: 70px;
        border-radius: 20px;
        background: #FAF9F5; 
        padding: 170px 15px 90px;
        max-width: 532px;
        margin-inline: auto;
    }

    .kakomi4{
        border-bottom: 0.5px solid #E25D20;
    }
    .news__moreBtn{
        color: #1370A3;
        text-align: center;
        font-size: 1.2rem;
        line-height: 200%; 
        margin-top: 30px;
        width: fit-content;
        margin-inline: auto 0;
        border-bottom: 0.5px solid #1370A3;
    }
    .news__moreBtn a{
        color: #1370A3;
    }

    .news__sheel--title::before{
        content: '';
        display: block;
        background-image: url(../img/5_news/news__title.svg);
        width: 120px;
        height: 51.487px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: -25px;
        left: -50px; 
    }
    .kakomi5{
        position: relative;
        width: fit-content;
        margin-inline: auto;
    }

    /* シールのnewsback */
    .kakomi2::before{
        content: '';
        background-image: url(../img/5_news/newsback.png);
        width: 210px;
        height: 210px;
        display: block;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
    }
    /* シールのnewsBoy */
    .kakomi2::after{
        content: '';
        background-image: url(../img/5_news/newsboy.png);
        width: 180px;
        height: 180px;
        display: block;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
    }
    /* resding boy */
    .newsBox::after{
        content: '';
        display: block;
        background-image: url(../img/5_news/readingboy.png);
        width: 304px;
        height: 258px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: -250px;
        left: 50%;
        transform: translateX(-50%);
        
       }

       /* follow__circle */
       .follow__message{
        color: #FFF;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 200%;
       }
       .follow__dog{
        width: 240px;
       }
       .follow__btn{
        color: #E25D20;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 200%; 
        display: flex;
        align-items: center;
        width: 270px;
       }
       .follow__btn::after{
        content: '';
        display: block;
        width: 7.692px;
        height: 10px;
        background-image: url(../img/5_news/news_arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 10px;
       }
       .follow__btnBox a{
            border-radius: 50px;
            border: 0.3px solid #000;
            background: #FFF;
            padding: 5px 15px;
       }
       /* 位置調整 */
       .follow__circle{
        width: 296px;
        height: 296px;
        border-radius: 296px;
        background: #E25D20;
        margin-inline: auto;
        position: relative;
        padding-top: 40px;
        margin-top: 210px;
        animation: float4 1.9s linear infinite;
        }
       
       .follow__dog{
        margin-inline: auto;
        margin-top: -20px;
       }

       .follow__btnBox{
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        /* width: fit-content; */
       }
       .follow__btnBox:hover{
        opacity: 0.9;
        scale: 1.05;
        transition: 0.5s;
       }

       .inner__news::after{
        content: '';
        display: block;
        background-image: url(../img/5_news/star.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 60px;
        position: absolute;
        bottom: -90px;
        left: 0px;
       }
       .section--news{
        padding-bottom: 100px;
       }




@media screen and (min-width:769px) {
     .section--news{
        padding: 0px 11.6%;
     }   
    .section--news::before{
        content: '';
        display: block;
        background-image: url(../img/0_common/border_blue_pc.png);
        width: 100%;
        height: 141px;
        aspect-ratio: unset;
        background-position:0 0;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: -140px;
        left: 0;
        }
    
        .news__title{
            font-size: 3.0rem;
            line-height: 1;
            padding: unset;
        }
        .news__title::after{
            width: 72px;
        }
        .date{
            font-size: 1.6rem;
            margin-top: 30px;
        }
        .news__txt{
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 150%;
            margin-top: 10px;
        }
        .news__linkBtn{
            font-size: 1.6rem;
            display: flex;
            padding: 5px 20px;
            gap: 5px;
            width: fit-content;
            margin-inline: auto;
        }

        .kakomi{
            padding-inline:20px ;
        }
        /*sectionの囲み  */
        .section--news{
            padding-bottom: 280px;
        }
        .inner__news{
            padding-inline: 11.6%;
        }
        
    }
    
/* --  news -- */
@media screen and (min-width:898px) {
    /*sectionの囲み  */
    .section--news{
        padding-inline: unset;
        padding-bottom: 280px;
    }
    .section--news::before{
        content: '';
        display: block;
        background-image: url(../img/0_common/border_blue_pc.png);
        width: 100%;
        height: 141px;
        aspect-ratio: unset;
        background-position:0 0;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: -140px;
        left: 0;
        }

        /*  文字の設定 */
        .news__title{
            font-size: 3.0rem;
            line-height: 1;
            padding: unset;
            padding: 0px 11.6%;
            max-width: 1440px;
            margin-inline: auto;
        }
        .news__title::after{
            width: 72px;
        }
        .news__sheel--title{
            font-size: 2.4rem;
        }
        .news__sheel--title::before{
            width: 172.396px;
            height: 73.968px;
            top: -37px;
            left: -70px;
        }

        .news__linkBtn{
            margin-inline: auto;
        }

        /* お知らせ・開催情報の位置調整 */
        .kakomi5{
            margin-inline: 92px auto;
        }

        .date{
            font-size: 1.6rem;
            margin-top: 30px;
        }
        .news__txt{
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 150%;
            margin-top: 10px;
        }
        .news__linkBtn{
            font-size: 1.6rem;
            display: flex;
            padding: 5px 20px;
            gap: 5px;
            width: fit-content;
        }
        .brForSp{
            display: none;
        }
      

       .news__moreBtn{
        font-size: 1.8rem;
       }

       /* 文字たちの囲み */
       .kakomi2{
        padding: 100px 70px 120px;
        position: relative;
        max-width: 1104px;
        margin-inline: auto;
       }
       .kakomi__ForNewsInner{
        padding-inline: 33px;
       }

       /* シールの位置 */
       .kakomi2::before{
        width: 319px;
        height: 318.522px;
        top: -90px;
        left: 75%;
       }
       .kakomi2::after{
        width: 192.005px;
        height: 250px;
        top: -50px;
        left: 75%;
       }

       /* 新聞Boy */
       .newsBox::after{
        content: '';
        display: block;
        width: 304px;
        height: 258px;
        position: absolute;
        bottom: -270px;
        left: 20px;
       }

       /* followbtnの位置調整 */
       .follow__btnBox{
        position: absolute;
        bottom: 45px;
        left: 366px;
       }

       .inner__news::after{
        height: 90px;
       }

       .section--news{
        padding-bottom: 150px;
       }
       .follow__circle{
        margin-top: 120px;
       }

}
@media screen and (min-width:1330px) {
     .kakomi6{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
       }
       .news__linkBtn{
        margin-inline: auto 0;
       }

}

@media screen and (min-width:1441px) {
    .inner__news{
        padding-inline: 168px;
    }
    .news__title{
        padding-inline: 168px;
    }
}


/*  -- 調整 -- */
/* headerの背景色 */
.article__header {
    padding-inline: 5.3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    aspect-ratio: 563 / 209;
    background-color: #1370A3;
    padding-bottom: 20px;
}

/* footerの背景色 */
.footerForSp{
    background-color: #1370A3;
    margin-top: -1px;
}

@media screen and (min-width:769px) {
    .article__header{
        display: none;
    }
    .footerForPc{
        background-color: #1370A3;
        margin-top: -1px;
    }
}


/* ぽぽぽぽぽ */
/* css */

.inner__news{
    position: relative;
}
.kakomi4{
    z-index: 10;
}
.maruBox{
    position: absolute;
    top:40%;
    right: 0px;
    width: 100%;
}

.maru{
    display: block;
    background-color: #195b81;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.maru{
    scale: 0;
} 

.maru1{
    width: 75px;
    height: 75px;
    margin-inline: auto 0;
}
.maru2{
    background-color: #3f9fd7f3;
    margin-top: 150px;
}
.maru3{
    background-color: #1b79b0e5;
    width: 50px;
    height: 50px;
    margin-inline-start: 10px;
    margin-top: -25px;
}
.maru4{
    background-color: #3f9fd7f3;
    width: 60px;
    height: 60px;
    margin-inline: auto 0;
    margin-top: 80px;
}
.maru5{
    width: 50px;
    height: 50px;
    margin-inline: auto 0;
    margin-inline-end: 20px;
    margin-top: 15px;
}

@media screen and (min-width:769px) {
.kakomi2{
    z-index: 10;
}
.maruBox{
    position: absolute;
    top: 20%;
    left: -30px;
}
.maru{
    display: block;
    background-color: #195b81;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.maru1{
    width: 100px;
    height: 100px;
    margin-inline-end: -50px;
}
.maru2{
    background-color: #3f9fd7f3;
    margin-inline-start: -70px;
}
.maru3{
    background-color: #1b79b0e5;
    width: 150px;
    height: 150px;
    margin-inline-start: -30px;
    margin-top: -50px;
}
.maru4{
    background-color: #3f9fd7f3;
    width: 100px;
    height: 100px;
    margin-inline-end: -120px;
}
.maru5{
    margin-inline-end: -90px;
}
}

@media screen and (min-width:898px) {
    .maru1{
        width: 100px;
        height: 100px;
        margin-inline-end: 20px;
    }
    .maru2{
        background-color: #3f9fd7f3;
        margin-inline-start: 0px;
    }
    .maru3{
        background-color: #1b79b0e5;
        width: 150px;
        height: 150px;
        margin-inline-start: 50px;
        margin-top: -50px;
    }
    .maru4{
        background-color: #3f9fd7f3;
        width: 100px;
        height: 100px;
        margin-inline-end: 0px;
    }
    .maru5{
        margin-inline-end: 20px;
    }
}

@media screen and (min-width:1441px) {
    .maruBox{
        max-width: 1440px;
        margin-inline: auto;
    }
}


/* float4 */
@keyframes float4 {
    0% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-20px)
      
    }
    
    100% { transform: translateY(0px)
    }
  }