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

/*****************

	島本先生のコラム

*****************/
	.column-ttl {
		text-align:center;
		font-family:'M PLUS Rounded 1c', sans-serif; font-weight:700;
	}
	
	.column-ttl h3 {
		text-align:center;
		font-size:1.6rem;
		margin:0 auto;
	}
	
	.column-ttl a {
		display:inline-block;
		font-size:1.8rem;
		font-weight:700!important;
		margin:0 auto;
	}
	
	
/*****************

	レシピ

*****************/

.recipe {
	margin:0 auto;
	padding:1em;
	background:#f9f9f9;
	text-align:left;
	border:#eee;
	border-radius:5px;
}
	
.recipe p {
	font-size:.9em;
	margin-bottom:.3em;
}
	
.recipe .dishName {
 	font-size: 2.4rem;
 	font-weight: bold;
}

.recipe .dishNameItem {
	font-size: 1.8rem;
	font-weight: bold;
	margin: 2em 0 .5em;
	border-bottom:#ccc 1px solid;
}

	
.recipe .ingredient-name {
	display:inline-block;
	width:18em;
}

.recipe .amount{
	position:relative;
}

.recipe .amount::before  {
	content: " ･･･ ";
	position:absolute;
	top:0;
	left:-2em;
}
	
.recipe .setType {
	font-weight:bold;
	color:rgba(115, 201, 115, 1);
}
	
.recipe .set-details > span {
	display:inline-block;
	width:6em;
}
	
.ingredient-set {
	padding-top:.5em;
	margin-top:.8em!important;
}
	
.recipe .set-details span.amount{
	width:8em;		
}

.recipe .cuisine > div > p {
	padding-left:35px;
}
	
.recipe .cuisine > div > span {
	display:flex;
	width:26px;
	height:26px;
	align-items: center;
	justify-content: center;
	background:rgba(115, 201, 115, 1);
	color:#fff;
	position:absolute;
	top:0;
	left:0;
	border-radius:5px;
}
	
.recipe .cuisine > div {
	margin-bottom:1.2em;
	position:relative;
}


/*****************

ユーザーガイド＆ショップガイド

*****************/


/** 目次 **/
	.button-wrapper {
		margin-top:80px;
		display:flex;
		flex-wrap:wrap;
		margin:0 auto 2em;
		max-width:800px;
		gap:5px;
	}

	.switch-button.is-active{
		background:rgba(238, 131, 111, .95);
		color:#fff;
	}	
	
	.switch-button {
		box-sizing:border-box!important;
		display:inline-block;
		width:24.5%;
		padding:.5em 0;
		margin-bottom:.3em;
		text-align:center;
		border-radius:8px;
		background:#efefef;
		font-size:14px;
	}
	
	@media screen and (max-width:768px){
		.switch-button {
			width:48%;
		}
	}
/** /目次 **/


/** guide-content **/

#guide .article h2  {
	text-align:center!important;
	padding:.5em 0 .5em 0!important;
	border-top:rgba(238, 131, 111, .8) 1px solid;
	border-bottom:rgba(238, 131, 111, .8) 1px solid;
	color:rgba(238, 131, 111, .8)!important;
	font-weight:700;
}

#guide .faq-list .faq-question h3 {
	position:relative;
	padding:0 3em 0 1.5em;
	font-size:1.8rem!important;
	line-height:1.6;
}

#guide .faq-list .faq-question h3::before {
	position:absolute;
	top:-.2em;
	left:0;
	content:'Q';
	font-weight:700;
	color:#ccc;
	font-size:2.4rem;
}

#guide .faq-list .faq-answer p {
	position:relative;
	padding:0 0 0 1.5em;
	font-size:1.8rem!important;
	color:rgba(238, 131, 111, 1)!important;
}

#guide .faq-list .faq-answer p::before {
	position:absolute;
	top:-.2em;
	left:0;
	content:'A';
	font-weight:700;
	color:rgba(238, 131, 111, .8)!important;
	font-size:2.4rem;
}

#guide .article h2::before , #guide .article h3::before {
	width:0!important;
	height:0!important;
	background:none!important;
}

.use-ttl {
	display:block;
	padding:.3em 0;
	text-align:center;
	color:rgba(0, 104, 183, 1);
	border-top:rgba(0, 104, 183, 1) 1px solid;
	border-bottom:rgba(0, 104, 183, 1) 1px solid;
}

.useblock {
	position:relative;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	padding:1em;
	border:rgba(238, 131, 111, .4) 5px solid;
	border-radius:5px;
	font-size:1.8rem;
}

.useblock strong {
	display:block;
	font-size:5rem;
	font-weight:700;
	color:rgba(238, 131, 111, .5);
	background:none!important;
}
		
		
.useblock p{
	text-align:left;
	font-size:16px;
}
		
.useblock figure{
	text-align:center;
	width:100%;
	margin:0!important;
}
		
.useblock figure img{
	margin:0 auto;
	max-width:400px;
}

.use-arrow {
	margin:10px 0 25px;
	display:flex;
	justify-content:center;
}

.use-arrow::before {
	display:inline-block;
	width:30px;
	height:30px;
	border-bottom:rgba(238, 131, 111, .4) 5px solid;
	border-right:rgba(238, 131, 111, .4) 5px solid;
	transform:rotate(45deg);
	content:"";
}

.use-ttl{
	font-size:2.6rem;
}

@media screen and (min-width:769px){
	.useblock p{
		width:50%;
		margin-top:3em;
	}		
	
	.useblock figure{
		width:50%;
	}
	

	.useblock strong {
		position:absolute;
		top:10px;
		left:10px;
	}
}

/**よくある質問（guide内）**/
.faq-question {
	position:relative;
	cursor:pointer;
}

.faq-question .faq-toggle-btn {
	position:absolute;
	top:0;
	right:0;
	font-size:12px!important;
	display:inline-block;
	padding:.3em .5em;
	background:#a2d7dd;
	color:#fff;
	letter-spacing:.05em;
	border-radius:5px;
}

.faq-question .faq-toggle-btn.answer-active {
	background:#ccc;	
}