@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;
}

/************************************
** cookbad フェーズ1: エンタメ化UI
************************************/
/* 警告帯（全ページ共通・世界観の背骨） */
.cookbad-warning{
	background-color:#fff3cd;
	color:#7a5a00;
	font-size:0.8rem;
	line-height:1.4;
	text-align:center;
	padding:6px 12px;
	letter-spacing:0.02em;
}
.cookbad-warning-sub{
	opacity:0.75;
	margin-left:0.4em;
}

/* 食えなさメーター */
.inedibility{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin:0.5rem 0 1rem;
}
.inedibility-label{
	font-size:0.8rem;
	color:#666;
	font-weight:600;
}
.inedibility-stars{
	font-size:1.2rem;
	line-height:1;
	letter-spacing:2px;
}
.inedibility-stars .on{
	color:#f09030;
}
.inedibility-stars .off{
	color:#d9d4cc;
}
.badge-impossible{
	display:inline-block;
	border:2px solid #d33;
	color:#d33;
	font-size:0.7rem;
	font-weight:700;
	border-radius:4px;
	padding:1px 8px;
	transform:rotate(-2deg);
	letter-spacing:0.1em;
	white-space:nowrap;
}

/* 材料：食べられない行のハイライト */
.ingredients-table tr.nonfood td{
	background-color:#fff6d6;
}
.nonfood-mark{
	color:#d33;
	font-weight:700;
	margin-left:4px;
}
.ingredients-note{
	font-size:0.75rem;
	color:#999;
	margin:8px 1rem 0;
}

/* 手順：非食材が登場する工程 */
.step-critical p{
	font-weight:600;
}
.step-point{
	display:inline-block;
	background-color:#f09030;
	color:#fff;
	font-size:0.7rem;
	font-weight:700;
	border-radius:999px;
	padding:2px 10px;
	margin-left:6px;
	vertical-align:middle;
	white-space:nowrap;
}

/* コメント直後のシェア導線 */
.share-after-comment{
	margin:1rem;
}
.share-after-label{
	font-size:0.85rem;
	color:#666;
	font-weight:600;
	margin-bottom:0.5rem;
}

/* 晩ごはんガチャ（下部固定バー） */
body{
	padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
.cookbad-gacha-bar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:9000;
	display:flex;
	justify-content:center;
	padding:10px 16px calc(10px + env(safe-area-inset-bottom));
	background:linear-gradient(to top, rgba(248,246,242,0.95), rgba(248,246,242,0));
	pointer-events:none;
}
.cookbad-gacha-btn{
	pointer-events:auto;
	display:inline-block;
	background-color:#f09030;
	color:#fff;
	font-weight:700;
	font-size:1rem;
	border-radius:999px;
	padding:12px 28px;
	box-shadow:0 4px 14px rgba(240,144,48,0.4);
	text-decoration:none;
	transition:transform 0.15s ease;
}
.cookbad-gacha-btn:hover{
	color:#fff;
	transform:scale(1.04);
}

/* 本日の晩ごはん（トップページヒーロー） */
.cookbad-hero{
	margin:1rem;
}
.cookbad-hero-label{
	font-size:0.85rem;
	font-weight:700;
	color:#7a5a00;
	margin-bottom:0.5rem;
}
.cookbad-hero-card{
	display:block;
	background-color:#fff;
	border-radius:12px;
	box-shadow:0 2px 10px rgba(0,0,0,0.08);
	padding:1.25rem;
	text-decoration:none;
	color:#666;
}
.cookbad-hero-title{
	font-size:1.4rem;
	line-height:1.4;
	color:#333;
	margin:0 0 0.5rem;
	padding:0;
}
.cookbad-hero-intro{
	font-size:0.9rem;
	color:#666;
	margin:0.5rem 0;
}
.cookbad-hero-cta{
	display:inline-block;
	color:#f09030;
	font-weight:700;
	font-size:0.9rem;
	margin-top:0.25rem;
}
.cookbad-gacha-inline{
	display:inline-block;
	margin-top:0.75rem;
	font-size:0.9rem;
	font-weight:600;
	color:#7a5a00;
	background-color:#fff3cd;
	border-radius:999px;
	padding:8px 18px;
	text-decoration:none;
}

/************************************
** cookbad フェーズ2: 架空コミュニティUI
************************************/
/* 投稿者バイライン（詳細ページ） */
.chef-byline{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-bottom:0.75rem;
	text-decoration:none;
	color:#666;
	font-size:0.9rem;
	font-weight:600;
}
.chef-byline-avatar{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	background-color:#fff3cd;
	font-size:1.1rem;
}
.chef-byline:hover .chef-byline-name{
	text-decoration:underline;
}

/* 投稿者プロフィールページ */
.chef-profile{
	background-color:#fff;
	border-radius:12px;
	box-shadow:0 2px 10px rgba(0,0,0,0.08);
	margin:1rem;
	padding:1.5rem;
	text-align:center;
}
.chef-profile-avatar{
	font-size:3rem;
	line-height:1;
	margin-bottom:0.5rem;
}
.chef-profile-name{
	font-size:1.4rem;
	color:#333;
	margin:0 0 0.5rem;
}
.chef-profile-bio{
	font-size:0.9rem;
	color:#666;
	margin:0.25rem 0;
}
.chef-profile-catch{
	font-size:0.95rem;
	color:#7a5a00;
	font-weight:600;
	margin:0.5rem 0;
}
.chef-profile-count{
	font-size:0.85rem;
	color:#999;
}
.chef-profile-count strong{
	color:#f09030;
	font-size:1.1rem;
}

/* つくれぬぽ */
.tsukurenupo{
	margin:1rem;
}
.tsukurenupo-title{
	padding:0;
	margin:0 0 0.25rem;
	font-size:1.2rem;
	color:#333;
}
.tsukurenupo-count{
	font-size:0.85rem;
	color:#f09030;
	margin-left:0.5rem;
}
.tsukurenupo-sub{
	font-size:0.75rem;
	color:#999;
	margin:0 0 0.75rem;
}
.tsukurenupo-card{
	display:flex;
	gap:10px;
	background-color:#fff;
	border:1px solid #eee;
	border-radius:10px;
	padding:12px;
	margin-bottom:10px;
}
.tsukurenupo-avatar{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:50%;
	color:#fff;
	font-weight:700;
	font-size:0.9rem;
}
.tsukurenupo-avatar.av0{ background-color:#f09030; }
.tsukurenupo-avatar.av1{ background-color:#8fb573; }
.tsukurenupo-avatar.av2{ background-color:#7c9cc4; }
.tsukurenupo-avatar.av3{ background-color:#c48a7c; }
.tsukurenupo-name{
	font-size:0.8rem;
	font-weight:700;
	color:#333;
	margin-bottom:2px;
}
.tsukurenupo-tag{
	display:inline-block;
	background-color:#f3f0ea;
	color:#999;
	font-size:0.65rem;
	font-weight:600;
	border-radius:4px;
	padding:1px 6px;
	margin-left:6px;
	vertical-align:middle;
}
.tsukurenupo-text{
	font-size:0.9rem;
	color:#555;
	margin:0;
	line-height:1.6;
}

/* 材料ジャンル */
.category-tag-card .label-count{
	opacity:0.7;
	font-size:0.75rem;
	margin-left:6px;
}
.categorycloud a.nonfood-chip{
	background-color:#fff3cd;
	border-color:#d8b74a;
	color:#7a5a00;
	font-weight:600;
}
.categorycloud a.nonfood-chip:hover{
	background-color:#ffe89e;
}

/* 材料の非食材リンク */
.item-link{
	color:inherit;
	text-decoration:underline;
	text-decoration-style:dotted;
	text-underline-offset:3px;
}
.item-link:hover{
	color:#f09030;
}

/* 非食材アーカイブ */
.item-archive-header{
	margin:1rem;
	background-color:#fff;
	border-radius:12px;
	padding:1.25rem;
	box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
.item-archive-title{
	font-size:1.3rem;
	color:#333;
	margin:0 0 0.5rem;
}
.item-archive-sub{
	font-size:0.85rem;
	color:#999;
	margin:0;
}

/* 作れなかったで賞 */
.cookbad-ranking{
	margin:1rem;
	background-color:#fff;
	border-radius:12px;
	padding:1.25rem;
	box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
.cookbad-ranking-title{
	padding:0;
	margin:0 0 0.25rem;
	font-size:1.2rem;
	color:#333;
}
.cookbad-ranking-sub{
	font-size:0.75rem;
	color:#999;
	margin:0 0 0.75rem;
}
.cookbad-ranking-list{
	margin:0;
}
.cookbad-ranking-list li{
	border-bottom:1px dashed #eee;
}
.cookbad-ranking-list li:last-child{
	border-bottom:none;
}
.cookbad-ranking-list a{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 4px;
	text-decoration:none;
	color:#555;
}
.rank-num{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border-radius:50%;
	background-color:#f3f0ea;
	color:#999;
	font-weight:700;
	font-size:0.85rem;
}
.rank-num.r1{ background-color:#f09030; color:#fff; }
.rank-num.r2{ background-color:#b8b0a4; color:#fff; }
.rank-num.r3{ background-color:#c48a7c; color:#fff; }
.rank-body{
	display:flex;
	flex-direction:column;
	min-width:0;
}
.rank-title{
	font-size:0.95rem;
	font-weight:600;
	color:#444;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}
.rank-stars{
	font-size:0.75rem;
	color:#f09030;
	letter-spacing:1px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
	}
	/* SPではサイドバーを全幅化してコンテンツ下に回す */
	#content{
		flex-direction:column;
	}
	#sidebar{
		width:100%;
		margin:12px 0;
	}
	.cookbad-hero-title{
		font-size:1.25rem;
	}
}
/*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;
	}
}