@charset "UTF-8";

/* ----------------------------------
 今月のレシピ
---------------------------------- */
#todays_recipe_book { padding: 82px 0 0; margin: 60px auto; position: relative;}
#todays_recipe_book img { max-width: 100%; vertical-align: top;}
#todays_recipe_book_top {
	padding: 0 0 32px;
	background-color: none;
	background-image: url("/img/usr/top/recipe/book_bg_sp.png");
	background-repeat: no-repeat;
	background-position: center 115px;
 	-webkit-background-size: 100% calc(100% - 115px);
	background-size: 100% calc(100% - 115px);
}
#todays_recipe_book_top .todays-recipe-image { margin: 0 15px 40px; aspect-ratio: 468 / 274; overflow: hidden;}
#todays_recipe_book_top .todays-recipe-image img { width: 100%; height: 100%; object-fit: cover;}
#todays_recipe_book_top .todays-recipe-head  { margin: 0 15px;}
#todays_recipe_book_top .todays-recipe-head .monthly-recipe-ttl {
  padding: 0;
  margin: 0 0 20px;
  border: none;
  font-size: 24px;
  color: #111111;
	position: absolute;
	top: 0;
	left: 15px;
}
#todays_recipe_book_top .todays-recipe-head .monthly-recipe-ttl .eng { font-size: 16px; color: #808000; letter-spacing: 0.16em; display: block;}
#todays_recipe_book_top .todays-recipe-head .monthly-recipe-name {
	min-height: 90px;
	padding: 20px 0;
	margin: 0;
	border: none;
	font-size: 18px;  
	font-weight: 400;
	text-align: center;
	color: #111111;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: none;
	background-image: url("/img/usr/top/recipe/line_top.png"), url("/img/usr/top/recipe/line_bottom.png");
	background-repeat: repeat-x, repeat-x;
	background-position: center top, center bottom;
 	-webkit-background-size: auto 4px, auto 4px;
	background-size: auto 4px, auto 4px;
	position: relative;
}
#todays_recipe_book_top .todays-recipe-head .monthly-recipe-name::before {
	content: '';
	width: 90px;
	height: 61px;
	display: block;
	background-color: none;
	background-image: url("/img/usr/top/recipe/ico_design.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	position: absolute;
	top: -30px;
	left: 0;
}
#todays_recipe_book_top .todays-recipe-map { width: calc(100% - 30px); margin: 20px auto 15px; position: relative;}
#todays_recipe_book_top .todays-recipe-map .map { border-radius: 20px; overflow: hidden;}
#todays_recipe_book_top .todays-recipe-map li.map-item { 
	width: 28px;
	height: 28px;
	padding: 0 0 0 24px;
	border: #FFF 2px solid;
	border-radius: 28px;
	display: flex;
	align-items: center;
	background-color: #D80000;
	background-image: url("/img/usr/top/recipe/ico_glasses.png");
	background-repeat: no-repeat;
	background-position: 5px center;
	-webkit-background-size: auto 55%;
	background-size: auto 55%;
	box-sizing: border-box;
 	position: absolute;
	overflow: hidden;
	cursor: pointer;
	transition: width 0.3s ease;
}
#todays_recipe_book_top .todays-recipe-map li.map-item span {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
	word-break: keep-all;
	white-space: nowrap;
  color: #FFF;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}
#todays_recipe_book_top .todays-recipe-map li.map-item:hover span,
#todays_recipe_book_top .todays-recipe-map li.map-item.active span { opacity: 1.0;}
#todays_recipe_book_top .todays-recipe-map li.map-item[key="sidedish"] { left: 39%; top: 45%;}
#todays_recipe_book_top .todays-recipe-map li.map-item[key="pickles"]  { left: 58%; top: 23%;}
#todays_recipe_book_top .todays-recipe-map li.map-item[key="sweets"]   { left: 82%; top: 32%;}
#todays_recipe_book_top .todays-recipe-map li.map-item[key="rice"]     { left: 25.5%; top: 84%;}
#todays_recipe_book_top .todays-recipe-map li.map-item[key="soup"]     { left: 55%; top: 70%;}
#todays_recipe_book_top .todays-recipe-map li.map-item:hover,
#todays_recipe_book_top .todays-recipe-map li.map-item.active { width: calc((24px * 2) + 2em);}
#todays_recipe_book_top .todays-recipe-map li.map-item[key="sweets"]:hover,
#todays_recipe_book_top .todays-recipe-map li.map-item.active[key="sweets"],
#todays_recipe_book_top .todays-recipe-map li.map-item[key="soup"]:hover,
#todays_recipe_book_top .todays-recipe-map li.map-item.active[key="soup"] { width: calc((24px * 2) + 1em);}
#todays_recipe_book_top .about-mark { font-size: 12px; text-align: center; display: flex; justify-content: center; align-items: center;}
#todays_recipe_book_top .about-mark::before {
	content: '';
	width: 28px;
	min-width: 28px;
	height: 28px;
	margin: 0 15px 0 0;
	border: #FFF 2px solid;
	border-radius: 28px;
	display: block;
	background-color: #D80000;
	background-image: url("/img/usr/top/recipe/ico_glasses.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto 60%;
	background-size: auto 60%;
	box-sizing: border-box;
}

@media screen and (min-width: 769px) {
	#todays_recipe_book { margin: 100px auto;}
	#todays_recipe_book_top {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 0 80px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-image: url("/img/usr/top/recipe/book_bg.png");
		background-position: center 80px;
		-webkit-background-size: 100% calc(100% - 80px);
		background-size: 100% calc(100% - 80px);
	}
	#todays_recipe_book_top .todays-recipe-image { order: 2;}
	#todays_recipe_book_top .todays-recipe-head  { order: 1;}
	#todays_recipe_book_top .todays-recipe-map   { order: 3;}
	#todays_recipe_book_top .about-mark          { order: 4;}
	
	#todays_recipe_book_top .todays-recipe-image { width: 520px; padding: 0 50px 0 0; margin: 0; box-sizing: border-box;}
	#todays_recipe_book_top .todays-recipe-head  { width: calc(100% - 650px); margin: 0; display: flex; flex-direction: column; position: relative;}
	#todays_recipe_book_top .todays-recipe-head .monthly-recipe-ttl { font-size: 32px; line-height: 1.0; display: flex; align-items: flex-end; left: 0;}
	#todays_recipe_book_top .todays-recipe-head .monthly-recipe-ttl .eng { margin: 0 0 5px 20px; font-size: 16px; line-height: 1.0; display: inline;}
	#todays_recipe_book_top .todays-recipe-head .monthly-recipe-name { min-height: 120px; font-size: 28px; margin: auto 0 0 50px;}
	#todays_recipe_book_top .todays-recipe-head .monthly-recipe-name::before { width: 168px; height: 114px; top: -95px;}
	#todays_recipe_book_top .todays-recipe-map { width: calc(100% - 200px); margin: 50px auto 20px; position: relative;}
	#todays_recipe_book_top .todays-recipe-map li.map-item { width: 54px; padding: 0 0 0 50px; height: 54px; border-radius: 54px; background-position: 12px center;}
	#todays_recipe_book_top .todays-recipe-map li.map-item:hover,
	#todays_recipe_book_top .todays-recipe-map li.map-item.active { width: calc((50px * 2) + 3em);}
	#todays_recipe_book_top .todays-recipe-map li.map-item[key="sweets"]:hover,
	#todays_recipe_book_top .todays-recipe-map li.map-item.active[key="sweets"],
	#todays_recipe_book_top .todays-recipe-map li.map-item[key="soup"]:hover,
	#todays_recipe_book_top .todays-recipe-map li.map-item.active[key="soup"] { width: calc((50px * 2) + 2em);}
	#todays_recipe_book_top .todays-recipe-map li.map-item span { font-size: 22px;}
	#todays_recipe_book_top .todays-recipe-map li.map-item[key="sidedish"] { left: 37%; top: 26%;}
	#todays_recipe_book_top .todays-recipe-map li.map-item[key="pickles"]  { left: 60%;}
	#todays_recipe_book_top .todays-recipe-map li.map-item[key="sweets"]   { left: 80%; top: 24%;}
	#todays_recipe_book_top .about-mark { width: 100%; padding: 0 100px 0 0; font-size: 16px; text-align: right; justify-content: flex-end;}
	#todays_recipe_book_top .about-mark::before { width: 36px; min-width: 36px; height: 36px; border-radius: 36px;}
}

/* ----------------------------------
 カテゴリ別レシピ一覧
---------------------------------- */
#todays_recipe_list { padding: 0 15px; margin: 20px 0 0;}
#todays_recipe_list .recipe-box-ttl { padding: 0; margin: 0 0 20px; border: none; display: flex; align-items: center; position: relative;}
#todays_recipe_list .recipe-box-ttl::after { content: ''; width: 100%; border-top: #707070 1px solid; position: absolute; left: 0; top: calc(50% - 0.5px); z-index: 1;}
#todays_recipe_list .recipe-box-ttl span {
  padding: 0 20px 0 0;
  font-size: 24px;
  font-weight: 400;
  color: #111;
  display: inline-block;
  background: #FFF;
  position: relative;
  z-index: 2;
}
#todays_recipe_list .recipe-box { height: 0; overflow: visible; opacity: 0; pointer-events: none; transition: opacity .3s ease;}
#todays_recipe_list .recipe-box.is-visible { height: auto; opacity: 1; pointer-events: auto;}
#todays_recipe_list .slider-outer { position: relative;}
#todays_recipe_list .block-pagecategory-page-list--frame-wrap { overflow: hidden;}
#todays_recipe_list .block-pagecategory-page-list--frame.swiper-wrapper { padding-bottom: 30px; flex-wrap: nowrap !important; gap: 0 !important;}
#todays_recipe_list .block-pagecategory-page-list--page.swiper-slide { width: calc((100% - 12px) / 2.5) !important; max-width: calc((100% - 12px) / 2.5) !important;}
#todays_recipe_list .block-pagecategory-page-list--page-caption { font-size: 16px;}
#todays_recipe_list .block-pagecategory-page-list--page-caption a { font-size: 16px;}
#todays_recipe_list .block-pagecategory-page-list--date { font-size: 12px;}
#todays_recipe_list .swiper-buttons { max-width: unset !important; top: 0; transform: none;}
#todays_recipe_list .swiper-buttons .swiper-button-prev { height: 37vw; top: 0; left: -15px; transform: none; display: flex; justify-content: flex-start; align-items: center;}
#todays_recipe_list .swiper-buttons .swiper-button-next { height: 37vw; top: 0; right: -15px; transform: none; display: flex; justify-content: flex-end; align-items: center;}
#todays_recipe_list .swiper-buttons .swiper-button-prev::after { width: 30%;}
#todays_recipe_list .swiper-buttons .swiper-button-next::after { width: 30%;}
#todays_recipe_list .swiper-scrollbar { width: 100%; height: 4px;}

@media screen and (min-width: 769px) {
	#todays_recipe_list { padding: 0 100px; margin: 40px 0 0;}
	#todays_recipe_list .recipe-box-ttl { margin: 0 0 30px;}
	#todays_recipe_list .recipe-box-ttl span { padding: 0 25px 0 0; font-size: 32px;}
	#todays_recipe_list .block-pagecategory-page-list--frame.swiper-wrapper { padding-bottom: 40px;}
	#todays_recipe_list .block-pagecategory-page-list--page.swiper-slide { width: 240px !important; max-width: 240px !important;}
	#todays_recipe_list .block-pagecategory-page-list--date { font-size: 16px;}
	#todays_recipe_list .swiper-buttons .swiper-button-prev { height: 240px; top: 0; left: -80px; justify-content: center;}
	#todays_recipe_list .swiper-buttons .swiper-button-next { height: 240px; top: 0; right: -80px; justify-content: center;}
	#todays_recipe_list .swiper-buttons .swiper-button-prev::after { width: 26%;}
	#todays_recipe_list .swiper-buttons .swiper-button-next::after { width: 26%;}
}