@charset "UTF-8";
/* ダレトク!? */

#daretoku {
	width: 100%;
	height: auto;
	background: url(/images/entertainment/daretoku/daretoku-bk.gif) center center / 48px 48px repeat;
	padding: 2.5% 0 6%;
}

#daretoku img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

#daretoku p {
	margin: 0;
}

/*MAIN*/

#daretoku .main {
	position: relative;
}

#daretoku .main h1 {
	width: 100%;
	max-width: 960px;
	position: relative;
	z-index: 1;
	margin: 0 auto;
}

/*MENU*/

#daretoku .menu {
	width: 100%;
	height: auto;
	position: relative;
	margin: -5% auto 0;
}

#daretoku .menu .menuInner {
	position: relative;
}

#daretoku .menu .menuInner .mainimg {
	width: 71%;
	max-width: 720px;
	margin: 0 auto;
}

#daretoku .menu .menuInner .choice {
	width: 32%;
    height: auto;
    max-width: 350px;
    position: absolute;
    top: 8%;
    left: 7%;
}

#daretoku .menu .menuInner .date {
	width: 22%;
    height: auto;
    max-width: 240px;
    position: absolute;
    top: 4%;
    right: 7%;
	animation: scale 1600ms ease infinite;
	-ms-animation: scale 1600ms ease infinite;
	-webkit-animation: scale 1600ms ease infinite;
}

#daretoku .menu .menuInner .ingredient {
	width: 8%;
	max-width: 90px;
	height: auto;
	position: absolute;
	opacity: 0;
	transform: translate(0,600%);
	-ms-transform: translate(0,600%);
	-webkit-transform: translate(0,600%);
	transition: all cubic-bezier(0.58,-0.04, 0.42, 1.37) 600ms;
	-ms-transition: all cubic-bezier(0.58,-0.04, 0.42, 1.37) 600ms;
	-webkit-transition: all cubic-bezier(0.58,-0.04, 0.42, 1.37) 600ms;
}

#daretoku .menu.inview .menuInner .ingredient {
	opacity: 1;
	transform: translate(0,0);
	-ms-transform: translate(0,0);
	-webkit-transform: translate(0,0);
}

#daretoku .menu .menuInner .ingredient.cheese { top: 37%; left: 16%; transition-delay: 100ms; -ms-transition-delay: 100ms; -webkit-transition-delay: 100ms; }
#daretoku .menu .menuInner .ingredient.choco { top: 11%; left: 39%; }
#daretoku .menu .menuInner .ingredient.honey { bottom: 16%; left: 24%; transition-delay: 200ms; -ms-transition-delay: 200ms; -webkit-transition-delay: 200ms; }
#daretoku .menu .menuInner .ingredient.tomato { bottom: 13%; left: 38%; transition-delay: 300ms; -ms-transition-delay: 300ms; -webkit-transition-delay: 300ms; }
#daretoku .menu .menuInner .ingredient.pasta { top: 40%; right: 14%; transition-delay: 400ms; -ms-transition-delay: 400ms; -webkit-transition-delay: 400ms; }

#daretoku .menu .menuTitle {
	width: 89%;
    margin: -11% auto 0;
    position: relative;
    z-index: 1;
}

#daretoku .menu .menuTitle:before {
	content: "";
	display: block;
	width: 24%;
	height: auto;
	padding-top: 24%;
	background: url(/images/entertainment/daretoku/daretoku2-yellow-bakudan.png) center center / 100% auto no-repeat;
	position: absolute;
    right: -4%;
    bottom: -18%;
	z-index: -1;
	animation: scale 1600ms ease infinite;
	-ms-animation: scale 1600ms ease infinite;
	-webkit-animation: scale 1600ms ease infinite;
	animation-delay: 800ms;
	-ms-animation-delay: 800ms;
	-webkit-animation-delay: 800ms;
}

#daretoku .menu .menuTitle .name {
	width: 63%;
	max-width: 600px;
}

#daretoku .menu .menuTitle .price {
	width: 38%;
    max-width: 360px;
    position: absolute;
    right: 0;
    bottom: 7%;
}

#daretoku .menu .menuTitle .fire {
	width: 15%;
    max-width: 140px;
    position: absolute;
    left: 2%;
    bottom: 96%;
}

#daretoku .menu .menuTitle .comment {
	 width: 32%;
    max-width: 320px;
    position: absolute;
    right: -5%;
    bottom: 98%;
}

#daretoku .menu .menuTitle .nutrition {
	font-size: 15px;
    line-height: 1.4;
    color: #000;
    transform: scale(.9,1);
	-ms-transform: scale(.9,1);
	-webkit-transform: scale(.9,1);
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -15%;
    text-align: center;
}

/*SUTDIO*/

#daretoku .studio {
	position: relative;
	margin: 6% auto 0;
}

#daretoku .studio:before {
	content: "";
    display: block;
    width: 15%;
    height: auto;
    padding-top: 15%;
    background: url(/images/entertainment/daretoku/daretoku2-yellow-bakudan.png) center center / 100% auto no-repeat;
    position: absolute;
    left: 12%;
    top: 16%;
	animation: scale 1600ms ease infinite;
	-ms-animation: scale 1600ms ease infinite;
	-webkit-animation: scale 1600ms ease infinite;
}

#daretoku .studio h3 {
	width: 44%;
	max-width: 480px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#daretoku .studio .good {
	width: 58%;
	max-width: 630px;
	margin: 1.2% auto 0;
	position: relative;
	z-index: 1;
}

/*SET*/

#daretoku .set {
	margin: 3% auto 0;
}

#daretoku .set ul {
	width: 85%;
	max-width: 800px;
	margin: 0 auto;
}

#daretoku .set ul li {
	float: left;
	width: 48%;
	margin-left: 4%;
}

#daretoku .set ul li:first-child {
	margin-left: 0;
}

/*SNS*/

#daretoku .sns {
	margin: 5% auto 0;
}

#daretoku .sns h4 {
	width: 75%;
	max-width: 640px;
	margin: 0 auto;
}

#daretoku .sns ul {
	width: 45%;
	max-width: 360px;
	margin: 2% auto 0;
}

#daretoku .sns ul li {
	float: left;
	width: 28%;
	margin-left: 8%;
	position: relative;
}

#daretoku .sns ul li:first-child {
	margin-left: 0;
}

#daretoku .sns ul li a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(/images/entertainment/daretoku/daretoku-sns-bakudan-y.png) center center / 100% auto no-repeat;
	padding: 15%;
	position: relative;
	z-index: 1;
}

#daretoku .store {
	margin: 5% auto 0;

}

#daretoku .store p {
	width: 50%;
	max-width: 300px;
	margin: 0 auto;
	position: relative;
}

#daretoku .store p a {
	display: block;
	width: 100%;
	padding: 4% 30%;
	background: #FFF000;
	border-radius: 6px;
	position: relative;
}

@keyframes scale {
	from { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
	15% { transform: scale(1.12); -ms-transform: scale(1.12); -webkit-transform: scale(1.12);}
	20% { transform: scale(.85); -ms-transform: scale(.85); -webkit-transform: scale(.85);}
	25% { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05);}
	33% { transform: scale(.97); -ms-transform: scale(.97); -webkit-transform: scale(.97);}
	38% { transform: scale(1.01); -ms-transform: scale(1.01); -webkit-transform: scale(1.01);}
	50% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
	to { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
}

@-ms-keyframes scale {
	from { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
	15% { transform: scale(1.12); -ms-transform: scale(1.12); -webkit-transform: scale(1.12);}
	20% { transform: scale(.85); -ms-transform: scale(.85); -webkit-transform: scale(.85);}
	25% { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05);}
	33% { transform: scale(.97); -ms-transform: scale(.97); -webkit-transform: scale(.97);}
	38% { transform: scale(1.01); -ms-transform: scale(1.01); -webkit-transform: scale(1.01);}
	50% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
	to { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
}

@-webkit-keyframes scale {
	from { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
	15% { transform: scale(1.12); -ms-transform: scale(1.12); -webkit-transform: scale(1.12);}
	20% { transform: scale(.85); -ms-transform: scale(.85); -webkit-transform: scale(.85);}
	25% { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05);}
	33% { transform: scale(.97); -ms-transform: scale(.97); -webkit-transform: scale(.97);}
	38% { transform: scale(1.01); -ms-transform: scale(1.01); -webkit-transform: scale(1.01);}
	50% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
	to { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
}


/*-------------------------------------------
以下、hoverの管理
-------------------------------------------*/

@media screen and (min-width:769px) {
	
#daretoku .sns ul li:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(/images/entertainment/daretoku/daretoku-sns-bakudan-b.png) center center / 100% auto no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: scale(.8);
	-ms-transform: scale(.8);
	-webkit-transform: scale(.8);
	transition: all 300ms cubic-bezier(0.08, 0.42, 0.26, 1.49);
	-ms-transition: all 300ms cubic-bezier(0.08, 0.42, 0.26, 1.49);
	-webkit-transition: all 300ms cubic-bezier(0.08, 0.42, 0.26, 1.49);
}

#daretoku .sns ul li:hover:before {
	top: -18%;
	left: -18%;
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

#daretoku .sns ul li:nth-child(2):hover:before {
	top: 18%;
	left: 18%;
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

#daretoku .store p a:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 6px;
	border: 4px solid #000;
	transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	box-sizing: border-box;
	opacity: 0;
}

#daretoku .store p a:hover:before {
	opacity: 1;
}

}

/*-------------------------------------------
以下、Tab
-------------------------------------------*/

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

#daretoku .menu .menuInner .mainimg {
	width: 80%;
}

#daretoku .menu .menuTitle .nutrition {
    width: 100%;
    font-size: 13px;
}

#daretoku .studio {
    margin: 7% auto 0;
}

#daretoku .set {
    margin: 4% auto 0;
}

#daretoku .sns ul {
    width: 260px;
}

#daretoku .store p {
    width: 224px;
}

}

/*-------------------------------------------
以下、SP
-------------------------------------------*/

@media screen and (max-width:480px) {
	
#daretoku {
	background: url(/images/entertainment/daretoku/daretoku-bk.gif) center center / 24px 24px repeat;
    padding: 6% 0 12%;
}

#daretoku .menu .menuInner .mainimg {
    width: 140%;
    position: relative;
    left: -20%;
}

#daretoku .menu .menuInner .choice {
    width: 50%;
    top: 4%;
    left: 0%;
}

#daretoku .menu .menuInner .date {
    width: 32%;
    top: 2%;
    right: -2%;
}

#daretoku .menu .menuInner .ingredient {
	width: 14%;
}

#daretoku .menu .menuInner .ingredient.choco { top: 15%; left: 40%; }
#daretoku .menu .menuInner .ingredient.cheese { top: 36%; left: -2%; }
#daretoku .menu .menuInner .ingredient.honey { bottom: 20%; left: 2%; }
#daretoku .menu .menuInner .ingredient.pasta { top: 28%; right: -2%; }
#daretoku .menu .menuInner .ingredient.tomato { bottom: 21%; left: 58%; }

#daretoku .menu .menuTitle {
	width: 100%;
    margin: -34% auto 0;
    text-align: right;
}

#daretoku .menu .menuTitle:before {
    width: 30%;
    padding-top: 30%;
    right: auto;
    bottom: auto;
    top: 11%;
    left: 8%;
}

#daretoku .menu .menuTitle .name {
	width: 78%;
}

#daretoku .menu .menuTitle .price {
    display: inline-block;
    width: 44%;
    max-width: 360px;
    position: relative;
    margin: -7% auto 0;
    right: auto;
    bottom: auto;
}

#daretoku .menu .menuTitle .fire {
	width: 22%;
    max-width: 140px;
    position: absolute;
    left: auto;
    bottom: auto;
    top: -10%;
    right: -1%;
}

#daretoku .menu .menuTitle .nutrition {
    position: static;
    margin: 2% auto 0;
	left: auto;
    right: auto;
}

#daretoku .menu .menuTitle .comment {
    width: 75%;
    margin: 5% auto 0;
    position: static;
    right: auto;
    bottom: auto;
}

#daretoku .studio:before {
    width: 19%;
    padding-top: 19%;
    left: auto;
    top: 72%;
    right: 0;
}

#daretoku .studio h3 {
    width: 80%;
}

#daretoku .studio .good {
    width: 100%;
    margin: 3% auto 0;
}

#daretoku .set {
    margin: 8% auto 0;
}

#daretoku .set ul {
    width: 85%;
}

#daretoku .set ul li {
    float: none;
    width: 100%;
	margin-left: 0;
}

#daretoku .set ul li:first-child {
    margin-bottom: 6%;
}

#daretoku .sns {
	margin: 10% auto 0;
}
	
#daretoku .sns h4 {
	width: 100%;
}

#daretoku .sns ul {
    width: 60%;
    margin: 4% auto 0;
}

#daretoku .store {
    margin: 8% auto 0;
}

#daretoku .store p {
    width: 180px;
}
	
}