@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
@import url("assets/css/cookbad.css");
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** 全体構成
************************************/
body{
	background-color:#F8F6F2;
	color:#666;
	font-family:noto-sans,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,arial,sans-serif;
	font-size: 1rem;
	line-height: 1.6rem;
}
svg{
	text-align:center;
	vertical-align:middle;
}
ul ul,ul,ol{
	list-style:none;
	padding-left:0px;
}
li a{
	text-decoration:none;
}
.flex{
	display:flex;
}

#header-container{
	display:none; // ヘッダー非表示
}
#footer{
	display:none;
}

#content {
  display: flex;
  width: 100%;
}
.content-in{
	width:100%;
}
.tagline,.logo-image{
	margin:0px;
	padding:0px;
}

#main {
  background-color:#F8F6F2;	
  flex-grow: 1;
  padding: 0rem;
  border-radius:8px;
  height:auto;
  margin-right:12px;
}

#sidebar {
  width: 240px;
  background: #fff;
  overflow: hidden;
  border-radius:8px;
  margin:0 12px;
}
.sidebar-menu{
	flex-direction:column;
	line-height:3rem;
}
#sidebar ul{
	line-height:3rem;
}
.sidebar-inactive{
	padding-left:10px;
}
#sidebarToggle {
  top: 12px;
  width: 100%;
  height: 30px;
  border:0px solid #fff;
  cursor:pointer;
  text-align:right;
  font-size:1.5rem;
  font-weight:100;
}
#sidebar.collapsed {
  width: 64px;
  padding-left:0px;
  padding-right:0px;
}
#sidebar.collapsed #sidebarToggle{
  text-align:center;
	top: 12px;
}
#sidebar.collapsed li{
	padding-left:20px;
}
#sidebar.collapsed .sidebar-inactive{
	display:none;
}

#slide-in-sidebar #sidebarToggle{
	display:none;
}
/* サイドバー内のメニューがCookpad風に見えるように */
#sidebar .widget {
  background: #fff;
  margin-bottom: 1.5rem;
}
#sidebar.collapsed .widget{
	display:none;
}
.entry-footer{
	margin:1rem;
}

.entry-title, .archive-title, .related-title{
	padding-left:1rem;
	margin:16px 0px;
}

#search-edit, .search-box{
  padding:0.5rem 1rem;
  border-radius:30px;
  display: flex;
  align-items: center;
}

#search-edit {
  flex: 1;
}
.search-submit {
  position:static;
  border-radius:0.5rem;
  background-color:rgb(240 144 48/var(--tw-bg-opacity,1));
  color:#fff;
  padding:0.5rem 1rem;
  font-size:1rem;
}
/************************************
** 見出し
************************************/
h1{
	font-size: 2rem;
	line-height: 2rem;
}
h2{
	padding:1rem;
}
/************************************
** ホームカテゴリカード
************************************/
.category-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding:1rem;
}

.category-tag-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.category-tag-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tag-card .label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 0.3rem;
  font-size: 1rem;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .category-tag-card {
    width: calc(25% - 0.75rem);
  }
}

@media (max-width: 767px) {
  .category-tag-card {
    width: calc(50% - 0.5rem);
  }
}


/************************************
** カード
************************************/
.recipe-cards,.ect-entry-card {
}
.related-cards .entry-card-wrap,
.recipe-cards .entry-card-wrap{
	margin-bottom:1rem;	
}
.entry-card-wrap {
  border-radius: .5rem;
  box-shadow: 0 1px 5px rgba(0,0,0,.1);
  overflow: hidden;
  transition: transform 0.2s ease;
  margin-left:1rem;
  margin-right:1rem;
  padding:0px;
  background-color:#fff;
}
.card-thumb .cat-label{
	display:none;
}
.entry-card-wrap:hover {
  transform: scale(1.02);
}

.card-thumb{
	margin:0px;
	max-width:160px;
}
.entry-card-title{
	padding:0.5rem 1rem;
	color:#666;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行まで */
    overflow: hidden;
}
.entry-card-content{
	margin-left:1rem;
	padding:0px;
}

.e-card-snippet{
	padding-left:1rem;	
	padding-right:1rem;	
	color:#666;
}
.recipe-section {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 32px;
}

/************************************
** タグクラウド
************************************/
.categorycloud {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:1rem;
}
.categorycloud a{
  display: inline-block;
  padding: 0px 12px;
  margin-right:3px;
  background-color: #fff;
  border-radius: 5px;
  border:1px solid #666;
  font-size: 14px !important;
  color: #444;
  text-decoration: none;
  flex:0 0 auto;
}
.categorycloud a:hover {
  background-color: #ffe0b2;
}

.tagcloud{
	margin-bottom:1rem;
}
.tagcloud a {
  display: inline-block;
  padding: 6px 12px;
  margin: 5px;
  background-color: #fff;
  border-radius: 5px;
  border:1px solid #666;
  font-size: 14px !important;
  color: #444;
  text-decoration: none;
  flex:0 0 auto;
}

.tagcloud a:hover {
  background-color: #ffe0b2;
}

/************************************
** レシピ詳細ページ共通
************************************/
.recipe-top {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  background-color:#fff;
}

.recipe-header {
  flex: 1 1 55%;
  max-width: 55%;
  width:auto;
}
.recipe-title{
	margin:1rem 0rem;
}
.recipe-hero-img {
	flex: 1 1 40%;
	max-width: 40%;
	display:grid;
    width:auto;
}

.recipe-hero-img img {
  height: auto;
  border-radius: 8px;
}

.cookbad-recipe {
  margin: 16px auto;
  background: #fff;
  border-radius: 12px;
  padding-bottom:1rem;
}

.recipe-header .intro {
  color: #666;
  margin-bottom: 24px;
}

.recipe-body {
	width:100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.btn-recipe-save{
	border:1px solid rgb(255 153 51);
	border-radius:.5rem;
	color:rgb(255 153 51);
	font-weight:600;
	padding:.5rem 1rem;
	line-height:1.25;
	font-size:1rem;
	background-color:#fff;
}
/* 材料 */
.ingredients {
	flex: 1 1 40%;
	max-width: 40%;
	display:grid;
    width:auto;
}

.ingredients-table{
  width: auto;
  margin-top:16px;
  border-collapse: collapse;
  background: none;
  margin:0px 1rem;
}
.ingredients-table td{
  border: none;
  background: none;
  font-size:1rem;
  padding: 8px;
}
.ingredients-table tbody tr{
  border-bottom: 1px dashed #ccc !important;
}
.ingredients-table .right{
	text-align:right;
	font-weight:600;
}

/* 作り方 */
.steps {
  flex: 1 1 55%;
  max-width: 55%;
  width:auto;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.steps-list{
	margin:1rem;
	padding-left:0px;
}
.step-num {
  background: #ff9800;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  min-width:28px;
  margin-right:0.5rem;
}

.related-posts{
	margin-bottom:3rem;	
}

.sns-comment {
  font-size: 0.9rem;
  background-color:rgb(236 235 233);
  padding: 12px;
  border-radius: 8px;
  margin:1rem;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a, .sns-share.ss-top.ss-col-5 a, .sns-share.ss-bottom.ss-col-5 a{
	width:23%;
}
.sns-share.ss-col-6 a.sns-button{
	background-color:#fff;
}
.sns-share.ss-col-6 a.twitter-button{
	color:#000;
	border:1px solid #000;
}
.sns-share.ss-col-6 a.facebook-button{
	color:#3b5998;
	border:1px solid #3b5998;
}
.sns-share.ss-col-6 a.pinterest-button{
	color:#bd081c;
	border:1px solid #bd081c;
}
.sns-share.ss-col-6 a.copy-button{
	color:#666;	
	border:1px solid #000;
}
/*********************************
 * レシピ
 *********************************/
.masonry-grid {
  display: block;
  position: relative;
}

.masonry-sizer {
  width: 50%;
}

.masonry-item {
  width: 50%;
  margin-bottom: 5px;
  box-sizing: border-box;
  padding: 5px;
}

.masonry-item img {
  width: 100%;
  height: auto;
  border-radius: 5px; /* ←角丸 */
  display: block;
}
.masonry-item .caption {
	padding-top:5px;
	color:#333;
	font-weight:bold;
	font-size:.8em;
	line-height:1.1em;
}
.masonry-item a {
	text-decoration: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  /*必要ならばここにコードを書く*/
	#header-container{
		display:block;
	}
	h1{
		font-size: 1.5rem;
		line-height: 2rem;
	}
	#content {
	  display: flex;
	  width: 100%;
	  padding:0px;
		margin:0px;
	}
	#main {
	  padding:0px;
	  margin:0px;
	}
	.cookbad-recipe{
	  padding:1rem;
	  margin:0px;
	}
	.recipe-title{
		margin:1rem 0rem;
	}	
	.recipe-hero-img{
	  display:block;
	  max-width:100%;
	}
	.recipe-hero-img img {
	  width: 100vw;
	  position: relative;
	  left: 50%;
	  transform: translateX(-50%);
	  border-radius: 0px;
	}
	.recipe-header {
		max-width: 100%;
		padding:1rem;
	}	
	.recipe-top {
		gap:0rem;
    	flex-direction: column;
	}
	.ingredients {
		max-width: 100%;
	}
	.steps{
		max-width: 100%;
	}
	.card-thumb{
		width:120px;
	}
}
/*834px以下*/
@media screen and (max-width: 834px){

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.ect-entry-card .a-wrap:not(.ec-big-card-first) .card-thumb, .rect-entry-card .a-wrap:not(.ec-big-card-first) .card-thumb, .ect-big-card-first .a-wrap:not(.ec-big-card-first) .card-thumb{
		margin-bottom:0px;
		padding:0px;
	}
}