@charset "utf-8";

/* -----------------------------------------------
  contents
----------------------------------------------- */
#Cont{
	width:100% !important;
	line-height: 1.4;
	position: relative;

}

#conversation_head{
	background-color: #bf010b;
	position: relative;
}
#conversation_lead{
	color:#fff;
}
#conversation_lead,#conversation_main,#conversation_recipe{
	background-color: #ac0008;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
	overflow: hidden;
}
#conversation_head h1{
	position: absolute;
	left:0;right:0;top:0;
	z-index:1;
}
#conversation_head .name{
	position: absolute;
	left:0;top:0;
	z-index:1;
	width:100%;
}
#conversation_main>section{
	position: relative;
}
#conversation_main img{
	width: 100%;
	vertical-align: top;
}
#conversation_main section p{
	color: #fff;
}


section h2::before,section h2::after{
	display: block;
	content: '';
	position: absolute;;height:1px;
	left:0;right: 0;
	margin:auto;
	border-top:1px solid #c54d53;
}

section h2 img{
	display:inline;
}

section .quest{
	background-color:#222222 ;

}
section .quest h3{
	color:#f5cf78;
	position: relative;
}
section .quest h3::before{
	content: '';display: block;
	background:url(../images/quest_icon.png) no-repeat left top;
	position: absolute;
	left:0;top:0;
}
section .quest h3::after{
	content: '';display: block;
	height:1px;width:100%;
	position: absolute;
	right:0;top:0;
	border-top:1px solid #62563c;
}
section .quest h3 span{
	display: none;
}
section .quest .image{
	position: relative;
}
section .quest .image::after{
	content:url("../images/cover.png");
	display:block;
	position: absolute;left:0;top:0;
	width:100%;height:100%;
}
section .text sup{
	top: -0.3em;
}
@media screen and (min-width: 641px) {
	.isSP{
		display: none;
	}
	#Cont section>.contents{
		width:100%;
		position: relative;
		max-width: 960px;
		margin: 0 auto;
		position: relative;
	}

	#Cont section>.inner {
		max-width: 960px;
		margin: 0 auto;
		position: relative;
	}
	section .quest_parent{
		max-width: 960px;
		width:100%;
		position: absolute;
		overflow: visible;
		left:0;right:0;top:0;
		margin: 0 auto;
		z-index:0;

	}
	.quest_parent.fixed{
		position: fixed;
		top:0;
	}
	.quest_parent.bottom, .quest_parent.bottom .quest{
		position: absolute;
		bottom:0;top:auto;
	}

	#conversation_head h1{
		width:69.749%;
		margin:4.479% auto 0;
	}
	#conversation_lead p{
		width:81.25%;
		margin:3.33% auto 0;
		font-size: 18px;
		line-height: 1.6;
	}
	section h2{
		padding:110px 0 90px;
		margin:auto;
		text-align: center;
		max-width:960px;
		width:100%;
	}
	section h2::before,section h2::after{
		width:64px;
	}
	section h2::before{
		margin-top:-24px;
	}
	section h2::after{
		margin-top:24px;
	}
	section .quest{
		position: absolute;
		width:57.8125%;
		z-index:0;
		padding:4.79% 0 6.25%;
	}
	section .quest h3{
		padding-top:13.55%;
		font-size: 22px;
		line-height: 1.6;
		margin-bottom:7.9%;
	}
	section .quest h3::before{
		width:7.065%;height:25px;

	}
	section .quest h3::after{
		margin-top:3.03%;
		width:88%;
	}

	section .quest .inner{
		width:calc(354 / 555 *100%);
	}
	section .right .quest{
		left:0;top:0;
		margin-left:-5.416%;
	}
	section .right .quest .inner{
		margin-left:calc(52 / 555 *100%);
	}
	section .left .quest{
		right:0;top:0;
		margin-right:-5.416%;
	}
	section .left .quest .inner{
		margin-left:calc(148 / 555 *100%);
	}
	section .text{
		width:calc(526 / 960 *100%);
		position: relative;
		z-index:1;
		font-size: 18px;
		line-height: 1.83;
	}
	section .text .note{
		padding-left: 18px;
		text-indent: -18px;
	}
	section .text p:first-child{
		padding-top:10.26%;
	}
	section .right .text{
		margin-left:45.2%;

	}

	section .text p{
		margin-bottom:1.6em;
	}
	#ss1 h2 img{
		width:339px;
	}
	#ss2 h2 img{
		width:100%;
		max-width:675px;
	}
	#ss3 h2 img{
		width:431px;
	}
	#ss4 h2 img{
		width:599px;
	}
	#ss5 h2 img{
		width:292px;
	}
	#ss6 h2 img{
		width:337px;
	}
	#ss7 h2 img{
		width:332px;
	}
	#ss8 h2 img{
		width:614px;
	}
	#ss9 h2 img{
		width:453px;
	}
	#ss10 h2 img{
		width:221px;
	}
}
@media screen and (max-width: 640px) {
	.isPC{
		display: none;
	}

	#conversation_head h1{
		width:91.718%;
		margin:19.687% auto 0;
	}
	#conversation_lead p{
		margin:3.33% auto 0;
		font-size: 3.75vw;
		line-height: 1.6;

	}
	#conversation_lead{
		padding-bottom:10.33%;
	}
	#conversation_main section{
		margin:2% 0 18.125%;
	}
	#conversation_lead>.inner,
	#conversation_main section>.contents{
		width:93.75%;
		margin: 0 auto;
		position: relative;
	}
	section h2{
		padding:4.6875% 0 10.625%;
		margin:auto;
		text-align: center;
		width:100%;
	}
	section h2::before,section h2::after{
		width:100px;
		border-width: 2px;
	}
	section h2::before{
		margin-top:-28px;
	}
	section h2::after{
		margin-top:28px;
	}
	section .text{
		font-size: 4.06vw;
		line-height: 1.46;
	}
	section .text .note{
		padding-left: 4.06vw;
		text-indent: -4.06vw;
	}
	section .text p{
		margin-bottom:1.6em;
	}
	section .text p:last-child{
		margin-bottom:0;
	}
	section .quest{
		margin-bottom:5.3125%;
	}
	section .quest h3{
		padding-top:8.518%;
		font-size: 4.375vw;
		line-height: 1.4;
		margin-bottom:4.44%;
	}
	section .quest h3::before{
		width:25px;height:25px;

	}
	section .quest h3::after{
		margin-top:3.03%;
		width:calc(100% - 42px);
	}
	section .quest .inner{
		width:calc(540 / 600 *100%);
		margin:auto;
		padding:4.66% 0;
	}
	#ss1 h2 img{
		width:52.96%;
	}
	#ss2 h2 img{
		width:calc(566 / 640 *100%);
	}
	#ss3 h2 img{
		width:calc(431 / 640 *100%);
	}
	#ss4 h2 img{
		width:calc(573 / 640 *100%);
	}
	#ss5 h2 img{
		width:calc(292 / 640 *100%);
	}
	#ss6 h2 img{
		width:calc(337 / 640 *100%);
	}
	#ss7 h2 img{
		width:calc(332 / 640 *100%);
	}
	#ss8 h2 img{
		width:calc(554 / 640 *100%);
	}
	#ss9 h2 img{
		width:calc(453 / 640 *100%);
	}
	#ss10 h2 img{
		width:calc(221 / 640 *100%);
	}
}

/* -----------------------------------------------
  recipe
----------------------------------------------- */

#conversation_recipe .head{
	margin-bottom:3.125%;

}
#conversation_recipe .lead{
	color:#fff;
}
#conversation_recipe .head .ingredient{
	background-color: #222;
	color:#fff;
}
#conversation_recipe .ingredient ul li{
	width:100%;
	display: flex;
	justify-content:space-between;
	align-items :flex-end;
	position: relative;

}
#conversation_recipe .ingredient ul li span{
	background-color: #222;
	position: relative;
	z-index:0;
}
#conversation_recipe .ingredient ul li span:first-child{
	padding-right:10px;
}
#conversation_recipe .ingredient ul li span:last-child{
	padding-left:10px;
}
#conversation_recipe .ingredient ul li::before{
	content: '';height:1px;
	display: block;position: absolute;left:0;bottom:0.6em;
	width:100%;
	border-top:1px solid #656565;
	z-index:0;
}
#conversation_recipe .instruction{
	background-color: #fff;
}
#conversation_recipe .instruction .point{
	background-color: #eaeaea;
	color:#ac0008;
	padding:1em 1.4em;
}
#conversation_recipe .instruction .title{
	font-weight: bold;
	margin-bottom:4px;
}
#conversation_recipe .instruction li{
	text-indent: -1.5em;
	padding-left:1.5em;
}
#conversation_recipe .instruction li span{
	background-color: #ac0008;
	color: #fff;
	padding:2px 0.4em;
	/* font-size: 0.9em; */
}

@media screen and (min-width: 641px) {
	#conversation_recipe{
		padding-bottom:80px;
	}
	#conversation_recipe h2{
		padding-bottom: 82px;
	}
	#conversation_recipe .head{
		position: relative;
	}
	#conversation_recipe .lead{
		width:80.2%;margin:0 auto 4.16%;
		font-size:18px ;
	}
	#conversation_recipe .head .image{
		width:calc(464 / 960 * 100%);
		display:inline-block;vertical-align: top;
		position: relative;
		z-index:1;
	}
	#conversation_recipe .ingredient{
		width:calc(556 / 960 * 100%);
		display:inline-block;vertical-align: top;
		position: relative;
		z-index:0;
		box-sizing: border-box;
		margin-top:4.16%;
		font-size: 18px;
		padding:2.91% 0;
	}
	#conversation_recipe .ingredient .inner{
		width:calc(400 / 436 * 100%);
	}
	#conversation_recipe .ingredient .title{
		margin-bottom:6px;

	}
	#conversation_recipe .ingredient ul li{
		margin-bottom:6px;
	}
	#conversation_recipe .instruction{
		padding:4.16% 0;
		font-size: 18px;
	}
	#conversation_recipe .instruction>.inner{
		width:calc(880 / 960 * 100%);
		margin:auto;
	}
	#conversation_recipe .instruction .point{
		margin-bottom:3.125%;
	}
	#conversation_recipe .instruction li{
		margin-bottom:1.2em;
		line-height: 1.6;
	}
	#conversation_recipe .instruction li:last-child{
		margin-bottom: 0;
	}
	#recipe1 h2 img{
		width:79.6875%;
	}
	#recipe1 .head .ingredient{
		margin-left:-7.25%;
		padding-left:calc(120 / 960 * 100%) ;
	}
	#recipe2 h2 img{
		width:56.354%;
	}
	#recipe2 .head .ingredient{
		padding-right:calc(80 / 960 * 100%);
		padding-left:calc(40 / 960 * 100%);
	}

	#recipe2 .head .image{
		position:absolute;
		top:0;right:0;
	}
}


@media screen and (max-width: 640px) {
	#conversation_recipe {
		font-size: 4.06vw;
		padding-bottom: 12.5%;
	}
	#conversation_recipe section>.inner{
		width:90.625%;
		margin:auto;
	}
	#conversation_recipe .lead{
		margin-bottom:6.25%;
	}
	#conversation_recipe .head{
		margin-bottom:4.6875%;
	}
	#conversation_recipe .head .image{
		margin-bottom:4.6875%;
	}
	#conversation_recipe .ingredient{
		padding:5.17% 0;
	}
	#conversation_recipe .ingredient>.inner{
		width:calc(514 / 580 * 100%);
		margin:auto;
	}
	#conversation_recipe .ingredient ul li{
		display: block;
		border-bottom:1px solid #656565;
		padding:8px 0;
	}
	#conversation_recipe .ingredient ul li::before{
		content: none;
	}
	#conversation_recipe .ingredient ul li span{
		display: block;
		padding:0 !important;
	}
	#conversation_recipe .ingredient ul li:last-child{
		border-style: none;
		padding-bottom: 0;
	}
	#conversation_recipe .instruction{
		padding:5.17% 0;
	}
	#conversation_recipe .instruction>.inner{
		width:calc(520 / 580 * 100%);
		margin:auto;
	}
	#conversation_recipe .instruction .point{
		margin-bottom:3.125%;
		padding:3.076%;
	}
	#conversation_recipe .instruction li{
		margin-bottom:1.2em;
		line-height: 1.6;
	}
	#conversation_recipe #recipe1{
		margin-bottom:18.75%;
	}
	#recipe1 h2 img{
		width:83.4375%;
	}
	#recipe2 h2 img{
		width:81.718%;
	}
}
/* -----------------------------------------------
  blandlink
----------------------------------------------- */

#blandlink{
	background-size: cover;
	text-align: center;
}

@media screen and (min-width: 641px) {

	#blandlink{
		padding-top:34px;
		background: #8d040a url(../images/bg_head_pc.jpg) no-repeat center top;
		background-size: cover;
	}
	#blandlink a,#blandlink .can{
		display: inline-block;
		vertical-align: middle;
	}
	#blandlink a{
		width:48.958%;
		margin-right:4.79%;
		background: #790104;
	}
	#blandlink .can{
		width:38.33%;
	}
	#blandlink .classify{
		position: absolute;
		width:2.708%;
		left:0;bottom:0;
		margin:0 0 1.041% 53.916%;
	}
}
@media screen and (max-width: 640px) {
	#blandlink{
		padding-top:9.375%;
		background: #8d040a url(../images/bg_head_sp.jpg) no-repeat center top;

	}
	#blandlink a{
		display: block;
		width:87.5%;
		margin: 0 auto 4.375%;
	}
	#blandlink .can{
		width:67.5%;
		margin:0 0 0 16.25%;
	}
	#blandlink .classify{
		position: absolute;
		width:4.0625%;
		left:0;bottom:0;
		margin:0 0 6.5% 11.25%;
	}
}

#conversation_menu{
	z-index:101;
	position: fixed;
	bottom:0;
	left:0;

	width:100%;height: 100%;
	background-color: rgba(172,0,8,0.9);
}
#conversation_menu .bg{
	position: absolute;
	left:0;top:0;
	width:100%;height:100%;
}
#conversation_menu .bg img{
	width:100%;height:100%;
}
#conversation_menu>.contents{
	width:100%;
	left:0;right:0;
	margin:auto;
	opacity: 1;
	transition: opacity 0.5s;
}
#conversation_menu .icon{
	position: absolute;
	top:0;right:0;
	display: none;
}
#conversation_menu .menu{
	position: relative;
	opacity: 1;
	transition: opacity 0.2s;
}
#conversation_menu .close{
	position: absolute;
	right:0;top:0;
}

#conversation_menu .menu ul li{
	border-bottom:1px solid #be3b40;
}
#conversation_menu .menu ul li:last-child{
	border-style: none;
}
#conversation_menu.fixed{
	position: fixed;
}
#conversation_menu.hide{
	height: 0;

}
#conversation_menu.fixed.hide{
	bottom:100px;top:auto;

}
#conversation_menu.hide .menu{
	opacity: 0;
	height:0;
	overflow: hidden;
}

#conversation_menu.hide .icon{
	display: block;
}
#conversation_menu.hide .close{
	display: none;
}

@media screen and (min-width: 641px) {
	#conversation_menu>.contents{
		width:100%;
		max-width: 960px;
	}
	#conversation_menu .title{
		box-sizing: border-box;
		position: absolute;
		width:2.1875%;
		padding-top:2.5%;
		margin:0 0 0 12.7%;
		height:100%;
	}
	#conversation_menu .title::after{
		content: '';
		display: block;
		width:1%;
		height:89%;
		position: absolute;
		left:0;bottom:0;right:0;
		border-left:1px solid #be3b40;
		margin:auto;
	}
	#conversation_menu .icon{
		width:70px;height: 70px;
		margin:16px;
	}
	#conversation_menu .close{
		width:50px;height: 50px;
		margin:-50px 8px 0 0;

	}
	#conversation_menu .menu ul{
		width:63.125%;
		margin:9.375% 0 0 27.083%;
	}
	#conversation_menu .menu ul li a{
		display: inline-block;
		padding:3.3% 0;
		width:100%;
	}
	#conversation_menu .menu ul li img{
		width:83.498%;
	}
	#conversation_menu .menu ul li.recipe img{
		width:73.26%;
	}

}
@media screen and (max-width: 640px) {
	#conversation_menu .title{
		width: 87.5%;
		margin:18.75% auto 4.375%;
		position: relative;
	}
	#conversation_menu .title img{
		width:8.21%;
	}
	#conversation_menu .title::after{
		content: '';
		display: block;
		width:88%;
		height:1px;
		position: absolute;
		top:0;bottom:0;right:0;
		border-top:1px solid #be3b40;
		margin:auto;
	}
	#conversation_menu .icon{
		width:13.75%;
		margin:12px;
	}
	#conversation_menu .icon a,
	#conversation_menu .close a{
		width:100%;
		display: block;
	}
	#conversation_menu .icon img,
	#conversation_menu .close img{
		width: 100%;
	}
	#conversation_menu .close{
		width:11.25%;height: 70px;
		margin:3.75% 3.75% 0 0;
	}

	#conversation_menu .menu ul{
		width:87.5%;
		margin:0 auto 0;
	}
	#conversation_menu .menu ul li a{
		display: inline-block;
		padding:3.21% 0;
		width:100%;
	}
	#conversation_menu .menu ul li img{
		width:99.64%;
	}
	#conversation_menu .menu ul li.recipe img{
		width:85.53%;
	}
}

#conversation_main section h2{
	transition: opacity 1s;
	opacity: 0;
}
#conversation_main section .text{
	transition: all 0.5s;
	/* padding-top:3%; */
	opacity: 0;
}
#conversation_main section .quest_parent{
	transition: all 0.5s;
	margin-top:3%;
	opacity: 0;
}

#conversation_main section.show h2,
#conversation_main section.show .quest_parent{
	margin-top:0;
	opacity: 1;
}
#conversation_main section.show .text{
	padding-top:0;
	opacity: 1;
}


#conversation_recipe section h2,
#conversation_recipe section .lead,
#conversation_recipe section .head,
#conversation_recipe section .instruction{
	opacity: 0;
	transition: all 0.5s;

}
#conversation_recipe section .lead,
#conversation_recipe section .head,
#conversation_recipe section .instruction{
	margin-top:5%;
}
#conversation_recipe section.show h2,
#conversation_recipe section.show .lead,
#conversation_recipe section.show .head,
#conversation_recipe section.show .instruction{
	opacity: 1;
}
#conversation_recipe section.show .lead,
#conversation_recipe section.show .head,
#conversation_recipe section.show .instruction{
	margin-top:0;
}

@media screen and (max-width: 640px) {
	#conversation_main section .quest_parent{
		margin-top:0;
	}
	#conversation_recipe section .lead,
	#conversation_recipe section .head,
	#conversation_recipe section .instruction{
		margin-top:0;
	}
}


/* 新テンプレート対応:start */
.linknav{
	background: #d80c18;
}
.linknav__title::before,.linknav__title::after{
	display: none;
}

.linknav__link--vermicular{
	display: none;
}
/* 新テンプレート対応:end */