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

body{
   background-image: url("../images/bg/bg_002.png");
}

.top_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   min-width: 1170px;
   background-color: rgba(255,255,255,1.00);
}

.count_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image:url("../images/top/bg_menu.png");
   height: 60px;
}


#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;
}


.b_pop_01 img{
	cursor: pointer;
}

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

.top_chara_inner{
   min-height: 534px;
}


.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%;
}

.top_ch04{
   position: absolute;
   width: 60%;
   left: 20%;
   bottom: 5%;
}

.top_b_comment{
   position: absolute;
   width: 13%;
   right: 20%;
   top: 2%
}

/* 01 いちご */
.opc01_wrap{
   position: absolute;
   width: 24.5%;
   top: 24%;
   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: 20%;
   top: 34%;
   left: 19.5%;
}
.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: 18.0%;
   top: 38.5%;
   right: 21.0%;
}
.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: 22.8%;
   top: 9%;
   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: 20%;
   top: 18%;
   right: 8%;
}
.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);}
}



/* スマホメニュー出現 */
.m_opc{
   animation: m_cas 1.8s ease;
   animation-iteration-count: 1;
	animation-delay: 2.0s;
   animation-fill-mode: forwards;
}

@keyframes m_cas{
   0% { opacity: 0;}
   100% {opacity: 1;}
}




/*=======================================================
   グローバルメニュー
  =======================================================*/

.head_menu_wrap{
  position: relative;
  width: 880px;
  margin: auto;
  transition: .5s;
}


.head_menu_wrap ol{
  list-style: none;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.head_menu_wrap li{
  list-style: none;
  text-align: center;
  line-height: 1.0;
  font-family: bc-alphapipe, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: rgba(255,255,255,1.00);
   font-size: 140%;
   margin: 0 20px;
   letter-spacing: 2px;
}

.head_menu_wrap li a{
   transition: color 0.5s;
   color: rgba(255,255,255,1.00);
   text-decoration: none;
   z-index: 104;
}

.head_menu_wrap li a:hover{
   transition: color 0.5s;
   color: rgba(255,240,0,1.00);
}

.head_menu_wrap li.select{
   border-bottom: rgba(255,240,0,1.00) 2px solid;
}

.head_menu_wrap .select a{
   color: rgba(249,244,166,1.00);
}


/* =============================================================================
   下段
   ========================================================================== */

.under_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,220,234,1.00);
   padding-top: 40px;
}

.under_innder{
   position: relative;
   width: 1100px;
   margin: auto;
}

.info_wrap{
   position: relative;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
}

.info_wrap .info_box{
   position: relative;
   overflow: hidden;
   width: 49%;
   margin-bottom: 2%;
}

.info_box .b_more{
   position: absolute;
   width: 29%;
   bottom: 0;
   left: 35.5%;
   
}

.info_wrap .info_inner{
   position: absolute;
   overflow: auto;
   width: 80%;
   height: 55%;
   top: 25.5%;
   left: 10%;
}


.news_sys{
   color:rgba(78,78,78,1.00);
}

.news_sys .day{
   font-weight: 600;
   font-size: 90%;
   color: rgba(255,134,188,1.00);
}

.news_sys .title {
   font-size: 94%;
   line-height: 1.4;
   margin-bottom: 10px;
   padding-bottom: 6px;
   border-bottom: rgba(212,244,247,1.00) 2px dotted;
}



.news_sys .title a{
   color:rgba(78,78,78,1.00);
   text-decoration: none;
}

.news_sys .title a:hover{
   color:rgba(0,117,169,1.00);
}


.about_wrap{
   position: relative;
   margin-top: 30px;
   margin-bottom: 50px;
}

.about_wrap .i01{
   position: absolute;
   width: 200px;
   top: -10px;
   left: 450px;
}

.about_wrap .k01{
   position: absolute;
   width: 110px;
   bottom: -10px;
   left: -40px;
}

.about_wrap .k02{
   position: absolute;
   width: 90px;
   top: -20px;
   right: -30px;
}

.about_wrap .box{
   width: 100%;
   padding: 10px;
   border-radius: 35px;
   box-sizing: border-box;
}

.about_wrap .border01{
   border: rgba(113,231,255,1.00) 2px solid;
   border-radius: 20px;
   padding: 10px;
   box-sizing: border-box;
}

.about_wrap .border02{
   border: rgba(162,205,255,1.00) 2px solid;
   border-radius: 25px;
   padding: 5px;
   box-sizing: border-box;
}

.about_wrap .border03{
   border: rgba(174,172,255,1.00) 2px solid;
   border-radius: 30px;
   padding: 5px;
   background-color: rgba(255,255,255,1.00);
	box-shadow:0px 0px 0px 10px rgba(255,255,255,1.00);
   box-sizing: border-box;
}

.about_wrap .t01{
   width: 95%;
   margin: auto;
}


.bn_area{
   width: 100%;
   margin: auto;
   margin-bottom: 50px;
}

.bn_area ol{
   display: flex;
   justify-content: center;
}

.bn_area li{
   width: 350px;
   margin: 0 10px 10px 10px;
}

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

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


.copy{
   text-align: center;
   color: rgba(255,255,255,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);
}



/* -----------------------------------------
   モーダル
   -----------------------------------------*/

.modal_wrap{
  width: 1000px;
  margin: auto;
}

.modal_wrap .p001{
	position: relative;
	overflow: hidden;
	width: 100%;
}

.modal_wrap .inner{
	font-family: "M PLUS Rounded 1c";
	color: rgba(255,255,255,1.00);
	padding: 20px 30px;
	font-size: 140%;
	line-height: 1.8;
	font-weight: 600;
}

.modal_wrap .mdlfoot{
	position: relative;
	overflow: hidden;
	width: 100%;
	background-image: url("../images/top/popup/p_002.jpg");
	background-position: center top;
	background-repeat: repeat;
}

.modal_wrap .mdllogo{
	width: 50%;
	margin: 50px auto 100px auto;
}


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

@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;
   height: 5px;
   background-repeat: repeat;
}

#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_b_comment{
   position: relative;
   width: 70%;
   right: auto;
   top: auto;
   margin: auto;
   margin-bottom: 20px;
}


.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%;
}



.top_ch04{
   position: absolute;
   width: 100%;
   left: 0%;
   bottom: 2%;
}

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

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

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

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

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


/* =============================================================================
   下段
   ========================================================================== */

.under_wrap{
   width: 100%;
   padding-top: 20px;
}

.under_innder{
   position: relative;
   overflow: hidden;
   width: 95%;
   margin: auto;
   margin-bottom: 20px;
}

.info_wrap{
   display: block;
}

.info_wrap .info_box{
   width: 100%;
}



.about_wrap{
   position: relative;
   margin-top: 20px;
   margin-bottom: 30px;
}

.about_wrap .i01{
   position: absolute;
   width: 40%;
   top: -10px;
   left: 30%;
}

.about_wrap .box{
   width: 100%;
   padding: 3px;
   border-radius: 35px;
   box-sizing: border-box;
}

.about_wrap .border01{
   border: rgba(113,231,255,1.00) 2px solid;
   border-radius: 12px;
   padding: 10px 10px 0 10px;
   box-sizing: border-box;
}

.about_wrap .border02{
   border: rgba(162,205,255,1.00) 2px solid;
   border-radius: 14px;
   padding: 2px;
}

.about_wrap .border03{
   border: rgba(174,172,255,1.00) 2px solid;
   border-radius: 16px;
   padding: 2px;
   background-color: rgba(255,255,255,1.00);
	box-shadow:0px 0px 0px 4px rgba(255,255,255,1.00);
}



.bn_area{
   width: 100%;
   margin: auto;
   margin-bottom: 50px;
}

.bn_area ol{
   display: block;
}

.bn_area li{
   width: 75%;
   margin: 0 auto 15px auto;
}


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

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

/* -----------------------------------------
   モーダル
   -----------------------------------------*/

.modal_wrap{
  width: 95%;
  margin: auto;
}


}