.gHeader,
.gFooter{
    z-index: 999;
}

img{
    width: 100%;
    height: 100%;
}
.tonarinohero{
    font-size: 1.7rem;
    color: #0a2715;
    background-color: #f8eece;
    font-family: "sictake-kuzushi", sans-serif;
    overflow: hidden;
}

.tonarinohero__contents-wrap{
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

.tonarinohero__line-svg{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* =================
    ロゴ
================= */

.tonarinohero__logo img{
    display: block;
    margin: 20px auto 40px auto;
    width: 100%;
    height: auto;
}

/* =================
    スライダー
================= */

.tonarinohero__kv{
    position: relative;
    width: 95%;
    margin: 0 auto 80px auto;
    z-index: 2;
}

.tonarinohero__kv img{
    object-fit: cover;
}

.tonarinohero__kv-slider-wrap{
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.tonarinohero__kv-slider-01{
    clip-path: url(#slider-mask-01-sp);
    width: 100%;
    height: auto;
    aspect-ratio: 536 / 477;
}

.tonarinohero__kv p{
    text-align: center;
    font-size: clamp(2rem, 1.1071rem + 4.4643vw, 3.25rem);
    background-image: url(../images_v2/kv-anime.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.swiper-pagination{
    position: relative;
    display: block;
    justify-content: center;
    align-items: flex-start;
}

.swiper-pagination-bullet{
    background-color: transparent;
    background-image: url(../images_v2/pagination-inactive.png);;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: unset;
    opacity: 1;
    width: 15px;
    height: 15px;
}

.swiper-pagination-bullet-active {
    background-image: url(../images_v2/pagination-active.png);
    width: 15.75px;
    height: 16.5px;
}

.tonarinohero__kv .star-01{
    top: -5%;
    left: 3%;
    transform: rotate(-10deg);
}

.tonarinohero__kv .star-02{
    display: none;
}

.tonarinohero__kv .star-03{
    display: none;
}

.tonarinohero__kv .star-04{
    bottom: -10%;
    right: 5%;
    transform: rotate(20deg);
}

/* =================
    番宣
================= */
.tonarinohero__movie{
    position: relative;
    width: 90%;
    margin: 0 auto 120px auto;
    z-index: 2;
}

.tonarinohero__movie h1{
    position: relative;
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 20px;
    font-family: "ads-hikari", sans-serif;
    color: #3898b3;
}

.tonarinohero__movie-streaming{
    text-align: center;
    margin-bottom: 30px;
}

.tonarinohero__movie-streaming p {
    margin-bottom: 10px;
}

.tonarinohero__movie-streaming a{
    display: inline-block;
    position: relative;
    width: 45%;
    z-index: 2;
}

.tonarinohero__movie-streaming a::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images_v2/streaming-deco-02.png?20251211);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    bottom: -8px;
    right: -10px;
    z-index: -1;
}

.tonarinohero__movie-streaming a::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images_v2/streaming-deco-01.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

.tonarinohero__movie-streaming img{
    border-radius: 15px;
}

.tonarinohero__movie-yt{
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    z-index: 2;
}

.tonarinohero__movie .star-05{
    bottom: -15%;
    left: 8%;
}

.tonarinohero__movie .star-06{
    display: none;
}

/* =================
    概要
================= */
.tonarinohero__about{
    position: relative;
    z-index: 5;
    width: 90%;
    margin: 0 auto;
    z-index: 2;
}

.tonarinohero__about-text-wrap{
    width: 100%;
    margin: 0 auto;
}

.tonarinohero__about h2{
    margin-bottom: 40px;
    font-size: 2.4rem;
    text-shadow: 0 0 3px #ffffff;
    -webkit-text-stroke: 1px #ffffff;
    text-stroke: 1px #ffffff;
    paint-order: stroke;
}

.tonarinohero__about h2 .font-size{
    display: inline-block;
    margin: 0 5px;
    font-size: 1.6rem;
}

.tonarinohero__about h2 .font-margin{
    position: relative;
    margin: 0 15px;
    z-index: 2;
}

.tonarinohero__about h2 .font-margin::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images_v2/about-anime.gif);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.5;
}

.tonarinohero__about p{
    line-height: 2.5;
    text-shadow: 0 0 3px #ffffff;
    -webkit-text-stroke: 1px #ffffff;
    text-stroke: 1px #ffffff;
    paint-order: stroke;
}

.tonarinohero__about p span{
    position: relative;
    font-size: 2.5rem;
    z-index: 2;
}

.tonarinohero__about p span::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images_v2/about-text-anime.gif);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.5;
}

.tonarinohero__about-photo-wrap{
    position: relative;
    z-index: -1;
    width: 90%;
    height: 1100px;
    margin: 0 auto;
}

.tonarinohero__about-photo{
    position: absolute;
    width: 250px;
    height: auto;
    aspect-ratio: 3 / 2;
    background-color: #ffffff;
    box-shadow: 0 0 15px hsla(141, 44%, 22%, 0.5);
    padding: 10px;
    overflow: hidden;
}

.tonarinohero__about-photo img{
    object-fit: cover;
}

.tonarinohero__about .photo-01{
    right: -10%;
    top: 0;
    transform: rotate(20deg);
    z-index: 2;
}

.tonarinohero__about .photo-02{
    left: -5%;
    top: 130px;
    transform: rotate(-12deg);
}

.tonarinohero__about .photo-03{
    right: 5%;
    top: 300px;
    transform: rotate(8deg);
}

.tonarinohero__about .photo-04{
    right: -10%;
    top: 450px;
    transform: rotate(3deg);
    z-index: -1;
}

.tonarinohero__about .photo-05{
    left: -10%;
    top: 610px;
    transform: rotate(-15deg);
}

.tonarinohero__about .photo-06{
    right: 0%;
    top: 760px;
    transform: rotate(13deg);
    z-index: -1;
}

.tonarinohero__about .star-07{
    top: -3%;
    right: 3%;
    transform: rotate(5deg);
}

.tonarinohero__about .star-08{
    top: 0%;
    left: 0;
    transform: rotate(-12deg);
}

.tonarinohero__about .star-09{
    top: 47%;
    left: 3%;
    transform: rotate(5deg);
}
.tonarinohero__about .star-10{
    bottom: 10%;
    left: 1%;
    transform: rotate(15deg);
}

/* =================
    出演者
================= */
.tonarinohero__cast{
    position: relative;
    width: 90%;
    margin: 0 auto 80px auto;
}

.tonarinohero__cast h2{
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.4rem;
}

.tonarinohero__cast-img-wrap{
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-areas:
        "a a"
        "b c";
    gap: 80px 10px;
    justify-content: center;
    font-size: 2.4rem;
    line-height: 1.2;
}

.tonarinohero__cast-01{
    grid-area: a;
    width: 250px;
    margin: 0 auto;
}

.tonarinohero__cast-02{
    grid-area: b;
    width: 90%;
}

.tonarinohero__cast-03{
    grid-area: c;
    width: 90%;
}

.tonarinohero__cast img{
    width: 100%;
    height: auto;
}

.tonarinohero__cast-03 span{
    font-size: 1.6rem;
}

.tonarinohero__cast .star-11{
    top: 10%;
    left: 10%;
    transform: rotate(-10deg);
}

.tonarinohero__cast .star-12{
    top: 60%;
    right: 5%;
    transform: rotate(8deg);
}

/* =================
    協賛ロゴ
================= */
.tonarinohero__miraismile-logo{
    width: 70%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.tonarinohero__miraismile-logo::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images_v2/miraismile-logo-deco-02.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -4%;
    right: -4%;
    z-index: -1;
    pointer-events: none;
}

.tonarinohero__miraismile-logo::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images_v2/miraismile-logo-deco-01.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    pointer-events: none;
}

.tonarinohero__miraismile-logo img{
    border-radius: 15px;
}

/* デコレーション（スタイル上書きのため最後に記述） */
[class^="star-"]{
    width: 8vw!important;
    max-width: 50px!important;
    height: auto;
    position: absolute;
    z-index: -1;
}

.sp_none{
    display: none;
}