@charset "utf-8";
@media screen and (min-width:1024px) {


.news__item.is-disabled .news__link{
  pointer-events:none;
  cursor: default;
}

  
    body {
        background-color: #fffef9 !important;
        color: #384159
    }

    .Mainvisual {
        max-width: 100%;
        height: auto;
        display: block
    }

    .article {
        padding: 8rem 15% 0;
        letter-spacing: .05em;
        text-align: center
    }

    .caution {
        font-family: sawarabi-mincho, serif;
        color: #384159;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        margin: 8rem 0
    }

    .waku {
        position: relative;
        height: 5rem;
        padding: 1rem 0 1rem;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550
    }

    .nyusu {
        margin: 0;
        font-size: 17px
    }

    .hizuke {
        position: absolute;
        bottom: 0;
        margin: 0;
        font-size: 12px
    }

    .subtitle1,
    .subtitle2,
    .subtitle3,
    .subtitle4,
    .subtitle5,
    .subtitle6,
    .subtitle7,
    .subtitle8 {
        margin-left: 0 auto;
        margin-right: 0 auto;
        margin-bottom: 2rem;
        color: #384159;
        font-family: dnp-shuei-shogomincho-std, serif;
        font-style: normal;
        font-weight: 500;
        font-size: 25px;
        display: inline-block;
        border-left: 5px double #384159;
        border-right: 5px double #384159;
        padding: 2px 8px
    }

    .instagramlogo {
        height: 35px;
        width: 35px;
        margin: 5px 22px 30px
    }

    .Xlogo {
        height: 30px;
        width: 30px;
        margin: 5px 30px 30px;
        display: inline-block;
        text-align: center
    }

    .YouTubelogo {
        height: 30px;
        width: 42.5px;
        margin: 5px 17px 30px
    }

    .TikToklogo {
        height: 34px;
        ;
        width: 30px;
        ;
        margin: 5px 23px 30px
    }

    .text {
        font-family: sawarabi-mincho, serif;
        color: #384159;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        display: block;
        margin-bottom: 8rem
    }

    .colum {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        border-top: 1px solid #005397;
        padding: 0 0;
        height: 50px;
        line-height: 50px;
        text-align: left
    }

    .colum2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        border-top: 1px solid #005397;
        padding: 0 0;
        border-bottom: 1px solid #005397;
        height: 50px;
        line-height: 50px;
        text-align: left
    }

    section {
        margin-bottom: 10rem
    }

    .arrow {
        float: right;
        height: 20px;
        width: 12px;
        padding: 0 0;
        margin-top: 15px
    }

    .SNS1 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        display: inline-block;
        border-bottom: 2px solid #384159;
        margin-top: 0;
        margin-bottom: 20px;
        text-align: center
    }

    .SNS2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        display: inline-block;
        border-bottom: 2px solid #384159;
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: center
    }

    .link_L:hover,
    .link_R:hover {
        text-decoration: none
    }

    .link_L {
        display: flex;
        align-items: stretch;
        margin: 0 -21.5%;
        gap: 0
    }

    .link_R {
        display: flex;
        align-items: stretch;
        margin: 0 -21.5%;
        gap: 0;
        flex-direction: row-reverse
    }

    .feature-img {
        display: block;
        height: auto;
        width: 100%
    }

    .img-box {
        width: 60%;
        overflow: hidden;
        height: fit-content
    }

    a img {
        transition: 0.5s
    }

    a img:hover {
        transform: scale(1.05);
        transition: 0.5s
    }

    .chuki-box {
        background-color: #d74343;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .C {
        display: inline-block;
        grid-row: 2 / 3;
        grid-column: 1 / 4;
        white-space: nowrap
    }

    .chuki {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .chuki::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .chuki::after {
        transform: scale(1, 1)
    }

    .chuki-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .explain-white_chuki {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .shinkikaku-box {
        background-color: #edce94;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .S {
        grid-row: 2 / 3;
        grid-column: 1 / 4
    }

    .shinkikaku {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .shinkikaku::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .shinkikaku::after {
        transform: scale(1, 1)
    }

    .shinkikaku-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        padding-left: 30px;
        grid-row: 5 / 6;
        grid-column: 1 / 3
    }

    .explain-blue_shinkikaku {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        text-align: left;
        grid-row: 3 / 5;
        grid-column: 2 / 3
    }

    .GF-box {
        background-color: #d74343;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 0.9fr 1.1fr 50px
    }

    .G {
        display: inline-block;
        margin-top: 10%;
        grid-row: 1 / 3;
        grid-column: 1 / 5;
        white-space: nowrap
    }

    .GF {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        position: relative;
        display: inline-block;
        justify-self: right;
        white-space: nowrap;
        text-align: right
    }

    .GF::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .GF::after {
        transform: scale(1, 1)
    }

    .explain-white_GF {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 2 / 6;
        grid-column: 2/ 4;
        text-align: left
    }

    .explain-white_GF p {
        margin-top: 10px
    }

    .GF-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 3 / 5
    }

    .kikakukon-box {
        background-color: #edce94;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .K {
        grid-row: 2 / 3;
        grid-column: 1 / 4
    }

    .kikakukon {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .kikakukon::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .kikakukon::after {
        transform: scale(1, 1)
    }

    .kikakukon-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        padding-left: 30px;
        grid-row: 5 / 6;
        grid-column: 1 / 3
    }

    .OPC-box {
        background-color: #d74343;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        padding: 0 5%
    }

    .O {
        display: inline-block;
        margin-top: 20%
    }

    .OPC {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .OPC::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.2s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .OPC1 {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .OPC1::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.6s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .OPC::after,
    .link_L:hover .OPC1::after {
        transform: scale(1, 1)
    }

    .explain-white_OPC {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        text-align: left
    }

    .OPC-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: right;
        margin-right: -10%
    }

    .apibato-box {
        background-color: #edce94;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .A {
        grid-row: 2 / 3;
        grid-column: 1 / 4
    }

    .apibato {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 1 / 4;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .explain-blue_apbt {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 3 / 5;
        grid-column: 2 / 3;
        text-align: left
    }

    .apibato::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .apibato::after {
        transform: scale(1, 1)
    }

    .apibato-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        padding-left: 30px;
        grid-row: 5 / 6;
        grid-column: 1 / 3
    }

    .hakumokken-box {
        background-color: #d74343;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .Ha {
        grid-row: 2 / 3;
        grid-column: 1 / 4
    }

    .hakumokken {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .hakumokken::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .hakumokken::after {
        transform: scale(1, 1)
    }

    .hakumokken-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .hukubiki-box {
        background-color: #edce94;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .H {
        grid-row: 2 / 3;
        grid-column: 1 / 4
    }

    .hukubiki {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .explain-blue_hukubiki {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 3 / 5;
        grid-column: 2 / 3;
        text-align: left
    }

    .hukubiki::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .hukubiki::after {
        transform: scale(1, 1)
    }

    .hukubiki-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        padding-left: 30px;
        grid-row: 5 / 6;
        grid-column: 1 / 3
    }

    .kodomo-box {
        background-color: #d74343;
        width: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: 50px 1fr 50px
    }

    .kodomo {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 35px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .Ko {
        grid-row: 2 / 3;
        grid-column: 1 / 4
    }

    .explain-white_kodomo {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 3 / 5;
        grid-column: 2 / 3;
        text-align: left
    }

    .kodomo::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .kodomo::after {
        transform: scale(1, 1)
    }

    .kodomo-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .explain-white {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .explain-blue {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .news {
        color: #384159
    }

    .news__nav {
        display: none
    }

    .news__filter {
        display: flex;
        flex-wrap: nowrap;
        margin: 0 auto 1rem;
        padding: 0;
        border-bottom: 5px #384159 solid
    }

    .news__tab {
        width: 16.6666%;
        appearance: none;
        border: none;
        background: #fffef9;
        color: #384159;
        padding: .5rem .1rem;
        font: 700 14px/1.1 "sawarabi-mincho", serif;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 16px
    }

    .news__tab:hover {
        transform: translateY(-3px);
        border-color: #384159
    }

    .news__tab.is-active {
        background: #384159;
        color: #fffef9;
        border-color: #384159
    }

    .news__list {
        list-style: none;
        margin: 0 0;
        padding: 0 0;
        gap: 12px
    }

    .news__item {
        display: block
    }

    .news__link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 3%;
        padding: 2% 0;
        color: inherit;
        transition: border-color .15s ease, transform .15s ease, background .15s ease;
        text-decoration: none
    }



    .news__link:hover {
        transform: translateY(-2px);
        color: #c9a063;
        text-decoration: none
    }

    .news__cat {
        width: 13rem;
        height: auto;
        display: inline-block;
        flex: none;
        font: 700 12px/1 "sawarabi-mincho", serif;
        color: #fffbe9;
        background: #d74343;
        padding: .35rem .5rem;
        text-decoration: none !important;
        position: relative
    }

    .pin {
        position: absolute;
        top: -100%;
        left: 3%;
        width: 13%;
        height: auto
    }

    .news__ttl {
        font: 700 15px/1.4 "sawarabi-mincho", serif;
        font-style: normal;
        font-weight: 700
    }

    .news__date {
        margin-left: auto;
        font: 700 12px/1.2 "sawarabi-mincho", serif;
        color: #384159;
        white-space: nowrap
    }

    .news__count {
        margin: 1rem;
        text-align: center;
        font: 500 13px/1.6 "sawarabi-mincho", serif;
        color: #60707a
    }

    .news__more-wrap {
        display: flex;
        justify-content: center;
        margin-top: 8px
    }

    .news__more {
        width: 100%;
        justify-content: center;
        appearance: none;
        border: 1px solid #384159;
        background: #fffef9;
        color: #384159;
        padding: 1rem 1.25rem;
        font: 700 14px/1 "sawarabi-mincho", serif;
        cursor: pointer;
        transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease
    }

    .news__more:hover {
        transform: translateY(-1px);
        background: #384159;
        color: #fffef9;
        border-color: #384159
    }


	.news__list .news__item:nth-of-type(1){
    display: none;
    }

    .goannnai {
        position: relative;
        left: 50%;
        width: 71vw;
        transform: translateX(-50%)
    }

    .group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3%;
        margin: 1rem auto 0;
        width: 100%
    }

    .group .annnai {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-decoration: none;
        color: #fffef9;
        border-radius: 10px;
        padding: 2rem 2rem 1.5rem;
        width: 25%;
        background-color: #384159;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        gap: 1rem;
        margin-bottom: 3%
    }

    .group .annnai:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .8)
    }

    .group .annnai img {
        width: 100%;
        height: auto;
        border: .5px solid #384159
    }

    .group a img:hover {
        transform: none !important;
        transition: none !important
    }

    .group .annnai p {
        font-family: sawarabi-mincho, serif;
        font-weight: 550;
        font-size: 17px;
        margin: 0
    }

    .sagasu {
        position: relative;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%)
    }

    .heiretsu {
        display: flex;
        justify-content: center;
        gap: 5%;
        flex-wrap: wrap;
        padding: 1rem 0
    }

    .circle-link {
        text-decoration: none !important;
        color: inherit
    }

    .circle1,
    .circle2 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 3px solid #384159;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: url(http://hakumonsai.weblike.jp/2025/01_test/02_Yuta/59thTopPage/img/haikei.png) bottom 20% center / 150% no-repeat, #edce94
    }

    .circle1:hover,
    .circle2:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, .15)
    }

    .rens {
        width: 60%;
        height: auto;
        object-fit: contain;
        margin-top: 13%;
        transition: transform 0.3s ease
    }

    .chizu {
        width: 62%;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease
    }

    .circle1:hover img,
    .circle2:hover img {
        transform: none
    }

    .circle1 p,
    .circle2 p {
        font-family: "sawarabi-mincho", serif;
        font-weight: 700;
        font-size: 17px;
        text-align: center;
        margin: 0 0 20%;
        color: #384159
    }

    .circle1 p {
        margin-bottom: 15%
    }

    :root {
        --splash-bg: #edce94;
        --hero-max-w: 320px;
        --hero-vw: 80vw;
        --gap: 1.2rem;
        --fadeout: .6s;
        --cycle-duration: 1.6s;
        --letter-step: .08s;
        --letter-start: .10s
    }

    #splash {
        position: fixed;
        inset: 0;
        background: var(--splash-bg);
        display: grid;
        place-items: center;
        z-index: 9999;
        opacity: 1;
        transition: opacity var(--fadeout) ease
    }

    #splash.is-hidden {
        opacity: 0;
        pointer-events: none
    }

    .splash-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        position: relative
    }

    .splash-hero {
        position: relative;
        width: min(var(--hero-vw), var(--hero-max-w));
        aspect-ratio: 1 / 1;
        overflow: hidden;
        animation: fadeOutSplash 0.6s ease forwards;
        animation-delay: 2.4s;
        z-index: 1
    }

    .splash-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0
    }

    @keyframes splashCycle {

        0%,
        20% {
            opacity: 1
        }

        25%,
        100% {
            opacity: 0
        }
    }

    .img-1 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) 0s
    }

    .img-2 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) .4s
    }

    .img-3 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) .8s
    }

    .img-4 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) 1.2s
    }

    .splash-title {
        display: grid;
        justify-items: center;
        gap: .1rem;
        animation: fadeOutSplash 0.6s ease forwards;
        animation-delay: 2.4s;
        z-index: 1
    }

    .hakumon-row {
        display: flex;
        align-items: flex-end;
        gap: clamp(4px, .2vw, 10px)
    }

    .letter {
        height: clamp(28px, 7.2vw, 60px);
        width: auto;
        opacity: 0;
        transform: translateY(-40px);
        animation: dropIn .8s ease-out forwards
    }

    .festival-img {
        height: clamp(22px, 5.8vw, 48px);
        width: auto;
        opacity: 0;
        transform: translateY(-40px);
        animation: dropIn .8s ease-out forwards
    }

    @keyframes dropIn {
        0% {
            opacity: 0;
            transform: translateY(-40px)
        }

        60% {
            opacity: 1;
            transform: translateY(6px)
        }

        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .letter-1 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 0)
    }

    .letter-2 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 1)
    }

    .letter-3 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 2)
    }

    .letter-4 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 3)
    }

    .letter-5 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 4)
    }

    .letter-6 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 5)
    }

    .letter-7 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 6)
    }

    .letter-8 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 7+.06s)
    }

    @keyframes fadeOutSplash {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }

    .stamp {
        position: fixed;
        top: 50%;
        left: 42.5vw;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        width: 15vw;
        height: auto;
        animation: stampPop 0.6s ease-out forwards;
        z-index: 5;
        animation-delay: 2.4s
    }

    @keyframes stampPop {
        0% {
            transform: translateY(-50%) scale(0);
            opacity: 0
        }

        60% {
            transform: translateY(-50%) scale(1.2);
            opacity: 1
        }

        100% {
            transform: translateY(-50%) scale(1);
            opacity: 1
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .splash-img {
            animation: none;
            opacity: 1
        }

        .letter,
        .festival-img {
            animation: none;
            opacity: 1;
            transform: none
        }

        #splash {
            transition: none
        }
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        margin: 0;
        justify-content: space-between
    }

    .square {
        width: 48%;
        height: 6rem;
        background: #384159;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease;
        position: relative;
        overflow: hidden
    }

    .square::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bg) center/15% no-repeat;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity .3s ease, transform .5s ease;
        z-index: 0;
        transform: rotate(30deg)
    }

    .square:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
        background: #fffef9
    }

    .square a {
        text-decoration: none;
        color: #fffef9;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        transition: color 0.3s ease;
        z-index: 1
    }

    .square:hover a {
        color: #384159;
        text-decoration: none;
        border: 1px #384159 solid
    }

    .square:hover::before {
        opacity: .2;
        transform: scale(1)
    }

    .square p {
        margin: 0;
        font-family: "sawarabi-mincho", serif;
        font-size: 17px;
        font-weight: 550;
        text-align: center;
        pointer-events: none
    }

    .yajirusi {
        position: absolute;
        right: 5%;
        width: 25px;
        height: auto;
        transition: transform 0.25s ease, filter 0.3s ease;
        filter: brightness(0) invert(1)
    }

    .square:hover .yajirusi {
        transform: translateX(35%);
        filter: brightness(0) invert(0)
    }


.thanks{
    margin: 0 0 8rem;
    font-family: dnp-shuei-shogomincho-std, serif;
    color: #384159;
    font-style: normal;
    font-weight: bold;		 
    font-size: 25px;
    text-align: center;
}

    html {
        scroll-behavior: smooth
    }

    .pagetop {
        height: 60px;
        width: 60px;
        position: fixed;
        right: 25px;
        bottom: 25px;
        background: #c9a063a0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000
    }

    .pagetop__arrow {
        height: 15px;
        width: 15px;
        border-top: 2.5px solid #fffef9;
        border-right: 2.5px solid #fffef9;
        transform: translateY(20%) rotate(-45deg)
    }

    @media (hover:hover) and (pointer:fine) {

        .pagetop:hover,
        .pagetop:hover .pagetop__arrow {
            border-color: #fffef9;
            background: #c9a063
        }
    }
}

@media screen and (min-width:769px) and (max-width:1023px) {

.news__item.is-disabled .news__link{
  pointer-events:none;
  cursor: default;
}

    body {
        background-color: #fffef9 !important;
        color: #384159
    }

    .Mainvisual {
        max-width: 100%;
        height: auto;
        display: block
    }

    .article {
        padding: 5rem 7% 0;
        letter-spacing: .05em;
        text-align: center;
        padding-bottom: 2rem
    }

    .caution {
        font-family: sawarabi-mincho, serif;
        color: #384159;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        margin: 5rem 0
    }

    .subtitle1,
    .subtitle2,
    .subtitle3,
    .subtitle4,
    .subtitle5,
    .subtitle6,
    .subtitle7,
    .subtitle8 {
        margin-left: 0 auto;
        margin-right: 0 auto;
        margin-bottom: 1.5rem;
        color: #384159;
        font-family: dnp-shuei-shogomincho-std, serif;
        font-style: normal;
        font-weight: 500;
        font-size: 23px;
        display: inline-block;
        border-left: 5px double #384159;
        border-right: 5px double #384159;
        padding: 2px 8px
    }

    .instagramlogo {
        height: 35px;
        width: 35px;
        margin: 5px 22px 30px
    }

    .Xlogo {
        height: 30px;
        width: 30px;
        margin: 5px 30px 30px;
        display: inline-block;
        text-align: center
    }

    .YouTubelogo {
        height: 30px;
        width: 42.5px;
        margin: 5px 17px 30px
    }

    .TikToklogo {
        height: 34px;
        ;
        width: 30px;
        ;
        margin: 5px 23px 30px
    }

    .text {
        font-family: sawarabi-mincho, serif;
        color: #384159;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        display: block;
        margin-bottom: 5rem
    }

    .colum {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        border-top: 1px solid #005397;
        padding: 0 0;
        height: 50px;
        line-height: 50px;
        text-align: left
    }

    .colum2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        border-top: 1px solid #005397;
        padding: 0 0;
        border-bottom: 1px solid #005397;
        height: 50px;
        line-height: 50px;
        text-align: left
    }

    section {
        margin-bottom: 5rem
    }

    .arrow {
        float: right;
        height: 20px;
        width: 12px;
        padding: 0 0;
        margin-top: 15px
    }

    .SNS1 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        display: inline-block;
        border-bottom: 2px solid #384159;
        margin-top: 0;
        margin-bottom: 20px;
        text-align: center
    }

    .SNS2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 17px;
        color: #384159;
        display: inline-block;
        border-bottom: 2px solid #384159;
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: center
    }

    .link_L:hover,
    .link_R:hover {
        text-decoration: none
    }

    .link_L {
        display: flex;
        align-items: stretch;
        margin: 0 -8.5%;
        gap: 0
    }

    .link_R {
        display: flex;
        align-items: stretch;
        margin: 0 -8.5%;
        gap: 0;
        flex-direction: row-reverse
    }

    .feature-img {
        display: block;
        height: auto;
        width: 100%
    }

    .img-box {
        width: 60%;
        overflow: hidden;
        height: fit-content
    }

    a img {
        transition: 0.5s
    }

    a img:hover {
        transform: scale(1.05);
        transition: 0.5s
    }

    .chuki-box {
        background-color: #d74343;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .chuki {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .C {
        display: inline-block;
        top: 20%;
        white-space: nowrap;
        position: absolute
    }

    .chuki::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .chuki::after {
        transform: scale(1, 1)
    }

    .chuki-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        white-space: nowrap;
        position: absolute;
        bottom: 8%;
        right: 7%
    }

    .explain-white_chuki {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 58%;
        transform: translateY(-50%)
    }

    .shinkikaku-box {
        background-color: #edce94;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .S {
        display: inline-block;
        top: 30%;
        white-space: nowrap;
        position: absolute
    }

    .shinkikaku {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        margin-top: -40px;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .shinkikaku::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .shinkikaku::after {
        transform: scale(1, 1)
    }

    .shinkikaku-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: left;
        position: absolute;
        bottom: 8%;
        left: 7%
    }

    .explain-blue_shinkikaku {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 58%;
        transform: translateY(-50%)
    }

    .GF-box {
        background-color: #d74343;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .G {
        display: inline-block;
        top: 14%;
        white-space: nowrap;
        position: absolute
    }

    .GF {
        white-space: pre;
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        margin-bottom: 8%;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .GF::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .GF::after {
        transform: scale(1, 1)
    }

    .explain-white_GF {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 58%;
        transform: translateY(-50%)
    }

    .explain-white_GF p {
        margin-top: 5px
    }

    .GF-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        white-space: nowrap;
        position: absolute;
        bottom: 8%;
        right: 7%
    }

    .kikakukon-box {
        background-color: #edce94;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .K {
        display: inline-block;
        top: 30%;
        white-space: nowrap;
        position: absolute
    }

    .kikakukon {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        margin-top: -40px;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .kikakukon::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .kikakukon::after {
        transform: scale(1, 1)
    }

    .kikakukon-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: left;
        position: absolute;
        bottom: 8%;
        left: 7%
    }

    .kikakukon-box .explain-blue {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 60%;
        transform: translateY(-50%)
    }

    .OPC-box {
        background-color: #d74343;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .O {
        display: inline-block;
        top: 15%;
        white-space: nowrap;
        position: absolute
    }

    .OPC {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .OPC::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.2s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .OPC1 {
        white-space: pre;
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .OPC1::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.6s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .OPC::after,
    .link_L:hover .OPC1::after {
        transform: scale(1, 1)
    }

    .explain-white_OPC {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 63%;
        transform: translateY(-50%)
    }

    .OPC-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        white-space: nowrap;
        position: absolute;
        bottom: 8%;
        right: 7%
    }

    .apibato-box {
        background-color: #edce94;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .A {
        display: inline-block;
        top: 20%;
        white-space: nowrap;
        position: absolute
    }

    .apibato {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .explain-blue_apbt {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 58%;
        transform: translateY(-50%)
    }

    .apibato::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .apibato::after {
        transform: scale(1, 1)
    }

    .apibato-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: left;
        position: absolute;
        bottom: 8%;
        left: 7%
    }

    .hakumokken-box {
        background-color: #d74343;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .Ha {
        display: inline-block;
        top: 20%;
        white-space: nowrap;
        position: absolute
    }

    .hakumokken {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .hakumokken::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .hakumokken::after {
        transform: scale(1, 1)
    }

    .hakumokken-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        bottom: 8%;
        right: 7%;
        position: absolute
    }

    .hukubiki-box {
        background-color: #edce94;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .hukubiki {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .H {
        display: inline-block;
        top: 20%;
        white-space: nowrap;
        position: absolute
    }

    .hukubiki::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .explain-blue_hukubiki {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 58%;
        transform: translateY(-50%)
    }

    .link_R:hover .hukubiki::after {
        transform: scale(1, 1)
    }

    .hukubiki-box::after {
        content: '←詳しくはこちら';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: left;
        position: absolute;
        bottom: 8%;
        left: 7%
    }

    .kodomo-box {
        background-color: #d74343;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative
    }

    .Ko {
        display: inline-block;
        top: 20%;
        white-space: nowrap;
        position: absolute
    }

    .kodomo {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        position: relative;
        display: inline-block;
        justify-self: center
    }

    .explain-white_kodomo {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 58%;
        transform: translateY(-50%)
    }

    .kodomo::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .kodomo::after {
        transform: scale(1, 1)
    }

    .kodomo-box::after {
        content: '詳しくはこちら→';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        bottom: 8%;
        right: 7%;
        position: absolute
    }

    .explain-white {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px;
        text-align: left;
        position: absolute;
        padding: 0 15%;
        top: 60%;
        transform: translateY(-50%)
    }

    .news {
        padding: 2rem 0;
        color: #384159
    }

    .news__nav {
        display: none
    }

    .news__filter {
        display: flex;
        flex-wrap: nowrap;
        margin: 0 auto 1rem;
        padding: 0;
        border-bottom: 5px #384159 solid
    }

    .news__tab {
        width: 16.6666%;
        appearance: none;
        border: none;
        background: #fffef9;
        color: #384159;
        padding: .5rem .1rem;
        font: 700 14px/1.1 "sawarabi-mincho", serif;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 15px
    }

    .news__tab:hover {
        transform: translateY(-3px);
        border-color: #384159
    }

    .news__tab.is-active {
        background: #384159;
        color: #fffef9;
        border-color: #384159
    }

    .news__list {
        list-style: none;
        margin: 0 0;
        padding: 0 0;
        gap: 12px
    }

    .news__item {
        display: block
    }

    .news__link {
        display: flex;
        align-items: center;
        gap: 3%;
        padding: 2% 0;
        color: inherit;
        transition: border-color .15s ease, transform .15s ease, background .15s ease;
        text-decoration: none
    }

    .news__link:hover {
        transform: translateY(-2px);
        color: #c9a063;
        text-decoration: none
    }

    .news__cat {
        position: relative;
        width: 13rem;
        height: auto;
        display: inline-block;
        flex: none;
        font: 700 12px/1 "sawarabi-mincho", serif;
        color: #fffbe9;
        background: #d74343;
        padding: .35rem .5rem;
        text-decoration: none !important
    }

    .pin {
        position: absolute;
        top: -100%;
        left: 3%;
        width: 12%;
        height: auto
    }

    .news__ttl {
        font: 700 15px/1.4 "sawarabi-mincho", serif;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700
    }

    .news__date {
        margin-left: auto;
        font: 700 12px/1.2 "sawarabi-mincho", serif;
        color: #384159;
        white-space: nowrap
    }

    .news__count {
        margin: 1rem;
        text-align: center;
        font: 500 13px/1.6 "sawarabi-mincho", serif;
        color: #60707a
    }

    .news__more-wrap {
        display: flex;
        justify-content: center;
        margin-top: 8px
    }

    .news__more {
        width: 100%;
        justify-content: center;
        appearance: none;
        border: 1px solid #384159;
        background: #fffef9;
        color: #384159;
        padding: 1rem 1.25rem;
        font: 700 14px/1 "sawarabi-mincho", serif;
        cursor: pointer;
        transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease
    }

    .news__more:hover {
        transform: translateY(-1px);
        background: #384159;
        color: #fffef9;
        border-color: #384159
    }


.news__list .news__item:nth-of-type(1){
    display: none;
}


    .goannnai {
        position: relative;
        left: 50%;
        width: 86vw;
        transform: translateX(-50%)
    }

    .group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3%;
        margin: 1rem auto 0;
        width: 100%
    }

    .group .annnai {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-decoration: none;
        color: #fffef9;
        border: px solid #384159;
        border-radius: 10px;
        padding: 2rem 2rem 1.5rem;
        width: 30%;
        background-color: #384159;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        gap: 1rem;
        margin-bottom: 3%
    }

    .group .annnai:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .8)
    }

    .group .annnai img {
        width: 100%;
        height: auto;
        border: .5px solid #384159
    }

    .group a img:hover {
        transform: none !important;
        transition: none !important
    }

    .group .annnai p {
        font-family: sawarabi-mincho, serif;
        font-weight: 550;
        font-size: 17px;
        margin: 0
    }

    .sagasu {
        position: relative;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%)
    }

    .heiretsu {
        display: flex;
        justify-content: center;
        gap: 5%;
        flex-wrap: wrap;
        padding: 1rem 0
    }

    .circle-link {
        text-decoration: none !important;
        color: inherit
    }

    .circle1,
    .circle2 {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 3px solid #384159;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: url(http://hakumonsai.weblike.jp/2025/01_test/02_Yuta/59thTopPage/img/haikei.png) bottom 20% center / 150% no-repeat, #edce94
    }

    .circle1:hover,
    .circle2:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, .15)
    }

    .rens {
        width: 55%;
        height: auto;
        object-fit: contain;
        margin-top: 13%;
        transition: transform 0.3s ease
    }

    .chizu {
        width: 57%;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
        margin-top: 5%
    }

    .circle1:hover img,
    .circle2:hover img {
        transform: none
    }

    .circle1 p,
    .circle2 p {
        font-family: "sawarabi-mincho", serif;
        font-weight: 600;
        font-size: 15px;
        text-align: center;
        margin: 0 0 17%;
        color: #384159
    }

    .circle1 p {
        margin-bottom: 17%
    }

    :root {
        --splash-bg: #edce94;
        --hero-max-w: 250px;
        --hero-vw: 80vw;
        --gap: 1.2rem;
        --fadeout: .6s;
        --cycle-duration: 1.6s;
        --letter-step: .08s;
        --letter-start: .10s
    }

    #splash {
        position: fixed;
        inset: 0;
        background: var(--splash-bg);
        display: grid;
        place-items: center;
        z-index: 9999;
        opacity: 1;
        transition: opacity var(--fadeout) ease
    }

    #splash.is-hidden {
        opacity: 0;
        pointer-events: none
    }

    .splash-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        position: relative
    }

    .splash-hero {
        position: relative;
        width: min(var(--hero-vw), var(--hero-max-w));
        aspect-ratio: 1 / 1;
        overflow: hidden;
        animation: fadeOutSplash 0.6s ease forwards;
        animation-delay: 2.4s;
        z-index: 1
    }

    .splash-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0
    }

    @keyframes splashCycle {

        0%,
        20% {
            opacity: 1
        }

        25%,
        100% {
            opacity: 0
        }
    }

    .img-1 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) 0s
    }

    .img-2 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) .4s
    }

    .img-3 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) .8s
    }

    .img-4 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) 1.2s
    }

    .splash-title {
        display: grid;
        justify-items: center;
        gap: .1rem;
        animation: fadeOutSplash 0.6s ease forwards;
        animation-delay: 2.4s;
        z-index: 1
    }

    .hakumon-row {
        display: flex;
        align-items: flex-end;
        gap: clamp(4px, .2vw, 10px)
    }

    .letter {
        height: clamp(28px, 6vw, 60px);
        width: auto;
        opacity: 0;
        transform: translateY(-40px);
        animation: dropIn .8s ease-out forwards
    }

    .festival-img {
        height: clamp(22px, 5.3vw, 48px);
        width: auto;
        opacity: 0;
        transform: translateY(-40px);
        animation: dropIn .8s ease-out forwards
    }

    @keyframes dropIn {
        0% {
            opacity: 0;
            transform: translateY(-40px)
        }

        60% {
            opacity: 1;
            transform: translateY(6px)
        }

        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .letter-1 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 0)
    }

    .letter-2 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 1)
    }

    .letter-3 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 2)
    }

    .letter-4 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 3)
    }

    .letter-5 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 4)
    }

    .letter-6 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 5)
    }

    .letter-7 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 6)
    }

    .letter-8 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 7+.06s)
    }

    @keyframes fadeOutSplash {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }

    .stamp {
        position: fixed;
        top: 50%;
        left: 42.5vw;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        width: 15vw;
        height: auto;
        animation: stampPop 0.6s ease-out forwards;
        z-index: 5;
        animation-delay: 2.4s
    }

    @keyframes stampPop {
        0% {
            transform: translateY(-50%) scale(0);
            opacity: 0
        }

        60% {
            transform: translateY(-50%) scale(1.2);
            opacity: 1
        }

        100% {
            transform: translateY(-50%) scale(1);
            opacity: 1
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .splash-img {
            animation: none;
            opacity: 1
        }

        .letter,
        .festival-img {
            animation: none;
            opacity: 1;
            transform: none
        }

        #splash {
            transition: none
        }
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        margin: 0;
        justify-content: space-between
    }

    .square {
        width: 48%;
        height: 5rem;
        background: #384159;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease;
        overflow: hidden
    }

    .square::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bg) center/15% no-repeat;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity .3s ease, transform .5s ease;
        z-index: 0;
        transform: rotate(30deg)
    }

    .square:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
        background: #fffef9
    }

    .square a {
        text-decoration: none;
        color: #fffef9;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        transition: color 0.3s ease;
        z-index: 1
    }

    .square:hover a {
        color: #384159;
        text-decoration: none;
        border: 1px #384159 solid
    }

    .square:hover::before {
        opacity: .20;
        transform: scale(1)
    }

    .square p {
        margin: 0;
        font-family: "sawarabi-mincho", serif;
        font-size: 17px;
        font-weight: 550;
        text-align: center;
        pointer-events: none
    }

    .yajirusi {
        position: absolute;
        right: 5%;
        width: 25px;
        height: auto;
        transition: transform 0.25s ease, filter 0.3s ease;
        filter: brightness(0) invert(1)
    }

    .square:hover .yajirusi {
        transform: translateX(35%);
        filter: brightness(0) invert(0)
    }

.thanks{
    margin: 0 0 5rem;
    font-family: dnp-shuei-shogomincho-std, serif;
    color: #384159;
    font-style: normal;
    font-weight: bold;		 
    font-size: 23px;
    text-align: center;
}

    html {
        scroll-behavior: smooth
    }

    .pagetop {
        height: 60px;
        width: 60px;
        position: fixed;
        right: 25px;
        bottom: 25px;
        background: #c9a063a0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000
    }

    .pagetop__arrow {
        height: 15px;
        width: 15px;
        border-top: 2.5px solid #fffef9;
        border-right: 2.5px solid #fffef9;
        transform: translateY(20%) rotate(-45deg)
    }

    @media (hover:hover) and (pointer:fine) {

        .pagetop:hover,
        .pagetop:hover .pagetop__arrow {
            border-color: #fffef9;
            background: #c9a063
        }
    }
}

@media screen and (max-width:768px) {
.news__item.is-disabled .news__link{
  pointer-events:none;
  cursor: default;
}


    body {
        background-color: #fffef9 !important;
        color: #384159
    }

    .Mainvisual {
        max-width: 100%;
        height: auto;
        display: block
    }

    .article {
        padding: 4rem 5% 0;
        letter-spacing: .05em;
        text-align: center;
        padding-bottom: 2rem
    }

    .caution {
        font-family: sawarabi-mincho, serif;
        color: #384159;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        margin: 4rem 0
    }

    .subtitle1,
    .subtitle2,
    .subtitle3,
    .subtitle4,
    .subtitle5,
    .subtitle6,
    .subtitle7,
    .subtitle8 {
        margin-left: 0 auto;
        margin-right: 0 auto;
        margin-bottom: 1.5rem;
        color: #384159;
        font-family: dnp-shuei-shogomincho-std, serif;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        display: inline-block;
        border-left: 5px double #384159;
        border-right: 5px double #384159;
        padding: 2px 8px
    }

    .instagramlogo {
        height: 30px;
        width: 30px;
        margin: 5px 22px 30px
    }

    .Xlogo {
        height: 26px;
        width: 26px;
        margin: 5px 30px 30px;
        display: inline-block;
        text-align: center
    }

    .YouTubelogo {
        height: 26px;
        width: 36.8px;
        margin: 5px 17.5px 30px
    }

    .TikToklogo {
        height: 29.5px;
        ;
        width: 26px;
        ;
        margin: 5px 24px 30px
    }

    .text {
        font-family: sawarabi-mincho, serif;
        color: #384159;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        display: block;
        margin-bottom: 4rem
    }

    .colum {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #384159;
        border-top: 1px solid #005397;
        padding: 0 0;
        height: 50px;
        line-height: 50px;
        text-align: left
    }

    .colum2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #384159;
        border-top: 1px solid #005397;
        padding: 0 0;
        border-bottom: 1px solid #005397;
        height: 50px;
        line-height: 50px;
        text-align: left
    }

    section {
        margin-bottom: 4rem
    }

    .arrow {
        float: right;
        height: 20px;
        width: 12px;
        padding: 0 0;
        margin-top: 15px
    }

    .SNS1 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #384159;
        display: inline-block;
        border-bottom: 2px solid #384159;
        margin-top: 0;
        margin-bottom: 20px;
        text-align: center
    }

    .SNS2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #384159;
        display: inline-block;
        border-bottom: 2px solid #384159;
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: center
    }

    .link_L:hover,
    .link_R:hover {
        text-decoration: none
    }

    .link_L,
    .link_R {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 -5.6%;
        gap: 0
    }

    .feature-img {
        display: block;
        height: auto;
        width: 100%
    }

    .img-box {
        width: 100%;
        overflow: hidden
    }

    a img {
        transition: 0.5s
    }

    a img:hover {
        transform: scale(1.05);
        transition: 0.5s
    }

    .chuki-box {
        background-color: #d74343;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 1fr 50px
    }

    .C {
        grid-row: 2 / 3;
        grid-column: 1 / 5
    }

    .chuki {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .chuki::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .chuki::after {
        transform: scale(1, 1)
    }

    .chuki-box::after {
        content: '詳しくはこちら↓';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .explain-white_chuki {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .shinkikaku-box {
        background-color: #edce94;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 1fr 50px
    }

    .S {
        display: inline-block;
        grid-row: 2 / 3;
        grid-column: 1 / 5;
        white-space: nowrap;
        align-self: center
    }

    .shinkikaku {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .shinkikaku::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .shinkikaku::after {
        transform: scale(1, 1)
    }

    .shinkikaku-box::after {
        content: '詳しくはこちら↓';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .explain-blue_shinkikaku {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .GF-box {
        background-color: #d74343;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 0.9fr 1.1fr 50px
    }

    .G {
        display: inline-block;
        grid-row: 1 / 3;
        grid-column: 1 / 5;
        white-space: nowrap;
        align-self: center;
        margin-bottom: 10px
    }

    .GF {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        position: relative;
        display: inline-block;
        justify-self: right;
        white-space: nowrap;
        text-align: right
    }

    .GF::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .GF::after {
        transform: scale(1, 1)
    }

    .explain-white_GF {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 4;
        text-align: left;
        margin-left: 1%
    }

    .explain-white_GF p {
        margin-top: 5px
    }

    .GF-box::after {
        content: '詳しくはこちら↓';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 3 / 5
    }

    .kikakukon-box {
        background-color: #edce94;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 1fr 50px
    }

    .K {
        grid-row: 2 / 3;
        grid-column: 1 / 5
    }

    .kikakukon {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .kikakukon::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .kikakukon::after {
        transform: scale(1, 1)
    }

    .kikakukon-box::after {
        content: '詳しくはこちら↓';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .OPC-box {
        background-color: #d74343;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(8, 28.75px);
        grid-template-columns: 50px 1fr 50px
    }

    .O {
        display: inline-block;
        margin-top: 10%;
        grid-row: 2 / 3;
        grid-column: 1 / 5
    }

    .OPC {
        white-space: pre;
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center;
        white-space: pre-line
    }

    .OPC::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.2s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .OPC1 {
        white-space: pre;
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        text-align: center;
        position: relative;
        display: inline-block;
        justify-self: center;
        white-space: pre-line
    }

    .OPC1::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.6s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .OPC::after,
    .link_L:hover .OPC1::after {
        transform: scale(1, 1)
    }

    .explain-white_OPC {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 5 / 7;
        grid-column: 2/ 3;
        text-align: left
    }

    .OPC-box::after {
        content: '詳しくはこちら↓';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        padding-bottom: 30px;
        grid-row: 8 / 9;
        grid-column: 2 / 4
    }

    .apibato-box {
        background-color: #edce94;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 25px 25px 1fr 25px 25px
    }

    .a {
        grid-row: 2 / 3;
        grid-column: 1 / 6
    }

    .apibato {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 5;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .explain-blue_apbt {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 3/ 4;
        text-align: left
    }

    .apibato::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_R:hover .apibato::after {
        transform: scale(1, 1)
    }

    .apibato-box::after {
        content: '詳しくはこちら↓';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 3 / 6
    }

    .hakumokken-box {
        background-color: #d74343;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 1fr 50px
    }

    .Ha {
        grid-row: 2 / 3;
        grid-column: 1 / 5
    }

    .hakumokken {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .hakumokken::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .hakumokken::after {
        transform: scale(1, 1)
    }

    .hakumokken-box::after {
        content: '詳しくはこちら↓';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .hukubiki-box {
        background-color: #edce94;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 1fr 50px
    }

    .hukubiki {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .H {
        grid-row: 2 / 3;
        grid-column: 1 / 5
    }

    .hukubiki::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #384159;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .explain-blue_hukubiki {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .link_R:hover .hukubiki::after {
        transform: scale(1, 1)
    }

    .hukubiki-box::after {
        content: '詳しくはこちら↓';
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .kodomo-box {
        background-color: #d74343;
        width: 100%;
        height: 230px;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-rows: repeat(5, 46px);
        grid-template-columns: 50px 1fr 50px
    }

    .kodomo {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700;
        font-size: 26px;
        grid-row: 2 / 3;
        grid-column: 2 / 5;
        position: relative;
        display: inline-block;
        justify-self: center;
        margin-bottom: 30px;
        white-space: nowrap !important
    }

    .Ko {
        grid-row: 2 / 3;
        grid-column: 1 / 5
    }

    .explain-white_kodomo {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .kodomo::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 2px;
        width: 100%;
        background-color: #fffef9;
        transition: transform 0.3s;
        transform-origin: center top;
        transform: scale(0, 1)
    }

    .link_L:hover .kodomo::after {
        transform: scale(1, 1)
    }

    .kodomo-box::after {
        content: '詳しくはこちら↓';
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        text-align: right;
        padding-right: 30px;
        grid-row: 5 / 6;
        grid-column: 2 / 4
    }

    .explain-white {
        color: #fffef9;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .explain-blue {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 12px;
        grid-row: 3 / 5;
        grid-column: 2/ 3;
        text-align: left
    }

    .news {
        padding: 2rem 0;
        color: #384159
    }

    .news__filter {
        border-bottom: 5px solid #384159 !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1rem;
        scroll-padding-right: 0
    }

    .news__nav {
        display: none
    }

    .news__filter-wrap {
        position: relative;
        display: flex;
        align-items: stretch;
        background: #fffef9;
        overflow: hidden;
        height: auto;
        margin: 0 auto 1rem;
        border-bottom: 1px solid #384159
    }

    .news__nav {
        flex: 0 0 1px;
        background: #384159;
        color: #fffef9;
        border: none;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s ease
    }

    .news__nav:hover {
        background: #384159
    }

    .news__nav:disabled {
        color: #606267
    }

    .news__tab:last-child {
        scroll-snap-align: end
    }

    .news__filter.no-snap {
        scroll-snap-type: none
    }

    .news__filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: .5rem;
        flex: 1;
        margin: 0;
        border-bottom: none
    }

    .news__tab {
        flex: 0 0 auto;
        min-width: max-content;
        appearance: none;
        border: 0;
        background: #fffef9;
        color: #384159;
        padding: .5rem 1.81rem;
        cursor: pointer;
        font-family: sawarabi-mincho, serif;
        font-weight: 550;
        font-size: 15px;
        transition: background .15s ease, color .15s ease, transform .1s ease;
        scroll-snap-align: start
    }

    .news__filter::-webkit-scrollbar {
        display: none
    }

    .news__tab.is-active {
        background: #384159;
        color: #fffef9;
        border-color: #384159
    }

    .news__list {
        list-style: none;
        margin: 0 0;
        padding: 0 0;
        gap: 12px
    }

    .news__item {
        display: block
    }

    .news__link {
        display: grid;
        grid-template-columns: 7.5rem 1fr auto;
        align-items: center;
        column-gap: .75rem;
        row-gap: .25rem;
        padding: 4% 0;
        color: inherit;
        text-decoration: none;
        transition: transform .15s ease;
        justify-items: start
    }

    .news__link:hover {
        transform: translateY(-2px);
        text-decoration: none;
        color: #c9a063
    }

    .news__cat {
        position: relative;
        width: 7.5rem;
        height: auto;
        display: inline-block;
        flex: none;
        font: 700 9px/1 "sawarabi-mincho", serif;
        color: #fffbe9;
        background: #d74343;
        padding: .35rem .2rem;
        text-decoration: none !important
    }

    .pin {
        position: absolute;
        top: -70%;
        left: 1.5%;
        width: 12%;
        height: auto
    }

    .news__ttl {
        font: 700 12px/1.4 "sawarabi-mincho", serif;
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 700
    }

    .news__date {
        margin-left: auto;
        font: 700 9px/1.2 "sawarabi-mincho", serif;
        color: #384159;
        min-width: 90px !important;
        white-space: nowrap
    }

    .news__count {
        margin: 1rem;
        text-align: center;
        font: 500 10px/1.6 "sawarabi-mincho", serif;
        color: #60707a
    }




    @media (max-width:768px) {
        .news__list {
            grid-template-columns: 1fr
        }

        .news__date {
            margin-left: 0
        }
    }

    .news__more-wrap {
        display: flex;
        justify-content: center;
        margin-top: 8px
    }

    .news__more {
        width: 100%;
        justify-content: center;
        appearance: none;
        border: 1px solid #384159;
        background: #fffef9;
        color: #384159;
        padding: .5rem 1.25rem;
        font: 700 12px/1 "sawarabi-mincho", serif;
        cursor: pointer;
        transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease
    }

    .news__more:hover {
        transform: translateY(-1px);
        background: #384159;
        color: #fffef9;
        border-color: #384159
    }


.news__list .news__item:nth-of-type(1){
    display: none;
}


    .goannnai {
        position: relative;
        left: 50%;
        width: 90vw;
        transform: translateX(-50%)
    }

    .group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3%;
        margin: 1rem auto 0;
        width: 100%
    }

    .group .annnai {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-decoration: none;
        color: #fffef9;
        border-radius: 10px;
        padding: 1.5rem 1.5rem 1rem;
        width: 30%;
        background-color: #384159;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        gap: .5rem;
        margin-bottom: 3%
    }

    .group .annnai:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .8)
    }

    .group .annnai img {
        width: 100%;
        height: auto;
        border: .5px solid #384159
    }

    .group a img:hover {
        transform: none !important;
        transition: none !important
    }

    .group .annnai p {
        font-family: sawarabi-mincho, serif;
        font-weight: 550;
        font-size: 14px;
        margin: 0
    }

    @media (max-width:410px) {
        .group .annnai {
            width: 47% !important
        }

        .group .annnai p {
            font-size: 12px
        }
    }

    @media (max-width:550px) {
        .group .annnai {
            width: 40%
        }
    }

    .sagasu {
        position: relative;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%)
    }

    .heiretsu {
        display: flex;
        justify-content: center;
        gap: 5%;
        flex-wrap: wrap;
        padding: 1rem 0
    }

    .circle-link {
        text-decoration: none !important;
        color: inherit
    }

    .circle1,
    .circle2 {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        border: 1.5px solid #384159;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: url(http://hakumonsai.weblike.jp/2025/01_test/02_Yuta/59thTopPage/img/haikei.png) bottom 20% center / 150% no-repeat, #edce94
    }

    .circle1:hover,
    .circle2:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, .15)
    }

    .rens {
        width: 53%;
        height: auto;
        object-fit: contain;
        margin-top: 13%;
        transition: transform 0.3s ease
    }

    .chizu {
        width: 52%;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
        margin-top: 5%
    }

    .circle1:hover img,
    .circle2:hover img {
        transform: none
    }

    .circle1 p,
    .circle2 p {
        font-family: "sawarabi-mincho", serif;
        font-weight: 600;
        font-size: 12px;
        text-align: center;
        margin: 0 0 18%;
        color: #384159
    }

    .circle1 p {
        margin-bottom: 19%
    }

    :root {
        --splash-bg: #edce94;
        --hero-max-w: 200px;
        --hero-vw: 80vw;
        --gap: 1.2rem;
        --fadeout: .6s;
        --cycle-duration: 1.6s;
        --letter-step: .08s;
        --letter-start: .10s
    }

    #splash {
        position: fixed;
        inset: 0;
        background: var(--splash-bg);
        display: grid;
        place-items: center;
        z-index: 9999;
        opacity: 1;
        transition: opacity var(--fadeout) ease
    }

    #splash.is-hidden {
        opacity: 0;
        pointer-events: none
    }

    .splash-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        position: relative
    }

    .splash-hero {
        position: relative;
        width: min(var(--hero-vw), var(--hero-max-w));
        aspect-ratio: 1 / 1;
        overflow: hidden;
        animation: fadeOutSplash 0.6s ease forwards;
        animation-delay: 2.4s;
        z-index: 1
    }

    .splash-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0
    }

    @keyframes splashCycle {

        0%,
        20% {
            opacity: 1
        }

        25%,
        100% {
            opacity: 0
        }
    }

    .img-1 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) 0s
    }

    .img-2 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) .4s
    }

    .img-3 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) .8s
    }

    .img-4 {
        animation: splashCycle var(--cycle-duration) infinite steps(1, end) 1.2s
    }

    .splash-title {
        display: grid;
        justify-items: center;
        gap: .1rem;
        animation: fadeOutSplash 0.6s ease forwards;
        animation-delay: 2.4s;
        z-index: 1
    }

    .hakumon-row {
        display: flex;
        align-items: flex-end;
        gap: clamp(4px, .2vw, 10px)
    }

    .letter {
        height: 10vw;
        width: auto;
        opacity: 0;
        transform: translateY(-40px);
        animation: dropIn .8s ease-out forwards
    }

    .festival-img {
        height: 8vw;
        width: auto;
        opacity: 0;
        transform: translateY(-40px);
        animation: dropIn .8s ease-out forwards
    }

    @keyframes dropIn {
        0% {
            opacity: 0;
            transform: translateY(-40px)
        }

        60% {
            opacity: 1;
            transform: translateY(6px)
        }

        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .letter-1 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 0)
    }

    .letter-2 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 1)
    }

    .letter-3 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 2)
    }

    .letter-4 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 3)
    }

    .letter-5 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 4)
    }

    .letter-6 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 5)
    }

    .letter-7 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 6)
    }

    .letter-8 {
        animation-delay: calc(var(--letter-start)+var(--letter-step) * 7+.06s)
    }

    @keyframes fadeOutSplash {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }

    .stamp {
        position: fixed;
        top: 50%;
        left: 35vw;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        width: 30vw;
        height: auto;
        animation: stampPop 0.6s ease-out forwards;
        z-index: 5;
        animation-delay: 2.4s
    }

    @keyframes stampPop {
        0% {
            transform: translateY(-50%) scale(0);
            opacity: 0
        }

        60% {
            transform: translateY(-50%) scale(1.2);
            opacity: 1
        }

        100% {
            transform: translateY(-50%) scale(1);
            opacity: 1
        }
    }

    @media (prefers-reduced-motion:reduce) {
        .splash-img {
            animation: none;
            opacity: 1
        }

        .letter,
        .festival-img {
            animation: none;
            opacity: 1;
            transform: none
        }

        #splash {
            transition: none
        }
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        margin: 0;
        justify-content: space-between
    }

    .square {
        width: 47%;
        height: 4rem;
        background: #384159;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease;
        overflow: hidden
    }

    .square::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--bg) center/15% no-repeat;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity .3s ease, transform .5s ease;
        z-index: 0;
        transform: rotate(30deg)
    }

    .square:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
        background: #fffef9
    }

    .square a {
        text-decoration: none;
        color: #fffef9;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        transition: color 0.3s ease;
        z-index: 1
    }

    .square:hover a {
        color: #384159;
        text-decoration: none;
        border: 1px #384159 solid
    }

    .square:hover::before {
        opacity: .20;
        transform: scale(1)
    }

    .square p {
        margin: 0;
        font-family: "sawarabi-mincho", serif;
        font-size: 14px;
        font-weight: 550;
        text-align: center;
        pointer-events: none
    }

    @media (max-width:550px) {
        .buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
            margin: 0;
            justify-content: center
        }

        .square {
            width: 100%;
            height: 3.8rem;
            background: #384159;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease;
            overflow: hidden
        }
    }

    .yajirusi {
        position: absolute;
        right: 5%;
        width: 17px;
        height: auto;
        transition: transform 0.25s ease, filter 0.3s ease;
        filter: brightness(0) invert(1)
    }

    .square:hover .yajirusi {
        transform: translateX(40%);
        filter: brightness(0) invert(0)
    }


    .thanks{
    margin: 0 0 2rem;
    font-family: dnp-shuei-shogomincho-std, serif;
    color: #384159;
    font-style: normal;
    font-weight: bold;		 
    font-size: 14px;
    text-align: center;
}

@media(max-width:380px){
    .thanks{
        font-size: 13px;
    }
}

@media(max-width:350px){
    .thanks{
        font-size: 11.5px;
    }
}


    html {
        scroll-behavior: smooth
    }

    .pagetop {
        height: 40px;
        width: 40px;
        position: fixed;
        right: 10px;
        bottom: 10px;
        background: #c9a063a0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000
    }

    .pagetop__arrow {
        height: 9px;
        width: 9px;
        border-top: 1.5px solid #fffef9;
        border-right: 1.5px solid #fffef9;
        transform: translateY(20%) rotate(-45deg)
    }

    @media (hover:hover) and (pointer:fine) {

        .pagetop:hover,
        .pagetop:hover .pagetop__arrow {
            border-color: #fffef9;
            background: #c9a063
        }
    }
}