@charset "utf-8";
/* CSS Document */
/* =========================================================
     TOP
========================================================= */
#donpen_site h1 {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}
#donpen_site h1 img {
    max-height: 120px;
	margin: auto;
    
}

#donpen_site {
    font-size: 20px;
      font-family: "Yusei Magic", sans-serif;
      font-weight: 400;
      font-style: normal!important;
}
/* クリックアニメ
--------------------------------------------------------- */
#mv_click {
    position: fixed;
    top: 0;
    left: 200px;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 1000000000;
    pointer-events: none;
}

#mv_click .leaf {
	margin-left: -30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	animation: animate-leaf 6s linear;
	z-index: -1;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: rotate(0);
  }

  10% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(1080deg);
  }
}

/* ===== ドンペン大量発生 ===== */
#mv_click .leaf.leaf_5 {
    margin-top: -200px;
	margin-left: -200px;
	animation: animate-leaf_5 0.3s linear;
    animation-fill-mode: forwards;
}
@keyframes animate-leaf_5 {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


/* ===== ドンペン大量発生 ===== */
#mv_click .leaf.leaf_5.down {
	animation: animate-leaf_5_1 2s linear;
    animation-fill-mode: forwards;
}
@keyframes animate-leaf_5_1 {
    0% {
        margin-top: -200px;
        transform: scale(1);
        transform: rotate(0);
    }
    100% {
        margin-top: 100vh;
        transform: rotate(360deg);
    }
}



#mv_click_inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 102vh;
}
#mv_aria {
    background: #0068b7;
    min-height: 45vw;
    position: relative;
}

#mv_aria #donpen_eye ,
#mv_aria #donpen_hat {
    position: absolute;
    top: 80px;
    left: -50%;
    right: -50%;
    margin: auto;
    width: 100%;
    height: 49vw;
    background: url(../img/top/MV_face.svg?1) no-repeat top center / 115%;
    z-index: 10;
}


#eye_group_img {
    position: absolute;
    left: 0;
    right: 0;
    top: 9%;
    display: flex;
    justify-content: space-between;
}

#eye_group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 43%;
    height: 35vw;
    position: relative;
}
#eye_left {
    width: 28.5%;
    height: 35vw;
}
#eye_right {
    width: 28.5%;
    height: 35vw;
}

#donpen_left_eye,
#donpen_right_eye {
    width: 46%;
    height: 0;
    padding-top: 57%;
    border-radius: 100%;
    z-index: 99;
    /*background: rgba(0, 0, 0, 0.3);*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0!important;
}
#donpen_right_eye {
    position: relative;
    
}

#donpen_right_eye img {
    position: absolute;
    width: 27%;
    left: calc(50% + 12.0%);
    right: auto;
    top: -28%!important;
    bottom: 0;
    margin: auto;
    display: block;
    transition: 0.8s;
}
#donpen_left_eye {
    position: relative;
}
#donpen_left_eye img {
    position: absolute;
    width: 27%;
    left: calc(50% + 13.0%);
    right: auto;
    top: -28%!important;
    bottom: 0;
    margin: auto;
    display: block;
    transition: 0.8s;
}


.go_left #donpen_right_eye img {
    left:  18.0%;
}
.go_left #donpen_left_eye img {
    left: 12.0%;
}

.go_center #donpen_right_eye img {
    left: 25.0%;
}
.go_center #donpen_left_eye img {
    left:  calc(50% + 3.0%);
}


#mv_aria #donpen_eye {
    width: 75%;
    background: url(../img/top/MV_face_eye.svg) no-repeat top center / 153.5%;
    transition: 1s;
    height: 44vw;
}






#mv_banner {
	position: absolute;
	right: 2%;
	bottom: 50px;
	width: 20%;
	z-index: 11;
}
#mv_banner a {
	display: block;
	background: #fff;
	border-radius: 20px;
    animation-name: mv_banner;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4s;
	transition: 0.4s;
    overflow: hidden;
}
#mv_banner a:hover {
	background: #FFF000;
}
#mv_banner a img {
}
@keyframes mv_banner {
    0% {
        transform: translate(0,5%);
    }
    100% {
        transform: translate(0,-5%);
    }
}
/*
#mv_aria #donpen_face {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 750px;
    height: 750px;
    background: url(../img/top/MV_face.svg) no-repeat center center / contain;
    z-index: 1;
}
*/
/* news
--------------------------------------------------------- */
.news_clown {
    background: #0068b7;   
    margin: 0 -10px -10px;
	position: relative;
	z-index: 10;
}
#news_clown_img {
	pointer-events: none;
	z-index: 1;
	position: relative;
}
#mv_donko {
    width: 17%;
	height: 100%;
    position: absolute;
    top: -54%;
    left: 4%;
    transform: rotate(-15deg);
	overflow: hidden;
}
#mv_donko img {
	transition: 0.4s;
	transform: translateY(0);
}
#mv_donko:hover img {
	transform: translateY(54%);
	transition: 0.2s;
}

#mv_donpen {
    width: 17%;
	height: 100%;
    position: absolute;
    top: -54%;
    right: 4%;
    transform: rotate(15deg);
	overflow: hidden;
}
#mv_donpen img {
	transition: 0.4s;
	transform: translateY(0);
}
#mv_donpen:hover img {
	transform: translateY(54%);
	transition: 0.2s;
}

/*
#news_aria::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 28%;
    background: url(../img/top/story_clown_1.svg) no-repeat top center / 100% ;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}
#news_aria::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 10%;
    background: #0068b7;
    position: absolute;
    top: -10%;
    left: 0;
    right: 0;
    margin: auto;
}*/
#news_aria {
    padding: 0;
    position: relative;
    margin: -6% 0 70px;
    z-index: 10;
}
#news_aria .news_box {
    max-width: 1000px;
    box-sizing: border-box;
    padding: 0 100px;
    margin: auto;
}
#news_aria dl.news {
    display: flex;
    width: 100%;
    margin: auto;
    position: relative;
    opacity: 0;
    
}
#news_aria dl.news:not(:last-of-type) {
    border-bottom: 1px dotted #86BBF4;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
#news_aria dl.news dt ,
#news_aria dl.news dd {
    font-size: 16px;
}
#news_aria dl.news dt {
    width: 150px;
    position: relative;
    padding-left: 26px;
    box-sizing: border-box;
    
}
#news_aria dl.news dt::before {
    content: "";
    background: url(../img/top/profile_dot_donpen.svg) no-repeat center center / contain;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 5px;
}
#news_aria dl.news dd {
    width: calc( 100% - 150px );
}
#news_aria dl.news dd a {
	text-decoration: underline;
	color: #0068b7;
}
#news_aria dl.news dd a:hover {
	text-decoration: none;
}
/* story_aria
--------------------------------------------------------- */
#story_aria {
    padding: calc(22% - 50px ) 0 100px;
    background: #E4D1E5 url(../img/top/story_clown_2.svg) no-repeat top center / 100% ;
    position: relative;
}
#story_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#story_box > div {
}
#story_box .text_box {
    width: 50%;
    padding: 0 100px 0 5%;
    box-sizing: border-box;
    font-size: 24px;
    text-shadow: #E4D1E5 2px 0px 0px, #E4D1E5 -2px 0px 0px, 
                #E4D1E5 0px -2px 0px, #E4D1E5 0px 2px 0px, 
                #E4D1E5 2px 2px 0px, #E4D1E5 -2px 2px 0px,
                #E4D1E5 2px -2px 0px, #E4D1E5 -2px -2px 0px,
                #E4D1E5 1px 2px 0px, #E4D1E5 -1px 2px 0px,
                #E4D1E5 1px -2px 0px, #E4D1E5 -1px -2px 0px,
                #E4D1E5 2px 1px 0px, #E4D1E5 -2px 1px 0px,
                #E4D1E5 2px -1px 0px, #E4D1E5 -2px -1px 0px,
                #E4D1E5 1px 1px 0px, #E4D1E5 -1px 1px 0px,
                #E4D1E5 1px -1px 0px, #E4D1E5 -1px -1px 0px;
}
#story_box .text_box p:not(:last-of-type) {
    margin-bottom: 0.5em;
}
#story_box .text_box h1 {
    text-align: left;
    margin-top: -15%;
}
#story_box .img_box {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: left;
}
#story_box .img_box .anim_left {
    animation-name: moon_donpen_l;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 12s;
}
#story_box .img_box img {
    width: 77%;
    margin-top: -5%;
    margin-right: 3%;
    animation-name: moon_donpen;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4s;
}


@keyframes moon_donpen {
    0% {
        transform: translate(0,4%);
    }
    100% {
        transform: translate(0,-4%);
    }
}
@keyframes moon_donpen_l {
    0% {
        transform: translate(-8%,0);
    }
    100% {
        transform: translate(8%,0);
    }
}
/* デコレーション */
#star_01 {
    position: absolute;
    width: 5%;
    left: 4%;
    top: 0;
    animation-name: star_01;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1.8s;
    animation-duration: 5s;
}

@keyframes star_01 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.6) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_02 {
    width: 9%;
    position: absolute;
    bottom: -70px;
    left: 2%;
    animation-name: star_02;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 12s;
}
@keyframes star_02 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    12.5% {
        transform: scale(0.7) rotate(45deg);
    }
    25% {
        transform: scale(1) rotate(90deg);
    }
    37.5% {
        transform: scale(0.7) rotate(135deg);
    }
    50% {
        transform: scale(1) rotate(180deg);
    }
    62.5% {
        transform: scale(0.7) rotate(225deg);
    }
    75% {
        transform: scale(1) rotate(270deg);
    }
    87.5% {
        transform: scale(0.7) rotate(315deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_03 {
    width: 2%;
    position: absolute;
    bottom: 0;
    left: 14%;
    /*transform: rotate(10deg);*/
    animation-name: star_03;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 6s;
}
@keyframes star_03 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.3) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_04 {
    position: absolute;
    width: 8%;
    left: -15%;
    right: 0;
    margin: auto;
    top: -43%;
    z-index: 1;
    /*transform: rotate(15deg);*/
    animation-name: star_04;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 6s;
}
@keyframes star_04 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(0.5) rotate(90deg);
    }
    50% {
        transform: scale(1) rotate(180deg);
    }
    75% {
        transform: scale(0.5) rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_05 {
    position: absolute;
    width: 3%;
    left: 0;
    right: 0;
    margin: auto;
    top: -13%;
    z-index: 1;
    /*transform: rotate(-25deg);*/
    animation-name: star_05;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;
}
@keyframes star_05 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.5) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_06 {
    width: 2%;
    position: absolute;
    bottom: -40px;
    left: -10%;
    right: 0;
    margin: auto;
    animation-name: star_06;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;
}
@keyframes star_06 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.3) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_07 {
    position: absolute;
    width: 2%;
    right: 1.5%;
    top: -31%;
    z-index: 1;
    /*transform: rotate(-25deg);*/
    animation-name: star_07;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 6s;
}
@keyframes star_07 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.5) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_08 {
    position: absolute;
    width: 3%;
    right: 3%;
    bottom: -13%;
    top: 0;
    margin: auto;
    transform: rotate(45deg);
    animation-name: star_08;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 3s;
}

@keyframes star_08 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.3) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_09 {
    width: 3.5%;
    position: absolute;
    bottom: -75px;
    right: 38%;
    margin: auto;
    animation-name: star_09;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 5s;
}

@keyframes star_09 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(0.5) rotate(90deg);
    }
    50% {
        transform: scale(1) rotate(180deg);
    }
    75% {
        transform: scale(0.5) rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#star_10 {
    width: 2%;
    position: absolute;
    top: -15%;
    left: 9%;
    /* transform: rotate(10deg); */
    animation-name: star_10;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;
}
@keyframes star_10 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.5) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
#shop_01 {
    width: 400px;
    position: absolute;
    right: 5%;
    bottom: -20px;
}

/* character_aria donpen
--------------------------------------------------------- */
#character_aria {
    
}


.character_ttl_text {
    padding-top: 5vw;
    animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
}
#character_aria_donpen .character_ttl_text {
    width: 780%;
  	animation: scrollAnime 65s linear infinite;
}

#character_aria_donpen .character_ttl_text img {
    flex-shrink: 0;
    white-space: nowrap;
    width: 23.25%;
    margin-right: 0.75%;
    margin-bottom: -2px;
}
#character_aria_donko .character_ttl_text {
    width: 660%;
  	animation: scrollAnime 55s linear infinite;
}
#character_aria_donko .character_ttl_text img {
    flex-shrink: 0;
    white-space: nowrap;
    width: 23.25%;
    margin-right: 0.75%;
    margin-bottom: -2px;
}

@keyframes scrollAnime {
    0% { transform: translateX(0)}
  100% { transform: translateX(-50%)}
}
/*
#character_aria_donpen .character_ttl_text {
    width: 4620px;
  	animation: scrollAnime 46.2s linear infinite;
}
#character_aria_donpen .character_ttl_text img {
    flex-shrink: 0;
    white-space: nowrap;
    height: 110px;
    width: 48.7%;
    margin-right: 1.3%;
    margin-bottom: -2px;
}
#character_aria_donko .character_ttl_text {
    width: 3852px;
  	animation: scrollAnime 38.5s linear infinite;
}
#character_aria_donko .character_ttl_text img {
    flex-shrink: 0;
    white-space: nowrap;
    height: 110px;
    width: 48.7%;
    margin-right: 1.3%;
    margin-bottom: -2px;
}

@keyframes scrollAnime {
    0% { transform: translateX(0)}
  100% { transform: translateX(-50%)}
}
/*
#character_aria_donpen.character_aria .character_ttl_text {
    padding-top: 5vw;
    width: 200%;
  	animation: scrollAnime 34s linear infinite;
    display: flex;
}
#character_aria_donpen.character_aria .character_ttl_text img {
    width: 23%;
    display: inline-block;
    margin-right: 2%;
}

#character_aria_donko.character_aria .character_ttl_text {
    padding-top: 5vw;
    width: 166%;
  	animation: scrollAnime 34s linear infinite;
    display: flex;
}
#character_aria_donko.character_aria .character_ttl_text img {
    width: 23%;
    display: inline-block;
    margin-right: 2%;
}
@keyframes scrollAnime {
    0% { transform: translateX(0)}
  100% { transform: translateX(-49%)}
}

*/
.character_aria .character_profile {
    background: #86BBF4;
    padding: 0 5vw 0;
    margin-top: -2px;
}
.character_aria .character_line {
    height: 2vw;
    border-top: 2vw solid #fff;
    background: #86BBF4;
}

.character_aria .character_profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.character_aria .character_profile .text_box {
    width: 50%;
    margin: 30px 0 50px;
}

.character_aria .character_profile .img_box {
    width: 50%;
    text-align: center;
    margin: -2.5vw 0;
    position: relative;
    z-index: 1;
}
.character_aria .character_profile .img_box img {
    width: 70%;
}
.character_aria .character_profile .img_box img {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 2s;
    transform-origin: center bottom 15px;
}
#character_aria_donpen.character_aria .character_profile .img_box img {
    animation-name: anim_donpen_prof;
}

@keyframes anim_donpen_prof {
    0% { transform: rotate(5deg); }
    49.9%{ transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    99.9% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

.character_aria .character_profile .text {
    background: #fff;
    padding: 30px;
    border-radius: 1.5vw;
}

.character_aria img.character_name {
    height: 200px;
    margin-bottom: 30px;
    margin: 0 auto 20px;
    display: block;
}
.character_aria dl.profile_dl {
    display: flex;
    flex-wrap: wrap;
}
.character_aria dl.profile_dl:not(:last-of-type) {
    border-bottom: 1px dotted #86BBF4;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.character_aria dl.profile_dl dt  {
    width: 120px;
    position: relative;
    padding-left: 26px;
    box-sizing: border-box;
}
.character_aria dl.profile_dl dt::before {
    content: "";
    background: url(../img/top/profile_dot_donpen.svg) no-repeat center center / contain;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 2px;
}
.character_aria dl.profile_dl dd  {
    width: calc( 100% - 120px );
}

/* character_aria donko
--------------------------------------------------------- */

#character_aria_donko.character_aria .character_line ,
#character_aria_donko.character_aria .character_profile {
    background: #F8CBD9;
}
#character_aria_donko.character_aria dl.profile_dl:not(:last-of-type) {
    border-bottom: 1px dotted #F8CBD9;
}
#character_aria_donko.character_aria .character_profile { 
    flex-direction: row-reverse;
}
#character_aria_donko.character_aria .character_line {
    border-bottom: 2vw solid #fff;
}

#character_aria_donko.character_aria dl.profile_dl dt::before {
    background-image: url(../img/top/profile_dot_donko.svg);
}
#character_aria_donko.character_aria .character_profile .img_box img {
    animation-name: anim_donko_prof;
}
@keyframes anim_donko_prof {
    0% { transform: rotate(-7deg); }
    49.9%{ transform: rotate(-7deg); }
    50% { transform: rotate(3deg); }
    99.9% { transform: rotate(3deg); }
    100% { transform: rotate(-7deg); }
}



/* zukan_aria
--------------------------------------------------------- */
#zukan_aria {
    background: #0068B6 url(../img/top/pattern_start.png) repeat top center;
    text-align: center;
    background-attachment: fixed;
}

#zukan_aria .slide_item {
    display: flex;
    width: 400%;
  	animation: scrollAnime_zukan 150s linear infinite;
    padding: 30px 0;
}
@keyframes scrollAnime_zukan {
    0% { transform: translateX(0)}
  100% { transform: translateX(-50%)}
}
#zukan_aria .slide_item .item {
    width: calc(5% - 30px) ;
    height: 0;
    padding-top: calc(5% - 30px) ;
    border: 0.25vw solid #000;
    background: #cdf4f2;
    background: #fff;
    position: relative;
    box-sizing: border-box;
    margin: 0 15px;
    border-radius: 20px;
    overflow: hidden;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 6s;
}
#zukan_aria .slide_item .item img {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#zukan_aria .slide_item .item:nth-child(odd) {
    animation-name: zukan_slide_item_odd;
}
@keyframes zukan_slide_item_odd {
    0% {
        transform: translate(0,30px);
    }
    100% {
        transform: translate(0,-30px);
    }
}
#zukan_aria .slide_item .item:nth-child(even) {
    animation-name: zukan_slide_item_even;
}
@keyframes zukan_slide_item_even {
    0% {
        transform: translate(0,-30px);
    }
    100% {
        transform: translate(0,30px);
    }
}

.button_yellow {
    width: 400px;
    margin: 60px auto 0;
    padding: 2px;
    border-radius: 100px;
    box-sizing: border-box;
    background: #000;
}
.button_yellow a {
    height: 80px;
    display: flex;
    background: #FFF000;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 100px;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.color_random_1 {
    background-color: #fddee7!important;
}
.border-color_1 {
    border-color: #fddee7!important;
}
.color_random_2 {
    background-color: #fffcbe!important;
}
.border-color_2 {
    border-color: #fffcbe!important;
}
.color_random_3 {
    background-color: #ebdefd!important;
}
.border-color_3 {
    border-color: #ebdefd!important;
}
.color_random_4 {
    background-color: #def0fd!important;
}
.border-color_4 {
    border-color: #def0fd!important;
}
.color_random_5 {
    background-color: #e0fdde!important;
}
.border-color_5 {
    border-color: #e0fdde!important;
}
.color_random_6 {
    background-color: #fdeade!important;
}
.border-color_6 {
    border-color: #fdeade!important;
}
.color_random_7 {
    background-color: #fddefd!important;
}
.border-color_7 {
    border-color: #fddefd!important;
}
.color_random_8 {
    background-color: #defdf8!important;
}
.border-color_8 {
    border-color: #defdf8!important;
}
.color_random_9 {
    background-color: #fddede!important;
}
.border-color_9 {
    border-color: #fddede!important;
}
.color_random_10 {
    background-color: #defdf3!important;
}
.border-color_10 {
    border-color: #defdf3!important;
}

/* goods_aria
--------------------------------------------------------- */
#goods_aria {
    overflow: hidden;
    position: relative;
}
#goods_box::before {
    content: "";
    width: 200%;
    height: 200%;
    display: block;
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    margin: auto;
    transform: rotate(-15deg);
    background: #a7d6f3 url(../img/top/goods_pattern.png) repeat top center / 25% ;
	background-attachment: fixed;
    z-index: -1000;
}
#goods_decoration_1 {
    width: 150px;
    position: absolute;
    top: 97px;
    left: -725px;
    right: 0;
    margin: auto;
    
    animation-name: goods_decoration_1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 2s;
}
@keyframes goods_decoration_1 {
    0% {
        transform: rotate(-15deg);
    }
    49.9% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(15deg);
    }
    99.9% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-15deg);
    }
}
#goods_decoration_2 {
    width: 100px;
    position: absolute;
    top: 125px;
    left: 0;
    right:  -700px;
    margin: auto;
    animation-name: goods_decoration_2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 2s;
}
@keyframes goods_decoration_2 {
    0% {
        transform: rotate(15deg);
    }
    49.9% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    99.9% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(15deg);
    }
}
ul.goods_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.goods_list li {
    width: calc((100% - 50px) / 5);
    margin-bottom: 10px;
    opacity: 0;
}
ul.goods_list li a {
    display: block;
    height: 0;
    width: 100%;
    padding-top: 100%;
    background: #fff;
    border-radius: 10px;
    position: relative;
}
ul.goods_list li img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-height: 80%;
    max-width: 80%;
    margin: auto;
}
ul.goods_list li.button a {
    background: #FFF000 url(../img/top/goods_button_foot.svg) center center / cover;
}
ul.goods_list li.button a .button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* sns_aria
--------------------------------------------------------- */
#sns_box {
    display: flex;
    justify-content: center;
    background: #e4d1e5 url(../img/top/pattern_start.png) repeat top center / 200px;
    background-attachment: fixed;
    align-items: center;
}
#sns_box h1 img {
    height: 80px;
}
#sns_box > div {
    width: 50%;
    box-sizing: border-box;
}
#sns_box > div.left_box {
}
#sns_box > div.right_box {
}
.fukidashi {
    position: relative;
    width: 80%;
    padding: 50px 30px ;
    border: 4px solid #333333;
    background: #fff;
    box-sizing:border-box;
    border-radius: 100px;
    margin: auto;
}
.fukidashi::after {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 30px;
    height: 4px;
    box-sizing: border-box;
    background-color: #333333;
    box-shadow: 0 3px 0 #ffffff, 0 -3px 0 #ffffff; /* 背景色と同じ色を指定 */
    rotate: 50deg;
}

#sns_box img.donko{
    animation-name: donko_jump;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 5s;
}

@keyframes donko_jump {
    0% { transform: translate(0, 0px); }
    44% { transform: translate(0, 0px); }
    46% { transform: translate(0px, -20px); }
    48% { transform: translate(0, 0px); }
    50% { transform: translate(0px, -20px); }
    52% { transform: translate(0, 0px); }
    54% { transform: translate(0px, -20px); }
    56% { transform: translate(0px, 0px); }
    
    100% { transform: translate(0px, 0px); }
}
a.yawaraka_button:hover .fukidashi {
    display: block;
    animation: yawaraka_button 1s infinite ;
}

@keyframes yawaraka_button {
    0% {
        transform: scale(1, 1);
    }
    5% {
        transform: scale(1, 0.6);
    }
    25% {
        transform: scale(0.8, 1.1);
    }
    100% {
        transform: scale(1, 1);
    }
}

a.yawaraka_button .fukidashi img {
    position: relative;
    z-index: 10;
}
a.yawaraka_button:hover .fukidashi::before {
    border-radius: 300px;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

a.yawaraka_button.button_instagram:hover .fukidashi::before,
a.yawaraka_button.button_tiktok:hover .fukidashi::before {
    background-image: repeating-linear-gradient(
        to bottom right,
        hsl(0deg, 80%, 50%),
        hsl(60deg, 80%, 50%),
        hsl(120deg, 80%, 50%),
        hsl(180deg, 80%, 50%),
        hsl(240deg, 80%, 50%),
        hsl(300deg, 80%, 50%),
        hsl(360deg, 80%, 50%) 50%
    );
    background-size: 1000% 1000%;
    animation: button_tiktok 12s linear 0s infinite;
}

@keyframes button_tiktok {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 500% 500%;
  }
}
/*
a.yawaraka_button.button_instagram:hover .fukidashi::before {
    background-image: repeating-linear-gradient(
        to bottom right,
        transparent,
        #FF0069
    );
    animation: button_instagra 4s linear 0s infinite;
}

@keyframes button_instagra {
  0% {
    background-color: #FFD600;
  }
  20% {
    background-color: #FF7A00;
  }
  40% {
    background-color: #7638FA;
  }
  80% {
    background-color: #D300C5;
  }
  60% {
    background-color: #7638FA;
  }
  100% {
    background-color: #FFD600;
  }
}
*/
/* play_aria
--------------------------------------------------------- */
#play_aria {
    text-align: center;
    background: #a9ddf3;
    position: relative;
}
#play_box {
    padding-bottom: 20px;
}
#play_cloud_1 {
    position: absolute;
    width: 25%;
    left: -5%;
    top: 40px;
    animation-name: play_cloud_1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 3s;
}
@keyframes play_cloud_1 {
    0% {
        transform: translate(0, 4%);
    }
    100% {
        transform: translate(0, -4%);
    }
}
#play_cloud_2 {
    position: absolute;
    width: 35%;
    right: -5%;
    top: 30px;
    animation-name: play_cloud_2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4s;
}
@keyframes play_cloud_2 {
    0% {
        transform: translate(0, -3%);
    }
    100% {
        transform: translate(0, 3%);
    }
}
.play_cloud_sea {
    height: 100px;
    overflow: hidden;
}


ul.play_list {
    display: flex;
    justify-content: space-between;
}
ul.play_list li {
    width: calc(( 100% - 80px ) / 3  );
    opacity: 0;
    
}
ul.play_list li .img_box {
    border-radius: 20px;
    overflow: hidden;
    
}
ul.play_list li .img_box {
    border-radius: 20px;
    overflow: hidden;
}

ul.play_list li .button {
    width: 70%;
    margin: 30px auto 0;
    padding: 2px;
    border-radius: 100px;
    box-sizing: border-box;
    background: #000;
}
ul.play_list li .button a {
    height: 60px;
    display: flex;
    background: #FFF000;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 100px;
    border: 2px solid #fff;
    box-sizing: border-box;
}


/* museum_aria
--------------------------------------------------------- */

#museum_aria {
    background: #FCF4DC;
	position: relative;
}
.museum_item_list  {
    background: #FCF4DC;
}
.museum_item_list .slide_item {
    display: flex;
    width: 7600px;
  	animation: scrollAnime_museum 150s linear infinite;
}
@keyframes scrollAnime_museum {
    0% { transform: translateX(0)}
  100% { transform: translateX(-50%)}
}
.museum_item_list .slide_item .item {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 20px 40px;
    background: #fff;
}
.museum_item_list .slide_item .item img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.museum_item_list .slide_item .item::after {
    content: "";
    display: block;
    width: calc( 100% + 60px );
    height: calc( 100% + 60px );
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    margin: auto;
    background: url(../img/top/museum_frame.svg) no-repeat center center / contain;
}

.museum_item_list .slide_item .item:nth-child(odd) {
    animation-name: museum_slide_item_odd;
}
@keyframes museum_slide_item_odd {
    0% {
        transform: translate(0,30px);
    }
    100% {
        transform: translate(0,-30px);
    }
}
.museum_item_list .slide_item .item:nth-child(even) {
    animation-name: museum_slide_item_even;
}
@keyframes museum_slide_item_even {
    0% {
        transform: translate(0,-30px);
    }
    100% {
        transform: translate(0,30px);
    }
}

#museum_decoration_1 {
	width: 230px;
	position: absolute;
	left: 50px;
	bottom: 30px;
    animation-name: goods_decoration_1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 2s;
	z-index: 2;
}
#museum_decoration_2 {
	width: 230px;
	position: absolute;
	right: 50px;
	bottom: 30px;
    animation-name: goods_decoration_2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 2s;
	z-index: 2;
	
}
.museum_pattern_bg {
    background: url(../img/top/museum_pattern_bg.svg) repeat center center / 80px ;
    border-top: #78beea 15px solid;
    border-bottom: #78beea 100px solid;
    margin-top: 60px;
    margin-bottom: -120px;
}
#museum_aria .button_yellow {
    margin: 50px auto 50px;
}


/* ========================================
     1600px
======================================== */
@media screen and (max-width:1600px){
    .character_aria img.character_name {
        height: 150px;
    }
    #story_box .text_box{
        font-size: 20px;
    }    
}
/* ========================================
     1400px
======================================== */
@media screen and (max-width:1400px){
    #donpen_site {
        font-size: 18px;
    }
    /* MV
    --------------------------------------------------------- */
    #donpen_site h1 {
        margin-bottom: 40px;
    }
    /* MV
    --------------------------------------------------------- */
    #mv_aria #donpen_eye,
    #mv_aria #donpen_hat {
        background-size: 135%;
    }
    #mv_aria {
        min-height: 52vw;
    }
	#mv_banner {
		right: 2%;
		bottom: 0px;
		width: 18%;
	}
    #eye_group_img {
        top: 10.5%;
    }
    #eye_group {
        width: 50.7%;
        height: 50vw;
    }
    #eye_left, 
    #eye_right {
        width: 24.6%;
    }
    /*
    #donpen_left_eye img {
        width: 31%;
        left: calc(50% + 5%);
        top: -8% !important;
    }
    */
    /* news
    --------------------------------------------------------- */
    #news_aria {
        margin: -3% 0 60px;
    }
    /* story
    --------------------------------------------------------- */
    #story_box .img_box img {
        width: 90%;
        margin: auto;
    }
    #story_box .img_box {
        width: 45%;
    }
    #story_box .text_box {
        width: 55%;
        padding: 0 80px 0 4%;
        font-size: 20px;
    }
    #shop_01 {
        width: 350px;
        position: absolute;
        right: 4%;
        bottom: -20px;
    }
    /* character_aria
    --------------------------------------------------------- */
    .character_aria .character_profile {
        padding: 0;
    }
    .character_aria .character_profile .img_box img {
        width: 85%;
    }
    .character_aria .character_profile .text_box {
        width: 60%;
        margin: 30px 0 50px;
        box-sizing: border-box;
        padding: 0 40px 0 80px;
    }
    #character_aria_donko.character_aria .character_profile .text_box {
        padding: 0 80px 0 40px;
    }
	#character_aria_donko.character_aria .character_profile .img_box {
        padding: 0 0 0 80px;
    }
    .character_aria .character_profile .img_box {
        width: 40%;
        margin: -2.5vw 0;
        padding: 0 80px 0 0;
    }
    .character_aria dl.profile_dl:not(:last-of-type) {
        border-bottom: 1px dotted #86BBF4;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .character_aria dl.profile_dl dt {
        width: 100px;
    }
    .character_aria dl.profile_dl dd {
        width: calc(100% - 100px);
    }
    .character_aria img.character_name {
        height: 140px;
    }
	
    /* character_aria
    --------------------------------------------------------- */
	#zukan_aria .slide_item .item {
		width: calc(5% - 20px);
		margin: 0 10px;
	}
	
    /* character_aria
    --------------------------------------------------------- */
    .fukidashi {
        width: 80%;
        padding: 30px 50px;
        border: 4px solid #333333;
    }
    #sns_box h1 img {
        height: 70px;
    }
    /* character_aria
    --------------------------------------------------------- */
	#goods_decoration_1 {
		width: 130px;
		top: 70px;
	}
	#goods_decoration_2 {
		width: 90px;
		top: 88px;
    	right: -680px;
	}
	.fukidashi {
		width: 80%;
		padding: 30px 60px;
	}
}

/* ========================================
     1200px
======================================== */
@media screen and (max-width:1200px){
    /* character_aria
    --------------------------------------------------------- */
    #mv_aria #donpen_eye,
    #mv_aria #donpen_hat {
        background-size: 150%;
    }
    
    #eye_group_img {
        top: 11.3%;
    }
    #eye_group {
        width: 56.3%;
        height: 45vw;
    }
    #eye_left, 
    #eye_right {
        width: 21.8%;
    }
    
    
	#mv_aria {
        min-height: 56vw;
    }
	#sp_mv_banner {
        width: 400px;
        margin: -6% auto 30px;
    }
	#sp_mv_banner a {
		display: block;
		border: 1px solid #333;
		border-radius: 20px;
		padding: 10px;
		box-sizing: border-box;
	}
    
    
    /* character_aria
    --------------------------------------------------------- */
    #news_aria dl.news dt, #news_aria dl.news dd {
        font-size: 14px;
    }
    #news_aria {
        margin: -1% 0 45px;
    }
    #news_aria dl.news dt {
        width: 140px;
    }
    #news_aria dl.news dd {
        width: calc(100% - 140px);
    }
    /* character_aria
    --------------------------------------------------------- */
	#story_aria {
    	padding: calc(28% - 50px) 0 130px;
        background-size: 115%;
	}
	#story_box {
		flex-wrap: wrap;
	}
    #story_box .img_box {
        width: 75%;
        position: relative;
        z-index: 1;
        padding-top: 0;
    }
	#story_box .text_box {
        width: 100%;
        padding: 0 80px 0 80px;
        font-size: 20px;
		text-align: center;
    }
	#story_box .text_box h1 {
		margin-top: 50px;
		text-align: center;
	}
    #star_01 {
        width: 10%;
        left: 5%;
        top: 40%;
    }
	#star_05 {
		width: 8%;
		left: 20%;
		right: auto;
		top: -7%;
	}
	#star_04 {
        width: 4%;
        left: 8%;
        right: auto;
        top: -1%;
	}
	#star_03 {
		width: 4%;
		bottom: auto;
		left: 20%;
		top: 50%;
	}
	#star_08 {
		width: 6%;
		right: 8%;
		bottom: -8%;
	}
	#star_07 {
        width: 7%;
        right: 2.5%;
		top: 3%;
	}
	#star_06 {
		width: 8%;
		bottom: 180px;
		right: 3%;
		left: auto;
		animation-duration: 6s;
	}
	#star_09 {
    right: 50%;
	}
	#shop_01 {
        width: 320px;
        right: 4%;
        bottom: -40px;
    }
    #star_10 {
        width: 2%;
        top: -5%;
        left: auto;
        right: 15%;
    }
    /* character_aria
    --------------------------------------------------------- */
	.character_aria .character_profile {
		flex-wrap: wrap;
	}
	.character_aria .character_profile .text_box {
		width: 100%;
		margin: 60px 0 60px;
		padding: 0 80px 0 80px;
	}
    .character_aria .character_profile .img_box {
			width: 100%;
			margin: -2.5vw 0;
			padding: 0 80px 0 80px;
	}
    #character_aria_donko.character_aria .character_profile .text_box {
        padding: 0 80px 0 80px;
    }
    .character_aria .character_profile .img_box img {
        width: 60%;
    }
	.character_aria .character_ttl_text {
		padding-top: 100px;
		width: 300%;
	}
    #character_aria_donko.character_aria .character_profile .img_box {
        padding: 0;
    }
	.character_aria .character_profile .img_box {
		width: 100%;
		margin: 30px 0;
		padding: 0;
	}
	.character_aria .character_ttl_text {
		padding-top: 80px;
	}
    /* character_aria
    --------------------------------------------------------- */
	#zukan_aria .slide_item {
		width: 600%;

	}
    #goods_decoration_1 {
        width: 120px;
        top: 78px;
        left: -635px;
    }
	#goods_decoration_2 {
        width: 90px;
        top: 90px;
        right: -618px;
    }
	ul.play_list li {
		width: calc((100% - 40px) / 3);
	}
	ul.play_list li .img_box {
		border-radius: 10px;
	}
	ul.play_list li .button {
		width: 90%;
		margin: 20px auto 0;
	}
	ul.play_list li .button a {
		height: 50px;
		font-size: 22px;
	}
	.museum_item_list .slide_item .item {
		width: 200px;
		height: 200px;
	}
	#museum_aria .button_yellow{
		position: relative;
		z-index: 7;
	}
	.button_yellow {
		width: 350px;
	}
	.button_yellow a {
		height: 70px;
	}
	#museum_decoration_1 {
		width: 210px;
		left: 20px;
	}
	#museum_decoration_2 {
		width: 205px;
		right: 20px;
	}
    .fukidashi {
        width: 100%;
        padding: 15px 40px;
	}
	.fukidashi::after {
		height: 3px;

    }
	#sns_box > div.right_box {
		padding-left: 30px;
	}
	#sns_box h1 img {
		height: 50px;
	}
    #character_aria_donpen .character_ttl_text {
        width: 975%;
    }
    #character_aria_donko .character_ttl_text {
        width: 825%;
    }
}
/* ========================================
     1000px
======================================== */
@media screen and (max-width:1000px){
    /* common
    --------------------------------------------------------- */
    /* MV
    --------------------------------------------------------- */
    #mv_aria #donpen_eye,
	#mv_aria #donpen_hat {
        background-size: 190%;
		height: 75vw;
	}
    
    #eye_group_img {
        top: 11.3%;
    }
    #eye_group {
        width: 71.2%;
        height: 65vw;
    }
    #eye_left, 
    #eye_right {
        width: 14.2%;
    }
    
    #mv_aria {
        min-height: 90vw;
    }
    /* story_box
    --------------------------------------------------------- */
	#story_box .text_box {
        padding: 0 50px 0 50px;
    }
    /* character_aria
    --------------------------------------------------------- */
	#character_aria_donko.character_aria .character_profile .text_box,
	.character_aria .character_profile .text_box {
		padding: 0 50px 0 50px;
	}
    /* goods
    --------------------------------------------------------- */
	#goods_decoration_1,
	#goods_decoration_2{
		z-index: 1;
	}
	#goods_box::before {
		z-index: 0;
	}
}
/* ========================================
     768px
======================================== */
@media screen and (max-width:979px){
	#mv_click {
		left: 0;
	}
}
/* ========================================
     768px
======================================== */
@media screen and (max-width:768px){
    /* common
    --------------------------------------------------------- */
    #donpen_site {
        font-size: 16px;
    }
    /* MV
    --------------------------------------------------------- */
	#donpen_site h1 img {
		max-height: 90px;
	}
    #mv_aria {
        min-height: 96vw;
    }
	
	#sp_mv_banner {
        width: 80%;
        margin: -3% auto 30px;
    }
	#sp_mv_banner a {
		display: block;
		border: 1px solid #333;
		border-radius: 20px;
		padding: 5px;
		box-sizing: border-box;
	}
    

    /* ===== ドンペン大量発生 ===== */
    #mv_click .leaf.leaf_5 {
        margin-top: -100px;
        margin-left: -100px;
    }

    /* ===== ドンペン大量発生 ===== */
    @keyframes animate-leaf_5_1 {
        0% {
            margin-top: -100px;
            transform: scale(1);
            transform: rotate(0);
        }
        100% {
            margin-top: 100vh;
            transform: rotate(360deg);
        }
    }


    /* story_box
    --------------------------------------------------------- */
    #news_aria .news_box {
        padding: 0 60px;
    }
    #news_aria {
        margin: 0 0 45px;
    }
    
    #news_aria dl.news:not(:last-of-type) {
        padding-bottom: 6px;
        margin-bottom: 6px;
    }
    #news_aria dl.news dt, #news_aria dl.news dd {
        font-size: 13px;
    }
    #news_aria dl.news dt::before {
        width: 14px;
        height: 14px;
        left: 0;
        top: 2px;
    }
    #news_aria dl.news dt {
        width: 120px;
        padding-left: 20px;
    }
    #news_aria dl.news dd {
        width: calc(100% - 120px);
    }
    /* story_box
    --------------------------------------------------------- */
    
	
    #donpen_site #story_box h1 img {
        max-height: none;
        width: 80%;
    }
	#story_box .img_box {
        width: 90%;
	}
	#story_box .text_box {
        padding: 0 30px 0 30px;
        font-size: 18px;
        margin: 0 0 40px;
    }
    #shop_01 {
        width: 240px;
        right: 4%;
        bottom: -30px;
    }
    #star_04 {
        width: 4%;
        left: 4%;
        top: 7%;
    }
    #star_05 {
        width: 8%;
        left: 15%;
        top: -4%;
    }
    /* character_aria
    --------------------------------------------------------- */
	#character_aria_donko.character_aria .character_profile .text_box,
	.character_aria .character_profile .text_box {
        padding: 0 30px 0 30px;
    }
	.character_aria .character_profile .img_box img {
        width: 80%;
    }
	.character_aria .character_profile .img_box {
        margin: 20px 0;
    }
    .character_aria img.character_name {
        height: 100px;
    }
    .character_aria .character_profile .text {
        padding: 20px 30px;
    }
    /* play_aria
    --------------------------------------------------------- */
	ul.play_list {
		flex-wrap: wrap;
		margin-bottom: -30px;
	}
	ul.play_list li {
        width: 100%;
		margin-bottom: 30px;
    }
    .museum_item_list .slide_item .item {
        width: 140px;
        height: 140px;
        margin: 20px 30px;
    }
    .museum_item_list .slide_item .item::after {
        width: calc(100% + 40px);
        height: calc(100% + 40px);
    }
	ul.goods_list li {
		width: calc((100% - 10px) / 2);
		margin-bottom: 10px;
	}
    /* zukan_aria
    --------------------------------------------------------- */
    #sns_box {
        flex-wrap: wrap;
    }
    #sns_box > div {
    width: 100%;
    }
    #sns_box > div.right_box {
        padding-left: 0px;
        width: 90%;
    }
    .fukidashi {
        padding: 25px 25px;
        border-width: 3px;
    }
    #donpen_site #sns_box h1 {
        margin-bottom: 30px;
    }
    .fukidashi::after {
        top: calc(100% + 1px);
        left: 75%;
        width: 20px;
        height: 2px;
        box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
    }
    #sns_box img.donko {
        padding-top: 10px;
    }
    /* zukan_aria
    --------------------------------------------------------- */
	#zukan_aria .slide_item .item {
        width: calc(5% - 10px);
        margin: 0 5px;
		border-radius: 10px;
    }
	.button_yellow a {
        height: 60px;
        font-size: 20px;
    }
    #museum_aria .button_yellow {
        margin: 20px auto 180px;
    }
    #museum_decoration_1 {
        width: 170px;
        left: 40px;
        bottom: 70px;
    }
    #museum_decoration_2 {
        width: 165px;
        right: 40px;
        bottom: 70px;
    }
    .museum_pattern_bg {
        border-bottom: #78beea 140px solid;
        margin-bottom: -140px;
    }
    #museum_decoration_1 {
        bottom: 15px;
    }
    #museum_decoration_2 {
        bottom: 15px;
    }
}
/* ========================================
     481px
======================================== */
@media screen and (max-width:481px){
    /* mv_aria
    --------------------------------------------------------- */
    #donpen_site h1 img {
        max-height: 70px;
    }
    #mv_donko {
		width: 30%;
		height: 180%;
		top: -140%;
		left: 6%;
	}
    #mv_donpen {
		width: 30%;
		height: 180%;
		top: -140%;
		right: 6%;
	}
    #donpen_site #museum_aria h1 img {
        max-height: 70px;
    }
    /* mv_aria
    --------------------------------------------------------- */
    #mv_aria #donpen_eye,
    #mv_aria #donpen_hat {
        background-size: 210%;
        height: 100vw;
    }
    
    #eye_group_img {
        top: 9.3%;
    }
    #eye_group {
        width: 78.8%;
        height: 75vw;
    }
    #eye_left, 
    #eye_right {
        width: 10.5%;
    }
    
    #mv_aria {
        min-height: 125vw;
    }
    /* story_box
    --------------------------------------------------------- */
    #news_aria .news_box {
        padding: 0 30px;
        margin: 10px 0 30px;
    }
    #news_aria dl.news dt, #news_aria dl.news dd {
        font-size: 12px;
    }
    #news_aria dl.news dt {
        width: 110px;
    }
    #news_aria dl.news dd {
        width: calc(100% - 110px);
    }
    /* story_box
    --------------------------------------------------------- */
    #story_aria::before {
        padding-top: 40%;
        background: url(../img/top/story_clown.svg) no-repeat top center / 126%;
    }
    #story_aria {
        padding: calc(50% - 100px) 0 110px;
    }
    #story_box .text_box br {
        display: none;
    }
    #story_box .text_box h1 {
        margin-top: 30px;
    }
    #star_01 {
        top: 34%;
    }
    #star_03 {
        width: 8%;
        right: 2%;
        top: 37%;
        left: auto;
    }
    #star_09 {
        right: 68%;
        bottom: -30px;
        width: 5%;
    }
    #star_06 {
        width: 6%;
        bottom: 10px;
        right: 11%;
    }
    #donpen_site #story_box h1 img {
        width: 90%;
    }
    /* story_box
    --------------------------------------------------------- */
    .character_aria .character_ttl_text img {
        width: 68%;
        display: inline-block;
        margin-right: 1%;
    }
    .character_aria .character_profile .text_box {
        margin: 40px auto;
    }
    .character_aria img.character_name {
        height: 80px;
    }
    .character_aria dl.profile_dl {
        flex-wrap: wrap;
    }
    .character_aria dl.profile_dl dt ,
    .character_aria dl.profile_dl dd {
        width: 100%;
        padding-left: 26px;
    }
    .character_aria .character_ttl_text {
        padding-top: 70px;
    }
    #character_aria_donko.character_aria .character_ttl_text {
        padding-top: 40px;
    }
    /* sns
    --------------------------------------------------------- */
    #sns_box h1 img {
        height: 40px;
    }
    .fukidashi {
        padding: 15px 15px;
    }
    #donpen_site #sns_box h1 {
        margin-bottom: 20px;
    }
    #sns_box {
        flex-wrap: wrap;
        padding-bottom: 40px;
    }
    /* story_box
    --------------------------------------------------------- */
    #zukan_aria .slide_item {
        width: 900%;
        padding: 15px 0 0px;
    }
    #zukan_aria .slide_item .item img {
        max-width: 85%;
        max-height: 85%;
    }
    /* story_box
    --------------------------------------------------------- */
    #museum_decoration_1 {
        width: 150px;
        left: 20px;
        bottom: 0px;
    }
    #museum_decoration_2 {
        width: 145px;
        right: 20px;
        bottom: 0px;
    }
    .museum_pattern_bg {
        margin-top: 40px;
    }
    #museum_aria .button_yellow {
        margin: 20px auto 150px;
    }
    .museum_item_list .slide_item .item {
        margin: 20px 25px;
        border: 2px solid #000;
    }
    .museum_item_list .slide_item .item::after {
        width: calc(100% + 30px);
        height: calc(100% + 30px);
    }
}


/* =========================================================
     top animation
========================================================= */


/* story_aria
--------------------------------------------------------- */
#story_box.item_anim {
    
}

#story_box.item_anim .img_box ,
#story_box.item_anim .text_box {
    opacity: 0;
}

#story_box.item_anim.active .img_box ,
#story_box.item_anim.active .text_box {
    opacity: 1;
}

#story_box.item_anim.active .img_box {
    animation: story_box_img 0.5s ease-out forwards;
    transform: scale(0);
}
@keyframes story_box_img {
  0% {
    transform:scale(0);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  80% {
    transform:scale(1.2);
  }

  100% {
    transform:scale(1);
  }
}

#story_box.item_anim.active .text_box {
    animation: story_box_text 0.8s ease-out 0.5s forwards;
    transform:translateY(100px);
    opacity: 0;
}
@keyframes story_box_text {
  0% {
    transform:translateY(100px);
    opacity: 0;
  }

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


/* story_aria
--------------------------------------------------------- */
#donpen_site_logo img {
    animation: donpen_site_logo 0.3s ease-out 1s forwards;
    transform: scale(0);
}
@keyframes donpen_site_logo {
  0% {
    transform:scale(0);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  80% {
    transform:scale(1.2);
  }

  100% {
    transform:scale(1);
  }
}

#humBox,
#donpen_header .donpen_nav {
    animation: donpen_site_nav 0.6s ease-out 1.5s forwards;
    transform:translateY(-100px);
    opacity: 0;
}
@keyframes donpen_site_nav {
  0% {
    transform:translateY(-100px);
    opacity: 0;
  }
  100% {
    transform:translateY(0);
    opacity: 1;
  }
}




/* story_aria
--------------------------------------------------------- */