@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;
	flex-direction:column;
	align-items:flex-start;
	flex-wrap:wrap;
	gap:6px;
	margin:0.5rem 0 1rem;
}
.inedibility-row{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
}
.inedibility-label{
	font-size:0.8rem;
	color:#666;
	font-weight:600;
	min-width:4.8em;
}
.inedibility-stars{
	font-size:1.2rem;
	line-height:1;
	letter-spacing:2px;
}
.inedibility-stars .on{
	color:#f09030;
}
.inedibility-stars.level-5 .on{
	color:#d33;
}
.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;
}
.badge-impossible-3{
	border-color:#b56a00;
	color:#b56a00;
}
.badge-impossible-4{
	border-color:#c54b1c;
	color:#c54b1c;
}
.badge-impossible-5{
	border-color:#a61d24;
	color:#a61d24;
}

/* 材料：食べられない行のハイライト */
.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;
}
.resident-profile{
	position:relative;
	border-radius:24px;
	box-shadow:0 14px 32px rgba(112, 92, 71, 0.10);
}
.resident-profile::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-16px;
	width:28px;
	height:28px;
	background:#fff;
	border-radius:0 0 8px 0;
	transform:translateX(-50%) rotate(45deg);
	box-shadow:6px 6px 14px rgba(112, 92, 71, 0.08);
}
.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:transparent;
	border:none;
	border-radius:0;
	padding:0;
	margin-bottom:10px;
	align-items:flex-start;
}
.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-body{
	position:relative;
	flex:1;
	background:linear-gradient(180deg, #fffdf9 0%, #f7f1e8 100%);
	border:1px solid #eadfce;
	border-radius:8px 18px 18px 18px;
	padding:12px 15px 13px;
	box-shadow:0 8px 18px rgba(124, 104, 83, 0.08);
}
.tsukurenupo-body::before{
	content:"";
	position:absolute;
	left:-10px;
	top:14px;
	width:18px;
	height:18px;
	background:linear-gradient(135deg, #fffdf9 0%, #f7f1e8 100%);
	border-left:1px solid #eadfce;
	border-bottom:1px solid #eadfce;
	transform:rotate(45deg);
	border-radius:0 0 0 3px;
}
.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;
}
.rank-date{
	font-size:0.72rem;
	color:#999;
	margin-top:3px;
}
.daily-repo-link{
	display:block;
	text-decoration:none;
	color:inherit;
}
.daily-repo-card{
	margin-bottom:0;
}
.daily-repo-recipe{
	margin:8px 0 0;
	font-size:0.78rem;
	color:#8a7f74;
	font-weight:600;
}

/************************************
** cookbad UI v2: デザイントークンと写真グリッド
************************************/
:root{
	--cb-heading:#1f1f1f;
	--cb-text:#404040;
	--cb-muted:#8a8a8a;
	--cb-accent:#e8590c;
	--cb-accent-soft:#fff3e6;
	--cb-star:#f09030;
	--cb-radius:12px;
	--cb-shadow:0 1px 4px rgba(0,0,0,0.06);
}
body{
	color:var(--cb-text);
	line-height:1.7;
	font-size:16px;
}
/* セクション見出し（トップ・アーカイブの直下h2のみ） */
.site-main > h2{
	font-size:1.3rem;
	font-weight:700;
	color:var(--cb-heading);
	margin:32px 16px 12px;
	padding:0;
	line-height:1.4;
}

/* 一覧カード: ブログ型 → 写真主役の2列グリッド */
.recipe-cards,
.related-cards{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:12px;
	padding:0 16px;
}
.recipe-cards .entry-card-wrap,
.related-cards .entry-card-wrap{
	margin:0;
	border-radius:var(--cb-radius);
	background:#fff;
	box-shadow:var(--cb-shadow);
	overflow:hidden;
}
.recipe-cards .entry-card,
.related-cards .entry-card{
	display:block;
}
.recipe-cards .card-thumb,
.related-cards .card-thumb{
	float:none;
	max-width:100%;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
	margin:0;
}
.recipe-cards .card-thumb img,
.related-cards .card-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.recipe-cards .entry-card-title,
.related-cards .entry-card-title{
	font-size:0.95rem;
	font-weight:600;
	line-height:1.45;
	color:#333;
	padding:10px 12px 14px;
	margin:0;
	-webkit-line-clamp:2;
}
.recipe-cards .entry-card-content,
.related-cards .entry-card-content{
	margin:0;
	padding:0;
}
.recipe-cards .e-card-snippet,
.related-cards .e-card-snippet{
	display:none; /* 一覧は写真とタイトルで勝負する（レシピサイトの文法） */
}
.recipe-cards .entry-card-wrap:hover,
.related-cards .entry-card-wrap:hover{
	transform:none;
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
@media (min-width: 768px){
	.recipe-cards,
	.related-cards{
		grid-template-columns:repeat(4, 1fr);
	}
}

/* ジャンルカードのラベルを洗練（黒帯 → グラデーション） */
.category-tag-card .label{
	background:linear-gradient(transparent, rgba(0,0,0,0.65));
	padding:24px 12px 10px;
	font-size:0.9rem;
	font-weight:600;
	text-align:left;
}

/* 下部固定ナビ（ホーム / ガチャ / さがす）。Cocoonのフッターメニューは廃止 */
.mobile-footer-menu-buttons,
#mobile-footer-menu-buttons{
	display:none !important;
}
.cookbad-gacha-bar{
	display:none; /* 旧ガチャバー（残存キャッシュ対策） */
}
.cookbad-bottom-nav{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:9000;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	background:rgba(255,255,255,0.97);
	border-top:1px solid #eee;
	padding:8px 16px calc(8px + env(safe-area-inset-bottom));
}
.cbn-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	min-width:56px;
	text-decoration:none;
	color:var(--cb-muted);
	font-size:0.65rem;
	font-weight:600;
}
.cbn-icon{
	font-size:1.2rem;
	line-height:1;
}
.cbn-gacha{
	flex:1;
	max-width:320px;
	text-align:center;
	background-color:var(--cb-accent);
	color:#fff;
	font-weight:700;
	font-size:0.95rem;
	border-radius:999px;
	padding:12px 16px;
	text-decoration:none;
	box-shadow:0 2px 8px rgba(232,89,12,0.35);
}
.cbn-gacha:hover{
	color:#fff;
	opacity:0.92;
}

/************************************
** cookbad UI v2b: 詳細ページ・フッター・about
************************************/
/* タイトル・メタ行 */
.recipe-header{
	padding:16px;
}
.recipe-title{
	font-size:1.5rem;
	font-weight:700;
	line-height:1.4;
	color:var(--cb-heading);
	margin:8px 0 10px;
}
.inedibility{
	margin:6px 0 8px;
}
.chef-byline{
	margin-bottom:10px;
}
.categorycloud{
	margin-bottom:12px;
	gap:6px;
}
.categorycloud a{
	border:1px solid #e0dcd4;
	border-radius:999px;
	color:#6a6a6a;
	font-size:12px !important;
	padding:3px 12px;
	margin-right:0;
	background-color:#fff;
}
.recipe-header .intro{
	color:var(--cb-text);
	font-size:0.95rem;
	line-height:1.8;
	margin-bottom:16px;
}

/* 材料・作り方 */
.cookbad-recipe h2{
	font-size:1.15rem;
	font-weight:700;
	color:var(--cb-heading);
	padding:0 16px;
	margin:24px 0 10px;
}
.ingredients-table{
	margin:0 16px;
	width:calc(100% - 32px);
}
.ingredients-table td{
	padding:10px 8px;
	font-size:0.95rem;
}
.ingredients-table tbody tr{
	border-bottom:1px solid #f0ede6 !important;
}
.steps-list{
	margin:0 16px;
}
.step{
	margin-bottom:20px;
}
.step p{
	margin:0;
	font-size:0.95rem;
	line-height:1.75;
}
.step-num{
	background:var(--cb-accent);
}
.ingredients-note{
	margin:8px 16px 0;
}

/* つくれぬぽ: 吹き出し化 */
.tsukurenupo-title,
.related-title{
	font-size:1.2rem;
	font-weight:700;
	color:var(--cb-heading);
	margin:28px 0 4px;
	padding:0;
}
.related-title{
	margin-left:16px;
	margin-bottom:12px;
}
.tsukurenupo-card{
	margin-bottom:14px;
	align-items:flex-start;
}
.tsukurenupo-avatar{
	width:34px;
	height:34px;
	font-size:0.85rem;
	margin-top:2px;
}
.tsukurenupo-avatar.av0{ background-color:#e8a06b; }
.tsukurenupo-avatar.av1{ background-color:#9dba85; }
.tsukurenupo-avatar.av2{ background-color:#8fa8c8; }
.tsukurenupo-avatar.av3{ background-color:#c99a90; }
.tsukurenupo-body{
	padding:12px 15px 13px;
}
.tsukurenupo-name{
	font-size:0.8rem;
	color:#555;
}
.tsukurenupo-tag{
	background-color:#fff;
	color:#a89e8e;
}
.tsukurenupo-text{
	font-size:0.92rem;
	color:#4a4a4a;
}

/* フッター */
.cookbad-footer{
	background:#f1ede6;
	margin-top:48px;
	padding:32px 16px calc(88px + env(safe-area-inset-bottom)); /* 下部ナビぶんの余白 */
}
.cookbad-footer-in{
	max-width:640px;
	margin:0 auto;
	text-align:center;
}
.cookbad-footer-brand{
	font-size:1.2rem;
	font-weight:700;
	color:var(--cb-heading);
	letter-spacing:0.02em;
}
.cookbad-footer-tagline{
	font-size:0.85rem;
	color:var(--cb-muted);
	margin:4px 0 12px;
}
.cookbad-footer-note{
	font-size:0.75rem;
	color:var(--cb-muted);
	line-height:1.8;
	margin-bottom:16px;
}
.cookbad-footer-nav{
	display:flex;
	justify-content:center;
	gap:20px;
	margin-bottom:16px;
}
.cookbad-footer-nav a{
	font-size:0.85rem;
	color:#6a6a6a;
	text-decoration:none;
}
.cookbad-footer-nav a:hover{
	color:var(--cb-accent);
}
.cookbad-footer-copy{
	font-size:0.75rem;
	color:#b5aca0;
	margin:0;
}

/* about ページ */
.cookbad-about{
	background:#fff;
	border-radius:var(--cb-radius);
	box-shadow:var(--cb-shadow);
	margin:16px;
	padding:24px 20px;
	max-width:640px;
}
.cookbad-about h1{
	font-size:1.4rem;
	color:var(--cb-heading);
	margin:0 0 16px;
}
.cookbad-about h2{
	font-size:1.05rem;
	font-weight:700;
	color:var(--cb-heading);
	margin:24px 0 8px;
	padding:0;
}
.cookbad-about p{
	font-size:0.95rem;
	line-height:1.9;
	margin-bottom:14px;
}
.cookbad-about-back a{
	color:var(--cb-accent);
	text-decoration:none;
	font-weight:600;
}
@media (min-width: 768px){
	.cookbad-about{
		margin:24px auto;
	}
}

/************************************
** cookbad UI v2c: アーカイブ・ページャー・シェア・タグ
************************************/
/* アーカイブ一覧も写真グリッド化（タクソノミー・カテゴリ・検索結果） */
.list.ect-entry-card{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:12px;
	padding:0 16px;
}
.list.ect-entry-card .entry-card-wrap{
	margin:0;
	border-radius:var(--cb-radius);
	background:#fff;
	box-shadow:var(--cb-shadow);
	overflow:hidden;
}
.list.ect-entry-card .entry-card{
	display:block;
}
.list.ect-entry-card .card-thumb{
	float:none;
	max-width:100%;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
	margin:0;
}
.list.ect-entry-card .card-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.list.ect-entry-card .entry-card-title{
	font-size:0.95rem;
	font-weight:600;
	line-height:1.45;
	color:#333;
	padding:10px 12px 14px;
	margin:0;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}
.list.ect-entry-card .entry-card-content{
	margin:0;
	padding:0;
}
.list.ect-entry-card .entry-card-snippet,
.list.ect-entry-card .e-card-snippet,
.list.ect-entry-card .entry-card-meta{
	display:none;
}
.list.ect-entry-card .entry-card-wrap:hover{
	transform:none;
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
@media (min-width: 768px){
	.list.ect-entry-card{
		grid-template-columns:repeat(4, 1fr);
	}
}
/* アーカイブの見出し */
.archive-title{
	font-size:1.3rem;
	font-weight:700;
	color:var(--cb-heading);
	margin:24px 16px 12px;
	padding:0;
}

/* ページャー刷新 */
.pagination{
	margin:28px 16px;
	text-align:center;
}
.pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	border-radius:10px;
	background:#fff;
	border:1px solid #e5e0d8;
	color:#555;
	margin:0 3px;
	text-decoration:none;
	font-weight:600;
	font-size:0.9rem;
}
.pagination .page-numbers.current{
	background:var(--cb-accent);
	border-color:var(--cb-accent);
	color:#fff;
}
.pagination .page-numbers.dots{
	border:none;
	background:none;
	min-width:24px;
}
.pagination-next{
	margin:24px 16px 4px;
}
.pagination-next-link.key-btn{
	display:block;
	border:1.5px solid var(--cb-accent);
	border-radius:999px;
	color:var(--cb-accent);
	background:#fff;
	font-weight:700;
	padding:12px;
	text-decoration:none;
	box-shadow:none;
}
.pagination-next-link.key-btn:hover{
	background:var(--cb-accent-soft);
	color:var(--cb-accent);
}

/* SNSシェア: 上下ともライトな丸アイコンに統一 */
.sns-share{
	margin:12px 0;
}
.sns-share .sns-share-buttons{
	display:flex;
	gap:10px;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.sns-share .sns-share-buttons a,
.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:44px !important;
	height:44px;
	border-radius:50% !important;
	border:1px solid #e0dcd4 !important;
	color:#666 !important;
	background-color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.1rem;
	margin:0;
}
.sns-share .button-caption{
	display:none !important;
}
.share-after-comment{
	margin:20px 16px;
}

/* ヘッダー内の材料タグ（小さめのニュートラルなピル） */
.tagcloud-header{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-bottom:14px;
}
.tagcloud-header a{
	font-size:11px !important;
	padding:2px 10px;
	margin:0;
	border:1px solid #e8e4dc;
	color:#8a8478;
	border-radius:999px;
	background-color:#faf8f4;
}
.tagcloud-header a:hover{
	background-color:var(--cb-accent-soft);
	color:var(--cb-accent);
}

/* 住民（つくれぬぽ）リンクと一覧ページ */
.tsukurenupo-resident-link{
	color:inherit;
	text-decoration:underline;
	text-decoration-style:dotted;
	text-underline-offset:3px;
}
.tsukurenupo-resident-link:hover{
	color:var(--cb-accent);
}
.resident-profile-avatar{
	width:64px;
	height:64px;
	font-size:1.6rem;
	margin:0 auto 10px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	color:#fff;
	font-weight:700;
}
.resident-repos{
	margin:24px 16px 16px;
}
.tsukurenupo-recipe-link{
	display:inline-block;
	margin-top:6px;
	font-size:0.8rem;
	font-weight:600;
	color:var(--cb-accent);
	text-decoration:none;
}
.tsukurenupo-recipe-link:hover{
	text-decoration:underline;
}
.tsukurenupo-empty{
	background:#f6f3ee;
	border-radius:12px;
	padding:16px;
	font-size:0.9rem;
	color:#8a8478;
	text-align:center;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
	}
}