@charset "utf-8";

/* common
------------------------------------------------------*/
	

/* ttl
------------------------------------------------------*/
div.recipe h1#cttl span{
	background-image:url(../img/ttl/recipe.webp),url(../img/bk_gray.png);
}
div.recipe h2.pttl {
	position:relative;
	margin-bottom:30px;
	background-image: url(../../recipe/img/recipe_ttl.gif);
}
div.recipe h2.pttl::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:100%;
	background:linear-gradient(135deg, #ff4646, #ff9600);
	z-index:-1;
}
div#contents div#recipe {
	max-width: 1024px;
	margin: 0 auto;
}

/* recipe_list
------------------------------------------------------*/
div.recipe_list p.outline {
	margin-bottom:45px;
}
div.recipe_list p.outline a{
	display:block;
	margin-top:45px;
}
div.recipe_list ul.topics_list li {
	width: calc(20% - 24px);
	margin: 0 30px 30px 0;
}
div.recipe_list ul.topics_list li:nth-child(5n) {
	margin-right: 0;
}
ul.topics_list li span.pic,
ul.topics_list li a:hover span.pic {
	padding-top: 100%;
	background-size:cover;
}
ul.topics_list li a:hover span.pic {
	transform:scale(1.1);
}
div.recipe_list ul.topics_list li p.time{
	margin:calc(-1.6em - 15px - 5px) 5px 0 0;
	float:right;
	padding:0 5px 0 30px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-mz-border-radius:5px;
	background:#fff url(../img/icon/time.png) no-repeat left 5px center;
	transition:all 0.3s linear;
}
div.recipe_list ul.topics_list li a:hover p.time{
	transform:scale(1.1);
}
div.recipe_list ul.topics_list li p.name{
	clear:both;
}



/* recipe_page
------------------------------------------------------*/
div.recipe_page div#contents div#recipe{
	max-width:820px;
}
div.recipe_page div#contents div#recipe h2.pttl {
	margin: 0 0 60px;
}
div.recipe_page div.pic_area{
	width:240px;
	float:left;
	margin-bottom:30px;
}
div.recipe_page div.pic_area img{
	display:block;
	margin-bottom:15px;
}
div.recipe_page div.pic_area p.name{
	min-height:25px;
	margin-top:-15px;
	margin-bottom:15px;
	padding:5px 0 5px 40px;
	background:url(../img/icon/cook.png) no-repeat left center;
}
div.recipe_page div.pic_area ul.icon{
	width:100%;
}
div.recipe_page div.pic_area ul.icon li{
	width:auto;
	margin:0 15px 10px 0;
	padding:5px 10px 5px 30px;
	font-size:14px;
	color:#fff;
	text-align:center;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background-repeat:no-repeat;
	background-position:left 10px center,center center;
}
div.recipe_page ul.icon li.price{background-image:url(../img/icon/price.png),linear-gradient(90deg, #0073e6, #00c3ff);}
div.recipe_page ul.icon li.time {background-image:url(../img/icon/time_w.png),linear-gradient(90deg, #ff7c00, #ff5050);}
div.recipe_page ul.icon li.award{background-image:url(../img/icon/award.png),linear-gradient(90deg, #ff1989, #ff5400);}
div.recipe_page ul.icon li.other{background-image:none,linear-gradient(90deg, #cccccc, #bbbbbb);}
div.recipe_page div.pic_area ul.icon li.other{
	padding:5px 10px;
}
div.recipe_page dl#recipe_area{
	width:calc(100% - 240px - 60px);
	float:right;
	margin-bottom:30px;
	overflow:hidden;
}
div.recipe_page dl#recipe_area dt{
	width:60%;
	padding:10px 30px 10px 0;
	border-top:1px #ccc solid;
}
div.recipe_page dl#recipe_area dt:first-child{
	width:100%;
	padding-right:0;
}
div.recipe_page dl#recipe_area dd{
	width:calc(40% - 30px);
	padding:10px 0;
	text-align:right;
	border-top:1px #ccc solid;
}
div.recipe_page h3.sttl{
	clear:both;
	margin-top:30px;
	font-size:24px;
	font-weight:bold;
}
div.recipe_page h3.sttl:after{
	width:100%;
	height:5px;
	content:"";
	display:block;
	margin:15px 0 20px;
	background-image:linear-gradient(90deg, #ff4646, #ff9600);
}
@media screen and (max-width:1060px){
	div.recipe_page div#contents div#recipe h2.pttl {
		margin: 0 0 60px;
	}
}


/* contest
------------------------------------------------------*/
div.contest div#contest,
div.contest div#contest_list{
	max-width:1024px;
	margin:30px auto;
}
div.contest div#contest{
}
div.contest p.outline a{
	display:block;
	margin-top:45px;
}
div.contest ul#contest_latest{
	max-width:820px;
	position:relative;
	margin:30px auto 90px;
	padding:0;
}
div.contest ul#contest_latest h2.pttl{
	margin: 0 0 30px;
}
div.contest ul#contest_latest li.pic{
	width:395px;
	display:inline-block;
	margin-right:26px;
	padding-top:calc(395px*0.75);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
div.contest ul#contest_latest li.info{
	width:calc(100% - 395px - 30px);
}
div.contest ul#contest_latest a p.recipe_name{
	color:#464646;
	margin-bottom:15px;
}
div.contest ul#contest_latest p.text{
	color:#464646;
	font-size:14px;
}

div#contest_baloon{
	max-width:820px;
	min-height:102px;
	clear:both;
	margin:-60px auto 90px;
}
div#contest_baloon p.baloon{
	width:calc(100% - 190px);
	max-width:650px;
	position:relative;
	margin-left:130px;
	padding:20px 30px;
	color:#fff;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	background-image:linear-gradient(90deg, #ff4646, #ff9600);
}
div#contest_baloon p.baloon:before,
div#contest_baloon p.baloon:after{
	width:101px;
	height:104px;
	content:"";
	position:absolute;
	top:0;
	left:-150px;
	display:block;
	background-repeat:no-repeaet;
	background-position:center center;
	background-image:url(../../recipe/img/sunmush.png);
}
div#contest_baloon p.baloon:after{
	width:46px;
	height:28px;
	top:10px;
	left:-40px;
	background-image:url(../../recipe/img/baloon.png);
}


div.contest ul.topics_list{}
div.contest ul.topics_list li{
	width:calc(50% - 225px);
	min-height:150px;
	position:relative;
	margin-right:90px;
	padding:0 0 0 180px;
}
div.contest ul.topics_list li:nth-child(2n){
	margin-right:0;
}
div.contest ul#contest_latest a,
div.contest ul.topics_list li a{
	text-decoration:none;
}
div.contest ul.topics_list li span.pic{
	width:150px;
	position:absolute;
	top:0;
	left:0;
	display:block;
	padding-top:150px;
}
div.contest ul#contest_latest a p.no,
div.contest ul.topics_list li a p.no{
	margin-bottom:10px;
	color:#464646;
	border-bottom:1px #ccc solid;
}
div.contest ul#contest_latest a p.theme,
div.contest ul.topics_list li a p.theme{
	margin-bottom:15px;
	text-decoration:underline;;
}
div.contest ul.topics_list li a p.recipe_name{
	font-size:14px;
	color:#464646;
}
div.contest p.recipe_name:before{
	content:"最優秀";
	margin-right:10px;
	padding:2px 10px;
	color:#fff;
	font-size:14px;
	text-align:center;
	background-image:linear-gradient(90deg, #ff4646, #ff9600);
}


/* application
------------------------------------------------------*/
div.app div#app{
	max-width:1024px;
	margin:0 auto;
}
div.app div#app h3{
	margin:60px auto 15px;
	font-size:24px;
	font-weight:bold;
}
div.app div#app h3:after{
	width:100%;
	height:5px;
	content:"";
	display:block;
	margin:5px auto 15px;
	background-image:linear-gradient(90deg, #ff4646, #ff9600);
}
div.result div#result h3:after{
	display:none;
}
div.app div#app div.theme,
div.result  div.theme{
	clear:both;
	overflow:hidden;
}
div.app div#app div.theme h3,
div.result div.theme h3{
	width:110px;
	height:1.25em;
	float:left;
	margin:0 15px 0 0;
	padding:calc(55px - 0.625em) 0;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:1;
	background:url(../../recipe/img/app_ttl.webp) no-repeat center center;
}
div.app div#app div.theme h3:after,
div.result div.theme h3:after{
	display:none;
}
div.app div#app div.theme p,
div.result div.theme p{
	width:calc(100% - 110px - 15px);
	float:right;
}
div.app div#app div.theme p.name,
div.result div.theme p.name{
	margin-top:15px;
	font-size:40px;
}
div.app div#app h4{
	margin-top:15px;
	font-size:20px;
	font-weight:bold;
}
div.app div#app h4:before{
	width:0.8em;
	height:0.8em;
	content:"";
	display:inline-block;
	margin-bottom: -5px;
	line-height:1;
	border:3px #009fe8 solid;
	border-radius:0.8em;
	-webkit-border-radius:0.8em;
	-moz-border-radius:0.8em;
	-ms-border-radius:0.8em;
}
div.app div#app textarea.application-form {
	width: 70%;
	height: 200px;
}
@media screen and (max-width:1280px){
	div.app div#app div.theme p.name,
	div.result div.theme p.name{
		margin-top: 0.7em;
		font-size: 36px;
		line-height:1.4;
}
@media screen and (max-width:1060px){
	div.app div#app div.theme p.name,
	div.result div.theme p.name{
		margin-top: 0.9em;
		font-size: 32px;
		line-height:1.4;
}
@media screen and (max-width:860px){
	div.app div#app div.theme p.name,
	div.result div.theme p.name{
		margin-top: 1.1em;
		font-size: 28px;
		line-height:1.4;
}
@media screen and (max-width: 540px) {
	div.app div#app div.theme p.name,
	div.result div.theme p.name{
		margin-top: 1.2em;
		font-size: 26px;
	}
}

/* result
------------------------------------------------------*/
div.result div#recipe.result{
	max-width:1024px;
	margin:0 auto;
}
div.result div#recipe.result div.theme {
	width: 1024px;
	margin: 0 -102px 60px;
}
div.result ul.result_list {
}
div.result ul.result_list li{
	margin-bottom:120px;
}
div.result ul.result_list li:before {
	width:165px;
	position:relative;
	top:0;
	display:block;
	margin:0 auto 30px;
	padding-top:calc(129px + 5px);
	font-size:20px;
	font-weight:bold;
	text-align:center;
	background-repeat:no-repeat;
	background-position:center top;
	background-image:url(../../recipe/img/cup.webp);
}
div.result ul.result_list li.grand_prize:before  {content:"最優秀賞";background-image:url(../../recipe/img/crown.webp);}
div.result ul.result_list li.prize:before        {content:"優秀賞";background-image:url(../../recipe/img/crown.webp);}
div.result ul.result_list li.hokken_prize:before {content:"北研賞";background-position:center top 30px;}
div.result ul.result_list li.special_prize:before{content:"特別賞";background-position:center top 30px;}
div.result ul.result_list li.good_prize:before   {content:"いいね賞";background-position:center top 30px;}

div.result ul.result_list li ul li:before {
	display:none!important;
}
div.result img.scenery {
	display:block;
	margin:0 auto;
}


/* Responsive Design
------------------------------------------------------*/

/* 1060px以下 */
@media screen and (max-width:1060px){
	div.recipe_list ul.topics_list li {
		width: calc(25% - 22.5px);
	}
	div.recipe_list ul.topics_list li:nth-child(5n) {
		margin-right: 30px;
	}
	div.recipe_list ul.topics_list li:nth-child(4n) {
		margin-right: 0;
	}
	div.contest ul.topics_list li{
		width:calc(50% - 160px);
		margin-right:50px;
	}
	div.contest ul.topics_list li:nth-child(2n){
		margin-right:0;
	}
}

/* 860px以下 */
@media screen and (max-width:860px){
	div.recipe_list ul.topics_list li {
		width: calc(33.33% - 20px);
	}
	div.recipe_list ul.topics_list li:nth-child(4n) {
		margin-right: 30px;
	}
	div.recipe_list ul.topics_list li:nth-child(3n) {
		margin-right: 0;
	}
	div.recipe_page div.pic_area{
		width:200px;
	}
	div.recipe_page dl#recipe_area{
		width:calc(100% - 200px - 60px);
	}
	div.contest ul#contest_latest{
		max-width:100%;
	}
	div.contest ul#contest_latest h2.pttl{
		margin: 0 0 30px;
	}
	div.contest ul#contest_latest li.pic{
		width:340px;
		padding-top:calc(340px*0.75);
	}
	div.contest ul#contest_latest li.info{
		width:calc(100% - 340px - 30px);
	}
	div#contest_baloon{
		max-width:100%;
		margin:-60px auto 60px;
	}
	div.contest ul.topics_list li{
		width:calc(50% - 135px);
		padding-left:150px;
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div.recipe_list ul.topics_list li {
		width: calc(50% - 15px);
		margin-right:30px;
	}
	div.recipe_list ul.topics_list li:nth-child(3n) {
		margin-right: 30px;
	}
	div.recipe_list ul.topics_list li:nth-child(2n) {
		margin-right: 0;
	}
	div.recipe_page div.pic_area{
		width:100%;
		float:none;
		margin-bottom:30px;
	}
	div.recipe_page dl#recipe_area{
		width:100%;
		float:none;
	}
	div.contest ul#contest_latest li.pic{
		width:100%;
		padding-top:75%;
		margin-bottom:30px;
	}
	div.contest ul#contest_latest li.info{
		width:100%;
	}
	div#contest_baloon{
		min-height:auto;
		margin:-30px auto 60px;
	}
	div#contest_baloon p.baloon{
		width:calc(100% - 60px);
		max-width:none;
		margin-left:0;
		padding:20px 30px;
	}
	div#contest_baloon p.baloon:before{
		width:80px;
		height:82px;
		top:auto;
		bottom:-82px;
		left:30px;
		background-size:100% auto;
	}
	div#contest_baloon p.baloon:after{
		width:40px;
		height:24px;
		top:auto;
		bottom:-24px;
		left:80px;
		background-size:100% auto;
	}
	div.contest ul.topics_list li{
		width:100%;
		min-height:auto;
		margin-right:0;
		padding:0;
	}
	div.contest ul.topics_list li:nth-child(2n){
		margin-right:0;
	}
	div.contest ul.topics_list li span.pic{
		width:100%;
		position:relative;
		padding-top:75%;
		margin-bottom:15px;
	}
	div.result div#recipe.result div.theme {
		width: 100%;
		margin: 0 0 60px;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div.recipe_list ul.topics_list li {
		width: 100%;
		margin-right:0;
	}
	div.recipe_list ul.topics_list li:nth-child(2n) {
		margin-right: 0;
	}
	div.recipe_page div#contents div#recipe h2.pttl {
		margin: 0 0 30px;
		font-size:24px;
	}
	div.recipe_page h3.sttl{
		margin-top:20px;
		font-size:20px;
	}
	div.recipe_page h3.sttl:after{
		margin:10px 0 15px;
	}
	div#contest_baloon p.baloon:before{
		left:15px;
	}
	div#contest_baloon p.baloon:after{
		left:65px;
	}
	div.app div#app div.theme h3,
	div.result div.theme h3{
		width:100%;
		float:none;
		margin:0 auto 15px;
		padding:calc(55px - 0.625em) 0;
	}
	div.app div#app div.theme p,
	div.result div.theme p{
		width:100%;
		float:none;
	}
	div.app div#app div.theme p.name,
	div.result div.theme p.name{
		margin-top:0;
		font-size:24px;
	}
	div.app div#app h3{
		margin:45px auto 15px;
		font-size:20px;
	}
	div.app div#app h4{
		font-size:18px;
	}
	div.app div#app textarea.application-form {
		width: 100%;
	}
	div.result ul.result_list li{
		margin-bottom:90px;
	}
	div.result ul.result_list li:before {
		width:130px;
		margin:0 auto 20px;
		padding-top:calc(102px + 5px);
		font-size:18px;
		background-size:130px auto;
	}
	div.result ul.result_list li.grand_prize:before,
	div.result ul.result_list li.prize:before {
		background-size:130px auto;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div.recipe_page div#contents div#recipe h2.pttl {
		font-size:22px;
		line-height:1.4;
	}
	div.recipe_page h3.sttl{
		font-size:18px;
	}
	div.recipe_page dl#recipe_area dt,
	div.recipe_page dl#recipe_area dd{
		width:100%;
		padding:10px 0;
	}
	div.recipe_page dl#recipe_area dt:first-child{
		width:100%;
	}
	div.recipe_page dl#recipe_area dd{
		text-align:left;
	}
	div#contest_baloon{
		margin:-15px auto 45px;
	}
	div#contest_baloon p.baloon{
		padding:15px 20px;
		font-size:14px;
	}
	div#contest_baloon p.baloon:before{
		width:60px;
		height:62px;
		bottom:-62px;
		left:10px;
	}
	div#contest_baloon p.baloon:after{
		width:30px;
		height:18px;
		bottom:-18px;
		left:50px;
	}
	div.app div#app h3{
		margin:30px auto 10px;
		font-size:18px;
	}
	div.app div#app h3:after{
		margin:5px auto 10px;
	}
	div.result ul.result_list li{
		margin-bottom:60px;
	}
	div.result ul.result_list li:before {
		width:100px;
		margin:0 auto 15px;
		padding-top:calc(78px + 5px);
		font-size:16px;
		background-size:100px auto;
	}
	div.result ul.result_list li.grand_prize:before,
	div.result ul.result_list li.prize:before {
		background-size:100px auto;
	}
	div.result ul.result_list li.hokken_prize:before,
	div.result ul.result_list li.special_prize:before,
	div.result ul.result_list li.good_prize:before {
		background-position:center top 23px;
	}
}