@charset "utf-8";
/* CSS Document */

body{
}

.top_wrap{
   position: relative;
   width: 100%;
   min-width: 1170px;
}

.count_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/test_003.jpg");
   padding-bottom: 15px;
}


#countdown-unit{
   position: relative;
   margin: auto;
   width: 847px;
}

#countdown-unit div{
   position: relative;
   float: left;
   width: 60px;
   height: 115.5px;
   overflow: hidden;
}

#countdown-unit div.day{
   width: 135px;
   height: 115.5px;
}

#countdown-unit div.day img{
   position: absolute;
   top: auto;
   bottom: 7px;
   left: 0;
}

#countdown-unit div.hor{
   width: 68px;
   height: 115.5px;
}

#countdown-unit div.min{
   width: 68px;
   height: 115.5px;
}

#countdown-unit div img{
   position: absolute;
   top: 0;
   left: 0;
}




#countdown-unit div.hor img{
   position: absolute;
   top: auto;
   bottom: 7px;
   left: 0;
}

#countdown-unit div.min img{
   position: absolute;
   top: auto;
   bottom: 7px;
   left: 0;
}

.nd{
   display: none;
}


.top_chara_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   height: auto;
   min-height: 615px;
   margin: auto;
   background-image: url("../images/top/bg_004.png");
   background-size: 100% auto;
}

.top_chara_inner{
   min-height: 615px;
}


.top_logo{
   position: absolute;
   width: 25%;
   left: 37.5%;
   top: 2%;
}

.top_ch01{
   position: absolute;
   width: 48%;
   left: 26%;
   bottom: 14%;
}

.top_ch02{
   position: absolute;
   width: 48%;
   left: 24%;
   bottom: 4%;
}

.top_ch03{
   position: absolute;
   width: 13%;
   right: 21%;
   bottom: 2.6%;
}



/* 01 いちご */
.opc01_wrap{
   position: absolute;
   width: 29%;
   top: 22%;
   left: 37%;
}
.chara_001{
   position: relative;
}

.chara_ani01a{
   animation:  3.5s ca01a ease-in-out infinite;
}
.chara_ani01b{
   animation: ca01b 7.0s ease-in-out infinite alternate;
}
.chara_ani01c{
   animation: ca01c 6.0s ease-in-out infinite alternate;
}

/* 02 みんと */
.opc02_wrap{
   position: absolute;
   width: 24%;
   top: 31%;
   left: 18%;
}
.chara_002{
   position: relative;
}
.chara_ani02a{
   animation:  4.5s ca02a ease-in-out infinite;
}
.chara_ani02b{
   animation: ca02b 8.0s ease-in-out infinite alternate;
}
.chara_ani02c{
   animation: ca02c 6.0s ease-in-out infinite alternate;
}

/* 03 ぷりん */
.opc03_wrap{
   position: absolute;
   width: 21.5%;
   top: 33%;
   right: 14.5%;
}
.chara_003{
   position: relative;
}
.chara_ani03a{
   animation:  3.1s ca03a ease-in-out infinite;
}
.chara_ani03b{
   animation: ca03b 9.0s ease-in-out infinite alternate;
}
.chara_ani03c{
   animation: ca03c 8.0s ease-in-out infinite alternate;
}


/* 04 ざくろ */
.opc04_wrap{
   position: absolute;
   width: 28%;
   top: 1%;
   left: 7%;
}
.chara_004{
   position: relative;
}
.chara_ani04a{
   animation:  3.1s ca04a ease-in-out infinite;
}
.chara_ani04b{
   animation: ca04b 9.0s ease-in-out infinite alternate;
}
.chara_ani04c{
   animation: ca04c 8.0s ease-in-out infinite alternate;
}

/* 05 レタス */
.opc05_wrap{
   position: absolute;
   width: 25%;
   top: 6%;
   right: 10%;
}
.chara_005{
   position: relative;
}
.chara_ani05a{
   animation:  3.1s ca05a ease-in-out infinite;
}
.chara_ani05b{
   animation: ca05b 9.0s ease-in-out infinite alternate;
}
.chara_ani05c{
   animation: ca05c 8.0s ease-in-out infinite alternate;
}




/* キャラ枠出現 */
.opcascl{
   animation: cascl 1.8s ease;
   animation-iteration-count: 1;
	animation-delay: 1.0s;
   animation-fill-mode: forwards;
}

@keyframes cascl{
   0% { transform: scale(0.0); opacity: 0;}
   50% {opacity: 1;}
   100% {transform: scale(1.0); opacity: 1;}
}



/* キャラクター表示01 */
@keyframes ca01a{
   0% { transform: rotateZ(3deg) scale(1.0);}
   50% {transform: rotateZ(-3deg) scale(1.0);}
   100% {transform: rotateZ(3deg) scale(1.0);}
}

@keyframes ca01b{
   0% {transform: translate3d(0.5vw,0,0);}
   50% {transform: translate3d(-0.5vw,0,0);}
   100% {transform: translate3d(0.5vw,0,0);}
}

@keyframes ca01c{
   0% {transform: translate3d(0,0.5vw,0);}
   50% {transform: translate3d(0,-0.5vw,0);}
   100% {transform: translate3d(0,0.5vw,0);}
}


/* キャラクター表示02 */
@keyframes ca02a{
   0% { transform: rotateZ(1deg) scale(1.0);}
   50% {transform: rotateZ(-1deg) scale(1.0);}
   100% {transform: rotateZ(1deg) scale(1.0);}
}

@keyframes ca02b{
   0% {transform: translate3d(0.2vw,0,0);}
   50% {transform: translate3d(-0.2vw,0,0);}
   100% {transform: translate3d(0.2vw,0,0);}
}

@keyframes ca02c{
   0% {transform: translate3d(0,0.4vw,0);}
   50% {transform: translate3d(0,-0.4vw,0);}
   100% {transform: translate3d(0,0.4vw,0);}
}


/* キャラクター表示03 */
@keyframes ca03a{
   0% { transform: rotateZ(2deg) scale(1.0);}
   50% {transform: rotateZ(-2deg) scale(1.0);}
   100% {transform: rotateZ(2deg) scale(1.0);}
}

@keyframes ca03b{
   0% {transform: translate3d(0.6vw,0,0);}
   50% {transform: translate3d(-0.6vw,0,0);}
   100% {transform: translate3d(0.6vw,0,0);}
}

@keyframes ca03c{
   0% {transform: translate3d(0,0.5vw,0);}
   50% {transform: translate3d(0,-0.5vw,0);}
   100% {transform: translate3d(0,0.5vw,0);}
}


/* キャラクター表示04 */
@keyframes ca04a{
   0% { transform: rotateZ(1deg) scale(1.0);}
   50% {transform: rotateZ(-1deg) scale(1.0);}
   100% {transform: rotateZ(1deg) scale(1.0);}
}

@keyframes ca04b{
   0% {transform: translate3d(0.2vw,0,0);}
   50% {transform: translate3d(-0.2vw,0,0);}
   100% {transform: translate3d(0.2vw,0,0);}
}

@keyframes ca04c{
   0% {transform: translate3d(0,0.4vw,0);}
   50% {transform: translate3d(0,-0.4vw,0);}
   100% {transform: translate3d(0,0.4vw,0);}
}

/* キャラクター表示05 */
@keyframes ca05a{
   0% { transform: rotateZ(-1deg) scale(1.0);}
   50% {transform: rotateZ(1deg) scale(1.0);}
   100% {transform: rotateZ(-1deg) scale(1.0);}
}

@keyframes ca05b{
   0% {transform: translate3d(-0.2vw,0,0);}
   50% {transform: translate3d(0.2vw,0,0);}
   100% {transform: translate3d(-0.2vw,0,0);}
}

@keyframes ca05c{
   0% {transform: translate3d(0,-0.4vw,0);}
   50% {transform: translate3d(0,0.4vw,0);}
   100% {transform: translate3d(0,-0.4vw,0);}
}

/* -----------------------------------------
   シェアボタン
   -----------------------------------------*/

.share_wrap{
	position:relative;
	width:200px;
	font-size:120%;
   padding-top: 10px;
	margin: auto;
   margin-bottom: 40px;
}


.copy{
   text-align: center;
   color: rgba(255,44,137,1.00);
   font-size: 90%;
   font-weight: 600;
   margin: 20px auto 10px auto;
}

.wrap{
   width: 100vw;
   height: 100vh;
   background-color: rgba(207,207,207,1.00);
}




/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   スマホ版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

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

body{
  font-size: 77%;
}

.top_wrap{
   position: relative;
   width: 100%;
   min-width: 100%;
}

.top_chara_wrap{
   position: relative;
   width: 100%;
   height: auto;
   margin: auto;
   min-height: auto;
   background-image: url("../images/top/bg_004m.jpg");
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: top center;
}

.top_chara_inner{
   min-height: auto;
}


.count_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/test_003.jpg");
   padding: 5px 0;
}

#countdown-unit_m{
   position: relative;
   margin: auto;
   width: 293px;
}


#countdown-unit_m div{
   position: relative;
   float: left;
   width: 20px;
   height: 38.5px;
   overflow: hidden;
}

#countdown-unit_m div img{
   position: absolute;
   top: 0;
   left: 0;
}

#countdown-unit_m div.day{
   width: 53.25px;
   height: 46.2px;
}

#countdown-unit_m div.day img{
   position: absolute;
   top: auto;
   top: 6px;
   left: 0;
}

#countdown-unit_m div.hor{
   width: 26px;
   height: 46.2px;
}

#countdown-unit_m div.min{
   width: 26px;
   height: 46.2px;
}

#countdown-unit_m div.hor img{
   position: absolute;
   top: 8px;
   left: 0;
}

#countdown-unit_m div.min img{
   position: absolute;
   top: 8px;
   left: 0;
}





.top_logo{
   position: absolute;
   width: 50%;
   left: 25%;
   top: 2%;
}

.top_ch01{
   position: absolute;
   width: 70%;
   left: 15%;
   bottom: 8%;
}

.top_ch02{
   position: absolute;
   width: 70%;
   left: 15%;
   bottom: 2%;
}

.top_ch03{
   position: absolute;
   width: 23%;
   right: 1%;
   bottom: 0.8%;
}



/* 01 いちご */
.opc01_wrap{
   position: absolute;
   width: 50%;
   top: 32%;
   left: 27%;
}

/* 02 みんと */
.opc02_wrap{
   position: absolute;
   width: 39%;
   top: 55%;
   left: 3%;
}

/* 03 ぷりん */
.opc03_wrap{
   position: absolute;
   width: 39%;
   top: 52%;
   right: 1%;
}

/* 04 ざくろ */
.opc04_wrap{
   position: absolute;
   width: 40%;
   top: 17%;
   left: 1%;
}

/* 05 レタス */
.opc05_wrap{
   position: absolute;
   width: 36%;
   top: 18%;
   right: 2%;
}

/* -----------------------------------------
   シェアボタン
   -----------------------------------------*/

.share_wrap{
	position:relative;
	width:100%;
	margin: auto;
	right: auto;
	top: auto;
	font-size:160%;
  padding: 3px;
}

}