@charset "utf-8";

/*
	topics.css
---------------------------------------------------------------------------------------------------------------------------------------------*/
/* common
--------------------------------------------------------------------------------------------------------*/
#topics-archive .inner,
#topics-contents .inner {
	padding-right: calc(20 / 375 * 100vw);
	padding-bottom: calc(50 / 375 * 100vw);
	padding-left: calc(20 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt,
#topics-contents .inner > dl dt {
	color: #218a6e;
	padding-top: calc(15 / 375 * 100vw);
	padding-bottom: calc(15 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt span.date-year,
#topics-archive .inner .field .item dl dt strong.date-month,
#topics-archive .inner .field .item dl dt strong.date-day,
#topics-contents .inner > dl dt span.date-year,
#topics-contents .inner > dl dt strong.date-month,
#topics-contents .inner > dl dt strong.date-day {
	position: relative;
	bottom: -0.05em;
	letter-spacing: -0.02em;
}
#topics-archive .inner .field .item dl dt span,
#topics-contents .inner > dl dt span {
	font-size: calc(24 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt span.date-year,
#topics-contents .inner > dl dt span.date-year {
	font-size: calc(28 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt strong.date-month,
#topics-archive .inner .field .item dl dt strong.date-day,
#topics-contents .inner > dl dt strong.date-month,
#topics-contents .inner > dl dt strong.date-day {
	font-size: calc(38 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dd,
#topics-contents .inner > dl dd {
	background-color: #fff67f;
	padding-top: calc(10 / 375 * 100vw);
	padding-bottom: calc(10 / 375 * 100vw);
	/*border-top: calc(4 / 375 * 100vw) solid #218a6e;*/
}
#topics-archive .inner .field .item dl dd p,
#topics-contents .inner > dl dd p {
	font-size: calc(24 / 375 * 100vw);
	line-height: 1.33;
	text-align: center;
	color: #218a6e;
}
#topics-archive .inner .field .item dl dd p {
	color: #231815;
}
#topics-archive .inner .field .item dl dd p.recipe-title:first-line,
#topics-contents .inner > dl dd p.recipe-title:first-line {
	font-size: calc(21 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt span {
	font-size: calc(18 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt span.date-year {
	font-size: calc(20 / 375 * 100vw);
}
#topics-archive .inner .field .item dl dt strong.date-month,
#topics-archive .inner .field .item dl dt strong.date-day {
	font-size: calc(28 / 375 * 100vw);
}

@media screen and (min-width: 1025px) {
	#topics-archive .inner,
	#topics-contents .inner {
		padding-right: 5.5rem;
		padding-bottom: 13.5rem;
		padding-left: 5.5rem;
	}
	#topics-archive .inner .field .item dl dt,
	#topics-contents .inner > dl dt {
		padding-top: 4.0rem;
		padding-bottom: 4.0rem;
	}
	#topics-archive .inner .field .item dl dt span,
	#topics-contents .inner > dl dt span {
		font-size: 6.5rem;
	}
	#topics-archive .inner .field .item dl dt span.date-year,
	#topics-contents .inner > dl dt span.date-year {
		font-size: 7.6rem;
	}
	#topics-archive .inner .field .item dl dt strong.date-month,
	#topics-archive .inner .field .item dl dt strong.date-day,
	#topics-contents .inner > dl dt strong.date-month,
	#topics-contents .inner > dl dt strong.date-day {
		font-size: 10.3rem;
	}
	#topics-archive .inner .field .item dl dd,
	#topics-contents .inner > dl dd {
		padding-top: 2.7rem;
		padding-bottom: 2.7rem;
		/*border-top: 1.0rem solid #218a6e;*/
	}
	#topics-archive .inner .field .item dl dd p,
	#topics-contents .inner > dl dd p {
		font-size: 6.5rem;
	}
	#topics-archive .inner .field .item dl dd p.recipe-title:first-line,
	#topics-contents .inner > dl dd p.recipe-title:first-line {
		font-size: 5.7rem;
	}
	#topics-archive .inner .field .item dl dt span {
		font-size: 4.9rem;
	}
	#topics-archive .inner .field .item dl dt span.date-year {
		font-size: 5.4rem;
	}
	#topics-archive .inner .field .item dl dt strong.date-month,
	#topics-archive .inner .field .item dl dt strong.date-day {
		font-size: 7.6rem;
	}

}


/* topics-archive
--------------------------------------------------------------------------------------------------------*/
#topics-archive .inner {
	padding-top: calc(30 / 375 * 100vw);
}
#topics-archive .inner h2 {
	font-size: calc(30 / 375 * 100vw);
	color: #fff;
	text-align: center;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-color: #218a6e;
}
#topics-archive .inner .field {
	padding-top: calc(15 / 375 * 100vw);
}
#topics-archive .inner .field .item {
	border-top: calc(4 / 375 * 100vw) solid #218a6e;
	/*border-bottom: calc(4 / 375 * 100vw) solid #218a6e;*/
}
#topics-archive .inner .field .item:not(:last-child) {
	margin-bottom: calc(15 / 375 * 100vw);
}
#topics-archive .inner .field .item a {
	display: block;
}

@media screen and (min-width: 1025px) {
	#topics-archive .inner {
		padding-top: 8.0rem;
	}
	#topics-archive .inner h2 {
		font-size: 8.2rem;
	}
	#topics-archive .inner .field {
		padding-top: 4.0rem;
	}
	#topics-archive .inner .field .item {
		border-top: 1.0rem solid #218a6e;
		/*border-bottom: 1.0rem solid #218a6e;*/
	}
	#topics-archive .inner .field .item:not(:last-child) {
		margin-bottom: 4.0rem;
	}
}

/* topics-contents
--------------------------------------------------------------------------------------------------------*/
#topics-contents .inner > dl dd {
	border-bottom: calc(4 / 375 * 100vw) solid #218a6e;
}
#topics-contents .inner .is-wysiwyg h1,
#topics-contents .inner .is-wysiwyg h2,
#topics-contents .inner .is-wysiwyg h3,
#topics-contents .inner .is-wysiwyg h4,
#topics-contents .inner .is-wysiwyg h5,
#topics-contents .inner .is-wysiwyg h6 { font-weight: 700;}
#topics-contents .inner .is-wysiwyg h1 { font-size: 150.0%;}
#topics-contents .inner .is-wysiwyg h2 { font-size: 137.5%;}
#topics-contents .inner .is-wysiwyg h3 { font-size: 112.5%;}
#topics-contents .inner .is-wysiwyg h4 { font-size: 100.0%;}
#topics-contents .inner .is-wysiwyg h5 { font-size: 93.8%;}
#topics-contents .inner .is-wysiwyg h6 { font-size: 87.5%;}
#topics-contents .inner .is-wysiwyg a,
#topics-contents .inner .is-wysiwyg a * { text-decoration: underline;}
#topics-contents .inner .is-wysiwyg strong { font-weight: 700;}
#topics-contents .inner .is-wysiwyg em { font-style: italic;}
#topics-contents .inner .is-wysiwyg ul,
#topics-contents .inner .is-wysiwyg ol { padding-left: 1.5em;}
#topics-contents .inner .is-wysiwyg ul { list-style: disc;}
#topics-contents .inner .is-wysiwyg ol { list-style: decimal;}

#topics-contents .inner .btn-archive {
	margin-top: calc(30 / 375 * 100vw);
}
#topics-contents .inner .btn-archive a {
	width: 100.0%;
	background-color: #fff462;
	border: calc(5 / 375 * 100vw) solid #218c3b;
	border-radius: calc(32 / 375 * 100vw);
}
#topics-contents .inner .btn-archive a span {
	font-size: calc(22 / 375 * 100vw);
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	color: #238e3a;
}

@media screen and (min-width: 1025px) {
	#topics-contents .inner > dl dd {
		border-bottom: 1.0rem solid #218a6e;
	}
	#topics-contents .inner .btn-archive {
		margin-top: 8.0rem;
	}
	#topics-contents .inner .btn-archive a {
		border: 1.3rem solid #218c3b;
		border-radius: 8.8rem;
	}
	#topics-contents .inner .btn-archive a span {
		font-size: 6.0rem;
	}

}

/* content-recipe
--------------------------------------------------------------------------------------------------------*/
#content-recipe {
	padding-top: calc(30 / 375 * 100vw);
}
#content-recipe .main-photo {
	text-align: center;
	margin-bottom: calc(30 / 375 * 100vw);
}
#content-recipe .movie {
	position: relative;
	text-align: center;
	padding-top: 56.25%;
	margin-bottom: calc(20 / 375 * 100vw);
}
#content-recipe .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#content-recipe .main-headline,
#content-recipe .main-headline * {
	font-size: calc(16 / 375 * 100vw);
}
#content-recipe .main-headline {
	font-size: calc(16 / 375 * 100vw);
	line-height: 1.66;
	margin-bottom: calc(30 / 375 * 100vw);
}
#content-recipe .item {
	background-color: #ecf4d9;
	padding-top: calc(20 / 375 * 100vw);
	padding-right: calc(20 / 375 * 100vw);
	padding-bottom: calc(20 / 375 * 100vw);
	padding-left: calc(20 / 375 * 100vw);
	border-radius: calc(5 / 375 * 100vw);
}
#content-recipe .item .ingredients {
	padding-bottom: calc(10 / 375 * 100vw);
	border-bottom: calc(4 / 375 * 100vw) dotted #8eb57c;
}
#content-recipe .item .ingredients dt,
#content-recipe .item .ingredients dd,
#content-recipe .item .howto > p,
#content-recipe .item .howto ul li {
	font-size: calc(16 / 375 * 100vw);
	line-height: 1.66;
}
#content-recipe .item .ingredients dt,
#content-recipe .item .howto > p {
	color: #4da262;
}
#content-recipe .item .howto {
	padding-top: calc(10 / 375 * 100vw);
}
#content-recipe .item .howto ul {
	counter-reset: howto;
}
#content-recipe .item .howto ul li {
	counter-increment: howto;
}
#content-recipe .item .howto ul li:not(:last-child) {
	margin-bottom: 0.75em;
}
#content-recipe .item .howto ul li::before {
	content: counter(howto) '.';
}

@media screen and (min-width: 1025px) {
	#content-recipe {
		padding-top: 8.0rem;
	}
	#content-recipe .main-photo {
		margin-bottom: 8.0rem;
	}
	#content-recipe .movie {
		margin-bottom: 8.0rem;
	}
	#content-recipe .main-headline,
	#content-recipe .main-headline * {
		font-size: 4.3rem;
	}
	#content-recipe .main-headline {
		font-size: 4.3rem;
		margin-bottom: 8.0rem;
	}
	#content-recipe .item {
		padding-top: 5.4rem;
		padding-right: 5.4rem;
		padding-bottom: 5.4rem;
		padding-left: 5.4rem;
		border-radius: 1.3rem;
	}
	#content-recipe .item .ingredients {
		padding-bottom: 2.7rem;
		border-bottom: 1.0rem dotted #8eb57c;
	}
	#content-recipe .item .ingredients dt,
	#content-recipe .item .ingredients dd,
	#content-recipe .item .howto > p,
	#content-recipe .item .howto ul li {
		font-size: 4.3rem;
	}
	#content-recipe .item .howto {
		padding-top: 2.7rem;
	}
}

/* content-exercise
--------------------------------------------------------------------------------------------------------*/
#content-exercise {
	padding-top: calc(30 / 375 * 100vw);
}
#content-exercise .photo {
	text-align: center;
	margin-bottom: calc(20 / 375 * 100vw);
}
#content-exercise .movie {
	position: relative;
	text-align: center;
	padding-top: 56.25%;
	margin-bottom: calc(20 / 375 * 100vw);
}
#content-exercise .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#content-exercise .item:not(:last-child) {
	margin-bottom: calc(25 / 375 * 100vw);
}
#content-exercise .item dl dt {
	font-size: calc(18 / 375 * 100vw);
	line-height: 1.388;
	color: #4da262;
	margin-bottom: 0.5em;
}
#content-exercise .item dl dd {
	font-size: calc(16 / 375 * 100vw);
	line-height: 1.625;
}

@media screen and (min-width: 1025px) {
	#content-exercise {
		padding-top: 8.0rem;
	}
	#content-exercise .photo {
		margin-bottom: 5.4rem;
	}
	#content-exercise .movie {
		margin-bottom: 5.4rem;
	}
	#content-exercise .item:not(:last-child) {
		margin-bottom: 6.8rem;
	}
	#content-exercise .item dl dt {
		font-size: 4.9rem;
	}
	#content-exercise .item dl dd {
		font-size: 4.3rem;
	}

}

/* content-others
--------------------------------------------------------------------------------------------------------*/
#content-others {
	padding-top: calc(30 / 375 * 100vw);
}
#content-others .main-photo {
	text-align: center;
	margin-bottom: calc(30 / 375 * 100vw);
}
#content-others .main-headline,
#content-others .main-headline * {
	font-size: calc(16 / 375 * 100vw);
}
#content-others .main-headline {
	font-size: calc(16 / 375 * 100vw);
	line-height: 1.66;
	margin-bottom: calc(30 / 375 * 100vw);
}
@media screen and (min-width: 1025px) {
	#content-others {
		padding-top: 8.0rem;
	}
	#content-others .main-photo {
		margin-bottom: 8.0rem;
	}
	#content-others .main-headline,
	#content-others .main-headline * {
		font-size: 4.3rem;
	}
	#content-others .main-headline {
		font-size: 4.3rem;
		margin-bottom: 8.0rem;
	}
}

/*
	topics.css End
---------------------------------------------------------------------------------------------------------------------------------------------*/