@charset "UTF-8";
/*========== web font ==========*/

/* .noto-sans-jp-<uniquifier> {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  } */


  /* 
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

/* .zen-maru-gothic-light {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-maru-gothic-black {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-style: normal;
}

 */

 /* .zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
}

  } */
  
/* ***************************** */
/* 全体設定 */
/* ***************************** */
*{
    /* border: 1px solid magenta; */
}

html, body {
	width: 100%;
	overflow-x: hidden;
}
body {
	font-size: 16px;
	line-height: 1.5;
	background-color: #E4F4FD;
    color: #333;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}
html.is-loading,
body.is-loading {
    overflow: hidden;
}
h1, h2, h3, h4, h5 {
	font-weight: normal;
	line-height: 1.4;
	margin: 0;
}
img{
    max-width: 100%;
    height: auto;
}
#mainWrap {
    aspect-ratio: 2560 / 1309;
    overflow: hidden;
}
#mainWrap .mainVisualVideo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 959px) {
    #mainWrap {
        aspect-ratio: 1206 / 1962;
    }
}

/* ***************************** */
/* 共通 */
/* ***************************** */
body {
    
    /* letter-spacing: 0.1em; */
}
.openingLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #fff;
    opacity: 1;
    visibility: visible;
}
html.opening-loaded .openingLoader {
    display: none;
}
.openingLoader.is-hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.openingLoader__inner {
    width: min(100%, 372px);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: min(24.9svh, 165px);
}
.openingLoader__text {
    width: 164px;
    min-height: 35px;
    margin: 0;
    color: #00A0E2;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.2em;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
html.opening-font-loading .openingLoader__text {
    opacity: 0;
}
.openingLoader__dots {
    display: inline-block;
    min-width: 1.8em;
    letter-spacing: 0.12em;
}
.openingLoader__characterFrame {
    width: min(48.7vw, 181px);
    height: min(35.6svh, 236px);
    margin-top: 62px;
    opacity: 0;
    transform: translateY(10px);
    animation: openingCharacterFade 1s ease 0.25s forwards;
}
.openingLoader__character {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes openingCharacterFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .openingLoader.is-hide {
        transition: none;
    }
    .openingLoader__characterFrame {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
.forPc{
    display: block;
}
.forSp{
    display: none;
}
.brSp{
    display: none;
}
.brTab{
    display: none;
}
span.inlineBlock{
    display: inline-block;
}
.anim-ready [data-anim]:not([data-anim="stagger"]){
    opacity: 0;
    transform: translateY(28px);
}
.anim-ready [data-anim="stagger"] > *{
    opacity: 0;
    transform: translateY(24px);
}
.anim-ready [data-anim].is-anim-shown:not([data-anim="stagger"]){
    opacity: 1;
    transform: none;
}
.anim-ready [data-anim="stagger"].is-anim-shown > *{
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce){
    .anim-ready [data-anim]:not([data-anim="stagger"]),
    .anim-ready [data-anim="stagger"] > *{
        opacity: 1;
        transform: none;
    }
}
a{
    transition: all 0.5s;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine){
    a:hover {
        opacity: 0.6;
    }
}
.flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.wrapWidth {
	width: 100%;
	margin: 0 auto;
}
.boxWidth {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}
.width750{
    max-width: 750px;
    margin: 0 auto;
}
h2,
h1.pageHeading{
    text-align: center;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #00A0E2;
    font-size: 12px;
    letter-spacing: 0.2em;
    padding: 50px 0 30px;
}
h2 span,
h1.pageHeading span{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 32px;
    color: #000;
}
a.moreBtn{
    background-color: #00A0E2;
    color: #fff;
    display: block;
    width: 25%;
    min-width: 200px;
    margin: 40px auto;
    text-align: center;
    padding: 10px;
    border-radius: 30px;
    opacity: 1;
    text-decoration: none;
    transition: none;
    transform-origin: center bottom;
    will-change: transform;
}
a.moreBtn:hover{
    opacity: 1;
}
.ana_deco{
    max-width: 300px;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    width: 50%;
}
#intro{
    padding: 10% 0;
}
#youtube, #sns, #game, #episodes, #goods, #contents{
    padding: 3% 0;
}
/* #character{
    padding-bottom: 10%;
} */
@media screen and (max-width: 959px) {
    .boxWidth {
        width: 90%;
    }
    /* #pageTop{
    padding-top: 60px;
    } */
    .forPc{
        display: none;
    }
    .forSp{
        display: block;
    }
    br.brTab {
    display: inherit;
    }
    br.brSp {
        display: inherit;
    }
    .width750{
        max-width: 500px;
        margin: 0 auto;
    }

    h2 span{
        font-size: 28px;
    }

    .ana_deco{
        width: 70%;
    }
  }
  /* @media screen and (max-width: 599px) {
      #captionBox {
      padding: 20px 0;
  }
      #captionBox .caption span.non-Sp {
          display: none;
      }
    br.brSp {
      display: inherit;
    }
  
  } */
/* ***************************** */
/* ヘッダー */
/* ***************************** */
header{
    background-color: #fff;
    width: 100%;
    position: fixed;
    z-index: 999;
}
#pcNav{
    color: #00A0E2;
    font-weight: 700;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 1% 2%;
}
#pcNav div{
    width: 15%;
    min-width: 130px;
}
#pcNav h1 a,
#pcNav .siteLogo a,
#spNav h1 a,
#spNav .siteLogo a{
    display: block;
}
#pcNav ul{
    display: flex;
    width: 100%;
    justify-content: end;
    gap: 0 1.5%;
    font-size: 13px;
    font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (min-width: 960px){
    #pcNav ul li{
        opacity: 0;
        transform: translateX(-14px);
    }
    body.loaded #pcNav ul li{
        animation: pc-nav-item-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    body.loaded #pcNav ul li:nth-child(1){ animation-delay: 0.08s; }
    body.loaded #pcNav ul li:nth-child(2){ animation-delay: 0.14s; }
    body.loaded #pcNav ul li:nth-child(3){ animation-delay: 0.2s; }
    body.loaded #pcNav ul li:nth-child(4){ animation-delay: 0.26s; }
    body.loaded #pcNav ul li:nth-child(5){ animation-delay: 0.32s; }
    body.loaded #pcNav ul li:nth-child(6){ animation-delay: 0.38s; }
    body.loaded #pcNav ul li:nth-child(7){ animation-delay: 0.44s; }
    body.loaded #pcNav ul li:nth-child(8){ animation-delay: 0.5s; }
    body.loaded #pcNav ul li:nth-child(9){ animation-delay: 0.56s; }
    body.loaded #pcNav ul li:nth-child(10){ animation-delay: 0.62s; }
}
@media screen and (min-width: 960px) and (prefers-reduced-motion: reduce){
    #pcNav ul li{
        opacity: 1;
        transform: none;
        animation: none;
    }
}
@keyframes pc-nav-item-in{
    from{
        opacity: 0;
        transform: translateX(-14px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

#spNav, .spMenu{
    display:none;
}

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

    #pcNav{
        display:none;
    }

    #spNav{
        display:flex;
        justify-content:space-between;
        align-items:center;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:70px;
        padding:0 20px;
        background:#fff;
        z-index:9999;
        box-sizing:border-box;
    }

    #spNav h1,
    #spNav .siteLogo{
        width:180px;
    }

    #spNav h1 img,
    #spNav .siteLogo img{
        width:100%;
        display:block;
    }

    /* ハンバーガー */
    .hamburger{
        width:40px;
        height:32px;
        background:none;
        border:none;
        cursor:pointer;
        position:relative;
        z-index:10001;
    }

    .hamburger span{
        position:absolute;
        left:0;
        width:100%;
        height:3px;
        background:#333;
        border-radius:3px;
        transition:.3s;
    }

    .hamburger span:nth-child(1){
        top:2px;
    }

    .hamburger span:nth-child(2){
        top:14px;
    }

    .hamburger span:nth-child(3){
        top:26px;
    }

    /* ×になる */
    .hamburger.active span:nth-child(1){
        transform:rotate(45deg);
        top:14px;
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:rotate(-45deg);
        top:14px;
    }

    /* メニュー */
    .spMenu{
        display: block;
        position:fixed;
        z-index: 9999;
        top:70px;
        left:-100%;
        width:100%;
        height:calc(100vh - 70px);
        background:#fff;
        transition:.3s;
        overflow-y:auto;
    }

    .spMenu.active{
        left:0;
    }

    .spMenu ul{
        list-style:none;
        margin:0;
        padding:30px 0;
        text-align: center;
    }

    .spMenu li{
        border-bottom:1px solid #eee;
    }

    .spMenu a{
        display:block;
        padding:18px 25px;
        color:#333;
        text-decoration:none;
        font-size:16px;
        font-weight:bold;
    }

}

@keyframes flying-frame-01{
    0%,
    49.99%{
        opacity: 1;
    }
    50%,
    100%{
        opacity: 0;
    }
}
@keyframes flying-frame-02{
    0%,
    49.99%{
        opacity: 0;
    }
    50%,
    100%{
        opacity: 1;
    }
}

/* ***************************** */
/* おしらせ */
/* ***************************** */
#info .wrapWidth{
    position: relative;
}
#info .infoBirds{
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 3;
    width: clamp(82px, 9vw, 130px);
    aspect-ratio: 130 / 82;
    pointer-events: none;
}
#info .infoBird{
    position: absolute;
    width: clamp(21px, 2.5vw, 34px);
    aspect-ratio: 24 / 30;
    opacity: 0;
    transform: translateX(-120px);
}
#info .infoBird01{
    top: 42%;
    left: 0;
}
#info .infoBird02{
    top: 4%;
    left: 42%;
}
#info .infoBirdCloud{
    position: absolute;
    top: 148%;
    left: -14%;
    width: 67%;
    aspect-ratio: 45.182 / 20;
    opacity: 0;
    transform: translateX(-140px);
}
#info .infoSun.is-active ~ .infoBirds .infoBird{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#info .infoSun.is-active ~ .infoBirds .infoBirdCloud{
    animation: info-bird-cloud-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both, info-bird-cloud-float 3.2s ease-in-out 1.18s infinite;
}
#info .infoSun.is-active ~ .infoBirds .infoBird02{
    animation-delay: 0.14s;
}
#info .infoSun.is-active ~ .infoBirds .infoBirdMotion{
    animation: youtube-bird-float 2.9s ease-in-out 1s infinite;
}
#info .infoSun.is-active ~ .infoBirds .infoBird02 .infoBirdMotion{
    animation-delay: 1.15s;
}
#info .infoBirdMotion{
    position: absolute;
    inset: 0;
}
#info .infoBirdCloud img{
    display: block;
    width: 100%;
    height: auto;
}
#info .infoBird .frame{
    position: absolute;
    inset: 0;
}
#info .infoBird .frame{
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#info .infoBird .frame01{
    animation: flying-frame-01 0.32s steps(1, end) infinite;
}
#info .infoBird .frame02{
    opacity: 0;
    animation: flying-frame-02 0.32s steps(1, end) infinite;
}
#info .infoBirdReverse .frame01{
    animation-name: flying-frame-02;
}
#info .infoBirdReverse .frame02{
    animation-name: flying-frame-01;
}
#info .infoRainbowScene{
    position: absolute;
    top: 50%;
    right: 6%;
    z-index: 3;
    width: clamp(190px, 24vw, 320px);
    aspect-ratio: 320 / 130;
    pointer-events: none;
}
#info .infoSun.is-active ~ .infoRainbowScene{
    animation: info-rainbow-scene-float 4s ease-in-out 2.2s infinite;
}
#info .infoRainbow,
#info .infoCloud{
    position: absolute;
}
#info .infoRainbow{
    left: 16%;
    bottom: 22%;
    width: 68%;
    aspect-ratio: 102 / 46;
    transform-origin: 7% 100%;
    opacity: 0;
    clip-path: polygon(-4% -8%, -4% -8%, -4% 108%, -4% 108%);
    transform: none;
}
#info .infoCloud{
    opacity: 0;
    transform: translateX(110px);
}
#info .infoCloudLeft{
    left: 0;
    bottom: 0;
    width: 30%;
    aspect-ratio: 43.8606 / 21.1759;
}
#info .infoCloudRight{
    right: 4%;
    bottom: 8%;
    width: 25%;
    aspect-ratio: 37.2822 / 17.846;
}
#info .infoRainbow img,
#info .infoCloud img{
    display: block;
    width: 100%;
    height: auto;
}
#info .infoSun.is-active ~ .infoRainbowScene .infoCloudLeft{
    animation: info-cloud-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
#info .infoSun.is-active ~ .infoRainbowScene .infoCloudRight{
    animation: info-cloud-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}
#info .infoSun.is-active ~ .infoRainbowScene .infoRainbow{
    animation: info-rainbow-wipe 1.05s cubic-bezier(0.22, 1, 0.36, 1) 1.02s both;
}
#info .infoSun{
    position: absolute;
    top: 8%;
    left: 12%;
    z-index: 2;
    width: clamp(86px, 10vw, 150px);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-150%);
}
#info .infoSun.is-active{
    animation: info-sun-move-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#info .infoSun img{
    display: block;
    width: 100%;
    animation: info-sun-rotate 18s linear infinite;
    transform-origin: 50% 50%;
}
#info ul li{
    border-bottom: 1px solid #00A0E2;
    padding: 1%;
    opacity: 0;
    transform: translateY(24px);
}
#info ul.is-info-list-active li{
    animation: info-list-fade-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#info ul.is-info-list-active li:nth-child(1){
    animation-delay: 1.45s;
}
#info ul.is-info-list-active li:nth-child(2){
    animation-delay: 1.57s;
}
#info ul.is-info-list-active li:nth-child(3){
    animation-delay: 1.69s;
}
#info ul li:nth-child(3){
    border-bottom: none;
}
#info ul li a{
    display: flex;
    justify-content: space-between;
}
#info ul li p.date{
    color: #00A0E2;
    width: 15%;
    letter-spacing: 0.08em;
}
#info ul li p.title{
    width: 83%;
}
#info .infoGround{
    position: relative;
    overflow: visible;
}
#info .infoGround::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url("../../img/info_city.png") no-repeat center center / 100% 100%;
    clip-path: inset(52% 0 0 0);
    pointer-events: none;
}
#info .infoGround picture,
#info .infoGround img{
    display: block;
}
#info .infoGround picture{
    position: relative;
    z-index: 1;
}
#info .infoTrees{
    position: absolute;
    right: 8%;
    bottom: 8%;
    z-index: 2;
    width: clamp(168px, 24vw, 360px);
    aspect-ratio: 260 / 135;
    pointer-events: none;
}
#info .infoTree{
    position: absolute;
    bottom: 0;
    transform-origin: 50% 100%;
    opacity: 0;
    transform: translateY(36px) scaleY(0.08);
}
#info .infoTree img{
    display: block;
    width: 100%;
    height: auto;
}
#info .infoTreeLarge{
    left: 0;
    width: 47%;
}
#info .infoTreeSmall{
    right: 0;
    width: 34.5%;
}
#info .infoTrees.is-active .infoTreeLarge{
    animation: info-tree-grow 0.74s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#info .infoTrees.is-active .infoTreeSmall{
    animation: info-tree-grow 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.is-info-modal-open{
    overflow: hidden;
}
.infoModal{
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    display: none;
    overflow-y: auto;
    background: #60c4ed;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Zen Kaku Gothic New", sans-serif;
    opacity: 0;
}
.infoModal:focus{
    outline: none;
}
.infoModal.is-open{
    display: block;
    opacity: 1;
}
.infoModal.is-open.is-opening{
    animation: info-modal-bg-fade-in 0.34s ease-out both;
}
.infoModal.is-open.is-closing{
    animation: info-modal-bg-fade-out 0.3s ease-in 0.46s both;
}
.infoModal__shell{
    width: 100%;
    min-height: calc(100vh - 60px);
    margin: 0 auto;
}
.infoModal__body{
    position: relative;
    width: min(100%, 400px);
    min-height: calc(100vh - 60px);
    margin: 0 auto;
    padding: 71px 24px 34px;
}
.infoModal__close{
    position: absolute;
    top: 25px;
    right: 40px;
    width: 23px;
    height: 23px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform-origin: center center;
    will-change: opacity, transform;
}
.infoModal__close::before,
.infoModal__close::after{
    content: "";
    position: absolute;
    top: 9px;
    left: -2px;
    width: 27px;
    height: 5px;
    border-radius: 5px;
    background: #fff;
}
.infoModal__close::before{
    transform: rotate(45deg);
}
.infoModal__close::after{
    transform: rotate(-45deg);
}
.infoModal__card{
    width: min(100%, 350px);
    min-height: 475px;
    margin: 0 auto;
    padding: 27px 22px 44px;
    border-radius: 10px;
    background: #fff;
    opacity: 0;
    transform: translateY(34px);
    will-change: opacity, transform;
}
.infoModal.is-open .infoModal__card{
    opacity: 1;
    transform: translateY(0);
}
.infoModal.is-open.is-opening .infoModal__card{
    animation: info-modal-card-in 0.54s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}
.infoModal.is-open.is-closing .infoModal__card{
    animation: info-modal-card-out 0.36s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.26s both;
}
.infoModal__date{
    color: #00a0e2;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.2em;
}
.infoModal__date,
.infoModal__title,
.infoModal__line,
.infoModal__text{
    opacity: 0;
    transform: translateX(24px);
    will-change: opacity, transform;
}
.infoModal.is-open .infoModal__date,
.infoModal.is-open .infoModal__title,
.infoModal.is-open .infoModal__line,
.infoModal.is-open .infoModal__text{
    opacity: 1;
    transform: translateX(0);
}
.infoModal__title{
    margin-top: 13px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.2em;
}
.infoModal__line{
    width: 100%;
    height: 1px;
    margin: 16px 0 18px;
    background: #00a0e2;
}
.infoModal__text{
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.2em;
}
.infoModal.is-open.is-opening .infoModal__date{
    animation: info-modal-text-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}
.infoModal.is-open.is-opening .infoModal__title{
    animation: info-modal-text-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.84s both;
}
.infoModal.is-open.is-opening .infoModal__line{
    animation: info-modal-text-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}
.infoModal.is-open.is-opening .infoModal__text{
    animation: info-modal-text-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.96s both;
}
.infoModal.is-open.is-closing .infoModal__date,
.infoModal.is-open.is-closing .infoModal__title,
.infoModal.is-open.is-closing .infoModal__line,
.infoModal.is-open.is-closing .infoModal__text{
    animation: info-modal-content-fade-out 0.2s ease-in both;
}
.infoModal__back{
    display: block;
    width: 207px;
    height: 44px;
    margin: 39px auto 0;
    border: none;
    border-radius: 50px;
    background: #ea5006;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    letter-spacing: 0.15em;
    cursor: pointer;
    opacity: 0;
    transform-origin: center bottom;
    will-change: opacity, transform;
}
.infoModal.is-open .infoModal__close{
    opacity: 1;
}
.infoModal.is-open .infoModal__back{
    opacity: 1;
}
.infoModal.is-open.is-opening .infoModal__close{
    animation: info-modal-content-fade-in 0.3s ease-out 1.04s both;
}
.infoModal.is-open.is-opening .infoModal__back{
    animation: info-modal-content-fade-in 0.32s ease-out 1.08s both;
}
.infoModal.is-open.is-closing .infoModal__close,
.infoModal.is-open.is-closing .infoModal__back{
    pointer-events: none;
    animation: info-modal-content-fade-out 0.18s ease-in both;
}
.infoModal__close:focus-visible,
.infoModal__back:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine){
    .infoModal.is-open:not(.is-closing) .infoModal__back:hover{
        opacity: 1;
        animation: info-modal-button-bounce 0.78s cubic-bezier(0.2, 0.9, 0.24, 1.24);
    }
    .infoModal.is-open:not(.is-closing) .infoModal__close:hover{
        opacity: 1;
        animation: info-modal-close-pop 0.38s cubic-bezier(0.2, 0.9, 0.24, 1.24);
    }
}
@keyframes info-modal-bg-fade-in{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes info-modal-bg-fade-out{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes info-modal-card-in{
    from{
        opacity: 0;
        transform: translateY(34px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes info-modal-card-out{
    from{
        opacity: 1;
        transform: translateY(0);
    }
    to{
        opacity: 0;
        transform: translateY(34px);
    }
}
@keyframes info-modal-content-fade-in{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes info-modal-text-in{
    from{
        opacity: 0;
        transform: translateX(24px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes info-modal-content-fade-out{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes info-modal-button-bounce{
    0%{
        transform: scaleX(1) scaleY(1) translateY(0);
    }
    18%{
        transform: scaleX(1.05) scaleY(0.95) translateY(0);
    }
    42%{
        transform: scaleX(0.95) scaleY(1.05) translateY(-10px);
    }
    62%{
        transform: scaleX(1.15) scaleY(0.85) translateY(0);
    }
    100%{
        transform: scaleX(1) scaleY(1) translateY(0);
    }
}
@keyframes info-modal-close-pop{
    0%{
        transform: scale(1);
    }
    48%{
        transform: scale(1.2);
    }
    72%{
        transform: scale(0.96);
    }
    100%{
        transform: scale(1.08);
    }
}
@media (prefers-reduced-motion: reduce){
    .infoModal.is-open,
    .infoModal.is-open .infoModal__card,
    .infoModal.is-open .infoModal__date,
    .infoModal.is-open .infoModal__title,
    .infoModal.is-open .infoModal__line,
    .infoModal.is-open .infoModal__text,
    .infoModal.is-open .infoModal__close,
    .infoModal.is-open .infoModal__back,
    .infoModal.is-open.is-closing,
    .infoModal.is-open.is-closing .infoModal__card,
    .infoModal.is-open.is-closing .infoModal__date,
    .infoModal.is-open.is-closing .infoModal__title,
    .infoModal.is-open.is-closing .infoModal__line,
    .infoModal.is-open.is-closing .infoModal__text,
    .infoModal.is-open.is-closing .infoModal__close,
    .infoModal.is-open.is-closing .infoModal__back{
        animation: none;
        opacity: 1;
        transform: none;
    }
}
@media screen and (max-width:959px){
    #info h2{
        padding-top: 20px;
    }
    #info .infoRainbowScene{
        top: 47%;
        right: 6%;
        width: clamp(140px, 38vw, 200px);
    }
    #info .infoBirds{
        top: 30%;
        left: 9%;
        width: clamp(74px, 20vw, 110px);
    }
    #info .infoBird{
        width: clamp(18px, 5.6vw, 27px);
    }
    #info .infoSun{
        top: 8%;
        left: 9%;
        width: clamp(70px, 18vw, 110px);
    }
    #info ul{
        margin-top: 24px;
    }
    #info ul li a{
        display: block;
    }
    #info ul li p.date{
        width: 100%;
    }
    #info ul li p.title{
        width: 100%;
    }
    #info .infoTrees{
        right: 6%;
        bottom: 28%;
        width: clamp(92px, 30vw, 148px);
    }
    #info .infoGround::after{
        background-image: url("../../img/info_city_sp.png");
        clip-path: inset(52% 0 0 0);
    }
    .infoModal{
        top: 70px;
        z-index: 9998;
    }
    .infoModal__shell,
    .infoModal__body{
        min-height: calc(100vh - 70px);
    }
}
@media screen and (max-width:599px){
    #info .infoRainbowScene{
        right: 0%;
        z-index: 0;
    }
}
@media screen and (max-width:420px){
    .infoModal__body{
        padding-right: 24px;
        padding-left: 24px;
    }
    .infoModal__card{
        padding-right: 22px;
        padding-left: 22px;
    }
}
@media screen and (max-width:360px){
    .infoModal__close{
        right: 28px;
    }
    .infoModal__date{
        font-size: 11px;
    }
    .infoModal__title{
        font-size: 15px;
    }
    .infoModal__text{
        font-size: 13px;
    }
}
@keyframes info-sun-move-in{
    from{
        opacity: 0;
        transform: translateX(-150%);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes info-sun-rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes info-list-fade-in{
    from{
        opacity: 0;
        transform: translateY(24px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes info-bird-enter{
    from{
        opacity: 0;
        transform: translate(-120px, 24px) rotate(-12deg);
    }
    to{
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}
@keyframes info-bird-float{
    0%,
    100%{
        transform: translate(0, 0) rotate(0deg);
    }
    50%{
        transform: translate(8px, -7px) rotate(7deg);
    }
}
@keyframes info-bird-cloud-enter{
    from{
        opacity: 0;
        transform: translateX(-140px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes info-bird-cloud-float{
    0%,
    100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-6px);
    }
}
@keyframes info-cloud-enter{
    from{
        opacity: 0;
        transform: translateX(110px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes info-rainbow-wipe{
    0%{
        opacity: 0;
        clip-path: polygon(-4% -8%, -4% -8%, -4% 108%, -4% 108%);
    }
    45%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        clip-path: polygon(-4% -8%, 104% -8%, 104% 108%, -4% 108%);
    }
}
@keyframes info-rainbow-scene-float{
    0%,
    100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-8px);
    }
}
@keyframes info-tree-grow{
    0%{
        opacity: 0;
        transform: translateY(36px) scaleY(0.08);
    }
    58%{
        opacity: 1;
        transform: translateY(-4px) scaleY(1.06);
    }
    100%{
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}
@media (prefers-reduced-motion: reduce){
    #info .infoRainbowScene,
    #info .infoRainbow,
    #info .infoCloud,
    #info .infoBirdCloud,
    #info .infoBird,
    #info .infoBirdMotion,
    #info .infoBird .frame,
    #info .infoSun,
    #info .infoSun img,
    #info .infoTree{
        animation: none;
    }
    #info .infoBird{
        opacity: 1;
        transform: none;
    }
    #info .infoRainbow,
    #info .infoCloud,
    #info .infoBirdCloud{
        opacity: 1;
        clip-path: none;
        transform: none;
    }
    #info ul li{
        opacity: 1;
        transform: none;
    }
    #info .infoTree{
        opacity: 1;
        transform: none;
    }
}
/* ***************************** */
/* イントロダクション */
/* ***************************** */
#intro{
    position: relative;
    overflow: hidden;
    background-color: #E9BF75;
    padding-bottom: clamp(120px, 14vw, 190px);
    background-image: linear-gradient(
        to bottom,
        #E9BF75 0px,
        #E9BF75 144px,
        #E5B185 144px,
        #E5B185 201px,
        #E9BF75 201px,
        #E9BF75 218px,
        #E5B185 218px,
        #E5B185 251px,
        #E9BF75 251px,
        #E9BF75 283px,
        #E5B185 283px,
        #E5B185 374px,
        #E9BF75 374px,
        #E9BF75 401px,
        #E5B185 401px,
        #E5B185 453px,
        #E9BF75 453px,
        #E9BF75 473px,
        #D3AF90 473px,
        #D3AF90 872px,
        #E9BF75 872px,
        #E9BF75 895px,
        #E5B185 895px,
        #E5B185 952px,
        #E9BF75 952px,
        #E9BF75 969px,
        #E5B185 969px,
        #E5B185 1002px,
        #E9BF75 1002px,
        #E9BF75 1034px,
        #E5B185 1034px,
        #E5B185 1125px,
        #E9BF75 1125px,
        #E9BF75 1152px,
        #E5B185 1152px,
        #E5B185 1204px,
        #E9BF75 1204px,
        #E9BF75 1215px,
        #D3AF90 1215px,
        #D3AF90 1469px,
        #E9BF75 1469px,
        #E9BF75 1492px,
        #E5B185 1492px,
        #E5B185 1549px,
        #E9BF75 1549px,
        #E9BF75 1566px,
        #E5B185 1566px,
        #E5B185 1599px,
        #E9BF75 1599px,
        #E9BF75 1631px,
        #E5B185 1631px,
        #E5B185 1722px,
        #E9BF75 1722px,
        #E9BF75 1749px,
        #E5B185 1749px,
        #E5B185 1801px
    );
    background-repeat: repeat-y;
    background-size: 100% 1801px;
    margin-top: -10px;
}
#intro .wrapWidth{
    position: relative;
    z-index: 2;
}
#intro .introKais{
    position: absolute;
    right: clamp(34px, 11vw, 160px);
    bottom: clamp(-150px, -10vw, -104px);
    z-index: 3;
    width: clamp(130px, 15vw, 210px);
    height: clamp(100px, 12vw, 160px);
    pointer-events: none;
}
#intro .introKaisTop{
    top: clamp(4px, 2.4vw, 42px);
    right: auto;
    bottom: auto;
    left: clamp(-18px, 3.8vw, 62px);
    transform: scale(0.9) rotate(-10deg);
    transform-origin: 50% 50%;
}
#intro .introKai{
    position: absolute;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}
#intro .introKai img{
    display: block;
    width: 100%;
    height: auto;
}
#intro .introKai01{
    top: 16%;
    left: 52%;
    width: clamp(13px, 1.28vw, 19px);
    animation: intro-kai-jitter-01 3.1s steps(1, end) 0.12s infinite;
}
#intro .introKai02{
    top: 34%;
    left: 67%;
    width: clamp(19px, 1.92vw, 30px);
    animation: intro-kai-jitter-02 2.9s steps(1, end) 0.34s infinite;
}
#intro .introKai03{
    top: 48%;
    left: 86%;
    width: clamp(14px, 1.52vw, 23px);
    animation: intro-kai-jitter-03 3.35s steps(1, end) 0.48s infinite;
}
#intro .introKai04{
    top: 66%;
    left: 42%;
    width: clamp(42px, 4.32vw, 67px);
    animation: intro-kai-jitter-04 3.6s steps(1, end) 0.2s infinite;
}
#intro .introKai05{
    top: 35%;
    left: 20%;
    width: clamp(29px, 3.04vw, 46px);
    animation: intro-kai-jitter-05 4s steps(1, end) 0.28s infinite;
}
@keyframes intro-kai-jitter-01{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(2px, -1px) rotate(90deg); }
    50%{ transform: translate(-1px, 1px) rotate(-90deg); }
    75%{ transform: translate(1px, 2px) rotate(90deg); }
}
@keyframes intro-kai-jitter-02{
    0%, 100%{ transform: translate(0, 0) rotate(8deg); }
    25%{ transform: translate(-2px, 1px) rotate(90deg); }
    50%{ transform: translate(1px, -2px) rotate(-90deg); }
    75%{ transform: translate(2px, 2px) rotate(90deg); }
}
@keyframes intro-kai-jitter-03{
    0%, 100%{ transform: translate(0, 0) rotate(-8deg); }
    25%{ transform: translate(2px, 2px) rotate(90deg); }
    50%{ transform: translate(-2px, -1px) rotate(-90deg); }
    75%{ transform: translate(1px, 1px) rotate(90deg); }
}
@keyframes intro-kai-jitter-04{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(1px, -2px) rotate(90deg); }
    50%{ transform: translate(2px, 1px) rotate(-90deg); }
    75%{ transform: translate(-2px, 2px) rotate(90deg); }
}
@keyframes intro-kai-jitter-05{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(1px, -1px) rotate(90deg); }
    50%{ transform: translate(-1px, 1px) rotate(-90deg); }
    75%{ transform: translate(1px, 2px) rotate(90deg); }
}
#character .introBgMotion{
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(170px, 20vw, 260px);
    pointer-events: none;
    overflow: visible;
    background-color: #DDF3FB;
}
#character .introSky{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: max(120%, 960px);
    height: 64%;
    transform: translateX(-50%);
}
#character .introSky img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#character .introCloud{
    position: absolute;
    z-index: 2;
    width: clamp(34px, 4.2vw, 58px);
    opacity: 0;
    transform: translateX(-150px);
}
#character .introCloud img,
#character .introPlane img,
#character .introCityAsset img,
#character .introGround img{
    display: block;
    width: 100%;
    height: auto;
}
#character .introCloud01{
    top: 28%;
    left: 8%;
}
#character .introCloud02{
    top: 18%;
    left: 14%;
    width: clamp(34px, 4vw, 56px);
}
#character .introPlane{
    position: absolute;
    top: 16%;
    left: 100%;
    z-index: 3;
    width: clamp(50px, 5.5vw, 78px);
    transform: translateX(80px);
}
#character .introCity{
    position: absolute;
    left: 50%;
    bottom: 2%;
    z-index: 2;
    width: clamp(285px, 41vw, 500px);
    aspect-ratio: 284.66 / 80.44;
    transform: translateX(-50%);
    overflow: visible;
}
#character .introCityAsset{
    position: absolute;
    display: block;
    opacity: 0;
    transform: translateY(48%) scaleY(0.08);
    transform-origin: center bottom;
}
#character .introCityPart01{ left: 0%; bottom: 1.4%; width: 12.4%; }
#character .introCityPart02{ left: 15.5%; bottom: 0.2%; width: 14.3%; }
#character .introCityPart03{ left: 32.1%; bottom: 2.8%; width: 13.3%; }
#character .introCityPart04{ left: 47.5%; bottom: 0%; width: 19.9%; }
#character .introCityPart05{ left: 70.6%; bottom: 0%; width: 17.2%; }
#character .introCityTree{ left: 90%; bottom: 8.5%; width: 10%; }
#character .introGround{
    position: absolute;
    left: 50%;
    bottom: -15%;
    z-index: 3;
    width: max(170%, 1800px);
    height: 30%;
    transform: translateX(-50%);
    overflow: hidden;
}
#character .introGround img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#character > .wrapWidth{
    padding-top: clamp(24px, 4vw, 60px);
}
#character .introBgMotion.is-active .introCloud01{
    animation: intro-cloud-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, intro-cloud-float 3.5s ease-in-out 0.9s infinite;
}
#character .introBgMotion.is-active .introCloud02{
    animation: intro-cloud-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both, intro-cloud-float 4s ease-in-out 1.06s infinite reverse;
}
#character .introBgMotion.is-active .introCityAsset{
    animation: intro-grow 0.74s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#character .introBgMotion.is-active .introCityPart02{ animation-delay: 0.08s; }
#character .introBgMotion.is-active .introCityPart03{ animation-delay: 0.16s; }
#character .introBgMotion.is-active .introCityPart04{ animation-delay: 0.24s; }
#character .introBgMotion.is-active .introCityPart05{ animation-delay: 0.32s; }
#character .introBgMotion.is-active .introCityTree{ animation-delay: 0.42s; }
#character .introBgMotion.is-active .introPlane{
    animation: intro-plane-fly 9s linear 0.16s infinite;
}
@keyframes intro-cloud-enter{
    from{
        opacity: 0;
        transform: translateX(-150px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes intro-cloud-float{
    0%,
    100%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, -7px);
    }
}
@keyframes intro-grow{
    0%{
        opacity: 0;
        transform: translateY(48%) scaleY(0.08);
    }
    62%{
        opacity: 1;
        transform: translateY(-4%) scaleY(1.05);
    }
    100%{
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}
@keyframes intro-plane-fly{
    from{
        transform: translateX(80px);
    }
    to{
        transform: translateX(calc(-100vw - 180px));
    }
}
#intro .boxWidth{
    background-color: #fff;
    border: solid 2px #000;
    border-radius: 20px;
    text-align: center;
    padding: 0 4% 50px;
}
.introImgbox{
    display: block;
}
.introImgbox .txt{
    padding: 3% 0;
}
#intro img.ana{
    max-width: 250px;
}
/* Lottie（intro_ana.png の差し替え） */
#intro .anaLottie{
    width: min(100%, 440px);
    aspect-ratio: 573 / 458;
    margin: 0 auto;
    line-height: 0;
}
#intro .anaLottie svg{
    display: block;
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
}
#intro img.txt{
    max-width: 250px;
}
#intro .introTextBlock{
    position: relative;
}
#intro .introTextBlock p{
    position: relative;
    z-index: 2;
}
#intro .introStones{
    position: absolute;
    top: 20%;
    left: -7%;
    z-index: 1;
    width: clamp(48px, 7vw, 86px);
    height: clamp(62px, 8vw, 104px);
    pointer-events: none;
}
#intro .introStone{
    position: absolute;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}
#intro .introStone img{
    display: block;
    width: 100%;
    height: auto;
}
#intro .introStone01{
    top: 26%;
    left: 14%;
    width: clamp(8px, 1.1vw, 13px);
    animation: intro-stone-jitter-01 2.8s steps(1, end) infinite;
}
#intro .introStone02{
    top: 0;
    left: 42%;
    width: clamp(15px, 1.8vw, 24px);
    animation: intro-stone-jitter-02 3.4s steps(1, end) 0.18s infinite;
}
#intro .introStone03{
    top: 48%;
    left: 46%;
    width: clamp(19px, 2.2vw, 30px);
    animation: intro-stone-jitter-03 3.05s steps(1, end) 0.42s infinite;
}
@keyframes intro-stone-jitter-01{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(2px, -1px) rotate(90deg); }
    50%{ transform: translate(-1px, 1px) rotate(-90deg); }
    75%{ transform: translate(1px, 2px) rotate(90deg); }
}
@keyframes intro-stone-jitter-02{
    0%, 100%{ transform: translate(0, 0) rotate(-8deg); }
    25%{ transform: translate(-2px, 2px) rotate(90deg); }
    50%{ transform: translate(1px, -2px) rotate(-90deg); }
    75%{ transform: translate(3px, 1px) rotate(90deg); }
}
@keyframes intro-stone-jitter-03{
    0%, 100%{ transform: translate(0, 0) rotate(12deg); }
    25%{ transform: translate(3px, 1px) rotate(90deg); }
    50%{ transform: translate(0, -3px) rotate(-90deg); }
    75%{ transform: translate(-3px, 2px) rotate(90deg); }
}
#intro .arasujiWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3% 5%;
}
#intro .arasujiWrap .ana{
    max-width: 230px;
}
#intro .arasujiWrap .arasujiLottie{
    width: min(100%, 230px);
    aspect-ratio: 282 / 139;
    line-height: 0;
}
#intro .arasujiWrap .arasujiLottie svg{
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.lottieFallbackImage{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#intro .arasujiHeadingBlock{
    position: relative;
}
#intro .introHousekis{
    position: absolute;
    top: -4%;
    right: 0;
    z-index: 1;
    width: clamp(58px, 7vw, 92px);
    height: clamp(78px, 8.8vw, 120px);
    pointer-events: none;
}
#intro .introHouseki{
    position: absolute;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}
#intro .introHouseki img{
    display: block;
    width: 100%;
    height: auto;
}
#intro .introHouseki01{
    top: 0;
    left: 42%;
    width: clamp(10px, 1.1vw, 15px);
    animation: intro-houseki-jitter-01 3.1s steps(1, end) 0.08s infinite;
}
#intro .introHouseki02{
    top: 14%;
    left: 78%;
    width: clamp(11px, 1.2vw, 17px);
    animation: intro-houseki-jitter-02 2.75s steps(1, end) 0.34s infinite;
}
#intro .introHouseki03{
    top: 45%;
    left: 26%;
    width: clamp(19px, 2vw, 28px);
    animation: intro-houseki-jitter-03 3.35s steps(1, end) 0.2s infinite;
}
#intro .introHouseki04{
    top: 70%;
    left: 58%;
    width: clamp(20px, 2.1vw, 30px);
    animation: intro-houseki-jitter-04 2.95s steps(1, end) 0.5s infinite;
}
@keyframes intro-houseki-jitter-01{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(2px, -1px) rotate(90deg); }
    50%{ transform: translate(-1px, 1px) rotate(-90deg); }
    75%{ transform: translate(1px, 2px) rotate(90deg); }
}
@keyframes intro-houseki-jitter-02{
    0%, 100%{ transform: translate(0, 0) rotate(8deg); }
    25%{ transform: translate(-2px, 1px) rotate(90deg); }
    50%{ transform: translate(1px, -2px) rotate(-90deg); }
    75%{ transform: translate(2px, 2px) rotate(90deg); }
}
@keyframes intro-houseki-jitter-03{
    0%, 100%{ transform: translate(0, 0) rotate(-10deg); }
    25%{ transform: translate(2px, 2px) rotate(90deg); }
    50%{ transform: translate(-2px, -1px) rotate(-90deg); }
    75%{ transform: translate(1px, 1px) rotate(90deg); }
}
@keyframes intro-houseki-jitter-04{
    0%, 100%{ transform: translate(0, 0) rotate(12deg); }
    25%{ transform: translate(1px, -2px) rotate(90deg); }
    50%{ transform: translate(2px, 1px) rotate(-90deg); }
    75%{ transform: translate(-2px, 2px) rotate(90deg); }
}
#intro .arasujiTextBlock{
    position: relative;
    padding-bottom: clamp(44px, 6vw, 76px);
}
#intro .arasujiTextBlock p{
    position: relative;
    z-index: 2;
}
#intro .introAnaBits{
    position: absolute;
    left: -2%;
    bottom: -2%;
    z-index: 3;
    width: clamp(72px, 8vw, 112px);
    height: clamp(76px, 8vw, 118px);
    pointer-events: none;
}
#intro .introAnaBit{
    position: absolute;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}
#intro .introAnaBit img{
    display: block;
    width: 100%;
    height: auto;
}
#intro .introAnaBit01{
    top: 8%;
    left: 18%;
    width: clamp(16px, 1.7vw, 25px);
    animation: intro-ana-bit-jitter-01 3.1s steps(1, end) 0.14s infinite;
}
#intro .introAnaBit02{
    top: 34%;
    left: 0;
    width: clamp(16px, 1.8vw, 26px);
    animation: intro-ana-bit-jitter-02 2.8s steps(1, end) 0.38s infinite;
}
#intro .introAnaBit03{
    left: 18%;
    bottom: 0;
    width: clamp(56px, 6.4vw, 86px);
}
@keyframes intro-ana-bit-jitter-01{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(2px, -1px) rotate(90deg); }
    50%{ transform: translate(-1px, 1px) rotate(-90deg); }
    75%{ transform: translate(1px, 2px) rotate(90deg); }
}
@keyframes intro-ana-bit-jitter-02{
    0%, 100%{ transform: translate(0, 0) rotate(-8deg); }
    25%{ transform: translate(-2px, 1px) rotate(90deg); }
    50%{ transform: translate(1px, -2px) rotate(-90deg); }
    75%{ transform: translate(2px, 2px) rotate(90deg); }
}
@media screen and (max-width:959px){
    #intro{
        margin-top: -4%;
        padding-bottom: 120px;
    }
    #character .introBgMotion{
        width: 100%;
        height: clamp(150px, 42vw, 210px);
    }
    #character .introCloud01{
        top: 30%;
        left: 7%;
    }
    #character .introCloud02{
        top: 20%;
        left: 16%;
    }
    #character .introCity{
        bottom: 4%;
        width: clamp(250px, 78vw, 360px);
    }
    #character > .wrapWidth{
        padding-top: clamp(22px, 7vw, 44px);
    }
    #character .introPlane{
        top: 16%;
        width: clamp(42px, 11vw, 58px);
    }
    #intro .anaLottie{
        width: min(150%, 540px);
        margin-left: 50%;
        transform: translateX(-50%);
    }
    #intro .introStones{
        top: 23%;
        left: -2%;
        width: 50px;
        height: 66px;
    }
    #intro .introHousekis{
        top: -44%;
        right: 3%;
        width: 54px;
        height: 74px;
    }
    #intro .introKais{
        right: 8%;
        bottom: -98px;
        width: 116px;
        height: 92px;
    }
    #intro .introAnaBits{
        left: -4%;
        bottom: -4%;
        width: 68px;
        height: 72px;
    }
}
@media (prefers-reduced-motion: reduce){
    #character .introCloud,
    #character .introPlane,
    #character .introCityAsset,
    footer .footerCityAsset,
    #intro .introStone,
    #intro .introHouseki,
    #intro .introAnaBit,
    #intro .introKai,
    #youtube .youtubeCloud,
    #youtube .youtubeBird,
    #youtube .youtubeTree,
    #goods .youtubeCloud,
    #goods .youtubeBird,
    #goods .youtubeTree,
    #episodes .episodesTree,
    #episodes .episodesPlane,
    #episodes .episodesCloud,
    #episodes .episodesBottomItem,
    #contents .episodesTree,
    #contents .episodesPlane,
    #contents .episodesCloud,
    #epi .episodesTree,
    #epi .episodesPlane,
    #epi .episodesCloud,
    #dlContents .episodesTree,
    #dlContents .episodesPlane,
    #dlContents .episodesCloud,
    #information .infoSun,
    #information .infoBird,
    #information .infoBirdCloud,
    #information .infoBirdMotion,
    #information .infoBird .frame,
    #information .infoRainbowScene,
    #information .infoRainbow,
    #information .infoCloud,
    #game .gameTreasure,
    #game .gameStone,
    #game .gameHouseki,
    #game .gameKai,
    #game .gameAnaBit,
    footer .footerDance,
    footer .footerDanceFlip,
    footer .footerDanceBody,
    footer .footerOto{
        animation: none;
        opacity: 1;
        transform: none;
    }
    #character .introPlane{
        left: auto;
        right: 8%;
    }
}
/* ***************************** */
/* キャラクター */
/* ***************************** */
#character .charaTxt{
    text-align: center;
    padding: 0 0 5%;
}
#character .charaWrap ul{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
#character .charaWrap ul li{
    width: 32%;
}
/* 白い円形フレーム（マスク）
   ※ border-radius+overflow:hidden は Safari で transform を持つ
     子要素をクリップできないため clip-path で確実にマスクする。 */
#character .charaWrap ul li .charaMask{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    position: relative;
}
#character .charaWrap ul li .charaMask img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#character .charaWrap ul li a p{
    background-color: #00A0E2;
    border-radius: 20px;
    padding: 5px;
    color: #fff;
    margin-top: 10%;
    font-size: 14px;
    transform-origin: center bottom;
    transition: none;
    will-change: transform;
}
#character .charaWrap ul li a:hover{
    opacity: 1;
}
.is-chara-modal-open{
    overflow: hidden;
}
.charaModal{
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    display: none;
    overflow-y: auto;
    background: rgba(96, 196, 237, 0.72);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Zen Kaku Gothic New", sans-serif;
    opacity: 0;
}
.charaModal:focus{
    outline: none;
}
.charaModal.is-open{
    display: block;
    opacity: 1;
}
.charaModal.is-opening{
    animation: chara-modal-backdrop-in 0.28s ease-out both;
}
.charaModal.is-closing{
    animation: chara-modal-backdrop-out 0.24s ease-in 0.28s both;
}
.charaModal__panel{
    position: relative;
    width: min(100%, 400px);
    min-height: calc(100vh - 60px);
    margin: 0 auto;
    padding: 71px 24px 34px;
}
.charaModal__close{
    position: absolute;
    top: 25px;
    right: 40px;
    width: 23px;
    height: 23px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform-origin: center center;
    will-change: opacity, transform;
}
.charaModal__close::before,
.charaModal__close::after{
    content: "";
    position: absolute;
    top: 9px;
    left: -2px;
    width: 27px;
    height: 5px;
    border-radius: 5px;
    background: #fff;
}
.charaModal__close::before{
    transform: rotate(45deg);
}
.charaModal__close::after{
    transform: rotate(-45deg);
}
.charaModal__card{
    width: min(100%, 350px);
    min-height: 475px;
    margin: 0 auto;
    padding: 30px 30px 34px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    opacity: 0;
    transform: translateY(34px);
    will-change: opacity, transform;
}
.charaModal.is-open .charaModal__card{
    opacity: 1;
    transform: translateY(0);
}
.charaModal.is-opening .charaModal__card{
    animation: chara-modal-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.charaModal.is-closing .charaModal__card{
    animation: chara-modal-card-out 0.34s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.14s both;
}
.charaModal__image{
    width: min(100%, 210px);
    height: clamp(250px, 42vh, 330px);
    margin: 0 auto 18px;
}
.charaModal__image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.charaModal__image.is-anachan img{
    transform: scale(0.8);
}
.charaModal__name{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 136px;
    min-height: 29px;
    margin: 0 auto 22px;
    padding: 5px 22px;
    border-radius: 40px;
    background: #00a0e2;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}
.charaModal__text{
    width: min(100%, 260px);
    margin: 0 auto;
    color: #000;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}
.charaModal__image,
.charaModal__name,
.charaModal__text{
    opacity: 0;
    transform: translateX(24px);
    will-change: opacity, transform;
}
.charaModal.is-open .charaModal__image,
.charaModal.is-open .charaModal__name,
.charaModal.is-open .charaModal__text{
    opacity: 1;
    transform: translateX(0);
}
.charaModal.is-opening .charaModal__image{
    animation: chara-modal-content-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
}
.charaModal.is-opening .charaModal__name{
    animation: chara-modal-content-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both;
}
.charaModal.is-opening .charaModal__text{
    animation: chara-modal-content-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.64s both;
}
.charaModal.is-closing .charaModal__image,
.charaModal.is-closing .charaModal__name,
.charaModal.is-closing .charaModal__text{
    animation: chara-modal-content-out 0.18s ease-in both;
}
.charaModal__back{
    display: block;
    width: 207px;
    height: 44px;
    margin: 39px auto 0;
    border: none;
    border-radius: 50px;
    background: #ea5006;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    letter-spacing: 0.15em;
    cursor: pointer;
    opacity: 0;
    transform-origin: center bottom;
    will-change: opacity, transform;
}
.charaModal.is-open .charaModal__close,
.charaModal.is-open .charaModal__back{
    opacity: 1;
}
.charaModal.is-opening .charaModal__close{
    animation: chara-modal-content-fade-in 0.3s ease-out 0.72s both;
}
.charaModal.is-opening .charaModal__back{
    animation: chara-modal-content-fade-in 0.32s ease-out 0.78s both;
}
.charaModal.is-closing .charaModal__close,
.charaModal.is-closing .charaModal__back{
    pointer-events: none;
    animation: chara-modal-content-out 0.18s ease-in both;
}
.charaModal__close:focus-visible,
.charaModal__back:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine){
    .charaModal.is-open:not(.is-closing) .charaModal__back:hover{
        opacity: 1;
        animation: info-modal-button-bounce 0.78s cubic-bezier(0.2, 0.9, 0.24, 1.24);
    }
    .charaModal.is-open:not(.is-closing) .charaModal__close:hover{
        opacity: 1;
        animation: info-modal-close-pop 0.38s cubic-bezier(0.2, 0.9, 0.24, 1.24);
    }
}
@keyframes chara-modal-backdrop-in{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes chara-modal-backdrop-out{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes chara-modal-card-in{
    from{
        opacity: 0;
        transform: translateY(34px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes chara-modal-card-out{
    from{
        opacity: 1;
        transform: translateY(0);
    }
    to{
        opacity: 0;
        transform: translateY(34px);
    }
}
@keyframes chara-modal-content-in{
    from{
        opacity: 0;
        transform: translateX(24px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes chara-modal-content-fade-in{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes chara-modal-content-out{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@media screen and (max-width:959px){
    .charaModal{
        top: 70px;
        z-index: 9998;
    }
    .charaModal__panel{
        min-height: calc(100vh - 70px);
    }
}
@media screen and (max-width:360px){
    .charaModal__close{
        right: 28px;
    }
    .charaModal__card{
        padding-right: 22px;
        padding-left: 22px;
    }
    .charaModal__image{
        width: min(100%, 190px);
        height: clamp(230px, 42vh, 300px);
    }
}
@media (prefers-reduced-motion: reduce){
    .charaModal.is-open,
    .charaModal.is-open .charaModal__card,
    .charaModal.is-open .charaModal__image,
    .charaModal.is-open .charaModal__name,
    .charaModal.is-open .charaModal__text,
    .charaModal.is-open .charaModal__close,
    .charaModal.is-open .charaModal__back{
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ***************************** */
/* Youtube */
/* ***************************** */

#youtube .wrapWidth{
    position: relative;
    padding-top: clamp(86px, 9vw, 140px);
}
#youtube h2{
    position: relative;
    top: clamp(76px, 8vw, 126px);
    z-index: 4;
    padding-top: 0;
}
#youtube .noevent{
    pointer-events: none;
    display: block;
}
#youtube .youtubeDecor{
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    height: clamp(88px, 13vw, 160px);
    margin: clamp(-96px, -7vw, -56px) auto clamp(12px, 2vw, 28px);
    pointer-events: none;
}
#youtube .youtubeDecorLeft,
#youtube .youtubeDecorRight{
    position: absolute;
    inset: 0;
}
#youtube .youtubeCloud,
#youtube .youtubeBird,
#youtube .youtubeTree{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#youtube .youtubeCloud img,
#youtube .youtubeTree img{
    display: block;
    width: 100%;
    height: auto;
}
#youtube .youtubeCloud01{
    top: 0;
    left: 5%;
    width: clamp(42px, 6vw, 72px);
    transform: translateX(-120px);
}
#youtube .youtubeCloud02{
    top: -26%;
    left: 26%;
    width: clamp(44px, 6vw, 74px);
    transform: translateX(-120px);
}
#youtube .youtubeBird{
    width: clamp(19px, 2.56vw, 30px);
    aspect-ratio: 24 / 30;
}
#youtube .youtubeBird01{
    top: -8%;
    left: 18%;
    transform: translateX(-120px);
}
#youtube .youtubeBird02{
    top: 14%;
    left: 27%;
    transform: translateX(-120px);
}
#youtube .youtubeBirdMotion{
    position: absolute;
    inset: 0;
    animation: youtube-bird-float 2.9s ease-in-out 1s infinite;
}
#youtube .youtubeBird02 .youtubeBirdMotion{
    animation-delay: 1.15s;
}
#youtube .youtubeBird .frame{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
#youtube .youtubeBird .frame01{
    animation: flying-frame-01 0.32s steps(1, end) infinite;
}
#youtube .youtubeBird .frame02{
    opacity: 0;
    animation: flying-frame-02 0.32s steps(1, end) infinite;
}
#youtube .youtubeBird02 .frame01{
    animation-name: flying-frame-02;
}
#youtube .youtubeBird02 .frame02{
    animation-name: flying-frame-01;
}
#youtube .youtubeTreeLeft{
    top: 36%;
    left: 12%;
    width: clamp(58px, 7.4vw, 94px);
    transform: translateX(-120px);
}
#youtube .youtubeTreeLarge{
    top: -12%;
    right: 18%;
    width: clamp(78px, 10vw, 128px);
    transform: translateX(120px);
}
#youtube .youtubeTreeSmall{
    top: 30%;
    right: 5%;
    width: clamp(58px, 7.4vw, 94px);
    transform: translateX(120px);
}
#youtube .youtubeDecor.is-active .youtubeCloud01{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both, youtube-cloud-float 3.4s ease-in-out 0.8s infinite;
}
#youtube .youtubeDecor.is-active .youtubeCloud02{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both, youtube-cloud-float 3.9s ease-in-out 0.92s infinite reverse;
}
#youtube .youtubeDecor.is-active .youtubeBird01{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}
#youtube .youtubeDecor.is-active .youtubeBird02{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}
#youtube .youtubeDecor.is-active .youtubeTreeLeft{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
#youtube .youtubeDecor.is-active .youtubeTreeLarge{
    animation: youtube-decor-right-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
#youtube .youtubeDecor.is-active .youtubeTreeSmall{
    animation: youtube-decor-right-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}
@keyframes youtube-decor-left-enter{
    from{
        opacity: 0;
        transform: translateX(-120px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes youtube-decor-right-enter{
    from{
        opacity: 0;
        transform: translateX(120px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes youtube-cloud-float{
    0%,
    100%{ transform: translateY(0); }
    50%{ transform: translateY(-7px); }
}
@keyframes youtube-bird-float{
    0%,
    100%{ transform: translateY(0); }
    50%{ transform: translateY(-6px); }
}
#youtube .youtubeWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-top: 50px;
}
#youtube .youtubeWrap li{
    width: 32%;
}
#youtube .youtubeWrap li div{
    position: relative;
    z-index: 0;
}

.youtubeWrap li div.koukai::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px; /* 再生ボタン画像サイズに合わせて調整 */
    height: 40px;
    background: url("../../img/youtube_play.png") no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transform-origin: center;
}
@media (hover: hover) and (pointer: fine){
    .youtubeWrap li div:hover::after{
        animation: youtube-play-pop 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}
@keyframes youtube-play-pop{
    0%{ transform: translate(-50%, -50%) scale(1); }
    38%{ transform: translate(-50%, -50%) scale(1.28); }
    64%{ transform: translate(-50%, -50%) scale(0.94); }
    100%{ transform: translate(-50%, -50%) scale(1); }
}
#youtube .youtubeBottomDecor{
    position: relative;
    z-index: 2;
    width: clamp(300px, 31vw, 430px);
    height: clamp(122px, 12.5vw, 168px);
    margin: clamp(44px, 5vw, 78px) auto 0;
    pointer-events: none;
}
#youtube .youtubeRoomItem{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#youtube .youtubeRoomItem img{
    display: block;
    width: 100%;
    height: auto;
}
#youtube .youtubeRoomLight{
    left: 9%;
    bottom: 25%;
    z-index: 1;
    width: 17%;
    transform: translateX(-130px);
}
#youtube .youtubeRoomBed{
    left: 17%;
    bottom: 0;
    z-index: 2;
    width: 50%;
    transform: translateX(-130px);
}
#youtube .youtubeRoomTv{
    right: 3%;
    bottom: 17%;
    z-index: 3;
    width: 34.5%;
    aspect-ratio: 1 / 1;
    transform: translateX(130px);
}
#youtube .youtubeRoomTvLottie{
    display: block;
    width: 100%;
    height: 100%;
}
#youtube .youtubeBottomDecor.is-active .youtubeRoomBed{
    animation: episodes-bottom-left-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#youtube .youtubeBottomDecor.is-active .youtubeRoomLight{
    animation: episodes-bottom-left-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
#youtube .youtubeBottomDecor.is-active .youtubeRoomTv{
    animation: episodes-bottom-right-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}

@media screen and (max-width: 959px) {
    #youtube .wrapWidth{
        padding-top: clamp(66px, 17vw, 96px);
    }
    #youtube .youtubeDecor{
        width: min(100%, 500px);
        height: clamp(88px, 25vw, 130px);
        margin-top: clamp(-66px, -14vw, -42px);
    }
    #youtube .youtubeCloud01{
        left: 1%;
        width: clamp(38px, 11vw, 56px);
    }
    #youtube .youtubeCloud02{
        left: 22%;
        width: clamp(40px, 12vw, 58px);
    }
    #youtube .youtubeBird{
        width: clamp(22px, 7vw, 32px);
    }
    #youtube .youtubeBird01{
        left: 15%;
    }
    #youtube .youtubeBird02{
        left: 26%;
    }
    #youtube .youtubeTreeLeft{
        left: 8%;
        width: clamp(42px, 12vw, 62px);
    }
    #youtube .youtubeTreeLarge{
        right: 18%;
        width: clamp(66px, 18vw, 92px);
    }
    #youtube .youtubeTreeSmall{
        right: 0;
        width: clamp(50px, 14vw, 72px);
    }
    #youtube .youtubeWrap li{
        width: 48%;
    }
    #youtube .youtubeBottomDecor{
        width: min(78%, 340px);
        height: clamp(112px, 29vw, 148px);
        margin-top: clamp(34px, 9vw, 54px);
    }
    #youtube .youtubeRoomLight{
        left: 7%;
        bottom: 25%;
        width: 17%;
    }
    #youtube .youtubeRoomBed{
        left: 16%;
        width: 50%;
    }
    #youtube .youtubeRoomTv{
        right: 3%;
        bottom: 17%;
        width: 34.5%;
    }
}

/* SNS */
#sns .wrapWidth{
    /* max-width: 500px; */
    margin: 0 auto;
    /* width: 70%; */
}
#sns ul{
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
    text-align: center;
    gap: 20px;
}
#sns ul li{
    width: 32%;
    font-size: 16px;
}
#sns ul li a img{
    max-width: 200px;
}
#sns ul li a p{
    padding-top: 3%;
}
#sns .snsDeskScene{
    position: relative;
    z-index: 2;
    width: clamp(205px, 23vw, 300px);
    margin: clamp(38px, 4.2vw, 62px) auto 0;
    aspect-ratio: 82 / 86;
    pointer-events: none;
}
#sns .snsDesk,
#sns .snsStar{
    position: absolute;
    display: block;
    height: auto;
    will-change: transform, opacity;
}
#sns .snsDesk{
    inset: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(140px);
}
#sns .snsStar{
    /* top: 18%;
    left: 21%; */
    top: 30%;
    left: 35%;
    z-index: 2;
    width: clamp(18px, 2.35vw, 29px);
    opacity: 0;
    transform: scale(0) rotate(-12deg);
    transform-origin: 50% 50%;
}
#sns .snsDeskScene.is-active .snsDesk{
    animation: sns-desk-slide-in 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#sns .snsDeskScene.is-active .snsStar{
    animation: sns-star-spring 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 0.58s both;
}
@keyframes sns-desk-slide-in{
    from{
        opacity: 0;
        transform: translateX(140px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes sns-star-spring{
    0%{
        opacity: 0;
        transform: scale(0) rotate(-18deg);
    }
    58%{
        opacity: 1;
        transform: scale(1.32) rotate(7deg);
    }
    78%{
        opacity: 1;
        transform: scale(0.9) rotate(-4deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.ana_02{
    max-width: 200px;
    width: 30%;
    margin-top: 40px;
}
@media screen and (max-width: 959px){
    #sns .snsDeskScene{
        width: clamp(195px, 52vw, 260px);
        margin-top: clamp(34px, 8vw, 52px);
    }
    #sns .snsStar{
        /* top: 18%;
        left: 21%; */
        top: 30%;
        left: 35%;
        width: clamp(17px, 5.5vw, 25px);
    }
    .ana_02{
        width: 50%;
    }
    #sns ul li{
        font-size: 11px;
        width: 30%;
    }
    #sns ul li a img{
        max-width: 100%;
    }
}
/* GAME */

#game{
    position: relative;
    overflow: hidden;
    background-color: #E9BF75;
    padding-top: clamp(48px, 6vw, 88px);
    padding-bottom: clamp(58px, 7vw, 100px);
}
#game::before,
#game::after{
    content: "";
    position: absolute;
    left: 0;
    z-index: 0;
    width: 100%;
    height: clamp(16px, 2vw, 28px);
    background-color: #E4F4FD;
    pointer-events: none;
}
#game::before{
    top: -1px;
    clip-path: polygon(
        0 0, 0 100%, 1.8% 78%, 3.6% 88%, 5.5% 72%, 7.2% 96%,
        9.4% 64%, 11.1% 100%, 13.8% 84%, 16.2% 91%, 18.4% 80%, 21% 94%,
        23.2% 66%, 25.1% 89%, 27.7% 82%, 30.4% 93%, 33.2% 76%, 36.1% 98%,
        38.6% 61%, 41.2% 95%, 44.1% 70%, 46.5% 88%, 49.3% 77%, 52.7% 96%,
        55.4% 63%, 57.1% 91%, 59.6% 74%, 62.8% 98%, 65.4% 69%, 68.3% 88%,
        71.5% 81%, 74.2% 94%, 76.8% 73%, 79.4% 90%, 82.6% 78%, 85.1% 97%,
        87.6% 58%, 90.2% 89%, 92.9% 68%, 95.7% 93%, 98.2% 73%, 100% 86%, 100% 0
    );
}
#game::after{
    bottom: 0;
    background-color: #BAE3F9;
    clip-path: polygon(
        0 100%, 0 16%, 1.8% 28%, 3.6% 11%, 5.5% 34%, 7.2% 3%,
        9.4% 40%, 11.1% 0, 13.8% 22%, 16.2% 9%, 18.4% 27%, 21% 6%,
        23.2% 36%, 25.1% 10%, 27.7% 19%, 30.4% 7%, 33.2% 31%, 36.1% 2%,
        38.6% 42%, 41.2% 5%, 44.1% 30%, 46.5% 12%, 49.3% 24%, 52.7% 4%,
        55.4% 38%, 57.1% 9%, 59.6% 27%, 62.8% 1%, 65.4% 33%, 68.3% 12%,
        71.5% 20%, 74.2% 6%, 76.8% 31%, 79.4% 10%, 82.6% 24%, 85.1% 3%,
        87.6% 44%, 90.2% 11%, 92.9% 35%, 95.7% 7%, 98.2% 29%, 100% 14%, 100% 100%
    );
}
#game .wrapWidth{
    position: relative;
    z-index: 1;
}
#game h2{
    position: relative;
    top: clamp(62px, 6.2vw, 96px);
    z-index: 3;
    padding-top: clamp(12px, 2vw, 28px);
}
#game .gameDecor{
    position: relative;
    z-index: 2;
    width: min(94vw, 1000px);
    height: clamp(86px, 12vw, 150px);
    margin: clamp(-24px, -2vw, -10px) auto clamp(12px, 2vw, 26px);
    pointer-events: none;
    transform: translateY(clamp(-36px, -3vw, -24px)) scale(0.8);
    transform-origin: center top;
}
#game .gameDecorLeft,
#game .gameDecorRight{
    position: absolute;
    inset: 0;
}
#game .gameTreasure,
#game .gameStone,
#game .gameHouseki,
#game .gameKai{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#game .gameTreasure img,
#game .gameStone img,
#game .gameHouseki img,
#game .gameKai img{
    display: block;
    width: 100%;
    height: auto;
}
#game .gameTreasure{
    top: 39%;
    left: 1%;
    width: clamp(62px, 7.6vw, 98px);
    transform: translateX(-130px);
}
#game .gameStone01{
    top: 38%;
    left: -6%;
    width: clamp(10px, 1vw, 15px);
    transform: translateX(-130px);
}
#game .gameStone02{
    top: -34%;
    left: 2%;
    width: clamp(17px, 1.8vw, 27px);
    transform: translateX(-130px);
}
#game .gameHouseki01{
    top: -24%;
    left: 27%;
    width: clamp(16px, 1.6vw, 24px);
    transform: translateX(-130px);
}
#game .gameHouseki02{
    top: -30%;
    left: 19%;
    width: clamp(16px, 1.6vw, 24px);
    transform: translateX(-130px);
}
#game .gameHouseki03{
    top: -8%;
    left: 12%;
    width: clamp(19px, 1.9vw, 27px);
    transform: translateX(-130px);
}
#game .gameHouseki04{
    top: 16%;
    left: 21%;
    width: clamp(24px, 2.4vw, 36px);
    transform: translateX(-130px);
}
#game .gameKai01{
    top: 10%;
    right: 10%;
    width: clamp(13px, 1.3vw, 20px);
    transform: translateX(130px);
}
#game .gameKai02{
    top: 36%;
    right: 0;
    width: clamp(22px, 2.2vw, 34px);
    transform: translateX(130px);
}
#game .gameKai03{
    top: 54%;
    right: -6%;
    width: clamp(16px, 1.6vw, 24px);
    transform: translateX(130px);
}
#game .gameKai04{
    top: 60%;
    right: 5%;
    width: clamp(46px, 4.8vw, 74px);
    transform: translateX(130px);
}
#game .gameKai05{
    top: 28%;
    right: 14%;
    width: clamp(34px, 3.5vw, 54px);
    transform: translateX(130px);
}
#game .gameDecor.is-active .gameTreasure{
    animation: game-decor-left-enter 0.82s cubic-bezier(0.22, 1, 0.36, 1) both, game-piece-jitter-01 3.6s steps(1, end) 0.95s infinite;
}
#game .gameDecor.is-active .gameStone01{
    animation: game-decor-left-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both, game-piece-jitter-03 3.25s steps(1, end) 0.92s infinite;
}
#game .gameDecor.is-active .gameStone02{
    animation: game-decor-left-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both, game-piece-jitter-02 3.45s steps(1, end) 1s infinite;
}
#game .gameDecor.is-active .gameHouseki01{
    animation: game-decor-left-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both, game-piece-jitter-02 3.1s steps(1, end) 0.9s infinite;
}
#game .gameDecor.is-active .gameHouseki02{
    animation: game-decor-left-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both, game-piece-jitter-03 3.4s steps(1, end) 1.05s infinite;
}
#game .gameDecor.is-active .gameHouseki03{
    animation: game-decor-left-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both, game-piece-jitter-01 2.9s steps(1, end) 1.15s infinite;
}
#game .gameDecor.is-active .gameHouseki04{
    animation: game-decor-left-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both, game-piece-jitter-02 3.2s steps(1, end) 1.25s infinite;
}
#game .gameDecor.is-active .gameKai01{
    animation: game-decor-right-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both, game-piece-jitter-03 3.4s steps(1, end) 0.95s infinite;
}
#game .gameDecor.is-active .gameKai02{
    animation: game-decor-right-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both, game-piece-jitter-01 3.1s steps(1, end) 1.05s infinite;
}
#game .gameDecor.is-active .gameKai03{
    animation: game-decor-right-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both, game-piece-jitter-02 3.25s steps(1, end) 1.18s infinite;
}
#game .gameDecor.is-active .gameKai04{
    animation: game-decor-right-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both, game-piece-jitter-03 3.8s steps(1, end) 1.3s infinite;
}
#game .gameDecor.is-active .gameKai05{
    animation: game-decor-right-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both, game-piece-jitter-01 3.5s steps(1, end) 1.42s infinite;
}
@keyframes game-decor-left-enter{
    from{ opacity: 0; transform: translateX(-130px); }
    to{ opacity: 1; transform: translateX(0); }
}
@keyframes game-decor-right-enter{
    from{ opacity: 0; transform: translateX(130px); }
    to{ opacity: 1; transform: translateX(0); }
}
@keyframes game-piece-jitter-01{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(2px, -1px) rotate(90deg); }
    50%{ transform: translate(-1px, 1px) rotate(-90deg); }
    75%{ transform: translate(1px, 2px) rotate(90deg); }
}
@keyframes game-piece-jitter-02{
    0%, 100%{ transform: translate(0, 0) rotate(8deg); }
    25%{ transform: translate(-2px, 1px) rotate(90deg); }
    50%{ transform: translate(1px, -2px) rotate(-90deg); }
    75%{ transform: translate(2px, 2px) rotate(90deg); }
}
@keyframes game-piece-jitter-03{
    0%, 100%{ transform: translate(0, 0) rotate(-8deg); }
    25%{ transform: translate(2px, 2px) rotate(90deg); }
    50%{ transform: translate(-2px, -1px) rotate(-90deg); }
    75%{ transform: translate(1px, 1px) rotate(90deg); }
}
#game .wrapWidth > .boxWidth{
    max-width: 750px;
    margin: clamp(-72px, -5.5vw, -48px) auto 0;
    width: 90%;
    min-width: 250px;
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding: 50px 0px;
    border-radius: 20px;
}
#game ul{
    display: flex;
    justify-content: center;
    gap: 4%;
    margin: 14px auto 0;
    /* margin: 8px auto 0; */
    max-width: 500px;
    text-align: center;
    font-family: "Zen Maru Gothic", sans-serif;
}
#game ul li{
    width: 48%;
}
#game .gameImg > div{
    max-width: 500px;
    margin: 0 auto;
    /* background-color: #fff;
    border-radius: 20px; */
}
#game .gameImg ul{
    margin-top: 10px;
}
#game ul li span{
    font-size: 110%;
}
#game .txtDl{
    text-align: center;
    border: 1px solid #000;
    padding: 2% 0;
    border-radius: 20px;
    margin: 26px auto 0;
    max-width: 500px;
}


#game ul.gameTxt{
    display: block;
    font-weight: 500;
}
#game ul.gameTxt li{
    margin: 0 auto;
    width: 60%;
}
#game ul.gameTxt li p{
    padding-bottom: 5px;
}
#game .gameAnaBits{
    position: absolute;
    left: clamp(-188px, -18vw, -132px);
    bottom: clamp(-10px, -0.8vw, -4px);
    z-index: 3;
    width: clamp(92px, 10vw, 128px);
    height: clamp(86px, 9vw, 126px);
    pointer-events: none;
    transform: scale(1.2);
    transform-origin: center bottom;
}
#game .gameAnaBit{
    position: absolute;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}
#game .gameAnaBit img{
    display: block;
    width: 100%;
    height: auto;
}
#game .gameAnaBit01{
    top: 8%;
    left: 18%;
    width: clamp(20px, 2vw, 30px);
    animation: intro-ana-bit-jitter-01 3.1s steps(1, end) 0.14s infinite;
}
#game .gameAnaBit02{
    top: 34%;
    left: 0;
    width: clamp(20px, 2vw, 32px);
    animation: intro-ana-bit-jitter-02 2.8s steps(1, end) 0.38s infinite;
}
#game .gameAnaBit03{
    left: 18%;
    bottom: 0;
    width: clamp(70px, 7.2vw, 98px);
}
@media screen and (max-width: 959px){
    #game{
        padding-top: 48px;
        padding-bottom: 72px;
    }
    #game .gameDecor{
        width: min(100%, 500px);
        height: 112px;
        margin-top: -10px;
        transform: translateY(-24px) scale(0.8);
    }
    #game .gameTreasure{
        top: 42%;
        left: 0;
        width: 56px;
    }
    #game .gameStone01{
        top: 40%;
        left: -6%;
        width: 10px;
    }
    #game .gameStone02{
        top: -32%;
        left: 2%;
        width: 17px;
    }
    #game .gameHouseki01{
        top: -22%;
        left: 27%;
        width: 16px;
    }
    #game .gameHouseki02{
        top: -28%;
        left: 19%;
        width: 16px;
    }
    #game .gameHouseki03{
        top: -6%;
        left: 12%;
        width: 19px;
    }
    #game .gameHouseki04{
        top: 18%;
        left: 21%;
        width: 24px;
    }
    #game .wrapWidth > .boxWidth{
        margin-top: -42px;
    }
    #game .gameKai01{
        right: 10%;
        width: 12px;
    }
    #game .gameKai02{
        right: 0;
        width: 20px;
    }
    #game .gameKai03{
        right: -6%;
        width: 15px;
    }
    #game .gameKai04{
        right: 5%;
        width: 44px;
    }
    #game .gameKai05{
        right: 14%;
        width: 32px;
    }
    #game .txtDl{
        margin-top: 20px;
    }
    #game ul{
        margin-top: 14px;
        /* margin-top: 4px; */
    }
    #game .wrapWidth > .boxWidth{
        padding: 50px 20px;
    }
    #game ul.gameTxt li{
        width: 87%;
    }
}


/* おはなし */

#episodes{
    position: relative;
    overflow: hidden;
    background-color: #BAE3F9;
    margin-top: -1px;
    padding: clamp(72px, 7vw, 118px) 0 clamp(52px, 6vw, 86px);
    clip-path: polygon(
        0 0, 100% 0, 100% 98%, 97.6% 98.7%, 94.8% 97.6%,
        91.2% 98.8%, 87.8% 97.9%, 84.1% 98.6%, 80.7% 97.4%, 77.2% 98.8%,
        73.5% 97.7%, 70.2% 98.5%, 66.5% 97.3%, 62.9% 98.8%, 59.5% 97.8%,
        55.9% 98.6%, 52.5% 97.4%, 48.8% 98.8%, 45.3% 97.9%, 41.8% 98.7%,
        38.2% 97.5%, 34.8% 98.9%, 31.2% 97.8%, 27.8% 98.6%, 24.2% 97.4%,
        20.8% 98.8%, 17.1% 97.7%, 13.9% 98.6%, 10.3% 97.5%, 6.8% 98.8%,
        3.4% 97.8%, 0 98.6%
    );
}
#episodes .wrapWidth{
    position: relative;
    z-index: 1;
}
#episodes h2{
    position: relative;
    z-index: 3;
}
#episodes .episodesDecor,
#contents .contentsDecor{
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    height: clamp(126px, 16vw, 190px);
    margin: clamp(-128px, -8vw, -78px) auto clamp(-18px, -1.2vw, -8px);
    pointer-events: none;
}
#episodes .episodesTree,
#episodes .episodesPlane,
#episodes .episodesCloud,
#contents .episodesTree,
#contents .episodesPlane,
#contents .episodesCloud{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#episodes .episodesTree img,
#episodes .episodesPlane img,
#episodes .episodesCloud img,
#contents .episodesTree img,
#contents .episodesPlane img,
#contents .episodesCloud img{
    display: block;
    width: 100%;
    height: auto;
}
#episodes .episodesTreeLarge,
#contents .episodesTreeLarge{
    top: 2%;
    left: 1%;
    width: clamp(68px, 9vw, 112px);
    transform: translateX(-120px);
}
#episodes .episodesTreeSmall,
#contents .episodesTreeSmall{
    top: 32%;
    left: 18%;
    width: clamp(48px, 6.2vw, 76px);
    transform: translateX(-120px);
}
#episodes .episodesPlane,
#contents .episodesPlane{
    top: -48%;
    right: -10%;
    width: clamp(50px, 6.5vw, 82px);
    transform: translateX(120px);
}
#episodes .episodesCloud,
#contents .episodesCloud{
    top: 8%;
    right: 3%;
    width: clamp(44px, 6vw, 74px);
    transform: translateX(120px);
}
#contents .episodesPlane{
    top: -68%;
}
#contents .episodesCloud{
    top: -12%;
}
#epi > div:first-child,
#dlContents > div:first-child,
#information .wrapWidth{
    position: relative;
}
#epi h2,
#epi h1.pageHeading,
#dlContents h2,
#dlContents h1.pageHeading,
#information h2,
#information h1.pageHeading{
    position: relative;
    z-index: 4;
}
#epi .episodesDecor,
#dlContents .contentsDecor{
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    height: clamp(126px, 16vw, 190px);
    margin: clamp(-128px, -8vw, -78px) auto clamp(-18px, -1.2vw, -8px);
    pointer-events: none;
}
#epi .episodesTree,
#epi .episodesPlane,
#epi .episodesCloud,
#dlContents .episodesTree,
#dlContents .episodesPlane,
#dlContents .episodesCloud{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#epi .episodesTree img,
#epi .episodesPlane img,
#epi .episodesCloud img,
#dlContents .episodesTree img,
#dlContents .episodesPlane img,
#dlContents .episodesCloud img{
    display: block;
    width: 100%;
    height: auto;
}
#epi .episodesTreeLarge,
#dlContents .episodesTreeLarge{
    top: 2%;
    left: 1%;
    width: clamp(68px, 9vw, 112px);
    transform: translateX(-120px);
}
#epi .episodesTreeSmall,
#dlContents .episodesTreeSmall{
    top: 32%;
    left: 18%;
    width: clamp(48px, 6.2vw, 76px);
    transform: translateX(-120px);
}
#epi .episodesPlane,
#dlContents .episodesPlane{
    top: -48%;
    right: -10%;
    width: clamp(50px, 6.5vw, 82px);
    transform: translateX(120px);
}
#epi .episodesCloud,
#dlContents .episodesCloud{
    top: 8%;
    right: 3%;
    width: clamp(44px, 6vw, 74px);
    transform: translateX(120px);
}
#dlContents .episodesPlane{
    top: -68%;
}
#dlContents .episodesCloud{
    top: -12%;
}
#epi .episodesDecor.is-active .episodesTreeLarge,
#dlContents .contentsDecor.is-active .episodesTreeLarge{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#epi .episodesDecor.is-active .episodesTreeSmall,
#dlContents .contentsDecor.is-active .episodesTreeSmall{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
#epi .episodesDecor.is-active .episodesPlane,
#dlContents .contentsDecor.is-active .episodesPlane{
    animation: episodes-plane-fly 9s linear 0.08s infinite;
}
#epi .episodesDecor.is-active .episodesCloud,
#dlContents .contentsDecor.is-active .episodesCloud{
    animation: youtube-decor-right-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both, youtube-cloud-float 3.8s ease-in-out 1.22s infinite;
}
#information .informationTitleDecor{
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    height: clamp(168px, 18vw, 250px);
    margin: clamp(-172px, -12vw, -122px) auto clamp(-34px, -2vw, -18px);
    pointer-events: none;
}
#information .infoSun{
    position: absolute;
    top: -14%;
    left: -8%;
    z-index: 2;
    width: clamp(72px, 8vw, 118px);
    opacity: 0;
    transform: translateX(-150%);
}
#information .informationTitleDecor.is-active .infoSun{
    animation: info-sun-move-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#information .infoSun img{
    display: block;
    width: 100%;
    height: auto;
    animation: info-sun-rotate 18s linear infinite;
    transform-origin: 50% 50%;
}
#information .infoBirds{
    position: absolute;
    top: 4%;
    left: 10%;
    z-index: 3;
    width: clamp(72px, 8vw, 116px);
    aspect-ratio: 130 / 82;
}
#information .infoBird{
    position: absolute;
    width: clamp(18px, 2.1vw, 30px);
    aspect-ratio: 24 / 30;
    opacity: 0;
    transform: translateX(-120px);
}
#information .infoBird01{
    top: 42%;
    left: 0;
}
#information .infoBird02{
    top: 4%;
    left: 42%;
}
#information .infoBirdCloud{
    position: absolute;
    top: 126%;
    left: -4%;
    width: 67%;
    aspect-ratio: 45.182 / 20;
    opacity: 0;
    transform: translateX(-140px);
}
#information .infoBirdMotion{
    position: absolute;
    inset: 0;
}
#information .infoBirdCloud img,
#information .infoBird .frame{
    display: block;
    width: 100%;
    height: auto;
}
#information .infoBird .frame{
    position: absolute;
    inset: 0;
    height: 100%;
}
#information .infoBird .frame01{
    animation: flying-frame-01 0.32s steps(1, end) infinite;
}
#information .infoBird .frame02{
    opacity: 0;
    animation: flying-frame-02 0.32s steps(1, end) infinite;
}
#information .infoBirdReverse .frame01{
    animation-name: flying-frame-02;
}
#information .infoBirdReverse .frame02{
    animation-name: flying-frame-01;
}
#information .informationTitleDecor.is-active .infoBird{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}
#information .informationTitleDecor.is-active .infoBird02{
    animation-delay: 0.28s;
}
#information .informationTitleDecor.is-active .infoBirdCloud{
    animation: info-bird-cloud-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both, info-bird-cloud-float 3.2s ease-in-out 1.22s infinite;
}
#information .informationTitleDecor.is-active .infoBirdMotion{
    animation: youtube-bird-float 2.9s ease-in-out 1s infinite;
}
#information .informationTitleDecor.is-active .infoBird02 .infoBirdMotion{
    animation-delay: 1.15s;
}
#information .infoRainbowScene{
    position: absolute;
    top: 34%;
    right: -15%;
    z-index: 3;
    width: clamp(190px, 24vw, 320px);
    aspect-ratio: 320 / 130;
}
#information .informationTitleDecor.is-active .infoRainbowScene{
    animation: info-rainbow-scene-float 4s ease-in-out 2.2s infinite;
}
#information .infoRainbow,
#information .infoCloud{
    position: absolute;
}
#information .infoRainbow{
    left: 16%;
    bottom: 22%;
    width: 68%;
    aspect-ratio: 102 / 46;
    transform-origin: 7% 100%;
    opacity: 0;
    clip-path: polygon(-4% -8%, -4% -8%, -4% 108%, -4% 108%);
}
#information .infoCloud{
    opacity: 0;
    transform: translateX(110px);
}
#information .infoCloudLeft{
    left: 0;
    bottom: 0;
    width: 30%;
    aspect-ratio: 43.8606 / 21.1759;
}
#information .infoCloudRight{
    right: 4%;
    bottom: 8%;
    width: 25%;
    aspect-ratio: 37.2822 / 17.846;
}
#information .infoRainbow img,
#information .infoCloud img{
    display: block;
    width: 100%;
    height: auto;
}
#information .informationTitleDecor.is-active .infoCloudLeft{
    animation: info-cloud-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
#information .informationTitleDecor.is-active .infoCloudRight{
    animation: info-cloud-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}
#information .informationTitleDecor.is-active .infoRainbow{
    animation: info-rainbow-wipe 1.05s cubic-bezier(0.22, 1, 0.36, 1) 1.02s both;
}
#episodes .episodesDecor.is-active .episodesTreeLarge,
#contents .contentsDecor.is-active .episodesTreeLarge{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#episodes .episodesDecor.is-active .episodesTreeSmall,
#contents .contentsDecor.is-active .episodesTreeSmall{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
#episodes .episodesDecor.is-active .episodesPlane,
#contents .contentsDecor.is-active .episodesPlane{
    animation: episodes-plane-fly 9s linear 0.08s infinite;
}
#episodes .episodesDecor.is-active .episodesCloud,
#contents .contentsDecor.is-active .episodesCloud{
    animation: youtube-decor-right-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both, youtube-cloud-float 3.8s ease-in-out 1.22s infinite;
}
@keyframes episodes-plane-fly{
    0%{
        opacity: 1;
        transform: translateX(140px) translateY(0) rotate(0deg);
    }
    45%{
        opacity: 1;
        transform: translateX(-340px) translateY(-6px) rotate(2deg);
    }
    100%{
        opacity: 1;
        transform: translateX(-760px) translateY(0) rotate(0deg);
    }
}
@media screen and (min-width: 960px){
    @keyframes episodes-plane-fly{
        0%{
            opacity: 1;
            transform: translateX(calc(50vw - 270px)) translateY(0) rotate(0deg);
        }
        45%{
            opacity: 1;
            transform: translateX(calc(-10vw - 220px)) translateY(-6px) rotate(2deg);
        }
        100%{
            opacity: 1;
            transform: translateX(calc(-50vw - 560px)) translateY(0) rotate(0deg);
        }
    }
}
#episodes ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1%;
    row-gap: 1%;

    margin-top: clamp(10px, 1.6vw, 24px);
    /* max-width: 500px;
    width: 70%;
    min-width: 250px;
    margin: 0 auto; */
}

#episodes ul li img{
    width: 100%;
    display: block;
}
#episodes .episodesBottomDecor{
    position: relative;
    z-index: 2;
    width: clamp(310px, 42vw, 470px);
    height: clamp(140px, 15vw, 190px);
    margin: clamp(18px, 2.2vw, 30px) auto 0;
    pointer-events: none;
}
#episodes .episodesBottomItem{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#episodes .episodesBottomItem img{
    display: block;
    width: 100%;
    height: auto;
}
#episodes .episodesBookshelf{
    left: 4%;
    bottom: 26%;
    width: 45%;
    transform: translateX(-120px);
}
#episodes .episodesLamp{
    left: 48%;
    top: -3%;
    width: 17%;
    transform: translateX(-120px);
}
#episodes .episodesAna{
    right: 14%;
    bottom: -18%;
    width: 28%;
    transform: translateX(120px);
}
#episodes .episodesBottomDecor.is-active .episodesBookshelf{
    animation: episodes-bottom-left-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#episodes .episodesBottomDecor.is-active .episodesLamp{
    animation: episodes-bottom-left-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
#episodes .episodesBottomDecor.is-active .episodesAna{
    animation: episodes-bottom-right-enter 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}
@keyframes episodes-bottom-left-enter{
    0%{
        opacity: 0;
        transform: translateX(-120px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes episodes-bottom-right-enter{
    0%{
        opacity: 0;
        transform: translateX(120px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@media screen and (max-width: 959px){
    #episodes{
        padding-top: 34px;
        padding-bottom: 62px;
    }
    #episodes .episodesDecor,
    #contents .contentsDecor,
    #epi .episodesDecor,
    #dlContents .contentsDecor{
        width: min(100%, 500px);
        height: clamp(90px, 26vw, 126px);
        margin-top: clamp(-104px, -22vw, -62px);
        margin-bottom: -12px;
    }
    #episodes .episodesTreeLarge,
    #contents .episodesTreeLarge,
    #epi .episodesTreeLarge,
    #dlContents .episodesTreeLarge{
        top: -8%;
        left: 1%;
        width: clamp(54px, 15vw, 72px);
    }
    #episodes .episodesTreeSmall,
    #contents .episodesTreeSmall,
    #epi .episodesTreeSmall,
    #dlContents .episodesTreeSmall{
        top: 22%;
        left: 16%;
        width: clamp(40px, 11vw, 56px);
    }
    #episodes .episodesPlane,
    #contents .episodesPlane,
    #epi .episodesPlane,
    #dlContents .episodesPlane{
        top: -62%;
        right: -12%;
        width: clamp(42px, 12vw, 58px);
    }
    #episodes .episodesCloud,
    #contents .episodesCloud,
    #epi .episodesCloud,
    #dlContents .episodesCloud{
        top: 0;
        right: 3%;
        width: clamp(38px, 11vw, 56px);
    }
    #contents .episodesPlane,
    #dlContents .episodesPlane{
        top: -82%;
    }
    #contents .episodesCloud,
    #dlContents .episodesCloud{
        top: -20%;
    }
    #information .informationTitleDecor{
        width: min(100%, 500px);
        height: clamp(154px, 42vw, 220px);
        margin-top: clamp(-128px, -30vw, -88px);
        margin-bottom: -10px;
    }
    #information .infoSun{
        top: 4%;
        left: 12%;
        width: clamp(56px, 15vw, 78px);
    }
    #information .infoBirds{
        top: 40%;
        left: 10%;
        width: clamp(64px, 18vw, 92px);
    }
    #information .infoRainbowScene{
        top: 52%;
        right: 0;
        width: clamp(150px, 44vw, 230px);
    }
    #episodes ul{
        margin-top: 12px;
    }
    #episodes .episodesBottomDecor{
        width: min(78%, 360px);
        height: clamp(118px, 31vw, 154px);
        margin-top: 16px;
    }
    #episodes .episodesBookshelf{
        left: 0;
        width: 47%;
    }
    #episodes .episodesLamp{
        left: 43%;
        width: 18%;
    }
    #episodes .episodesAna{
        right: 8%;
        bottom: -16%;
        width: 31%;
    }
}

/* グッズ */

#goods{
    position: relative;
    overflow: hidden;
    padding-top: clamp(28px, 3vw, 52px);
}
#goods h2{
    position: relative;
    top: clamp(76px, 8vw, 126px);
    z-index: 4;
    padding-top: 0;
}
#goods .goodsDecor{
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    height: clamp(104px, 15vw, 184px);
    margin: clamp(-118px, -8vw, -76px) auto clamp(12px, 2vw, 28px);
    padding-top: clamp(16px, 2vw, 24px);
    box-sizing: border-box;
    pointer-events: none;
}
#goods .goodsDecorLeft,
#goods .goodsDecorRight{
    position: absolute;
    inset: 0;
}
#goods .youtubeCloud,
#goods .youtubeBird,
#goods .youtubeTree{
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
}
#goods .youtubeCloud img,
#goods .youtubeTree img{
    display: block;
    width: 100%;
    height: auto;
}
#goods .youtubeCloud01{
    top: 14%;
    left: 5%;
    width: clamp(42px, 6vw, 72px);
    transform: translateX(-120px);
}
#goods .youtubeCloud02{
    top: -2%;
    left: 26%;
    width: clamp(44px, 6vw, 74px);
    transform: translateX(-120px);
}
#goods .youtubeBird{
    width: clamp(19px, 2.56vw, 30px);
    aspect-ratio: 24 / 30;
}
#goods .youtubeBird01{
    top: 8%;
    left: 18%;
    transform: translateX(-120px);
}
#goods .youtubeBird02{
    top: 30%;
    left: 27%;
    transform: translateX(-120px);
}
#goods .youtubeBirdMotion{
    position: absolute;
    inset: 0;
    animation: youtube-bird-float 2.9s ease-in-out 1s infinite;
}
#goods .youtubeBird02 .youtubeBirdMotion{
    animation-delay: 1.15s;
}
#goods .youtubeBird .frame{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
#goods .youtubeBird .frame01{
    animation: flying-frame-01 0.32s steps(1, end) infinite;
}
#goods .youtubeBird .frame02{
    opacity: 0;
    animation: flying-frame-02 0.32s steps(1, end) infinite;
}
#goods .youtubeBird02 .frame01{
    animation-name: flying-frame-02;
}
#goods .youtubeBird02 .frame02{
    animation-name: flying-frame-01;
}
#goods .youtubeTreeLeft{
    top: 52%;
    left: 12%;
    width: clamp(58px, 7.4vw, 94px);
    transform: translateX(-120px);
}
#goods .youtubeTreeLarge{
    top: clamp(10px, 1.3vw, 18px);
    right: 18%;
    width: clamp(78px, 10vw, 128px);
    transform: translateX(120px);
}
#goods .youtubeTreeSmall{
    top: 30%;
    right: 5%;
    width: clamp(58px, 7.4vw, 94px);
    transform: translateX(120px);
}
#goods .goodsDecor.is-active .youtubeCloud01{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both, youtube-cloud-float 3.4s ease-in-out 0.8s infinite;
}
#goods .goodsDecor.is-active .youtubeCloud02{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both, youtube-cloud-float 3.9s ease-in-out 0.92s infinite reverse;
}
#goods .goodsDecor.is-active .youtubeBird01{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}
#goods .goodsDecor.is-active .youtubeBird02{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}
#goods .goodsDecor.is-active .youtubeTreeLeft{
    animation: youtube-decor-left-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
#goods .goodsDecor.is-active .youtubeTreeLarge{
    animation: youtube-decor-right-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
#goods .goodsDecor.is-active .youtubeTreeSmall{
    animation: youtube-decor-right-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}
#goods ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: clamp(48px, 5vw, 78px);

    column-gap: 1%;
    row-gap: 1%;

    /* max-width: 500px;
    width: 70%;
    min-width: 250px;
    margin: 0 auto; */
}
#goods ul li{
    text-align: center;
    background-color: #fff;
}
#goods ul li .title{
    font-weight: 500;
}
#goods .goodsBorder{
    width: 70%;
    margin: 0 auto;
}
@media screen and (max-width: 959px){
    #goods{
        padding-top: 3%;
    }
    #goods ul{
        margin-top: clamp(36px, 10vw, 56px);
    }
    #goods .goodsDecor{
        width: min(100%, 500px);
        height: clamp(104px, 29vw, 154px);
        margin-top: clamp(-66px, -14vw, -42px);
        padding-top: clamp(14px, 4vw, 22px);
    }
    #goods .youtubeCloud01{
        left: 1%;
        width: clamp(38px, 11vw, 56px);
    }
    #goods .youtubeCloud02{
        left: 22%;
        width: clamp(40px, 12vw, 58px);
    }
    #goods .youtubeBird{
        width: clamp(22px, 7vw, 32px);
    }
    #goods .youtubeBird01{
        left: 15%;
    }
    #goods .youtubeBird02{
        left: 26%;
    }
    #goods .youtubeTreeLeft{
        left: 8%;
        width: clamp(42px, 12vw, 62px);
    }
    #goods .youtubeTreeLarge{
        right: 18%;
        width: clamp(66px, 18vw, 92px);
    }
    #goods .youtubeTreeSmall{
        right: 0;
        width: clamp(50px, 14vw, 72px);
    }
    #goods .goodsBorder{
        width: 90%;
    }
}
/* ダウンロード */
#contents{
    position: relative;
    overflow: hidden;
}
@media screen and (min-width: 960px){
    #contents{
        padding-top: clamp(72px, 6vw, 110px);
    }
}
#contents h2{
    position: relative;
    z-index: 3;
}
#contents ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#contents ul li{
    width: 32%;
    text-align: center;
}

/* footer */
footer{
    overflow: hidden;
}
.footerCityMotion{
    position: relative;
    width: 100%;
    height: clamp(330px, 36vw, 520px);
    margin-top: -6px;
    pointer-events: none;
    overflow: visible;
}
.footerDance{
    position: absolute;
    left: 50%;
    bottom: clamp(196px, 19vw, 268px);
    z-index: 5;
    width: clamp(132px, 12.96vw, 195.6px);
    opacity: 0;
    transform: translateX(55vw);
    will-change: transform, opacity;
}
.footerDanceFlip,
.footerDanceBody{
    display: block;
    transform-origin: center bottom;
    will-change: transform;
}
.footerDanceBody img,
.footerOto img{
    display: block;
    width: 100%;
    height: auto;
}
.footerOto{
    position: absolute;
    display: block;
    opacity: 0;
    transform: translate(var(--oto-x-start, 0), var(--oto-y-start, 8px)) rotate(var(--oto-rotate-start, 0deg)) scale(0.82);
    will-change: transform, opacity;
}
.footerOto01{
    top: 18%;
    left: -34%;
    width: clamp(12px, 1.2vw, 18px);
    --oto-x-mid: -5px;
    --oto-y-mid: -12px;
    --oto-x-end: -12px;
    --oto-y-end: -26px;
    --oto-rotate-start: -18deg;
    --oto-rotate-mid: 12deg;
    --oto-rotate-end: -36deg;
}
.footerOto02{
    top: 28%;
    right: -42%;
    width: clamp(16px, 1.65vw, 24px);
    --oto-x-mid: 8px;
    --oto-y-mid: -10px;
    --oto-x-end: 16px;
    --oto-y-end: -24px;
    --oto-rotate-start: 14deg;
    --oto-rotate-mid: -10deg;
    --oto-rotate-end: 28deg;
}
.footerOto03{
    top: -4%;
    right: 4%;
    width: clamp(10px, 1vw, 15px);
    --oto-x-mid: 3px;
    --oto-y-mid: -14px;
    --oto-x-end: -7px;
    --oto-y-end: -28px;
    --oto-rotate-start: 24deg;
    --oto-rotate-mid: -18deg;
    --oto-rotate-end: 40deg;
}
.footerCity{
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 3.6vw, 48px);
    z-index: 1;
    width: clamp(320px, 48vw, 600px);
    aspect-ratio: 284.66 / 80.44;
    transform: translateX(-50%);
    overflow: visible;
}
.footerCityAsset{
    position: absolute;
    display: block;
    opacity: 0;
    transform: translateY(48%) scaleY(0.08);
    transform-origin: center bottom;
}
.footerCityAsset img,
.footerGround img{
    display: block;
    width: 100%;
    height: auto;
}
.footerCityPart01{ left: 0%; bottom: 1.4%; width: 12.4%; }
.footerCityPart02{ left: 15.5%; bottom: 0.2%; width: 14.3%; }
.footerCityPart03{ left: 32.1%; bottom: 2.8%; width: 13.3%; }
.footerCityPart04{ left: 47.5%; bottom: 0%; width: 19.9%; }
.footerCityPart05{ left: 70.6%; bottom: 0%; width: 17.2%; }
.footerCityTree{ left: 90%; bottom: 5.5%; width: 10%; }
.footerGround{
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    width: max(170%, 1800px);
    height: clamp(56px, 5.4vw, 78px);
    transform: translateX(-50%);
    overflow: hidden;
}
.footerGround img{
    height: 100%;
    object-fit: contain;
}
.footerCityMotion.is-active .footerCityAsset{
    animation: intro-grow 0.74s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both;
}
.footerCityMotion.is-active .footerCityPart02{ animation-delay: 1.03s; }
.footerCityMotion.is-active .footerCityPart03{ animation-delay: 1.11s; }
.footerCityMotion.is-active .footerCityPart04{ animation-delay: 1.19s; }
.footerCityMotion.is-active .footerCityPart05{ animation-delay: 1.27s; }
.footerCityMotion.is-active .footerCityTree{ animation-delay: 1.37s; }
.footerCityMotion.is-active .footerDance{
    animation: footer-dance-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}
.footerCityMotion.is-active .footerDanceFlip{
    animation: footer-dance-flip 1.6s steps(1, end) 1.26s infinite;
}
.footerCityMotion.is-active .footerDanceBody{
    animation: footer-dance-swing 1.6s steps(1, end) 1.26s infinite;
}
.footerCityMotion.is-active .footerOto01{
    animation: footer-oto-float 2.1s ease-in-out 1.48s infinite;
}
.footerCityMotion.is-active .footerOto02{
    animation: footer-oto-float 2.25s ease-in-out 1.74s infinite;
}
.footerCityMotion.is-active .footerOto03{
    animation: footer-oto-float 2s ease-in-out 2.02s infinite;
}
@keyframes footer-dance-enter{
    0%{
        opacity: 0;
        transform: translateX(55vw);
    }
    100%{
        opacity: 1;
        transform: translateX(-50%);
    }
}
@keyframes footer-dance-flip{
    0%,
    49.9%{
        transform: scaleX(1);
    }
    50%,
    100%{
        transform: scaleX(-1);
    }
}
@keyframes footer-dance-swing{
    0%,
    50%,
    100%{
        transform: rotate(0deg);
    }
    16.6%,
    66.6%{
        transform: rotate(10deg);
    }
    33.3%,
    83.3%{
        transform: rotate(-10deg);
    }
}
@keyframes footer-oto-float{
    0%,
    100%{
        opacity: 0;
        transform: translate(var(--oto-x-start, 0), var(--oto-y-start, 8px)) rotate(var(--oto-rotate-start, 0deg)) scale(0.82);
    }
    24%,
    68%{
        opacity: 1;
        transform: translate(var(--oto-x-mid, 0), var(--oto-y-mid, 0)) rotate(var(--oto-rotate-mid, 0deg)) scale(1);
    }
    86%{
        opacity: 0;
        transform: translate(var(--oto-x-end, 0), var(--oto-y-end, -10px)) rotate(var(--oto-rotate-end, 0deg)) scale(0.92);
    }
}
.footerSns{
    text-align: center;
    padding: 3% 0;
}
.footerSns ul{
    display: flex;
    justify-content: center;
    width: 30%;
    margin: 2% auto;

}
.footerSns ul li{
    width: 28%;
}
.footerSns .txtFooter{
    font-weight: 600;
}
.footerSns .caption{
    font-size: 70%;
}

.ana_foot{
    margin-bottom: 20px;
}
@media screen and (max-width: 959px){
    .footerCityMotion{
        height: clamp(430px, 118vw, 620px);
    }
    .footerDance{
        bottom: clamp(184px, 50vw, 270px);
        width: clamp(187.2px, 48vw, 259.2px);
    }
    .footerCity{
        bottom: clamp(20px, 7vw, 36px);
        width: clamp(280px, 76vw, 420px);
    }
    .footerGround{
        bottom: 0;
        width: max(185%, 980px);
        height: clamp(44px, 12vw, 62px);
    }
    .footerOto01{
        top: 24%;
        left: -22%;
        width: clamp(18px, 5.8vw, 29px);
    }
    .footerOto02{
        top: 34%;
        right: -28%;
        width: clamp(24px, 7.6vw, 38px);
    }
    .footerOto03{
        top: 4%;
        right: 2%;
        width: clamp(16px, 5vw, 25px);
    }
}