@charset "UTF-8";

/*!
Theme Name: Cocoon Child（稲葉工務店）
Description: 稲葉工務店（inaba-koumuten.com）の Cocoon 子テーマ。TCD SKIN の見た目を「ほぼ同じ」に再現する
Theme URI: https://wp-cocoon.com/
Author: わいひら（子テーマ：smallcapa）
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 色・寸法（今のサイトの TCD の設定から）
************************************/
:root {
	--inb-main: #78c61e;        /* メイン色（黄緑） */
	--inb-main-dark: #4f8a12;   /* 白い文字を載せるときの濃い黄緑（読みやすさのため一段暗く） */
	--inb-text: #494949;        /* 見出しなどの濃い灰色 */
	--inb-body: #666666;        /* 本文の灰色 */
	--inb-ink: #292929;         /* 本文（固定ページ・記事）の濃い文字 */
	--inb-beige: #f8f5ef;       /* フッター・施工事例の帯の背景 */
	--inb-beige-line: #f7f2ea;
	--inb-crumb: #faf8f3;       /* パンくずの背景 */
	--inb-gray-btn: #595959;    /* 「施工事例一覧」ボタン */
	--inb-line: #dddddd;
	--inb-width: 1150px;        /* サイトの幅 */
	--inb-font: "Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--inb-font-head: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	/* スマホのメニュー（スキル cocoon-mobile-menu の変数） */
	--main: var(--inb-main-dark);
	--text: var(--inb-text);
	--line: #e6e6e6;
	--main-light: #a9d86f;
	--sub-bg: #f6f9f1;
	--btn1: #4f8a12;
	--btn2: #8a6d3b;
}

/************************************
** 全体
************************************/
body {
	font-family: var(--inb-font);
	font-weight: 500;
	color: var(--inb-body);
	background-color: #fff;
}
a {
	color: var(--inb-body);
}
a:hover {
	color: var(--inb-main);
}
.wrap {
	width: var(--inb-width);
}
/* ページのいちばん上の黄緑の線（今のサイトと同じ） */
.header-container {
	border-top: 7px solid rgba(120, 198, 30, .8);
}
/* 本文の列 800px＋サイドバー 300px（間 50px） */
.content-in {
	align-items: flex-start;
}
.main {
	width: 800px;
	padding: 0 0 70px;
	border: none;
}
.sidebar {
	width: 300px;
	padding: 0;
	border: none;
}
.content {
	margin-top: 40px;
}
.no-sidebar .content .main {
	width: 100%;
}

/************************************
** ヘッダー（ロゴ左・メニュー右・電話の画像）
************************************/
/* Cocoon はメイン色（黄緑）をヘッダー・メニューの背景にも使うので、白に戻す */
#header-container,
#header-container #header,
#header-container #navi {
	background-color: #fff;
	color: var(--inb-body);
}
#header-container .navi-in > ul > li > a,
#header-container .navi-in > ul > li > a .item-label {
	color: var(--inb-body);
}
#header-container .navi-in > ul > li > a:hover,
#header-container .navi-in > ul > li > a:hover .item-label {
	color: #a4ce22;
}
/* メニューの「∨」の印は出さない（今のサイトにない） */
#header-container .navi-in .top-has-sub {
	display: none;
}
.header-container-in.hlt-top-menu {
	width: var(--inb-width);
	margin: 0 auto;
	height: 120px;
}
/* ロゴはヘッダー（高さ120px）の縦の中央に置き、左端にそろえる */
.header-container-in.hlt-top-menu #header {
	display: flex;
	align-items: center;
	height: 120px;
}
.header-container-in.hlt-top-menu .logo-header {
	max-height: 48px;
}
.header-container-in.hlt-top-menu .logo-header a {
	padding: 0;
	line-height: 0;
}
.header-container-in.hlt-top-menu .logo-header img {
	max-height: 48px;
	width: auto;
}
.header-container-in.hlt-top-menu .site-name-text-link {
	margin: 0;
}
.header-container-in.hlt-top-menu .navi {
	width: auto;
	background: transparent;
}
.navi-in > ul {
	justify-content: flex-end;
	flex-wrap: nowrap;
}
.navi-in > ul > li {
	width: auto;
	height: 120px;
}
.navi-in > ul > li > a {
	padding: 0 20px;
	color: var(--inb-body);
	font-weight: 600;
	font-feature-settings: "pkna";
}
.navi-in > ul > li > a:hover {
	background: transparent;
	color: #a4ce22;
}
.navi-in > ul .sub-menu {
	width: 220px;
	background-color: var(--inb-main);
	top: 120px;
}
.navi-in > ul .sub-menu li {
	height: auto;
}
#header-container .navi-in > ul .sub-menu a,
#header-container .navi-in > ul .sub-menu a .item-label {
	padding: 0;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}
#header-container .navi-in > ul .sub-menu a {
	padding: 14px 20px;
}
#header-container .navi-in > ul .sub-menu a:hover {
	background-color: var(--inb-main-dark);
	color: #fff;
}
/* 電話・FAX の画像 */
.navi-in > ul > li.inb-navi-tel {
	margin-left: 20px;
	display: flex;
	align-items: center;
}
.navi-in > ul > li.inb-navi-tel > a {
	padding: 0;
	height: auto;
	cursor: default;
}
.inb-navi-tel img {
	width: 150px;
	height: auto;
	display: block;
}

/************************************
** パンくず
************************************/
.breadcrumb {
	margin: 0 auto;
	padding: 0 13px;
	width: var(--inb-width);
	background-color: var(--inb-crumb);
	line-height: 30px;
	font-size: 14px;
	color: var(--inb-body);
	font-feature-settings: "pkna";
}
#breadcrumb.breadcrumb {
	margin-top: 15px;
}
.content #breadcrumb.breadcrumb {
	margin-top: 0;
}

/************************************
** トップページ
************************************/
.home .entry-title,
.home .date-tags,
.home .sns-share,
.home .sns-follow,
.home .author-info,
.home .footer-meta {
	display: none;
}
.home .content {
	margin-top: 0;
}
.home .main {
	padding-bottom: 0;
}

/* 大きなスライダー（1150×650、ふわっと切り替え） */
.inb-top-visual {
	width: var(--inb-width);
	margin: 0 auto;
	position: relative;
}
.inb-hero {
	position: relative;
	aspect-ratio: 1150 / 650;
	overflow: hidden;
	background: #eee;
}
.inb-hero__slides {
	list-style: none;
	margin: 0;
	padding: 0;
}
.inb-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.inb-hero__slide.is-active {
	opacity: 1;
}
.inb-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* PickUp の帯（黒・半透明、スライダーの下端に重ねる） */
.inb-pickup {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60px;
	display: flex;
	align-items: center;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 15px;
}
.inb-pickup__ttl {
	margin: 0;
	padding: 0 22px;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, .5);
	line-height: 20px;
}
.inb-pickup__list {
	position: relative;
	flex: 1;
	height: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.inb-pickup__item {
	position: absolute;
	inset: 0 22px;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
	font-size: 14px;
}
.inb-pickup__item.is-active {
	opacity: 1;
	visibility: visible;
}
.inb-pickup__item a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.inb-pickup__item a:hover {
	color: #fff;
	text-decoration: underline;
}

/* 紹介文（見出し40px・本文17px、中央寄せ） */
.inb-intro {
	margin: 50px 0 55px;
	text-align: center;
	color: var(--inb-ink);
}
.inb-intro h2,
.inb-intro h3 {
	margin: 0 0 16px;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--inb-font-head);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--inb-ink);
}
.inb-intro h3 {
	padding-top: 35px;
}
.inb-intro h2::before,
.inb-intro h2::after,
.inb-intro h3::before,
.inb-intro h3::after {
	content: none;
}
.entry-content .inb-intro p {
	margin: 0;
	padding: 12px 0 5px;
	font-size: 16px;
	line-height: 2.2;
	color: var(--inb-ink);
}
.inb-intro strong {
	font-size: 1.1em;
}

/* 「稲葉の新築」「稲葉のリノベーション」の2枠 */
.inb-course {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Cocoon は本文の ul に左の字下げ（26px）を付けるので、子テーマの部品（2枠・施工事例の一覧など）では外す */
.entry-content ul.inb-course,
.entry-content ul.inb-works__list,
.entry-content ul.inb-side-cats,
.entry-content ul.inb-side-recent {
	padding-left: 0;
	padding-right: 0;
}
.inb-course__item {
	margin: 0;
	padding: 0;
}
.inb-course__link {
	position: relative;
	display: block;
	overflow: hidden;
	color: var(--inb-text);
	text-decoration: none;
}
.inb-course__link img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .6s ease;
}
.inb-course__link:hover img {
	transform: scale(1.05);
}
.inb-course__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 20px;
	background: rgba(255, 255, 255, .8);
	color: var(--inb-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}
.inb-course__link:hover .inb-course__caption {
	color: var(--inb-main);
}
.inb-course--top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 50px;
}
.inb-course--side {
	display: grid;
	gap: 6px;
}
.entry-content .inb-course-txt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0;
}
.entry-content .inb-course-txt p {
	margin: 0;
	padding: 5px 15px 10px 20px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--inb-body);
}

/* 施工事例の一覧（ベージュの帯に3列のカード） */
.inb-works {
	margin: 80px 0 0;
	padding: 35px 42px 23px;
	background-color: var(--inb-beige);
	border: 5px solid var(--inb-beige-line);
}
.inb-works__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.entry-content .inb-works__ttl {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-size: 30px;
	font-weight: 500;
	line-height: 44px;
	color: var(--inb-text);
}
.inb-works__ttl::before,
.inb-works__ttl::after {
	content: none;
}
.entry-content .inb-works__more,
.inb-works__more {
	flex-shrink: 0;
	display: inline-block;
	padding: 15px 22px;
	min-width: 120px;
	background-color: var(--inb-gray-btn);
	color: #fff;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	text-decoration: none;
}
.entry-content .inb-works__more:hover,
.inb-works__more:hover {
	background-color: var(--inb-main-dark);
	color: #fff;
}
/* 本文のリンクの色（灰色・訪問済みは黒）に負けないよう、白い文字をはっきり指定する */
.entry-content a.inb-works__more,
.entry-content a.inb-works__more:link,
.entry-content a.inb-works__more:visited,
.entry-content a.inb-works__more:hover {
	color: #fff;
	text-decoration: none;
}
.entry-content .inb-course li {
	margin: 0;
}
.inb-works__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px 20px;
	margin: 0;
	padding: 17px 0 0;
	list-style: none;
}
.entry-content .inb-works__list li {
	margin: 0;
}
.inb-works__link {
	display: block;
	height: 100%;
	background: #fff;
	color: var(--inb-body);
	text-decoration: none;
}
.entry-content .inb-works__link {
	text-decoration: none;
}
.inb-works__img {
	overflow: hidden;
}
.inb-works__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 456 / 296;
	object-fit: cover;
	transition: transform .6s ease;
}
.inb-works__link:hover img {
	transform: scale(1.05);
}
.inb-works__info {
	padding: 10px 10px 14px 17px;
}
.entry-content .inb-works__title {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	min-height: 3.4em;
	color: var(--inb-body);
}
.inb-works__title::before,
.inb-works__title::after {
	content: none;
}
.inb-works__link:hover .inb-works__title {
	color: var(--inb-main);
}
.inb-cat {
	display: inline-block;
	padding: 0 10px;
	font-size: 12px;
	line-height: 28px;
	color: #fff;
}

/************************************
** 記事・固定ページの見出しと本文
************************************/
.entry-title,
.archive-title {
	margin: 0 0 30px;
	padding: 15px 0;
	border-top: 2px solid var(--inb-body);
	border-bottom: 2px solid var(--inb-body);
	background: none;
	font-family: var(--inb-font);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inb-body);
	font-feature-settings: "pkna";
}
.entry-content {
	margin-top: 0;
	color: var(--inb-ink);
}
/* 本文の先頭に自前の見出し（h2#post_title：「稲葉工務店 会社概要」など）があるページは、
   今のサイトと同じく、そちらを見出しにして Cocoon のタイトルは出さない */
.article:has(.entry-content #post_title) .entry-title {
	display: none;
}
.entry-content h2#post_title {
	clear: both;
	margin: 0 0 30px;
	padding: 15px 0;
	border-top: 2px solid var(--inb-body);
	border-bottom: 2px solid var(--inb-body);
	background: none;
	font-family: var(--inb-font);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inb-body);
	font-feature-settings: "pkna";
}
.entry-content p,
.entry-content li,
.entry-content dt,
.entry-content dd {
	font-size: 17px;
	line-height: 2.4;
	color: var(--inb-ink);
}
.entry-content p {
	margin-bottom: 34px;
}
.entry-content a {
	text-decoration: underline;
	color: var(--inb-body);
}
.entry-content a:visited {
	color: #000;
}
.entry-content a:hover {
	text-decoration: none;
	color: var(--inb-main);
}
/* Cocoon の見出しの飾りを外して、今のサイトの見出しにする */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	border: none;
	background: none;
	padding: 0;
}
.entry-content h2::before,
.entry-content h2::after,
.entry-content h3::before,
.entry-content h3::after,
.entry-content h4::before,
.entry-content h4::after {
	content: none;
}
.entry-content h3.pagettl {
	clear: both;
	margin: 0;
	padding: 0 0 15px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--inb-body);
	font-feature-settings: "pkna";
}
.entry-content h4.cntntttl {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--inb-body);
	font-feature-settings: "pkna";
}
.entry-content em {
	font-weight: bold;
	font-style: normal;
	color: #1d5824;
	font-size: 1.2em;
	letter-spacing: 1px;
	line-height: 1.5;
}
.entry-content ol.txtlist {
	margin-left: 4.5em;
}
.entry-content .txtlist li {
	padding-left: .8em;
}
.entry-content table {
	border-collapse: collapse;
}
.entry-content th {
	background-color: var(--inb-line);
	border: 1px solid #bbb;
	padding: 10px 15px;
	color: var(--inb-body);
	font-weight: 600;
}
.entry-content td {
	border: 1px solid #bbb;
	padding: 10px 15px;
}
.entry-content table th,
.entry-content table td {
	font-size: 15px;
	line-height: 1.8;
}
/* Cocoon が自動で出す表の色（メインカラーの緑の線・1行おきの薄い緑）を消して、線はグレーだけにする */
.entry-content table tr:nth-of-type(n) {
	background-color: transparent;
}
.entry-content table tr > th,
.entry-content table tr > td {
	border: 1px solid #aaa;
}
.entry-content iframe {
	max-width: 100%;
}
.clr_y {
	background-color: #ffffd2;
}
/* プロジェクトのページの右寄せの小さな文 */
.nagahamainaba {
	text-align: right;
	padding-right: 20px;
	font-size: 17px;
	color: #fff;
}
.nagahamainaba em {
	color: #fff;
}
/* ボタン（施工事例を見る など） */
.Button {
	overflow: hidden;
	width: 350px;
	max-width: 100%;
	height: 50px;
	margin: 0 auto;
	padding: 0;
}
.Radius5 {
	border-radius: 5px;
}
.entry-content .Button a {
	display: block;
	position: relative;
	text-align: center;
	background: #e3cca3;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 50px;
	text-decoration: none;
}
.entry-content .Button a:hover {
	background: #c8ce13;
	color: #fff;
}
#IconList1 a::before,
#IconList1 a::after {
	display: block;
	content: "";
	position: absolute;
	transform: rotate(45deg);
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
}
#IconList1 a::before {
	left: 20px;
	background: #fff;
}
#IconList1 a::after {
	left: 15px;
	background: #e3cca3;
}
#IconList1 a:hover::after {
	background: #c8ce13;
}

/* ページビルダーから変換した行・列（work/convert_pb.php が出す形） */
.inb-row {
	display: grid;
	grid-template-columns: var(--inb-cols, 1fr);
	gap: var(--inb-gap, 30px);
	margin-bottom: var(--inb-mb, 0);
}
.inb-cell {
	min-width: 0;
}
.inb-w {
	margin: 0 0 var(--inb-mb, 0);
}
.inb-w > :last-child {
	margin-bottom: 0;
}
/* 文章のすぐ後の写真：くっつかないよう上をあける（写真の下のすき間と同じ） */
.inb-editor + .inb-image {
	margin-top: 30px;
}
.inb-image img {
	display: block;
	width: 100%;
	height: auto;
}
/* 施工事例の概要（構造・竣工・場所…） */
.inb-data__ttl {
	margin: 0;
}
.entry-content .inb-data__ttl {
	padding: 12px 22px;
	background: #f8f4ed;
	border: 1px solid var(--inb-line);
	color: var(--inb-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
.entry-content .inb-data__tbl {
	width: 100%;
	margin: 0;
	border: none;
}
.entry-content .inb-data__tbl tr {
	background: none;
}
.entry-content .inb-data__tbl th,
.entry-content .inb-data__tbl td {
	background: none;
	border: none;
	border-bottom: 1px dotted #ccc;
	padding: 12px 25px;
	font-size: 14px;
	color: var(--inb-body);
	text-align: left;
	vertical-align: top;
}
.entry-content .inb-data__tbl th {
	width: 9em;
	font-weight: 600;
	white-space: nowrap;
}

/************************************
** 写真のスライダー（施工事例の先頭・Photo Gallery）
************************************/
.inb-gallery {
	position: relative;
	background: #f8f4ed;
	padding: 8px 0 0;
}
.inb-gallery--main {
	background: none;
	padding: 0;
}
.inb-gallery__stage {
	position: relative;
	overflow: hidden;
}
.entry-content .inb-gallery__slides {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 375px;
}
.entry-content .inb-gallery--main .inb-gallery__slides {
	height: auto;
	aspect-ratio: 800 / 480;
}
.entry-content .inb-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.entry-content .inb-gallery__slide.is-active {
	opacity: 1;
	visibility: visible;
}
.inb-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.inb-gallery--main .inb-gallery__img {
	object-fit: cover;
}
.inb-gallery__nav {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 50px;
	margin-top: -25px;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, .45);
	cursor: pointer;
	z-index: 2;
}
.inb-gallery__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.inb-gallery__prev {
	left: 0;
}
.inb-gallery__prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.inb-gallery__next {
	right: 0;
}
.inb-gallery__next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}
.inb-gallery__nav:hover,
.inb-gallery__nav:focus-visible {
	background: var(--inb-main-dark);
}
.entry-content .inb-gallery__thumbs {
	display: flex;
	gap: 5px;
	list-style: none;
	margin: 5px 0 0;
	padding: 0 5px 5px;
	overflow-x: auto;
}
.entry-content .inb-gallery__thumbs li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}
.inb-gallery__thumb {
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: .5;
	transition: opacity .3s;
}
.inb-gallery__thumb.is-active,
.inb-gallery__thumb:hover,
.inb-gallery__thumb:focus-visible {
	opacity: 1;
}
.inb-gallery__thumb img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
.inb-gallery--main .inb-gallery__thumb img {
	width: 100px;
	height: 60px;
}
.inb-gallery.is-single .inb-gallery__nav,
.inb-gallery.is-single .inb-gallery__thumbs {
	display: none;
}

/************************************
** 記事の上下（カテゴリー・日付・SNS・前後の記事・関連記事）
************************************/
.date-tags,
.author-info,
.post-date,
.post-update {
	display: none;
}
.entry-categories-tags {
	margin-bottom: 10px;
}
.cat-label,
.entry-categories .cat-link {
	border-radius: 0;
	font-size: 12px;
}
.related-entry-heading,
.comment-title {
	border: none;
	background: var(--inb-main-dark);
	color: #fff;
	padding: 14px 22px;
	font-size: 16px;
}

/************************************
** 記事の下：関連記事（ベージュの帯に白いカード3列）と、前後の記事（左右の枠）
************************************/
.related-entries {
	margin-top: 60px;
}
.related-entries .related-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 24px;
	background: var(--inb-beige);
	border: 5px solid var(--inb-beige-line);
	border-top: none;
}
.related-entries .related-entry-card-wrap {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: #fff;
	color: var(--inb-body);
	text-decoration: none;
	transition: box-shadow .3s, transform .3s;
}
.related-entries .related-entry-card-wrap:hover {
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}
.related-entries .related-entry-card {
	display: block;
}
.related-entries .related-entry-card-thumb {
	float: none;
	width: 100%;
	margin: 0;
}
.related-entries .related-entry-card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 456 / 296;
	object-fit: cover;
}
.related-entries .related-entry-card-content {
	margin: 0;
	padding: 10px 12px 14px;
}
.related-entries .related-entry-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--inb-body);
}
.related-entries .related-entry-card-wrap:hover .related-entry-card-title {
	color: var(--inb-main-dark);
}
.related-entries .related-entry-card-snippet {
	display: none;
}
.related-entries .cat-label {
	border: none;
	opacity: 1;
}

.pager-post-navi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 40px;
}
.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: auto;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #e5dfd3;
	border-radius: 6px;
	background: var(--inb-beige);
	color: var(--inb-body);
	text-decoration: none;
	transition: background-color .3s, border-color .3s;
}
.pager-post-navi a.next-post {
	grid-column: 2;
	flex-direction: row-reverse;
	text-align: right;
}
.pager-post-navi a.prev-post:hover,
.pager-post-navi a.next-post:hover {
	background: #fff;
	border-color: var(--inb-main);
}
.pager-post-navi .iconfont {
	position: static;
	flex: 0 0 auto;
	transform: none;
	color: var(--inb-main-dark);
	font-size: 16px;
}
.pager-post-navi figure {
	flex: 0 0 110px;
	width: 110px;
	margin: 0;
}
.pager-post-navi figure img {
	display: block;
	width: 110px;
	height: 72px;
	object-fit: cover;
}
.pager-post-navi .prev-post-title,
.pager-post-navi .next-post-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset; /* Cocoon は2行で「…」に切るので、名前を全部出す */
}
.pager-post-navi .prev-post-title::before,
.pager-post-navi .next-post-title::before {
	display: block;
	margin-bottom: 4px;
	color: var(--inb-main-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
}
.pager-post-navi .prev-post-title::before {
	content: "前の施工事例";
}
.pager-post-navi .next-post-title::before {
	content: "次の施工事例";
}

/************************************
** 施工事例の一覧（/works・カテゴリー・プロジェクト）：黄緑の見出しの帯＋薄い緑の背景に2列
************************************/
.inb-works-archive .archive-title {
	margin: 0;
	padding: 15px 22px;
	border: none;
	background-color: var(--inb-main-dark);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
}
.inb-works-archive .archive-title .fa,
.inb-works-archive .archive-title [class*="fa-"] {
	display: none;
}
.inb-works-archive #list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 46px;
	margin: 0;
	padding: 29px 46px 26px;
	background-color: rgba(120, 198, 30, .15);
}
.inb-works-archive #list .entry-card-wrap {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--inb-body);
	text-decoration: none;
}
.inb-works-archive #list .entry-card-wrap:hover {
	background: none;
}
/* 写真 → 名前 → カテゴリー の順に並べる（Cocoon ではカテゴリーが写真の上に重なっているため） */
.inb-works-archive #list .entry-card {
	display: flex;
	flex-direction: column;
}
.inb-works-archive #list .entry-card-thumb {
	display: contents;
}
.inb-works-archive #list .entry-card-thumb img {
	order: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 456 / 296;
	object-fit: cover;
}
.inb-works-archive #list .entry-card-content {
	order: 2;
	margin: 0;
	padding: 12px 0 8px;
}
.inb-works-archive #list .cat-label {
	order: 3;
	position: static;
	align-self: flex-start;
	border: none;
	padding: 0 10px;
	font-size: 12px;
	line-height: 28px;
	opacity: 1;
	max-width: none;
}
.inb-works-archive #list .entry-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--inb-body);
}
.inb-works-archive #list .entry-card-wrap:hover .entry-card-title {
	color: var(--inb-main);
}
.inb-works-archive #list .entry-card-snippet,
.inb-works-archive #list .entry-card-meta {
	display: none;
}
.inb-works-archive .pagination {
	margin-top: 30px;
}

/************************************
** サイドバー
************************************/
.sidebar .widget {
	margin-bottom: 30px;
}
.sidebar h3.widget-sidebar-title {
	margin: 0;
	padding: 18px 22px;
	background-color: var(--inb-main-dark);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	border: none;
}
.inb-side-cats,
.inb-side-recent {
	list-style: none;
	margin: 0;
	padding: 0;
}
.inb-side-cats li {
	border-bottom: 1px solid var(--inb-line);
}
.inb-side-cats a {
	display: flex;
	justify-content: space-between;
	padding: 12px 8px;
	color: var(--inb-body);
	font-size: 14px;
	text-decoration: none;
}
.inb-side-cats a:hover {
	background: var(--inb-crumb);
	color: var(--inb-main);
}
.inb-side-cats__count {
	min-width: 26px;
	text-align: center;
	background: #eee;
	font-size: 12px;
	line-height: 22px;
}
.inb-side-recent li {
	border-bottom: 1px solid var(--inb-line);
}
.inb-side-recent a {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 10px 0;
	color: var(--inb-body);
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
}
.inb-side-recent a:hover {
	color: var(--inb-main);
}
.inb-side-recent img {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	object-fit: cover;
}

/************************************
** フッター
************************************/
/* Cocoon はメイン色（黄緑）をフッターにも使うので、今のサイトと同じベージュ地・灰色の文字に戻す */
#footer.footer {
	margin-top: 0;
	padding: 0;
	background-color: var(--inb-beige);
	border-top: 5px solid var(--inb-beige-line);
	color: var(--inb-body);
}
#footer .footer-widgets,
#footer .footer-widgets a,
#footer .widget a {
	color: var(--inb-body);
}
#footer .widget a:hover {
	color: var(--inb-main-dark);
}
.footer-in.wrap {
	width: auto;
}
.footer-widgets {
	box-sizing: border-box;
	width: auto;
	max-width: 1090px; /* 中身は今のサイトと同じ 1050px＋左右20px。狭い画面では縮む（固定幅だと 1024〜1050px で横にはみ出した） */
	margin: 0 auto;
	padding: 45px 20px 30px;
}
.footer-left,
.footer-center,
.footer-right {
	padding: 0 25px 0 0;
}
.footer-left {
	flex: 0 0 270px;
	font-size: 12px;
}
.footer h3.footer-title {
	margin: 0 0 18px;
	padding: 0;
	background: none;
	border: none;
	font-size: 14px;
	color: var(--inb-text);
}
.footer .widget {
	margin-bottom: 25px;
}
.footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer .widget ul ul {
	padding-left: 1em;
}
.footer .widget li {
	padding: 5px 0;
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	font-feature-settings: "pkna";
	border: none;
}
.footer .widget a {
	padding: 0;
	color: var(--inb-body);
	text-decoration: none;
}
.footer .widget a:hover {
	background: none;
	color: var(--inb-main);
	text-decoration: underline;
}
.footer .widget_nav_menu a::before,
.footer .widget_nav_menu a::after {
	content: none;
}
.footer .textwidget img {
	max-width: 220px;
	height: auto;
}
.mizumidori {
	margin-top: .5em;
	font-size: 12px;
	line-height: 1.7;
}

/* 緑の帯（白いロゴ・住所）＋灰色の帯（コピーライト） */
.footer-bottom.inb-footer {
	margin: 0;
	padding: 0;
	font-size: 14px;
}
.inb-footer__band {
	padding: 30px 20px 25px;
	background-color: var(--inb-main);
	color: #fff;
	text-align: center;
}
.inb-footer__logo {
	margin: 0 0 18px;
	line-height: 0;
}
.inb-footer__logo img {
	width: 216px;
	height: auto;
}
.inb-footer__address {
	margin: 0;
	line-height: 1.8;
}
.inb-footer__address span {
	margin: 0 .5em;
	display: inline-block;
}
.inb-footer__band a {
	color: #fff;
	text-decoration: none;
}
.inb-footer__sns {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.inb-footer__sns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	font-size: 14px;
}
.inb-footer__sns a:hover {
	background: #fff;
	color: var(--inb-main-dark);
}
.inb-footer__copy {
	background-color: var(--inb-text);
	color: #fff;
	text-align: center;
}
.inb-footer__copy .copyright {
	margin: 0;
	padding: 0 20px;
	font-size: 12px;
	line-height: 50px;
}
.inb-footer__copy a {
	color: #fff;
	text-decoration: none;
}

/************************************
** お問い合わせ（Contact Form 7 ＋ Confirm Plus）
************************************/
.wpcf7 table.contactTbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
}
.entry-content .wpcf7 table.contactTbl th {
	background-color: #dded99;
	border: none;
	padding: 0 12px;
	font-size: 17px;
	color: #000;
	vertical-align: middle;
	white-space: nowrap;
	width: 1%;
}
.entry-content .wpcf7 table.contactTbl td {
	background-color: #ffffef;
	border: none;
	padding: 12px 4px 12px 12px;
	vertical-align: middle;
	font-size: 15px;
}
.wpcf7 table.contactTbl .required {
	font-size: .9em;
	margin-left: 8px;
	color: #c21a72;
}
.wpcf7 table.contactTbl .w-nml {
	width: 230px;
	max-width: 100%;
}
.wpcf7 table.contactTbl textarea.w-nml {
	width: 350px;
	height: 200px;
}
/* 送信ボタン：見やすく色を付けて大きく（くまの整形外科と同じ大きさ。全フォーム共通の決まり） */
.wpcf7 .sendok {
	position: relative;
	margin-top: 40px;
	text-align: center;
}
.wpcf7 input.wpcf7-submit {
	display: block;
	width: 100%;
	max-width: 400px;
	min-height: 72px;
	margin: 0 auto;
	padding: 12px 32px;
	border: none;
	border-radius: 6px;
	background: var(--inb-main-dark);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .05em;
	cursor: pointer;
	transition: opacity .2s;
}
.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus-visible {
	opacity: .85;
}
.wpcf7 input.wpcf7-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.wpcf7 .wpcf7-spinner {
	position: absolute;
	top: 100%;
	left: 50%;
	margin: 12px 0 0 -12px;
}
/* スパム対策（Turnstile）の説明 */
.entry-content p.inb-form-note {
	margin: 56px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--inb-body);
	text-align: center;
}
.wpcf7 .wpcf7-turnstile {
	margin-top: 16px;
	text-align: center;
}
/* 入力エラー・送信結果のメッセージ */
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #d63638;
	font-size: 15px;
}
.wpcf7 .wpcf7-not-valid {
	border-color: #d63638;
}
.wpcf7 form .wpcf7-response-output {
	margin: 32px 0 0;
	padding: 14px 20px;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}
/* 確認画面（javascript.js で作る）。入力の表を隠し、入力内容を一覧で見せる */
.wpcf7 [hidden] {
	display: none !important;
}
.inb-form-confirm {
	padding: 28px 36px;
	border: 1px solid #dded99;
	border-radius: 8px;
	background: #ffffef;
}
.entry-content p.inb-form-confirm__intro {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--inb-ink);
}
.inb-form-confirm__row {
	display: flex;
	gap: 4px 24px;
	padding: 16px 0;
	border-bottom: 1px dotted #b3b3b3;
	color: var(--inb-ink);
	font-size: 16px;
	line-height: 1.7;
}
.inb-form-confirm__row:last-child {
	border-bottom: none;
}
.inb-form-confirm__label {
	flex: 0 0 180px;
	font-weight: 600;
}
.inb-form-confirm__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere; /* 長いメールアドレスで枠からはみ出さない */
}
.inb-form-back {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 0 auto 16px;
	padding: 14px 32px;
	border: 1px solid #999;
	border-radius: 6px;
	background: #fff;
	color: var(--inb-text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s;
}
.inb-form-back:hover {
	background: #f5f5f5;
}

/* プライバシーポリシー */
.entry-content .inb-privacy h2 {
	margin: 44px 0 14px;
	padding: 4px 0 4px 14px;
	border-left: 4px solid var(--inb-main-dark);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--inb-text);
}
.entry-content .inb-privacy p,
.entry-content .inb-privacy li {
	font-size: 16px;
	line-height: 2;
}
.entry-content .inb-privacy p {
	margin-bottom: 16px;
}
.entry-content .inb-privacy ol {
	margin: 0 0 16px;
	padding-left: 1.6em;
}
.entry-content p.inb-privacy__date {
	margin-top: 48px;
	text-align: right;
	color: var(--inb-body);
}

/* お問い合わせフォーム（くまの整形外科 /recruit/entry/ と同じ形、2026-10-09 本人の指示）
   ベージュ地に、幅800pxのフォーム。項目ごとの白いカード（項目名＋「必須」の札＋補足）、同意、大きな送信ボタン */
.inb-entry {
	padding: 80px 20px 100px;
	background: var(--inb-beige);
}
.inb-entry__inner {
	max-width: 800px;
	margin: 0 auto;
}
/* ページは前の形のまま、フォームの部分だけをベージュの枠で囲む形（お問い合わせページ。本人の指示） */
.inb-entry.inb-entry--inline {
	margin: 24px 0 0;
	padding: 32px 32px 40px;
	border-radius: 12px;
}
.inb-entry--inline p.inb-entry__lead {
	margin-top: 0;
}
.inb-entry--inline .wpcf7 {
	margin-top: 24px;
}
.entry-content h2.inb-entry__title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--inb-main-dark);
	font-family: var(--inb-font-head);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .06em;
	text-align: center;
}
.entry-content p.inb-entry__lead {
	margin: 24px 0 0;
	color: var(--inb-ink);
	font-size: 16px;
	line-height: 2.1;
	text-align: center;
}
.entry-content p.inb-entry__lead a {
	color: var(--inb-main-dark);
	text-decoration: underline;
}
.entry-content ul.inb-entry__notes {
	margin: 16px auto 0;
	padding: 0;
	list-style: none;
	max-width: 680px;
}
.entry-content ul.inb-entry__notes li {
	position: relative;
	padding-left: 1.2em;
	font-size: 15px;
	line-height: 1.8;
	color: var(--inb-body);
}
.entry-content ul.inb-entry__notes li::before {
	content: "※";
	position: absolute;
	left: 0;
}
.entry-content p.inb-entry__lead + .wpcf7,
.inb-entry .wpcf7 {
	margin-top: 40px;
}
.inb-entry .wpcf7 form p {
	margin: 0; /* CF7 が項目を <p> で包むので、その余白を消す */
}
.inb-entry__group,
.inb-entry__privacy {
	margin: 0 0 16px;
	padding: 24px 32px;
	border-radius: 12px;
	background: #fff;
}
.inb-entry__label {
	display: block;
	margin: 0 0 10px;
	color: var(--inb-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
/* 「必須」の札（くまの整形外科と同じオレンジ。小さな札なので文字15px） */
.inb-entry__req {
	display: inline-block;
	margin-left: 10px;
	padding: 0 10px;
	border-radius: 4px;
	background: #f39800;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	vertical-align: 1px;
}
.inb-entry__note {
	display: inline-block;
	margin-left: 10px;
	color: #4d4d4d;
	font-size: 16px;
	font-weight: 400;
}
.inb-entry input[type="text"],
.inb-entry input[type="email"],
.inb-entry input[type="tel"],
.inb-entry select,
.inb-entry textarea {
	box-sizing: border-box;
	height: 52px;
	padding: 10px 14px;
	border: 1px solid #b3b3b3;
	border-radius: 6px;
	background-color: #fff;
	color: var(--inb-ink);
	font-size: 16px; /* 16px未満だと iPhone で入力時に画面が拡大されるため */
	line-height: 1.5;
}
.inb-entry input[type="text"],
.inb-entry input[type="email"],
.inb-entry input[type="tel"] {
	width: 100%;
	max-width: 480px;
}
.inb-entry textarea {
	width: 100%;
	height: 200px;
	resize: vertical;
}
.inb-entry input:focus,
.inb-entry select:focus,
.inb-entry textarea:focus {
	border-color: var(--inb-main-dark);
	outline: 2px solid #c5e59f;
	outline-offset: 0;
}
.inb-entry ::placeholder {
	color: #999;
}
.inb-entry__privacy {
	color: var(--inb-ink);
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}
.inb-entry__privacy .wpcf7-list-item {
	margin: 0;
}
.inb-entry__privacy label {
	cursor: pointer;
}
.inb-entry__privacy input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	accent-color: var(--inb-main-dark);
	vertical-align: -4px;
}
.inb-entry__privacy .wpcf7-list-item-label::before,
.inb-entry__privacy .wpcf7-list-item-label::after {
	content: none; /* CF7 が前後に足す空白を消す */
}
.inb-entry__submit {
	position: relative;
	margin-top: 40px;
	text-align: center;
}
.inb-entry .inb-form-back {
	margin-bottom: 16px;
}
.inb-entry .inb-form-confirm {
	margin-bottom: 16px;
	border: none;
	border-radius: 12px;
	background: #fff;
}
.inb-entry .wpcf7 form p.inb-form-note {
	margin-top: 40px; /* 送信ボタンの下の読み込み中の印と重ならないように */
}
/* 確認画面のときは、入力のための案内と Turnstile の説明は出さない（本人の指示。入力画面に戻ると出る） */
.inb-entry:has(.wpcf7.is-confirm) p.inb-entry__lead,
.wpcf7.is-confirm p.inb-form-note {
	display: none;
}
.inb-entry--inline:has(.wpcf7.is-confirm) .wpcf7 {
	margin-top: 0;
}
/* 確認画面の「以下の内容でよろしければ…」は太字にして、下を空ける */
.entry-content p.inb-form-confirm__intro,
.inb-entry .wpcf7 form p.inb-form-confirm__intro {
	margin-bottom: 24px; /* フォームの <p> の余白を消す指定に負けないように */
	font-weight: 700;
}

/* サンキューページ（くまの整形外科 /recruit/thanks/ と同じ形）
   写真の帯の見出し → 薄い地色の上の白いカード（お礼・ご注意・電話・トップページ） */
.article:has(.inb-pagehead) .entry-title {
	display: none; /* 見出しは写真の帯で出す */
}
.inb-nowrap {
	display: inline-block;
}
.inb-pagehead {
	position: relative;
	height: 350px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.entry-content .inb-pagehead__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.entry-content .inb-pagehead > p {
	margin: 0; /* WordPress が画像を <p> で囲んだときの余白を消す */
}
.inb-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .7); /* 写真を淡くして文字を読みやすく */
}
.entry-content h1.inb-pagehead__title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0 20px;
	border: none;
	background: none;
	color: var(--inb-main-dark);
	font-family: var(--inb-font-head);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .07em;
	text-align: center;
}
.inb-thanks {
	padding: 32px;
	border-radius: 12px;
	background: var(--inb-beige);
}
.inb-thanks__card {
	max-width: 1000px;
	margin: 0 auto;
	padding: 44px 48px 52px;
	border-radius: 16px;
	background: #fff;
	color: var(--inb-ink);
}
.entry-content p.inb-thanks__text {
	margin: 0;
	font-size: 16px;
	line-height: 2;
	color: var(--inb-ink);
}
.entry-content p.inb-thanks__text + p.inb-thanks__text {
	margin-top: 24px;
}
.entry-content h2.inb-thanks__heading {
	margin: 48px 0 20px;
	padding: 4px 0 4px 16px;
	border: none;
	border-left: 4px solid var(--inb-main-dark);
	background: none;
	color: var(--inb-main-dark);
	font-family: var(--inb-font-head);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .04em;
}
.entry-content p.inb-thanks__tel {
	margin: 40px 0 0;
	color: var(--inb-main-dark);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}
.inb-thanks__tel-label {
	margin-right: 8px;
	font-size: 22px;
}
.entry-content .inb-thanks__tel a {
	color: inherit;
	text-decoration: none;
}
.entry-content a.inb-thanks__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	min-height: 72px;
	margin: 48px auto 0;
	padding: 12px 32px;
	border-radius: 6px;
	background: var(--inb-main-dark);
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .05em;
	text-decoration: none;
	transition: opacity .2s;
}
.entry-content a.inb-thanks__btn:hover,
.entry-content a.inb-thanks__btn:visited {
	color: #fff;
}
.entry-content a.inb-thanks__btn:hover {
	opacity: .85;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1150px より狭いとき：左右に余白を取って縮める */
@media screen and (max-width: 1190px) {
	:root {
		--inb-width: calc(100% - 40px);
	}
	.wrap {
		width: var(--inb-width);
	}
	.main {
		width: calc(100% - 350px);
	}
}

/*1023px以下（Cocoon がスマホ用のヘッダー・下のボタンに切り替わる）*/
@media screen and (max-width: 1023px){
	/* 左右の余白は Cocoon の本文の 16px だけにする（上の「1190px以下」の 20px と二重にならないように） */
	:root {
		--inb-width: 100%;
	}
	.wrap {
		width: 100%;
	}
	.main,
	.sidebar {
		width: 100%;
	}
	.sidebar {
		margin-top: 40px;
	}
	/* パンくず：ヘッダーのすぐ下に薄いベージュの帯で、左寄せ（本文と同じ左16px） */
	.breadcrumb,
	#breadcrumb.breadcrumb {
		width: 100%;
		margin: 0;
		padding: 6px 16px;
		background-color: #f6f2ea;
		font-size: 13px;
		line-height: 1.6;
		text-align: left;
		justify-content: flex-start;
	}
	/* パンくずと本文の間を詰める（Cocoon の上の余白と重なって約56pxあった） */
	.content,
	.home .content {
		margin-top: 0;
	}
	#main.main {
		margin-top: 0;
		padding-top: 16px;
	}
	.inb-top-visual {
		width: 100%;
	}
	.inb-pickup {
		display: none;
	}
	/* フッターのウィジェット：Cocoon はスマホで隠す（モバイル用の別の場所を出す）ので、今のサイトと同じ並びで出す
	   2列（家づくり｜建築家とつくる家／リンクサイト｜ホーム…）→ その下にセンシブルハウスプロジェクトを中央に */
	#footer .footer-widgets {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
		width: auto;
		margin: 0;
		padding: 24px 16px 8px;
	}
	#footer .footer-center,
	#footer .footer-right {
		display: contents;
	}
	#footer .footer-left {
		order: 1;
		grid-column: 1 / -1;
		padding: 0;
		text-align: center;
	}
	#footer .footer-widgets .widget {
		margin-bottom: 20px;
	}
	#footer .footer-left .textwidget img {
		margin: 0 auto;
	}

	/* スマホ・タブレットでは、上のバー（ロゴ＋メニューボタン）だけにして、パソコン用のヘッダーは出さない */
	#header-container {
		display: none;
	}
	/* 上のバーの検索ボタンは出さない（決まりの形：ロゴ＋メニューボタンだけ） */
	.mobile-header-menu-buttons .search-menu-button {
		display: none;
	}

	/* ===== スマホ用バー：ロゴは左の残りの幅の中央、メニューボタンは右端（スキル cocoon-mobile-menu） ===== */
	.mobile-header-menu-buttons .logo-menu-button { flex: 1; }
	.mobile-header-menu-buttons .navi-menu-button { order: 2; }
	.mobile-header-menu-buttons .logo-menu-button .menu-button-in {
		display: flex; align-items: center; justify-content: center; height: 100%;
	}
	.mobile-header-menu-buttons .logo-menu-button .site-logo-image { width: auto; max-width: 100%; height: 32px; }

	/* ===== 画面下の固定メニュー：ホーム｜施工事例｜お問合わせ｜↑ ===== */
	.mobile-footer-menu-buttons { height: 50px; background: var(--text); }
	.mobile-footer-menu-buttons .menu-button > a.menu-button-in {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 5px; height: 100%; color: #fff;
	}
	.mobile-footer-menu-buttons .menu-button > a.menu-button-in:hover { color: #fff; }
	.mobile-footer-menu-buttons .menu-icon { width: auto; font-size: 18px; line-height: 1; }
	.mobile-footer-menu-buttons .menu-caption {
		font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; opacity: 1;
	}
	.mobile-footer-menu-buttons > li:nth-child(1) { background: var(--main); }
	.mobile-footer-menu-buttons > li:nth-child(2) { background: var(--btn1); }
	.mobile-footer-menu-buttons > li:nth-child(3) { background: var(--btn2); }
	.mobile-footer-menu-buttons > li:nth-child(1),
	.mobile-footer-menu-buttons > li.top-menu-button { flex: 0 0 56px; }
	.mobile-footer-menu-buttons > li.top-menu-button { background: var(--text); }
	.mobile-footer-menu-buttons > li + li { border-left: 1px solid #fff; }
	.mobile-footer-menu-buttons > li:nth-child(1) .menu-caption,
	.mobile-footer-menu-buttons .top-menu-caption {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}

	/* ===== メニューボタンで開く一覧（右から出す） ===== */
	.navi-menu-content { left: auto; right: 0; transform: translateX(105%); background: #fff; }
	.navi-menu-content .menu-close-button {
		display: flex; align-items: center; justify-content: flex-end; height: 60px; padding: 0 20px;
		color: var(--main); font-size: 26px; border-bottom: 2px solid var(--main);
	}
	.navi-menu-content .menu-drawer { padding: 0 0 140px; }
	.navi-menu-content .menu-drawer > li { border-bottom: 1px solid var(--line); }
	.navi-menu-content .menu-drawer a {
		position: relative; display: block; padding: 16px 48px 16px 20px;
		color: var(--text); font-size: 16px; font-weight: 500; line-height: 1.5;
	}
	.navi-menu-content .menu-drawer a::after {
		content: "\f054"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
		color: var(--main); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px;
	}
	.navi-menu-content .menu-drawer .current-menu-item > a { color: var(--main); }
	.navi-menu-content .menu-drawer .sub-menu { padding: 0; background: var(--sub-bg); }
	.navi-menu-content .menu-drawer .sub-menu li + li { border-top: 1px solid #fff; }
	.navi-menu-content .menu-drawer .sub-menu a { padding: 14px 48px 14px 36px; font-size: 15px; }
	.navi-menu-content .menu-drawer .sub-menu a::before {
		content: ""; position: absolute; top: 50%; left: 20px; width: 8px; border-top: 1px solid var(--main-light);
	}
	.navi-menu-content .menu-drawer li.inb-acc > .sub-menu { display: none; border-left: 4px solid var(--main); }
	.navi-menu-content .menu-drawer li.inb-acc.is-open > .sub-menu { display: block; }
	.navi-menu-content .menu-drawer li.inb-acc > a::after { content: "\f067"; }
	.navi-menu-content .menu-drawer li.inb-acc.is-open > a { background: var(--main); color: #fff; }
	.navi-menu-content .menu-drawer li.inb-acc.is-open > a::after { content: "\f068"; color: #fff; }
	.navi-menu-content .menu-drawer .sub-menu li.inb-acc__all a { color: var(--main); }
	/* 電話の画像はスマホの一覧には出さない（下の固定メニューにある） */
	.navi-menu-content .inb-navi-tel { display: none; }
}

/*834px以下*/
@media screen and (max-width: 834px){
	.inb-works {
		padding: 20px 15px 15px;
	}
	.inb-works__list,
	.inb-works-archive #list {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.inb-intro h2,
	.inb-intro h3 {
		font-size: 28px;
	}
}

/*767px以下（スマホ）*/
@media screen and (max-width: 767px){
	/* スマホでは行の余白をスマホ用の値に、2列は1列に */
	.inb-row {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: var(--inb-mb-sp, 0);
	}
	.inb-w {
		margin-bottom: var(--inb-mb-sp, 0);
	}
	.inb-editor + .inb-image {
		margin-top: 20px;
	}
	.entry-title,
	.entry-content h2#post_title {
		font-size: 20px;
		border-width: 1px;
		padding: 10px 0;
		margin-bottom: 20px;
	}
	.inb-works-archive .archive-title {
		font-size: 16px;
	}
	.entry-content p,
	.entry-content li,
	.entry-content dt,
	.entry-content dd {
		font-size: 16px;
		line-height: 1.9;
	}
	.entry-content p {
		margin-bottom: 1.4em;
	}
	.entry-content h3.pagettl {
		font-size: 20px;
	}
	.entry-content h4.cntntttl {
		font-size: 18px;
	}
	.entry-content table th,
	.entry-content table td {
		font-size: 14px;
		padding: 8px 10px;
	}
	.entry-content .inb-gallery__slides {
		height: 220px;
	}
	.inb-intro {
		margin: 30px 0 40px;
		text-align: left;
	}
	.inb-intro h2,
	.inb-intro h3 {
		font-size: 20px;
		text-align: center;
		padding-top: 0;
	}
	.entry-content .inb-intro p {
		font-size: 16px;
		line-height: 1.8;
	}
	.inb-intro strong {
		font-size: 1em;
	}
	.inb-course--top {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 30px;
	}
	.entry-content .inb-course-txt {
		display: none;
	}
	.inb-works {
		margin-top: 40px;
		border: none;
	}
	.inb-works__head {
		flex-wrap: wrap;
	}
	.entry-content .inb-works__ttl {
		font-size: 17px;
		line-height: 1.5;
	}
	.inb-works__list,
	.inb-works-archive #list {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.inb-works__info {
		padding: 8px 5px 12px 10px;
	}
	.entry-content .inb-works__title {
		font-size: 14px;
		line-height: 1.5;
	}
	.Button {
		width: 100%;
	}
	/* 本文の表：スマホでは th の下に td（縦に並べる）。線が二重にならないよう上の線は表だけに付ける */
	.entry-content table,
	.entry-content table tbody,
	.entry-content table tr,
	.entry-content table tr > th,
	.entry-content table tr > td {
		display: block;
		width: 100%;
	}
	.entry-content table:not(.contactTbl):not(.inb-data__tbl) {
		border-top: 1px solid #aaa;
	}
	.entry-content table tr > th,
	.entry-content table tr > td {
		border-top: none;
	}
	.entry-content table tr > th {
		padding: 6px 10px;
		text-align: left;
		white-space: normal;
	}
	/* フォーム：項目名の下に入力欄 */
	.wpcf7 table.contactTbl,
	.wpcf7 table.contactTbl tbody,
	.wpcf7 table.contactTbl tr,
	.entry-content .wpcf7 table.contactTbl th,
	.entry-content .wpcf7 table.contactTbl td {
		display: block;
		width: 100%;
	}
	.entry-content .wpcf7 table.contactTbl th {
		padding: 6px 10px;
		white-space: normal;
	}
	.entry-content .wpcf7 table.contactTbl td {
		padding: 12px 8px;
	}
	.wpcf7 table.contactTbl .w-nml,
	.wpcf7 table.contactTbl textarea.w-nml {
		width: 100%;
	}
	.inb-form-confirm {
		padding: 18px 16px;
	}
	.inb-form-confirm__row {
		flex-direction: column;
	}
	.inb-form-confirm__label {
		flex: none;
	}
	.related-entries .related-list {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 12px;
	}
	/* 施工事例の一覧：パソコン用の内側の余白（左右46px）を詰める */
	.inb-works-archive #list {
		padding: 16px 12px 20px;
		gap: 24px 12px;
	}
	.inb-works-archive .archive-title {
		padding: 12px 16px;
	}
	.pager-post-navi {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.pager-post-navi a.next-post {
		grid-column: auto;
	}
	.pager-post-navi figure {
		flex-basis: 90px;
		width: 90px;
	}
	.pager-post-navi figure img {
		width: 90px;
		height: 60px;
	}
	.inb-entry {
		padding: 40px 0 56px;
	}
	.inb-entry.inb-entry--inline {
		padding: 20px 12px 28px;
	}
	.entry-content h2.inb-entry__title {
		font-size: 24px;
	}
	.entry-content p.inb-entry__lead {
		text-align: left;
	}
	.entry-content p.inb-entry__lead br {
		display: none;
	}
	.inb-entry__group,
	.inb-entry__privacy {
		padding: 18px 18px 20px;
		border-radius: 10px;
	}
	.inb-entry__privacy {
		text-align: left;
	}
	/* 同意の文が2行になったとき、2行目をチェックボックスの下に潜らせない。「必須」は次の行に（くまの整形外科と同じ） */
	.inb-entry__privacy label {
		display: flex;
		align-items: flex-start;
	}
	.inb-entry__privacy input[type="checkbox"] {
		flex: 0 0 20px;
		margin-top: 3px;
	}
	.inb-entry__privacy .inb-entry__req {
		display: block;
		width: fit-content;
		margin: 8px 0 0 28px;
	}
	.inb-entry__note {
		display: block;
		margin: 2px 0 0;
	}
	.inb-entry input[type="text"],
	.inb-entry input[type="email"],
	.inb-entry input[type="tel"] {
		max-width: none;
	}
	.inb-pagehead {
		height: 200px;
	}
	.entry-content h1.inb-pagehead__title {
		font-size: 28px;
	}
	.inb-thanks {
		padding: 16px 12px;
	}
	.inb-thanks__card {
		padding: 32px 20px 40px;
		border-radius: 12px;
	}
	.entry-content h2.inb-thanks__heading {
		font-size: 20px;
	}
	.entry-content p.inb-thanks__tel {
		font-size: 30px;
	}
	.entry-content p.inb-thanks__text br {
		display: none; /* スマホでは改行せずに流す */
	}
	.inb-footer__address span {
		display: block;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.mobile-header-menu-buttons .logo-menu-button .site-logo-image { height: 30px; }
	.inb-works__list,
	.inb-works-archive #list {
		grid-template-columns: 1fr;
	}
}