@charset "utf-8";
/*
Theme Name: recipon（レシポン）
Description: レシピサイトがポンっと作れる日本語テーマ
Author: もとちょう
Version: 2.0.1
Tags: food-and-drink,photography,right-sidebar
*/

/*全体レイアウト*/
body{
	font-family: 'Klee One';
	font-display: swap;
	color: #3e2723;
}
/*ヘッダー*/
/*__キーワード検索窓（右上固定）*/
#search-keywords {
	position: fixed;
	z-index: 100;
	top:8px;
	right:8px;
}
#search-keywords__textarea{
	appearance:none;
	width: 42px;
	height: 40px;
	padding: 5px 15px 5px 5px;
	border: none;
	background: #fff url(img/search.png) no-repeat 9px center;
	background-size: 25px 25px;
	border-radius: 4px;
	transition: all 0.5s;
	outline: none;
	cursor: pointer;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .2);
}
#search-keywords__textarea:focus {
	width: 250px;
	padding: 5px 0 5px 55px;
}
/*__ヘッダー上部*/
header{
	background-color: #ffffff;
}
.header_top{
	padding: 5px 0 ;
	background-color: #8c5651;
}
.header_top__con-wrap{
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}
/*____ヘッダーロゴ*/
.header_top__site-logo{
	width: 200px;
	padding-right: 15px;
	margin: auto;
}
/*__キーワード候補　横スクロール*/
.search-horizontal{
	margin: 1px auto;
	max-width: 1100px;
	width: 100%;
}
.search-horizontal nav{
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
}
.search-horizontal ul{
	margin: 7px 0 7px 2px;
	padding-left: 0;
	display: table;
	max-width: 100%;
	border-collapse: separate;
	border-spacing: 10px 0;
}
.search-horizontal li{
	display: table-cell;
	padding: 2px 0;
	font-size: 0.95rem;
}
.search-horizontal li a{
	text-decoration: none;
	color: #3e2723;
}
::-webkit-scrollbar{
    display: none;
}
/*____キーワード候補　説明（img）欄*/
.horizontal-menu__icon{
    display: inline-block;
}
.horizontal-menu__icon img{
	width: 20px;
}
/*____キーワード候補　cssオプション*/
.icon-highlight{
	border-bottom: solid 4px #dddddd;
}

/*__2カラム幅時_トップに戻るボタン*/
.pagetop-arrow{
    display: none;
}
@media(min-width: 769px){
	.pagetop-arrow{
    display: block;
    position: fixed;
	z-index: 1500;
    bottom: 3rem;
    right: 3rem;
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    line-height: 2.2rem;
	border-radius: 50%;
	background:  #8c5651;
    color: #ffffff;	
}
}
/*__ボトム固定メニュー*/
.open-menu__title{
	font-size: 1.3rem;
	text-align: center;
	margin-top: 0.2rem;
	margin-bottom: 2rem;
}
.open-menu__title span{
	display: inline-block;
	animation-name: menu-open-h1-animate;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes menu-open-h1-animate{
	0% {
	animation-timing-function: ease-out;
	filter: opacity(0); }
	50% {
	animation-timing-function: ease-out;
	filter: opacity(0.7); }
	100% {
	animation-timing-function: ease-out;
	filter: opacity(1); } 
}
.bottom-menu{	
	position: fixed;
	width: 100%;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
	overflow: hidden;
    z-index: 1000;
	color: #3e2723;
	transition: all 0.1s;
	background: linear-gradient(transparent 25%, #fbf7f6 25%);
}
.bottom-menu ul{
	max-width: 1100px;
	display: flex;
	margin: 0 auto;
	padding-left: 0;
	list-style-type: none;
	height: 40px;
	color:  #8c5651;
}
.bottom-menu ul li{
	flex: 1;
	text-align: center;	
	padding-top: 0.2rem;
	line-height: 0.8;
}
.bottom-menu i{
	display: block;
	font-size: 1.3rem;
}
.bottom-menu span{
	display: block;
	font-size: 0.7rem;
	color: #3e2723;
}
.bottom-menu a{
	display: inline-block;
	color:  #8c5651;
	text-decoration: none;
}
.bottom-menu.hide{
    transform: translateY(100%);
}
/*____ボトムメニュー展開画面内*/
.menu_con{
	background: rgba(255,255,255,0.95);
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2000;
}
.menu_con__wrap{
	margin: 10px auto;
	max-width: 769px;
	height: 100%;
	width: 100%;
	align-items: center;
	color: #3e2723;
}
.menu_con__close{
	text-align: right;
	display: block;
	padding-right: 15px;
	font-size: 2rem;
	font-weight: 600;
}
.menu_section{
	margin: 0 10px 25px;
	animation-name: menu-open-sch-animate;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}
@keyframes menu-open-sch-animate{
	0% {
	transform: translateY(-30px);
	animation-timing-function: ease-out;
	filter: opacity(0); }
	30% {
	transform: translateY(-10px);
	animation-timing-function: ease-out;
	filter: opacity(0.2); }
	50% {
	transform: translateY(-7px);
	animation-timing-function: ease-out;
	filter: opacity(0.6); }
	100% {
	transform: translateY(0px);
	animation-timing-function: ease-out;
	filter: opacity(1); } 
}
.menu__search-keywords{
	margin-bottom: 3rem;
}
.menu__search-keywords h2{
	margin-left: 5px;
	margin-bottom: 0.7rem;
	font-size: 1.3rem;
}
.menu__search-keywords__wrap{
	top: 8px;
    right: 8px;
}
.menu__search-keywords__wrap form{
	text-align: left;
}
.menu__search-keywords__textarea{
	appearance: none;
    width: 250px;
    height: 30px;
	margin-left: 5px;
    padding: 5px 15px 5px 10px;
    border: none;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 20%);
	text-align: left;
}
.menu__search-keywords__btn{
	width: 25px;
    height: 25px;
	vertical-align: top;
	padding: 7px;
	border-radius: 4px;
	box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 20%);
}
.open-menu__list{
	list-style: none;
	font-size: 1.3rem;
	padding-left: 0.5rem;
}
.open-menu__list li{
	margin: 1rem 1rem 1.3rem 0;
	animation-name: menu-open-li-animate;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    filter: opacity(0);
}
.open-menu__list li:nth-child(1){
	animation-delay: 0.4s;
}
.open-menu__list li:nth-child(2){
	animation-delay: 0.5s;
}
.open-menu__list li:nth-child(3){
	animation-delay: 0.6s;
}
.open-menu__list li:nth-child(4){
	animation-delay: 0.7s;
}
.open-menu__list li:nth-child(5){
	animation-delay: 0.8s;
}
.open-menu__list li:nth-child(6){
	animation-delay: 0.9s;
}
.open-menu__list li:nth-child(7){
	animation-delay: 1.0s;
}
.open-menu__list li:nth-child(8){
	animation-delay: 1.1s;
}
.open-menu__list li:nth-child(9){
	animation-delay: 1.2s;
}
.open-menu__list li:nth-child(10){
	animation-delay: 1.3s;
}
@keyframes menu-open-li-animate{
	0% {
	transform: translateX(10px);
	animation-timing-function: ease-out;
	filter: opacity(0); }
	50% {
	transform: translateX(-7px);
	animation-timing-function: ease-out;
	filter: opacity(0.8); }
	100% {
	transform: translateX(0px);
	animation-timing-function: ease-out;
	filter: opacity(1); } 
}
.open-menu__list li a{
	text-decoration: none;
    color: #3e2723;	
}
.open-menu__list i{
	padding-right: 5px;
}
/*フッター*/
footer{
	width: 100%;
	padding: 5px 5px 40px;
	font-size: 0.8rem;
	background-color: #fbf7f6;
	color: #3e2723;
}
.footer_wrap{
	max-width: 1100px;
	margin: 0 auto;
	padding: 5px;
}
.footer-menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
	text-align: center;
}
.footer-menu li {
	list-style: none;
	margin: 10px 0;
}
.footer-menu a{
	text-decoration: none;
	display: inline-block;
    padding: 0 16px;
	color: #3e2723;
}
.footer-menu li+ li {
	border-left: 0.5px solid #3e2723;
}
.copyright{
	text-align: center;
	font-size: 0.7rem;
}
/*コンテンツエリアレイアウト*/
.base-wrap{
	max-width: 1100px;
	width: 100%;
	margin-right: auto;
	margin-left : auto;
}
.body_flex{
	display: flex;
}
.con_main{
	margin: 0;
	width: 100%;
	max-width: 768px;
}
.con_side{
	margin: 0 0 0 10px;
	width: 350px;
	display: none;
}
.con_side ul{
	list-style: none;
	padding-left: 0;
}
@media(min-width: 769px){
	.con_main{
	width: 70%;
}
	.con_side{
	display: block;
}
}
/*＿サイドバー内*/
.profile-box{
	margin: 0 0 10px 0;
	padding: 20px;
	border: solid 0.2px #fbf7f6;
	box-shadow: 1px 1px 2px var(--main-bg-color);
}
.profile-box__my-photo{
	width: 120px;
    height: 120px; 
    margin : 5px auto 5px auto;
}
.profile-box__my-photo img{
	border-radius: 50%;
	width: 100%;
	height: 100%;
	box-shadow: 2px 2px 3px var(--main-bg-color);
}
.profile-box__my-neme{
	text-align: center;
}
.profile-box__my-intro{
	font-size: 0.9rem;
}
.side__various-box{
	margin: 10px 0;
}
.side__various-box__bnr-box li{
	margin: 2px 0;
	border: solid 2px #fbf7f6;
}
/*汎用ブロック 汎用パターン*/
/*img基本設定*/
img{
	width: 100%;
	height: auto;
}
/*＿見出しを画像化*/
.img-title img{
	max-width: 45%;
	padding-right: 10px;
}
@media(min-width: 500px){
	.img-title img{
		max-width: 36%;
	}
}
@media(min-width: 600px){
	.img-title img{
		max-width: 32%;
	}
}
@media(min-width: 700px) {
	.img-title img{
		max-width: 28%;
	}
}
@media(min-width: 769px){
	.img-title img{		
		max-width: 25%;
		min-width: 200px;
	}
}
.img-title span{
	display:none;
}
/*＿main内で3列フレックス*/
.fx-box--3{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.fx-box--3::after {
	display: block;
	content: "";
	width: 33%;
}
.fx-box--3 li {
	margin-bottom: 40px;
	display: block;
	max-width: 390px;
	flex: 0 1 calc(94% / 3);
}
/*＿画像を正方形*/
.img-square{
	position: relative;
}
.img-square::before{
	content: "";
	display: block;
	padding-top: 100%;
}
.img-square img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	object-fit: cover;
}
/*__順位フラッグイラスト*/
.rank{
	width: 17%;
    height: 17%;
    display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
    top: -15px;
    left: 2px;
}
.rank1{
	width: 22%;
    height: 22%;
}
.rank img{
	width: 100%;
	height: auto;
}
/*__newアイコン*/
.new-icon{
	position: absolute;
    right: 2%;
    top: -18px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #E67A7A;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	box-shadow: 1px 1px 1px #555;
}
.new-icon span{
	padding-right: 2px;
	padding-bottom: 4px;
}
/*__タクソノミー 特集 アイコン*/
.taxonomy_special-icon__wrap{
	margin: 4px 0 0;
	display: inline-block;
}
.taxonomy_special-icon{
	margin: 2px 2px;
	padding: 2px 5px 2px;
	font-size:0.7rem;
    border-radius: 15px;
	/* background-color: #e67a7a; */
	color: #fff;
	display: inline-block;
}
.taxonomy_special-icon__wrap .taxonomy_special-icon a{
	color: #fff;
}
/*__リンクボタン*/
.link-summary__btn{
	border: solid 0.1px  #8c5651;
	border-radius: 1.5rem;
	padding: 0.2rem 0.8rem 0.3rem;
	font-size: 0.9rem;
	display: inline-block;
	margin-left: 1rem;
}
/*検索用ブロック(search-boxテンプレート)*/
/*＿検索共通スタイル*/
.search-box{
	margin: 4rem auto 0.5rem;
	border-top: solid 1px  #8c5651;
}
.search-box h2.img-title{
	margin: 45px 0 4px;
    padding: 8px;
	text-align: left;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3e2723;
}
.search-box a{
	color: #3e2723;
	text-decoration: none;
}
.search-box ul.search-tag__wrap{
	list-style: none;
	padding-left: 0;
}
.search-tag__comments{
	font-size: 0.8rem;
	color:  #8c5651;
	margin: 0 0 0 0.3rem;
}
/*＿＿レシピページのリスト疑似要素が検索ブロックでも効いてしまうため上書きで消す*/
.recipe-page .search-tag__wrap li::before{
	background: none;
}
/*__インラインで並べるパターン（食材など）*/
.search-tag__wrap{
	padding-left: 0;
}
.search-tag__wrap li{
	display: inline-block;
	font-size: 0.8rem;
	padding: 2px 2px 2px 10px;
	text-align: center;
}
.search-tag__wrap li p{
	display: inline;
}
.search-tag__wrap li a{
	color: #3e2723;
	text-decoration: none;
}
.search-tag__img-box{
	width: 20px;
	display: inline-block;
}
.search-tag__img-box img{
	width: 100%;
}
/*__アイコン大パターン（ジャンル、献立など）*/
.search-taxonomy__img-box{
	width: 60px;
}
.search-taxonomy__img-box img{
	width: 100%;
}
.search-taxonomy__name{
	margin: auto;
}
/*トップページ*/
/*__トップページ全体*/
.top_section{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding-top: 0.5rem;
}
.top_section_bc{
	background-color: #fbf7f6;
}
.top-page h1{
	margin: 30px 0 10px;
	padding: 8px ;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	color: #3e2723;
}
/*＿＿見出しアニメ*/
.purupuru{
	animation: purupuru 0.9s linear 0s 1;
}
@keyframes purupuru{
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	20%  { transform: scale(1.0, 1.03) translate(-3%, -2%) skew(3deg, 0deg); }
	50%  { transform: scale(1.0, 0.97) translate(3%, 2%) skew(-3deg, 0deg); }
	65%  { transform: scale(1.0, 1.02) translate(1%, -1%) skew(-2deg, 0deg); }
	80%  { transform: scale(1.0, 0.98) translate(-1%, 1%) skew(2deg, 0deg); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.posun{
	animation: posun 0.9s linear 0s 1;
}
@keyframes posun{
	0%   { transform: scale(0.95, 1.1) translate(0%, -100%); }
	10%  { transform: scale(0.95, 1.1) translate(0%, -5%); }
	20%  { transform: scale(1.1, 0.9) translate(0%, 10%); }
	30%  { transform: scale(0.98, 1.03) translate(0%, -5%); }
	40%  { transform: scale(0.99, 1.06) translate(0%, -10%); }
	50%  { transform: scale(0.99, 1.06) translate(0%, -5%); }
	60%  { transform: scale(1.02, 0.98) translate(0%, 2%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.poyon{
	animation: poyon 0.9s linear 0s 1;
}
@keyframes poyon{
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
	70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
	80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.korokoro{
	animation: korokoro 1.5s linear 0s 1;
}
@keyframes korokoro {
	0%   { transform: translate(0%, 0%); }
	5%   { transform: translate(3%, 0%) rotate(2deg); }
	25%  { transform: translate(5%, 0%) rotate(3deg); }
	30%  { transform: translate(-2%, 0%) rotate(-1.5deg); }
	35%  { transform: translate(-4%, 0%) rotate(-2.5deg); }
	45%  { transform: translate(1.5%, 0%) rotate(1deg); }
	50%  { transform: translate(2.5%, 0%) rotate(2deg); }
	60%  { transform: translate(-1%, 0%) rotate(-0.5deg); }
	65%  { transform: translate(-1.5%, 0%) rotate(-1deg); }
	75%  { transform: translate(0%, 0%) rotate(0deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); }
}
.top-page ol{
	list-style: none;
	padding-left: 0;
}
.top-page ul{
	margin-top: 6px;
	list-style: none;
	padding-left: 0;
}
.top-page a{
	color: #3e2723;
	text-decoration:none; 
}
/*＿ファストビュー*/
.top_fv{
	background-color: #fbf7f6;

}
.top_fv-wrap{
	position: relative;
	min-height: 350px;
	max-height: 600px;
	height: 65vh;
}
.fv_img-inner{
	position: absolute;
}
.fv_img-con{
	transform: translate(-50%,-50%);
}
.fv-logo{
	width: 90px;
	top: 45%;
	left: 50%;
}
.fv-bg{
	border-radius: 50%;
	background-color: #ffffff;
}
.fv-kondate{
	width: 120px;
	top: 15%;
	left: 25%;
}
.fv-syokuzai{
	width: 120px;
	top: 24%;
	left: 85%;
}
.fv-genre{
	width: 120px;
	top: 76%;
	left: 15%;
}
.fv-special{
	width: 120px;
	top: 86%;
	left: 75%;
}
.fv-catch{
	max-width: 400px;
	top: 65%;
	left: 50%;
}
@media (min-width:450px){
	.fv-logo{
		width: 110px;
	}
}
@media (min-width:769px){
	.fv-logo{
		width: 130px;
	}
	.fv-kondate{
		width: 135px;
	}
	.fv-syokuzai{
		width: 135px;
	}
	.fv-genre{
		width: 135px;
	}
	.fv-special{
		width: 135px;
	}
}
.fv-catch>div{
	animation-name: fv-fadein;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity:0;
}
.fv-catch>div:first-child{
	animation-delay: 1.3s;
}
.fv-catch>div:last-child{
	animation-delay: 1.5s;
}
.fv_scroll-con{
	position: relative;
}
.fv-scroll{
	height: 5px;
	top: 90%;
	left: 50%;
}
/*____ファストビュー 動き*/
.fv-fadeup{
	animation-name: fv-fadeup;
	animation-delay: 0.8s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
}
.fv-faderight{
	animation-name: fv-faderight;
	animation-delay: 1s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
}
.fv-fadeleft{
	animation-name: fv-fadeleft;
	animation-delay: 1.2s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
}
.fv-fadedown{
	animation-name: fv-fadedown;
	animation-delay: 1.4s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
}
.fv-huwahuwa{
	animation: huwahuwa 1.8s ease-in-out infinite alternate-reverse;
}
.fv-scroll-ani{
	animation-name: fv-scroll-ani;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	opacity:0;
}
.fv-scroll-ani:first-child{
	animation-delay: 0.5s;
}
.fv-scroll-ani:nth-child(2){
	animation-delay: 1s;
}
.fv-scroll-ani:last-child{
	animation-delay: 1.5s;
}
@keyframes fv-fadedown{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
}
}
@keyframes fv-faderight{
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
}
}
@keyframes fv-fadeleft{
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
}
}
@keyframes fv-fadeup{
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
}
}
@keyframes huwahuwa{
	from {
		transform: translateY(-5%);
	}
		to {
		transform: translateY(5%);
	}
}
@keyframes fv-fadein{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
}
}
@keyframes fv-scroll-ani{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
}
}
/*_______ファストビュー 動き svgアニメ*/
#illust1 path {
	animation: svg-anime 2s ease-in;
}
#illust2 path {
	animation: svg-anime 3s ease-in;
}
#illust3 ellipse {
	animation: svg-anime 1s ease-in;
	animation-delay: 2s;
}
#illust4 ellipse {
	animation: svg-anime 2s ease-in;
}
#font1 path {
	animation: svg-anime 0.5s ease-in;
}
#font2 path {
	animation: svg-anime 2s ease-in;
}
#font3 path {
	animation: svg-anime 2.5s ease-in;
}
#font4 path {
	animation: svg-anime 3s ease-in;
}
@keyframes svg-anime {
	0% {
		fill: transparent;
		stroke-dasharray: 1000px;
		stroke-dashoffset: 1000px;
	}
	100%{
		stroke-dashoffset: 0;
	}
}
/*＿特集slider*/
.top-page__specials ul{
	margin-top: 0;
}
.top-page__specials span{
	display: none;
}
/*＿＿特集slider slickカスタマイズ*/
ul.slider {
	padding: 0;
}
.slider li{
	margin: 0 5px;
	padding: 0;
}
.slider img{
	margin: 0 auto;
    width: 100%;
    max-height: 50vw;
    object-fit: cover;
	opacity: 0.3;
	transform: scale(0.9);
	transition: opacity 0.5s, transform 0.5s;
}
.slider .slick-center img {
	opacity: 1;
	transform: scale(1);
  }
ul.slick-dots{
	position: relative;
	bottom: 0;
}
/*＿重要トピックス*/
.top-page__topics__appeal__wrap{
	margin-top: 1rem;
	padding: 0.8rem 0.5rem;
	background-color: #f5cccc;
}
.top-page__topics__appeal__list{
	font-size: 0.8rem;
    padding: 0.5rem 0.5rem;
}
/*＿newマークの基準*/
.top_section li{
	position: relative;
}
/*＿画像付きリスト（人気メニューなど）*/
.img-list__lead{
	font-size: 0.9rem;
	margin: 3px 0 3px;
	color: var(--top-font-color);
}
.img-list__lead h3{
	font-size: 1rem;
	font-weight: bold;
	margin: 5px 0 5px;
}
.img-list__lead p{
	font-size: 0.8rem;
	margin: 2px 0 2px;
}
/*＿過去のレシピ一覧*/
.recipe__past{
	text-align: center;
}
.recipe__past>a{
	font-size: 0.9rem;
	margin: -4rem 0 1rem;
	padding: 0.2rem 0.8rem 0.3rem;
	border: solid 0.1px #8c5651;
	border-radius: 1.5rem;
	display: inline-block;
}
/*＿トピックス*/
.top-page .topics h2{
	margin-bottom: 0;
}
.topics li{
	margin: 10px 0 10px; 
	padding: 14px;
	font-size: 0.9rem;
	background-color: #fbf7f6;
	color: #3e2723;
	border-left: solid 4px;
}
.topics li{
	margin: 10px 0 10px; 
	padding: 14px;
	font-size: 0.9rem;
	background-color: #fbf7f6;
	color: #3e2723;
}
.topics li:first-child{
	margin: 0 0.5rem 0.8rem; 
}
.topics time{
	font-size: 0.8rem;
	color: #3e2723;
}
.topics li h3{
	font-size: 0.9rem;
	margin: 5px 0 5px;
	color: #3e2723;
}
.topics__past{
	margin-right: 0.5rem;
	text-align: right;
	font-size: 0.8rem;
}
.topics__past a{
	color: #3e2723;
	text-decoration: none;
}
/*＿サイト紹介*/
.introduction{
	background-image: url(img/introduction-bg.gif);
	background-size: cover;
	background-position: center center;
	margin: 0 auto;
	padding-top: 0!important;
	color: #000000;
}
@media(min-width: 769px){
	.introduction{
		background-attachment: fixed;
	}
}
.introduction__wrap{
	background-color: rgba(255,255,255,0.8)!important;
}
.introduction-h1{
	padding-top: 2.5rem!important;
}
.introduction-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.introduction-flex>div{
	width: 100%;
	margin: 0 auto;
	padding:  1rem 2rem 2rem;
	max-width: 500px;
}
@media(min-width: 769px){
	.introduction-flex>div{
		width: 100%;
		margin: 0 auto;
		padding:  1rem 2rem 2rem;
		max-width: 300px;
	}
}
.introduction__h2{
	display: inline-block;
	position: relative;
}
.introduction__h2--1{
	width: 105px;
}
.introduction__h2--2{
	width: 140px;
}
.introduction__h2 span{
	display: none;
}
.introduction__h2::before{
	position: absolute;
	content:"";
	display:inline-block;
	width: 3rem;
	height: 1px;
	background-color: #e67a7a;
	top: 1.3rem;
}
.introduction__h2--1::before{
	left: 115px;
}
.introduction__h2--2::before{
	left: 150px;
}
.introduction__my-name{
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
}
.introduction p{
	line-height: 1.5;
}
.top-page .introduction ul{
	padding-left: 16px;
}
.top-page .introduction li{
    list-style-type: none;
    position: relative;
    padding-left: 16px;
	padding-bottom: 10px;
}
.top-page .introduction li:before {
	position: absolute;
	left: 0;
    top: 7px;
	content: "";
	display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E67A7A;
}
/*下層ページ共通*/
.page__wrap{
	margin: 0 5px;
}
/*レシピページ*/
/*＿レシピページ内共通*/
.recipe-page section{
	margin-bottom: 2rem;
}
.recipe-page section h2{
	margin-bottom: 1px;
}
.recipe-page h2{
	margin-bottom: -0.5rem;
}
.recipe-page h3{
	border-left: solid 0.3rem #3e2723;
	margin: 4rem 0 1.5rem;
	padding: 0.2rem 0.5rem 0.5rem;
	color: #3e2723;
	background-color: #fbf7f6;
	font-weight: normal;
	font-size: 1.1rem;
	text-indent: 1.3rem;
	position: relative;
}
.recipe-page h3.recipe-h3-1{
	margin: 1.5rem 0 1rem;
}
.recipe-page h3::before{
	display: inline-block;
	width: 0.2rem;
	position: absolute;
	top: -6px;
	left: -16px;
}
.recipe-page h3.recipe-h3-1::before{
	content: url(./img/h3-1.png);
}
.recipe-page h3.recipe-h3-2::before{
	content: url(./img/h3-2.png);
}
.recipe-page h3.recipe-h3-3::before{
	content: url(./img/h3-3.png);
}
.recipe-page h3.recipe-h3-4::before{
	content: url(./img/h3-4.png);
}
.recipe-page h3.recipe-h3-5::before{
	content: url(./img/h3-5.png);
}
.recipe-page h3.recipe-h3-6::before{
	content: url(./img/h3-6.png);
}
.recipe-page h3.recipe-h3-7::before{
	content: url(./img/h3-7.png);
}
.recipe-page h3.recipe-h3-8::before{
	content: url(./img/h3-8.png);
}
.recipe-page h3.recipe-h3-9::before{
	content: url(./img/h3-9.png);
}
.recipe-page ol{
	margin: 0 0 8px;
	padding-left: 18px;
}
.recipe-page ul{
	margin: 0 0 8px;
	padding-left: 16px;
}
.recipe-page ul li{
	list-style: none;
	position: relative;
	margin: 0;
	padding: 3px 8px;
	line-height: 1.4;
}
.recipe-page ul li::before{
	position: absolute;
	content: "";
	width: 8px;
    height: 8px;
	background:  #8c5651;
	left: -6px;
    top: 12px;
    border-radius: 100%;
}
.recipe-page p{
	line-height: 1.8;
	margin: 2px 0 30px;
	padding: 2px 1px;
}
.recipe-page{
	color: #333333;
	font-size: 1rem;
	line-height: 1.5;
}
.wp-block-image figcaption{
	margin-top: 0.1rem!important;
	font-size: 0.95rem;
}
/*＿イントロ*/
.recipe__intro {
	color: #3e2723;
}
.recipe__intro__img__wrap{
	position: relative;
}
.recipe__intro__img{
	width: 100%;
	height: 60vw;
	object-fit: cover;
}
p.recipe__img__copy{
	position: absolute;
	bottom: 0.5rem;
	right: 0.3rem;
	margin-bottom: 0.5rem;
	border-radius: 25px;
	background-color: rgba(230,122,122,0.7);
	box-shadow: 1px 1px #777777;
	color: #ffffff;
	font-size: 0.95rem;
}
.recipe__img__copy::before{
	animation: down 8s infinite;
		content: url(./img/point-icon.png);
		position: absolute;
		width: 0.8rem;
		height: 0.8rem;
		left: -1rem;
	animation-delay: 1s;
	}
@keyframes down {
	0%{
		opacity: 1;
	}
	4% {
		transform: translate(0);
	}
	8% {
		transform: rotate(35deg);
	}
	9% {
		transform: translateX(10px) rotate(30deg);
	}
	11% {
		transform: translateX(0) rotate(35deg);
	}
	13% {
		transform: translateX(10px) rotate(30deg);
	}
	15% {
		transform: translateX(0) rotate(35deg);
	}
	17% {
		transform: rotate(0);
	}
	19%{
		opacity: 1;
	}
	33%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}	
}
.recipe__img__copy__link{
	color: #ffffff;
	text-decoration: none;
	padding: 0.5rem 0.6rem;
}
@media(min-width: 769px){
	.recipe__intro__img{
		width: 100%;
		height: 560px;
		object-fit: cover;
	}
}
.recipe__intro h1{
	margin: 6px 0 6px;
	font-weight: bold;
	font-size:1.5rem;
}
@media(min-width: 980px){
	.recipe__intro h1{
		font-size:1.8rem;
	}
}
.recipe__intro__copy{
	font-size: 1rem;
	margin: 6px 0 6px;
}
/*＿＿シリーズアイコン*/
.recipe__intro__term--specials{
	text-align: right;
	list-style: none;
	margin: 12px 0 6px;
	padding: 0;
}
.taxonomy_special-icon__wrap{
	margin: 2px 0 6px;
}
.taxonomy_special-icon__wrap>div{
	margin: 5px 0;
	display: inline;
}
.recipe__intro__term--specials a{
	text-decoration: none;
	color: #fff;
}
.recipe__intro__term--specials .taxonomy_special-icon{
	padding: 3px 6px 3px;
	font-size: 0.8rem;
	box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 20%);
}
/*＿＿食材アイコン*/
.recipe__intro__tag--ingredients{
	margin: 2px 3px 6px;
	text-align: right;
}
.recipe__intro__tag--ingredients__wrap{
	display: inline-block;
	padding: 4px 0 0;
}
.recipe__intro__tag--ingredients ul{
	padding-left: 0;
	margin: 0;
}

.recipe__intro__tag--ingredients p{
	margin: 6px 6px;
}
.recipe__intro__tag--ingredients li{
	display: inline-block;	
	margin-left: 4px;
	padding: 1px 2px;
	border-radius: 4px;
	border: solid 0.1px #eeeeee;
	box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 20%);
}
.recipe__intro__tag--ingredients .recipe__intro__tag--ingredients__wrap ul li::before{
	content: none;
}
.recipe__intro__tag--ingredients .search-tag__img-box{
	width: 30px;
}
/*＿食材*/
.recipe__ingredients{
	background-color: #fbf7f6;
	border-radius: 5px;
}
.recipe__ingredients__wrap{
	position: relative;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
@media(min-width: 980px){
	.recipe__ingredients__wrap{
		padding:  0.5rem 1rem 1rem 1rem;
	}
}
.recipe__ingredients h2{
	margin: 0;
}
.recipe__ingredients__people{
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 2px;
	font-size: 1.3rem;
	text-align: right;
}
.recipe__ingredients__people span{
	font-size: 0.9rem;
	padding-left: 0.2rem;
}
.recipe__ingredients dl{
	overflow: hidden;
	margin-top: 0.5rem;
}
.recipe__ingredients dl>div{
	clear: both;
	margin: 8px;
	background-image : linear-gradient(to right,  #8c5651, transparent 1px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.recipe__ingredients dt{
	float: left;
	padding: 3px 0 3px 1rem;
	max-width: 50%;
}
.recipe__ingredients dd{
	text-align: right;
	padding: 3px 0;
}
.mark--a{
	position: relative
}
.mark--a::before{
	content: "A";
	color: #e9546b;
	position: absolute;
	top: 2px;
	left: 0;
	font-weight: bold;
}
.mark--b{
	position: relative
}
.mark--b::before{
	content: "B";
	color: #546ae8;
	position: absolute;
	top: 2px;
	left: 0;
	font-weight: bold;
}
/*＿作り方概要*/
.recipe__directions-description{
	position: relative;
}
.recipe__directions-description ol{
	padding-left: 36px;
}
.recipe__directions-description li{
	margin: 0;
	padding: 8px 0;
}
.recipe__directions-description li::marker{
	color:  #3e2723;
}
.recipe__directions-description li>a{
	color:  #3e2723;
	text-decoration: none;
}
/*____詳細へリンクパーツの配置 */
.directions-link{
	width: 45%;
	position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 2px;
}
@media(min-width: 600px){
	.directions-link{
		width: 35%;
	}
}
@media(min-width: 980px){
	.directions-link{
		width: 30%;
	}
}
/*＿＿囲みボックス*/
.recipe__box{
	position: relative;
	padding: 0.5rem;
	margin: 0.5rem 0.2rem 2rem;
	background-image: 
		linear-gradient(0deg,
		transparent calc(100% - 1px),
		#f0f0f0 calc(100% - 1px)),
        linear-gradient(90deg,
		transparent calc(100% - 1px),
		#f0f0f0 calc(100% - 1px));
	background-size: 16px 16px;
	background-repeat: repeat;
	background-position: center center;
}
.recipe__box--point{
	background-color: #fff8fd;
}
.recipe__box--check{
	background-color: #efffeb;
}
.recipe__box--memo{
	background-color: #f9ece8;
	background-image: 
		linear-gradient(0deg,
		transparent calc(100% - 1px),
		#eaeaea calc(100% - 1px)),
        linear-gradient(90deg,
		transparent calc(100% - 1px),
		#eaeaea calc(100% - 1px));
}
.recipe__box--question{
	background-color: #e1f5f9;
	background-image: 
		linear-gradient(0deg,
		transparent calc(100% - 1px),
		#e3e3e3 calc(100% - 1px)),
        linear-gradient(90deg,
		transparent calc(100% - 1px),
		#e3e3e3 calc(100% - 1px));
}
.recipe__box--warning{
	background-color: #fffceb;
}
.recipe__box--word{
	background-color: #eeeeee;
	background-image: 
		linear-gradient(0deg,
		transparent calc(100% - 1px),
		#dddddd calc(100% - 1px)),
        linear-gradient(90deg,
		transparent calc(100% - 1px),
		#dddddd calc(100% - 1px));
}
.recipe__box--point::before{
	position: absolute;
	content: url(img/box-parts/point.png);
	transform: scale(0.25);
	top: -50px;
	left: -110px;
}
.recipe__box--check::before{
	position: absolute;
	content: url(img/box-parts/check.png);
	transform: scale(0.25);
	top: -50px;
	left: -110px;
}
.recipe__box--memo::before{
	position: absolute;
	content: url(img/box-parts/memo.png);
	transform: scale(0.25);
	top: -50px;
	left: -110px;
}
.recipe__box--question::before{
	position: absolute;
	content: url(img/box-parts/question.png);
	transform: scale(0.25);
	top: -50px;
	left: -135px;
}
.recipe__box--warning::before{
	position: absolute;
	content: url(img/box-parts/warning.png);
	transform: scale(0.25);
	top: -50px;
	left: -130px;
}
.recipe__box--word::before{
	position: absolute;
	content: url(img/box-parts/word.png);
	transform: scale(0.25);
	top: -50px;
	left: -110px;
}
.recipe__box p{
	font-size: 0.95rem;
	padding: 16px 8px 8px;
	margin-bottom: 4px;
}
/*＿投稿日時*/
.post-date_box{
	margin: 5px 0;
	text-align: right;
	font-size: 0.8rem;
	color: #3e2723;
}
.post-date_box i{
	padding-right: 3px;
	font-size: 0.7rem;
}
.post-date_box time{
	margin-right: 0.7rem;
}
/*＿更新履歴欄*/
.single-recipe__history__wrap{
	padding: 0.7rem 0.7rem;
	background-color: #fbf7f6;
	line-height: 1.5;
	font-size: 0.85rem;
}
/*＿作り方詳細*/
/*＿＿グループ化した場合の行間*/
.wp-block-group__inner-container>p{
    margin: 2px 0 8px;
}
/*＿＿画像とその説明下の余白*/
.wp-block-image{
	margin-bottom: 2rem;
}
/*レシピアーカイブ*/
.archive--recipe-page{
	color: #3e2723;
}
.archive--recipe-page h1{
	margin-left: 5px;
	margin-right: 5px; 
	color: #3e2723;
	font-weight: 500;
}
.archive--recipe-page h1 span{
	color:  #8c5651;
	font-size: 1rem;
	padding-left: 0.5rem;
}
.archive--recipe-page a{
	color: #3e2723;
	text-decoration: none;
}
.archive--recipe-page__wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.archive--recipe-page__wrap>article{
	width: calc(33% - 10px);
	margin: 5px;
}
.archive--recipe-page__wrap::after {
	display: block;
	content: "";
	width: 33%;
}
.archive--recipe-page h2{
	font-size: 1rem;
	font-weight: bold;
	margin: 0;
	padding: 5px 0 5px;
}
.archive--recipe-page article{
	margin-bottom: 2rem;
}
.archive--recipe__intro-copy{
	font-size: 0.8rem;
	margin: 2px 0 2px;
}
/*＿タームに紐づくレシピ数の表示*/
.term-count{
	margin-left: 0.5rem;
	font-size: 1.1rem;
	color: #999999;
}
/*__キーワード検索結果（レシピ）アーカイブ*/
.archive--recipe-page__number{
	font-size: 1.3rem!important;
}
/*__タグアーカイブ（タクソノミーアーカイブも共用）*/
.archive--tag__title-box{
	display: flex;
}
.archive--tag__title-box h1{
	margin: 0.7rem 0 0.2rem 0.2rem;
}
.archive--tag__title-box .search-tag__img-box{
	width: 60px;
}
/*お知らせアーカイブ*/
.archive--topics-page{
	color: #3e2723;
}
.archive--topics__img-title{
	margin: 30px 0 10px;
    padding: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3e2723;
}
.archive--topics-page__article{
	background-color: #fbf7f6;
	padding: 1rem;
}
.archive--topics-page a{
	color: #3e2723;
	text-decoration: none;
}
.archive--topics-page time{
	font-size: 0.9rem;
	color: #444444;
}
.archive--topics-page h2{
	font-size: 1rem;
	font-weight: bold;
	margin: 0;
	padding: 0.5rem 0 0.1rem;
}
.archive--topics-page p{
	color: #333333;
}
.archive--topics-page article{
	margin-bottom: 1rem;
}
.archive--topics__intro-copy{
	font-size: 0.9rem;
	margin-top: 0;
	padding-top: 0.5rem;
}
.archive--topics__readmore-text{
	text-align: right;
	font-size: 0.8rem;
}
/*レシピアーカイブ*/
.archive--recipe-page{
	color: #3e2723;
}
.archive--recipe__img-title{
	margin: 30px 0 10px;
    padding: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3e2723;
}
.archive--recipe__ul{
	padding-left: 0;
}
.archive--recipe__ul>li{
	position: relative;
}
/*＿ページネーション*/
.nav-links{
	text-align: center;
}
.page-numbers{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-bottom: 0.1rem;
}
span.page-numbers{
	background-color: #8c5651;
	border-radius: 50%;
	color: #ffffff;
}
/*投稿、固定ページ*/
.normal-page h1{
	color: #3e2723;
}
.normal-page p{
	color: #333333;
}
/*__本文装飾*/
.marker--pink{
	background: linear-gradient( transparent 60%, #ffcedd 0% );
}
.marker--blue{
	background: linear-gradient( transparent 60%, #a9eaf5 0% );
}
.font-color--red{
	color: #E31905;
}
/*固定ページ　タクソノミー一覧テンプレート(page-$slug)*/
/*__特集一覧用*/
.page-list_specials__article_box{
	margin-top: 2rem;
	margin-bottom: 3rem;
}
.page-list_specials__article_box h2{
	color: #3e2723;
	margin-top: 5px;
	margin-bottom: 1rem;
}
.page-list_specials__article_box a{
	color: #3e2723;
	margin-top: 2px;
	text-decoration: none;
}
/*__食材一覧用*/
/*____↑search-boxテンプレートと共通*/
/*__その他タクソノミー一覧用*/
.fx-box--2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.page-list_taxonomy-other__article_box{
	margin-top: 0.3rem;
	margin-bottom: 0.6rem;
	flex: 0 1 calc(98% / 2);
	border: solid 0.2px #dddddd;
	text-align: center;
    /* box-shadow: 1px 1px 2px #777777; */
}
.page-list_taxonomy-other__article_box h2{
	color: #3e2723;
	margin: 5px auto 5px;
	text-align: center;
}
.page-list_taxonomy-other__img_box{
	width: 100px;
	margin: 2rem auto 0;
}
.page-list_taxonomy-other__img_box img{
	width: 100%;
}
.page-list_taxonomy-other__article_box a{
	color: #3e2723;
	margin-top: 2px;
	margin-bottom: 2rem;
	text-decoration: none;
}
/*404*/
.message-404{
	margin: 2rem 6px;
}

/*書き直しデータここから上*/


/*以下未使用 */
/* ページネーション */
.pagination{
	margin: 20px;
}
.pagination ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.pagination li{
	position: relative;
    margin: 0 5px;
}
.pagination li a{
	color: #fff;
	border-radius: 50%;
	background-color: var(--main-color);
	padding: 5px 12px; 
}
@media(min-width: 769px){
	.row{
		margin: 0;
	}	
}