.fade-in { opacity: 0; }
		body.is-loading { overflow: hidden; }
		.site-loader {
			position: fixed;
			inset: 0;
			z-index: 99999;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			transition: opacity 0.5s ease, visibility 0.5s ease;
		}
		.site-loader.is-hidden {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
		.site-loader.is-complete .site-loader__logoWrap {
			animation: loaderLogoFinish 0.6s ease-in-out forwards;
		}
		.site-loader__stage {
			width: min(88vw, 360px);
			text-align: center;
			perspective: 900px;
			perspective-origin: center center;
		}
		.site-loader__logoWrap {
			position: relative;
			width: min(72vw, 280px);
			margin: 0 auto 1.4rem;
			transform-style: preserve-3d;
			transform-origin: center center;
			animation: loaderLogoSpin 2.6s ease-in-out infinite;
		}
		.site-loader__logo {
			display: block;
			width: 100%;
			height: auto;
			backface-visibility: visible;
			filter: drop-shadow(0 6px 14px rgba(50, 144, 205, 0.18));
		}
		.site-loader__text {
			margin: 0;
			font-family: "Noto Sans JP", sans-serif;
			font-size: clamp(13px, 3.6vw, 16px);
			font-weight: 800;
			letter-spacing: 0.28em;
			color: #3290cd;
		}
		.site-loader__dots span {
			animation: loaderDotBlink 1.2s infinite;
		}
		.site-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
		.site-loader__dots span:nth-child(3) { animation-delay: 0.4s; }
		@keyframes loaderLogoSpin {
			0% {
				transform: rotateY(0deg) translateZ(0) scale(1);
			}
			50% {
				transform: rotateY(180deg) translateZ(-36px) scale(0.86);
			}
			100% {
				transform: rotateY(360deg) translateZ(0) scale(1);
			}
		}
		@keyframes loaderLogoFinish {
			from {
				transform: rotateY(0deg) translateZ(0) scale(1);
			}
			to {
				transform: rotateY(360deg) translateZ(-48px) scale(0.82);
			}
		}
		@keyframes loaderDotBlink {
			0%, 20% { opacity: 0; }
			50% { opacity: 1; }
			100% { opacity: 0; }
		}
		@media (prefers-reduced-motion: reduce) {
			.site-loader__logoWrap,
			.site-loader__dots span {
				animation: none !important;
			}
		}

.comment-popup.is-open {
    display: flex!important;
    vertical-align: middle;
    align-items: center;
}

.topics-popup.is-open {
    display: flex!important;
    vertical-align: middle;
    align-items: center;
}

.PConly {
    display: block;
}

.SPonly {
    display: none;
}

html {
    word-break: break-all;
}
body{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
    color: #282828;
  font-style: normal;
    background: url("../img/bg02_pc.jpg")#fff;; background-size: contain;}

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


main{
    --fade-interval: 0.4s;
    --fade-duration: 0.8s;
    background: url("../img/main_pcbg.jpg");
    background-size:100%;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.main__body{
    position: relative;
    z-index: 2;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    opacity: 0;
}

body.is-ready .fade-in[data-fade-order="1"] { animation: fadeIn 0.8s ease 0s both; }
body.is-ready .fade-in[data-fade-order="2"] { animation: fadeIn 0.8s ease 0.4s both; }
body.is-ready .fade-in[data-fade-order="3"] { animation: fadeIn 0.8s ease 0.8s both; }
body.is-ready .fade-in[data-fade-order="4"] { animation: fadeIn 0.8s ease 1.2s both; }
body.is-ready .fade-in[data-fade-order="5"] { animation: fadeIn 0.8s ease 1.6s both; }
body.is-ready .fade-in[data-fade-order="6"] { animation: fadeIn 0.8s ease 2s both; }
body.is-ready .fade-in[data-fade-order="7"] { animation: fadeIn 0.8s ease 2.4s both; }
body.is-ready .fade-in[data-fade-order="8"] { animation: fadeIn 0.8s ease 2.8s both; }
body.is-ready .fade-in[data-fade-order="9"] { animation: fadeIn 0.8s ease 3.2s both; }
body.is-ready .fade-in[data-fade-order="10"] { animation: fadeIn 0.8s ease 3.6s both; }

.MainKV {
    position: relative;
    background:unset;
    background-size: contain;background-repeat: no-repeat;
    width: 47%;
    margin: 0 auto;
}
.KV{position: relative; z-index: 1;}
.kamihubuki{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.kamihubuki--back{
    z-index: 1;
}
.kamihubuki--front{
    z-index: 3;
}
.kamihubuki__piece{
    position: absolute;
    top: -8%;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
    animation: kamihubukiFall linear infinite;
    animation-play-state: paused;
}
.kamihubuki__piece img{
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: screen;
}
body.is-ready .kamihubuki__piece{
    animation-play-state: running;
}
.kamihubuki.is-static{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 4%;
}
.kamihubuki__piece--static{
    position: relative;
    top: auto;
    left: auto !important;
    opacity: 1;
    animation: none !important;
    width: 22% !important;
}
@keyframes kamihubukiFall{
    0%{
        transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--kamihubuki-scale, 1));
        opacity: 0;
    }
    5%{
        opacity: var(--kamihubuki-opacity, 0.85);
        transform: translate3d(calc(var(--kamihubuki-sway) * 0.15), calc(var(--kamihubuki-fall) * 0.05), 0) rotate(calc(var(--kamihubuki-spin) * 0.05)) scale(var(--kamihubuki-scale, 1));
    }
    20%{
        transform: translate3d(calc(var(--kamihubuki-drift) * 0.2 + var(--kamihubuki-sway)), calc(var(--kamihubuki-fall) * 0.2), 0) rotate(calc(var(--kamihubuki-spin) * 0.2)) scale(var(--kamihubuki-scale, 1));
    }
    40%{
        transform: translate3d(calc(var(--kamihubuki-drift) * 0.4 - var(--kamihubuki-sway) * 0.7), calc(var(--kamihubuki-fall) * 0.4), 0) rotate(calc(var(--kamihubuki-spin) * 0.4)) scale(var(--kamihubuki-scale, 1));
    }
    60%{
        transform: translate3d(calc(var(--kamihubuki-drift) * 0.6 + var(--kamihubuki-sway) * 0.5), calc(var(--kamihubuki-fall) * 0.6), 0) rotate(calc(var(--kamihubuki-spin) * 0.6)) scale(var(--kamihubuki-scale, 1));
    }
    80%{
        transform: translate3d(calc(var(--kamihubuki-drift) * 0.8 - var(--kamihubuki-sway) * 0.3), calc(var(--kamihubuki-fall) * 0.8), 0) rotate(calc(var(--kamihubuki-spin) * 0.8)) scale(var(--kamihubuki-scale, 1));
        opacity: var(--kamihubuki-opacity, 0.85);
    }
    92%{
        opacity: var(--kamihubuki-opacity, 0.85);
    }
    100%{
        transform: translate3d(var(--kamihubuki-drift, 0px), var(--kamihubuki-fall, 80vh), 0) rotate(var(--kamihubuki-spin, 180deg)) scale(var(--kamihubuki-scale, 1));
        opacity: 0;
    }
}
@keyframes pandaFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

.panda{
    position: absolute;
    z-index: 0;
    top: 1%;
    width: 68%;
    right: 5%;
}

body.is-ready .panda-inner {
    animation: pandaFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.logo{position: absolute;z-index: 3;
    width: 27%;
    bottom: 11%;
    left: 15%;}

.author{position: absolute;z-index: 3;
    width: 14%;
    bottom: 2%;
    left: 18%;}

body.is-ready .logo h1 {
    animation: logoFloat 4.8s ease-in-out infinite;
}
.bubble01{position: absolute;z-index: 3;
    width: 23%;
    top: 11%;
    left: 10%;}
.bubble02{position: absolute;z-index: 3;
    width: 23%;
    bottom: 25%;
    right: 7%;}




#celebration{position: relative; background: url("../img/celebrationBg.jpg");padding: 4px;box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.2);}
.ribon01{position: absolute;
    left: 0;
    top: -13%;
    width: 13%;}
.ribon02{position: absolute;
    right: 0;
    bottom: -2px;
    width: 15%;}


.frame1 {
    border: solid #ccc 20px;
    border-image-source: url("../img/frame01.png");
    border-image-slice: 15%;
    border-image-width: 90px;
    border-image-outset: 0px;
    border-image-repeat: repeat;
    background:url("../img/frame01-top.png"),url("../img/frame01-bot.png");
    background-position: top center,bottom center;
    background-repeat: no-repeat;
}

.celebrationImg{width:45%;
    max-width: 666px;
    margin: 0 auto;
    display: block;
    padding: 50px;}


#movie{position: relative; overflow: hidden; padding: 11% 0 16% 0;}
.moviebtn{
    position: relative;
    z-index: 1;
    display: block;
    width: 85%;
    margin: 0 auto;
    max-width: 1128px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.moviebtn:hover {
    transform: scale(1.05);
}
.moviebtn:hover img {
    opacity: 1;
}

@keyframes ringRotateCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringRotateCCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.ring1{
    position: absolute;
    width: 72%;
    top: -67%;
    right: -28%;
    z-index: 0;
    transform-origin: center center;
    animation: ringRotateCW 70s linear infinite;
    pointer-events: none; /* マウスのクリックやドラッグを無効化する */
  user-select: none;     /* 画像の選択（反転）を無効化する */
}
.ring2{
    position: absolute;
    width: 72%;
    bottom: -67%;
    left: -28%;
    z-index: 0;
    transform-origin: center center;
    animation: ringRotateCCW 60s linear infinite;
    pointer-events: none; /* マウスのクリックやドラッグを無効化する */
  user-select: none;     /* 画像の選択（反転）を無効化する */
}

.modal-video-close-btn{cursor: pointer;}

#topics{position: relative;
    display: block;
    line-height: 0;
    margin-top: -8%;}
.topicsarea{background: #e7c05a; background: url("../img/topicsBg02.png"),url("../img/topicsBg03.png"),url("../img/topicsBg01.png")#deb851;
background-repeat: no-repeat; background-position: top left,top right, bottom center; background-size: 20%,20%,100%;  margin-top: -13px;}

.topicsframe{border: solid #ccc 20px;
    border-image-source: url("../img/topics_frame.png");
    border-image-slice: 15%;
    border-image-width: 90px;
    border-image-outset: 0px;
    border-image-repeat: repeat;
    background:url("../img/topics_frame_bot.png");
    background-position:bottom center;
    background-repeat: no-repeat;}

.topics{width: 90%; max-width: 1240px; display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; gap:2%; padding: 2% 0 4% 0;}
.topics li,
.comment li,
.topicRead p,
.commentRead p{ opacity: 0;}

@keyframes scrollInItem {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topics.is-visible li,
.comment.is-visible li,
.topicRead.is-visible p,
.commentRead.is-visible p {
    animation: scrollInItem 0.6s ease both;
    animation-delay: calc(var(--scroll-in-index, 0) * 0.08s);
}

.topics li{ margin-bottom: 2%;width: 32%;}

.topicsarea_midashi{width: 60%; max-width: 703px; margin: 0 auto;}


.h2midashi{border-top: 3px #3290cd solid;border-bottom: 3px #3290cd solid; overflow:hidden;display: flex;
    justify-content: center; }
.h2midashi img{width: 100%; min-width: 960px; margin: 0 auto;}


#story{background: url("../img/storyBg2.jpg");}

.story{background: url("../img/storyBg.jpg"); background-position: top right; background-size:contain; background-repeat: no-repeat;padding-top: 6%; padding-bottom: 4%;}
.story-flex{ width: 90%; max-width: 1250px; display: flex; margin: 0 auto;}
.storytxt{width: 71%;}
.storytxt p{
    font-size:clamp(14px, 1.7vw, 21px);
    line-height: 270%;
    font-weight: 400;}
.storytxt p.is-typing::after {
    content: '▌';
    display: inline;
    margin-left: 0.05em;
    color: #3290cd;
    animation: storyTypingCursor 0.3s step-end infinite;
}
@keyframes storyTypingCursor {
    50% { opacity: 0; }
}
.storyImg_pc{width: 28.5%; margin-right: 0.5%;}
.storyImg_sp{display: none;}
.awardarea{padding: 1% 0 0 0;}
.award{width: 90%; max-width: 1250px; display: flex; margin: 0 auto; gap:2%; align-items: flex-start; list-style: none;}
.award li{
    opacity: 0;
    transform-origin: top center;
}

@keyframes awardSignboardIn {
    0% {
        opacity: 0;
        transform: rotate(-14deg);
    }
    15% {
        opacity: 1;
        transform: rotate(11deg);
    }
    30% {
        transform: rotate(-8deg);
    }
    45% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-3deg);
    }
    75% {
        transform: rotate(1.5deg);
    }
    90% {
        transform: rotate(-0.5deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes awardSignboardInReverse {
    0% {
        opacity: 0;
        transform: rotate(14deg);
    }
    15% {
        opacity: 1;
        transform: rotate(-11deg);
    }
    30% {
        transform: rotate(8deg);
    }
    45% {
        transform: rotate(-5deg);
    }
    60% {
        transform: rotate(3deg);
    }
    75% {
        transform: rotate(-1.5deg);
    }
    90% {
        transform: rotate(0.5deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}

.award.is-visible li:nth-child(odd) {
    animation: awardSignboardIn 3s ease-out both;
    animation-delay: calc(var(--scroll-in-index, 0) * 0.3s);
}

.award.is-visible li:nth-child(even) {
    animation: awardSignboardInReverse 3s ease-out both;
    animation-delay: calc(var(--scroll-in-index, 0) * 0.3s);
}

#comment{background: url("../img/commentBg.jpg");}

@keyframes crackerSwayL {
    0%, 100% {
        transform: rotate(10deg) translateY(0);
    }
    50% {
        transform: rotate(14deg) translateY(-5px);
    }
}

@keyframes crackerSwayR {
    0%, 100% {
        transform: rotate(-10deg) translateY(0);
    }
    50% {
        transform: rotate(-14deg) translateY(-5px);
    }
}

.commentWrap{
    position: relative;
    overflow: hidden;
}

.crackerSide{
   position: absolute;
    top: 0;
    width: 30%;
    max-width: 370px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.crackerSide--left{
    left: -8%;
}

.crackerSide--right{
    right: -8%;
}

.crackerItem{
    position: absolute;
    left: 0;
    width: 100%;
    transform-origin: center bottom;
}

.crackerSide--left .crackerItem{
    animation: crackerSwayL 4s ease-in-out infinite;
}

.crackerSide--right .crackerItem{
    animation: crackerSwayR 4s ease-in-out infinite;
}

.commentArea{
    position: relative;
    z-index: 1;
    width: 94%;
    max-width: 1250px;
    margin: 0 auto;
}

.comment{display: flex; flex-wrap:wrap; gap:2%; padding: 6% 0 4% 0;}
.comment li{width: 23.5%; margin-bottom: 2%;}
.comment li a{display: block;
    background: url(../img/comment.png);
    background-size: contain;
    background-repeat: no-repeat;
    line-height: 1em;
    text-decoration: none;
    color: #3290cd;
    font-weight: 800;
    font-size: clamp(13px, 1.7vw, 20px);
    padding: 11% 5% 19% 33%;
    text-align: center;transition: transform 0.3s ease;}
.comment li a:hover{transform: scale(1.05); transition: 0.3s;}


.booklist{width: 94%;max-width: 1250px; display: flex; flex-wrap: wrap; gap:2%; margin: 0 auto; padding: 4% 0 2.2% 0; margin-bottom: 3%; border-bottom: 1px solid #d6d6d6;}
.booklist li{width: 18.4%; margin-bottom: 2%;}
.booklist li img{box-sizing: border-box; border: 1px solid #757575;}

.comic{width: 83%;max-width: 500px; margin: 0 auto;}
.comic div{width: 60%; margin: 0 auto;}
.comic a{display: block; margin-top: 23px;}

.animeBnr{width: 90%; max-width:882px; margin:0 auto; padding: 6% 0 5% 0;}


#character{background: url(../img/charaBg.jpg);}

.charaWrap{
    --chara-color: #3290cd;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.charaWrap.c1{background-image: url("../img/chara/charaBg01_pc.png");}
.charaWrap.c2{background-image: url("../img/chara/charaBg02_pc.png");}
.charaWrap.c3{background-image: url("../img/chara/charaBg03_pc.png");}
.charaWrap.c4{background-image: url("../img/chara/charaBg04_pc.png");}
.charaWrap.c5{background-image: url("../img/chara/charaBg05_pc.png");}
.charaWrap.c6{background-image: url("../img/chara/charaBg06_pc.png");}
.charaWrap.c7{background-image: url("../img/chara/charaBg07_pc.png");}
.charaWrap.c8{background-image: url("../img/chara/charaBg08_pc.png");}
.charaWrap.c9{background-image: url("../img/chara/charaBg09_pc.png");}
.charaWrap.c10{background-image: url("../img/chara/charaBg10_pc.png");}
.charaWrap.c11{background-image: url("../img/chara/charaBg11_pc.png");}
.charaWrap.c12{background-image: url("../img/chara/charaBg12_pc.png");}

.charaBox{width: 92%; max-width: 1250px; display: flex; gap:2%; justify-content: flex-start; align-items: center; margin: 0 auto; padding: 4% 0 6% 0;}
.charaTxt{width: 48%;}
.charaName{font-size: clamp(34px, 4vw, 55px); border-left: 9px solid var(--chara-color); padding-left: 16px;line-height: 1.2em; margin-bottom: 2rem;}
.charaTxt01{font-size: clamp(19px, 2vw, 30px);line-height: 1.2em; font-weight: 700; margin-bottom: 16px;}
.charaTxt02{font-size: clamp(14px, 1.7vw, 21px);line-height: 1.5em; font-weight: 400;}
@keyframes charaImgIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.charaImg{
    width: 50%;
    overflow: hidden;
}
.charaImg img.is-animate{
    animation: charaImgIn 0.5s ease forwards;
}

.charaIconList{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2.5rem;
    list-style: none;
}
.charaIconList li{
    width: calc(20% - 8px);
}
.charaIcon{
    padding: 0;
    display: block;
    width: 100%;
    border: 2px solid #282828;
    background: transparent;
    cursor: pointer;
    transition: background 0.3s ease;
    line-height: 0;
}
.charaIcon.is-active{
    background: var(--chara-color);
    border: unset;
}
.charaIcon:hover{
    background: var(--icon-color, var(--chara-color));
}
.charaIcon img{
    width: 100%;
    height: auto;
    display: block;
}


footer{background: #e45889; padding: 25px 15px;}
footer p{font-size: 11px;
    line-height: 140%;
    color: #fff;text-align: center;}

#top_btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#top_btn.active {
    opacity: 1;
    pointer-events: auto;
}


.topicRead{text-align: center; color: #fff; font-weight: 700;padding: 3% 0 0 0; display: flex;align-items: baseline;
    justify-content: center;}
.topicRead p{font-size:clamp(19px, 2vw, 27px); margin-bottom: 5px; color: #e45889;  text-shadow:0px 2px 2px rgba(255, 255, 255, 1), 1px -2px 3px rgba(255, 255, 255, 1),-3px 2px 3px rgba(255, 255, 255, 1), -1px -2px 3px rgba(255, 255, 255, 1),4px 2px 3px rgba(255, 255, 255, 1), -3px -2px 3px rgba(255, 255, 255, 1),4px 2px 3px rgba(255, 255, 255, 1), -3px -2px 3px rgba(255, 255, 255, 1)}
.topicRead .TxtL{font-size: 160%; color: #3290cd;}
.topicRead .TxtB{color: #3290cd;}

.commentRead{color: #3290cd; font-weight: 700;padding: 45px 0 0 0; display: flex;align-items: baseline;
    justify-content: center;}
.commentRead p{font-size:clamp(19px, 2vw, 27px); margin-bottom: 5px;  text-shadow: 4px 2px 3px rgba(255, 255, 255, 1), -3px -2px 3px rgba(255, 255, 255, 1);}
.commentRead span{font-size: 160%;color: #e45889;}


.topics-popup__body img{width: 100%; max-width: 500px; margin: 0 auto 25px auto;}
.topics-popup__body p span{color: #e45889; font-weight: 600;}

@media screen and (min-width:1024px) {
    
    

    /*ページトップへボタン--------------------------- */
    #top_btn {
        position: fixed;
        cursor: pointer;
        width: 98px;
        height: 98px;
        z-index: 999;
        bottom: 12px;
        right: 12px;
    }

}

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

    /*ページトップへボタン--------------------------- */
    #top_btn {
        position: fixed;
        cursor: pointer;
        width: 85px;
        height: 85px;
        z-index: 999;
        bottom: 0px;
        right: 0px;
    }

}

@media screen and (max-width:1000px) {
    

.comment li{width: 32%; margin-bottom: 3%;}
.comment li a{
    font-size: clamp(15px, 2vw, 23px);
    padding: 12% 5% 18% 33%;}
    
}

@media screen and (max-width:769px) {
    
    .topicRead{flex-wrap: wrap;}
    .topicRead p{width: 100%;font-size: 19px; text-align: center;}
    .topicRead{padding: 7% 0 0 0;}
    
    .commentRead{width: 100%;font-size: 19px;}
    .commentRead{padding: 5% 0 0 0;}
    .commentRead p{width: 100%;font-size: 18px; text-align: center; line-height: 200%;}
    
    a:hover img {transform:unset; transition: unset;}
    
    .booklist li {
    width: 49%;
    margin-bottom: 2%;
}
    
    .animeBnr {
    padding: 9% 0 16% 0;
}

    .crackerSide{
        width: 28%;
        max-width: 160px;
    }

    .crackerSide--left{ left: -14%; }
    .crackerSide--right{ right: -14%; }
    
    .comment li{width: 49%; margin-bottom: 2%;}
.comment li a{
    font-size: 3.2vw;
        padding: 11% 5% 19% 33%;}
    
    .storytxt p {
    font-size: 4vw;
    line-height: 270%;
    font-weight: 400;
}
    
    .story {
    background: url(../img/storyBg.jpg);
    background-size: 1000px;
    background-repeat: no-repeat;
    padding-top: 9%;padding-bottom: 6%;
}
    
    .storytxt {
    width: 100%;
}
    
    .awardarea{display: flex;width: 94%;
        margin: 0 auto;}
    .award{width:46.5%; flex-wrap: wrap; margin-bottom: 2%;}
    .storyImg_pc{display: none;}
.storyImg_sp{display: block;width: 53%; margin-left: 0.5%;}
    
    .topics li {
    margin-bottom: 2%;
    width: 49%;
}
    
    .topics {
    padding: 6% 0;
}
    
    .topicsarea_midashi {
    width: 75%;
}
    
    .topicsframe {
    border: solid #ccc 17px;
    border-image-source: url(../img/topics_frame.png);
    border-image-slice: 20%;
    border-image-width: 95px;
    border-image-outset: 0px;
    border-image-repeat: repeat;
    background: url(../img/topics_frame_bot.png);
    background-position: bottom center;
    background-repeat: no-repeat;
        background-size: 65px;
}
    
    .topicsarea {
background-size: 38%, 38%, 100%;
    margin-top: -10px;
}
    
    #movie {
    padding: 14% 0 18% 0;
}
    .ring1 {
    top: -44%;
}
    .ring2 {
    bottom: -44%;
}
    
    #celebration {
    padding: 2px;
}
    
    .frame1 {
    border: solid #ccc 17px;
    border-image-source: url(../img/frame01.png);
    border-image-slice: 20%;
    border-image-width: 95px;
    border-image-outset: 0px;
    border-image-repeat: repeat;
    background: url(../img/frame01-top.png), url(../img/frame01-bot.png);
    background-position: top center, bottom center;
    background-repeat: no-repeat;
    background-size: 65px;
}
    
    .celebrationImg {
    width: 78%;
    max-width: 666px;
    margin: 0 auto;
    display: block;
    padding: 48px 40px;
}
    
    .ribon01 {
    position: absolute;
    left: 0;
    top: -5%;
    width: 16%;
}
    .ribon02 {
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 23%;
}
    
    body{background: url("../img/bg02_sp.jpg")#fff;; background-size: contain;}
    
    main{padding-bottom: 20%;background: #fff;}
    
    .MainKV {width: 100%;background: url("../img/main_bg.png")#fff;background-size: contain;background-repeat: no-repeat;}
    
    .KV{padding-bottom: 2%;}
    
    .logo {
    width: 53%;
        margin: 0 auto;
        bottom: -13%;
        left: -39%;
        right: 0;
}
    
    .author {
    z-index: 3;
    width: 36%;
    bottom: -11%;
    right: 5%;
        left:auto;
}
    
    .bubble01 {
    width: 28%;
    top: 64%;
    left: 2%;
}
    
    .bubble02 {
            width: 28%;
        top: 75%;
        right: 2%;
}
    
    .charaWrap {
    background-size: 108%;
}

    .charaWrap.c1{background-image: url("../img/chara/charaBg01_sp.png");}
    .charaWrap.c2{background-image: url("../img/chara/charaBg02_sp.png");}
    .charaWrap.c3{background-image: url("../img/chara/charaBg03_sp.png");}
    .charaWrap.c4{background-image: url("../img/chara/charaBg04_sp.png");}
    .charaWrap.c5{background-image: url("../img/chara/charaBg05_sp.png");}
    .charaWrap.c6{background-image: url("../img/chara/charaBg06_sp.png");}
    .charaWrap.c7{background-image: url("../img/chara/charaBg07_sp.png");}
    .charaWrap.c8{background-image: url("../img/chara/charaBg08_sp.png");}
    .charaWrap.c9{background-image: url("../img/chara/charaBg09_sp.png");}
    .charaWrap.c10{background-image: url("../img/chara/charaBg10_sp.png");}
    .charaWrap.c11{background-image: url("../img/chara/charaBg11_sp.png");}
    .charaWrap.c12{background-image: url("../img/chara/charaBg12_sp.png");}
    .charaBox{flex-direction: column; padding: 8% 0 10% 0;}
    .charaTxt{order: 2;}
    .charaImg{order: 1;}
    .charaTxt,
    .charaImg{width: 100%;}
    .charaIconList li{width: calc(25% - 8px);}
    .charaIconList{gap: 8px; margin-top: 1.5rem;}
    
    
    
    

    .PConly {
        display: none;
    }

    .SPonly {
        display: block;
    }
    
    /*ページトップへボタン--------------------------- */
    #top_btn {
        position: fixed;
        cursor: pointer;
        width: 60px;
        height: 60px;
        z-index: 999;
        bottom: 0px;
        right: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
    }

    .crackerSide--left .crackerItem {
        transform: rotate(10deg);
    }

    .crackerSide--right .crackerItem {
        transform: rotate(-10deg);
    }

    .kamihubuki__piece{
        display: none;
        animation: none !important;
        opacity: 1;
    }

    .topics li,
    .comment li,
    .topicRead p,
    .commentRead p {
        opacity: 1;
        animation: none !important;
        transform: none;
    }

}