@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
*/

/* ============================================================
   子テーマ用のスタイル
   ============================================================ */



/* ============================================================
   ■ 西宮で遊ぶならセクション .nishinomiya-cta

   ============================================================ */
.nishinomiya-cta {
	max-width: 700px;
	margin: 4rem auto !important;
	padding: 2.5rem 2rem !important;
	border: 2px solid #e8407c;
	border-radius: 12px;
	box-shadow: 0 0 25px rgba(232, 64, 124, 0.35);
}

/* --- 見出し「西宮で遊ぶなら」 --- */
.nishinomiya-cta h2 {
	margin-bottom: 0.5rem !important;
}

/* --- 段落テキスト --- */
.nishinomiya-cta p {
	color: #ddd !important;
	font-size: 0.95rem;
	line-height: 1.9;
	margin-bottom: 2rem !important;
}

/* --- アイコンを並べているカラムブロック --- */
.nishinomiya-cta .wp-block-columns {
	gap: 1rem !important;
	margin-bottom: 2rem !important;
}

/* --- カラム・画像ラッパーの中央揃え --- */
.nishinomiya-cta .wp-block-column {
	text-align: center;
}

.nishinomiya-cta .wp-block-image {
	text-align: center;
}

.nishinomiya-cta .wp-block-column img {
	max-width: 70px;
	margin: 0 auto;
	display: block;
}

.nishinomiya-cta .wp-block-button__link:hover {
	background: #ff5fa2 !important;
	box-shadow: 0 0 15px rgba(255, 95, 162, 0.6);
	transform: translateY(-2px);
}

/* ============================================================
   ▼▼▼　---　600以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 600px) {
	.nishinomiya-cta {
		padding: 2rem 1.2rem !important;
	}
	.nishinomiya-cta .wp-block-column img {
		max-width: 50px;
	}
}

/* ============================================================
   ▼▼▼　---　400以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 400px) {
	.nishinomiya-cta h2 {
		font-size: 1.5rem !important;
		line-height: 1.4;
	}
	.nishinomiya-cta p {
		font-size: 0.85rem;
	}
}



/* ============================================================
   ■ テーブル: RECRUIT (table-recruit)

   ============================================================ */
/* --- 背景色をすべて透明に --- */
.table-recruit th,
.table-recruit td,
.table-rec-th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
	> table
	tr
	th {
	background: transparent !important;
}

.table-recruit {
	max-width: 800px;
	margin: 1.5rem auto;
	width: 100%;
	border-collapse: collapse;
}

.table-recruit tr {
	border-bottom: 1px solid #ddd;
}

/* --- 項目名(左列) --- */
.table-rec-th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
	> table
	tr
	th {
	width: 25%;
	background: #f5f5f5;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 24px 20px;
	vertical-align: top;
}

/* --- 内容(右列) --- */
.table-recruit td {
	padding: 24px 20px;
	line-height: 1.9;
	vertical-align: top;
}

/* 縞模様を無効化(テーマ標準の背景色を消す) */
.table-recruit tr:nth-of-type(2n + 1) {
	background: transparent;
}

/* ● 応募ボタン (recruit-btn)　 */
.recruit-btn {
	max-width: 240px;
	width: 100%;
	margin: 40px auto 60px;
	text-align: center;
	background: #111111;
	border: 1px solid #111111;
	border-radius: 0;
	transition: all 0.3s ease;
}

.recruit-btn:hover {
	background: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.recruit-btn a {
	display: block;
	background: transparent;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 0.9em 1em;
	text-decoration: none;
	transition: color 0.3s ease;
}

.recruit-btn:hover a {
	color: #111111;
}

/* ============================================================
   ▼▼▼　---　865以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 865px) {
	.table-recruit {
		max-width: 100%;
	}

	.table-rec-th,
	.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
		> table
		tr
		th {
		width: 100%;
		display: inline-block;
	}

	.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
		> table
		tr
		td.table-rec-td {
		width: 100%;
		display: inline-block;
	}

	.recruit-btn {
		font-size: 14px;
	}
}

/* ============================================================
   ▼▼▼　---　545以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 545px) {
	.table-recruit {
		font-size: 14px;
		margin-top: 0;
	}

	.recruit-btn {
		max-width: 70%;
		font-size: 12px;
	}
}

/* ============================================================
   ■ 応募フォーム セクション全体 (recruit-form-section)

   ============================================================ */
.recruit-form-section {
 max-width: 700px;
 margin: 3rem auto 5rem;
 padding: 0 20px;
}

.recruit-form-section h2 {
 text-align: center;
 margin-top: 6rem !important;
}

.recruit-form-section > p {
 text-align: center;
 color: #888;
 font-size: 15px;
}

/* ============================================================
   ■ 応募フォーム .recruit-form

   ============================================================ */
.recruit-form {
 width: 100%;
 max-width: 600px;
 margin: 3rem auto 0;
 border-collapse: collapse;
 table-layout: fixed;
 box-sizing: border-box;
 overflow-x: hidden;
}

/* --- テーマ標準の縞模様を無効化 --- */
.recruit-form tr:nth-of-type(2n + 1) {
 background-color: transparent;
}

.titele {
 display: none;
}

.recruit-form tr,
.recruit-form td,
.recruit-form th {
 display: block;
 border: none;
 text-align: left;
}

/* --- 項目名(上) --- */
.recruit-form th {
 background: transparent;
 font-weight: 700;
 font-size: 14px;
 letter-spacing: 1px;
 margin-bottom: 8px;
 display: flex;
 align-items: center;
 gap: 8px;
 max-width: 100%;
}

/* --- 入力欄(下)：項目ごとの間隔 --- */
.recruit-form td {
 padding-bottom: 32px;
 max-width: 100%;
}

/* --- 「必須」バッジ --- */
.CF7_req {
 display: inline-block;
 background: #7a1c1c;
 color: #fff;
 font-size: 0.7em;
 font-weight: 700;
 letter-spacing: 1px;
 padding: 2px 8px;
 border-radius: 3px;
}

/* 「任意」文字(使う場合の予備) */
.CF7_unreq {
 font-size: 0.8em;
 padding-left: 5px;
 color: #999;
}

/* --- 入力欄・テキストエリア(共通) --- */
.recruit-form input,
.recruit-form textarea {
 width: 100%;
 min-width: 0;
 max-width: 100%;
 border: solid 1px #ccc;
 font-family: "MS PGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo UI",
  "MS Gothic", sans-serif;
 font-size: 15px;
 letter-spacing: 1px;
 border-radius: 4px;
 padding: 12px 16px;
 background: #f8f8f8;
 color: #111;
 transition: border-color 0.3s ease, background 0.3s ease;
 box-sizing: border-box;
}

/* --- フォーカス時：黒枠に切り替え --- */
.recruit-form input:focus,
.recruit-form textarea:focus {
 outline: none;
 border-color: #111;
 background: #fff;
}

.recruit-form textarea {
 min-height: 140px;
 resize: vertical;
}



/* ● 応募フォーム 送信ボタン */
.wpcf7 input.wpcf7-submit {
 display: block;
 max-width: 220px;
 width: 100%;
 margin: 20px auto 40px;
 padding: 0.9em 1em;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: 2px;
 border: 1px solid #111;
 border-radius: 0;
 background: #ffffff;
 color: #111;
 cursor: pointer;
 transition: all 0.3s ease;
}

.wpcf7 input.wpcf7-submit:hover {
 background: #111;
 color: #ffffff;
 transform: translateY(-2px);
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.CF7_btn {
 text-align: center;
}

/* ● 応募フォーム エラー表示 */
.wpcf7-response-output {
 text-align: center;
 border: none;
 color: #7a1c1c;
 font-size: 14px;
 margin-top: 20px;
}

.wpcf7-not-valid-tip {
 color: #a23576;
 font-size: 13px;
 margin-top: 6px;
}

.wpcf7 form.invalid .wpcf7-response-output {
 border-color: transparent;
}

/* ============================================================
   ▼▼▼　---　865以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 865px) {
 .recruit-form-section {
  max-width: 100%;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
 }

 .recruit-form-section h2 {
  margin-top: 4rem !important;
 }

 .recruit-form {
  width: 90%;
 }

 .recruit-form th {
  margin-bottom: 6px;
 }
}

/* ============================================================
   ▼▼▼　---　545以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 545px) {
 .wpcf7-spinner {
  display: none;
 }

 .recruit-form-section {
  padding: 0;
 }

 .wpcf7 input.wpcf7-submit {
  max-width: 70%;
  font-size: 13px;
  margin-top: 0 !important;
 }

 /* 志望動機・自己PR欄の下の余白を消す */
 .recruit-form td.message-100 {
  padding-bottom: 0;
 }
}




/* ============================================================
   ■ プライバシーポリシー (.privacy-policy)

   ============================================================ */
.privacy-policy h3 {
	font-size: 30px;
	padding-left: 0;
	margin-top: 30px;
	margin-bottom: 10px;
}

@media screen and (max-width: 834px) {
	.privacy-policy {
		padding-top: 50px;
		width: 80%;
		margin: auto;
	}

	.privacy-policy h3 {
		font-size: 20px;
		font-weight: 700;
	}
}

@media screen and (max-width: 545px) {
	.privacy-policy {
		padding-top: 0;
	}

	.privacy-policy h2 {
		font-size: 20px;
	}

	.privacy-policy h3 {
		font-size: 16px;
	}

	.privacy-policy p {
		font-size: 12px;
	}
}



/* ============================================================
   ■ NEWS一覧　　(.list.ect-big-card) コクーン初期CSS
　　画像を正方形・縦一列に
   ============================================================ */
.list.ect-big-card {
	max-width: 700px;
	margin: 60px auto 0;
	display: flex;
	flex-direction: column;
	row-gap: 40px;
}

.list.ect-big-card .entry-card-wrap {
	display: block;
	text-decoration: none;
}

/* --- a-wrapのホバー背景を無効化(グレー消し) --- */
.list.ect-big-card .entry-card-wrap.a-wrap:hover {
	background-color: transparent !important;
}

.list.ect-big-card .entry-card {
	text-align: center;
}

/* --- 画像の枠(figure)：枠内にズームを収める --- */
.list.ect-big-card .entry-card-thumb,
.list.ect-big-card .eye-catch {
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;      /* ← はみ出したズームを枠内に収める */
	border: solid 1px #333;
}

/* --- アイキャッチ画像を正方形に(border は枠側に移したので画像からは外す) --- */
.list.ect-big-card .entry-card-thumb img,
.list.ect-big-card .eye-catch img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease, filter 0.5s ease;
}

/* --- ホバー：枠内でズーム --- */
.list.ect-big-card .entry-card-wrap:hover .entry-card-thumb img,
.list.ect-big-card .entry-card-wrap:hover .eye-catch img {
	transform: scale(1.08);
	filter: brightness(1.05);
}

.list.ect-big-card .entry-card-title {
	margin-top: 16px;
	font-size: 1.3rem;
	color: #111;
	position: relative;
	display: inline-block;
	transition: color 0.3s ease;
}

.list.ect-big-card .entry-card-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: #111;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.list.ect-big-card .entry-card-wrap:hover .entry-card-title {
	color: #7a1c1c;
}

.list.ect-big-card .entry-card-wrap:hover .entry-card-title::after {
	width: 100%;
}

/* ============================================================
   ▼▼▼　---　835以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 835px) {
	.list.ect-big-card {
		margin-top: 40px;
		padding: 0 20px;
		row-gap: 30px;
	}
}

/* ============================================================
   ▼▼▼　---　560以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 560px) {
	.list.ect-big-card {
		margin-top: 25px;
	}

	.list.ect-big-card .entry-card-title {
		font-size: 16px;
	}
}



/* ============================================================
   ■ 基本スタイル

   ============================================================ */
body {
	font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro",
		"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
		"MS PGothic", sans-serif;
	font-size: 16px;
	letter-spacing: 0.025em;
	line-height: 1.8;
	margin: 0;
	overflow-x: hidden;
}

html {
	overflow-x: hidden !important; /* 右の空白強制削除 */
}

#main,
#heder {
	background: transparent;
	font-family: Yu Gothic, Hiragino Sans, Meiryo, Yu Mincho, Noto Sans CJK JP;
}

/* ●　各ページタイトル非表示　 */
h1.entry-title {
	display: none;
}

.article h3 {
	padding-bottom: 20px;
}

/* ●　セクション共通(.section)　 */
.section {
	max-width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	overflow: hidden;
}

.section p._a {
	font-size: 12px;
	font-weight: bold;
	margin: 30px 0 0;
}

.section p._a .link {
	display: inline-block;
	color: #607d8b;
	padding-left: 1.3em;
	text-indent: -1.3em;
}

.section p._a .link:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-top: 2px solid #607d8b;
	border-right: 2px solid #607d8b;
	transform: rotate(45deg);
	margin-right: 10px;
}

/* ● 背景関連　*/
/* 背景全幅・背景色付け */
.full {
	border-image: linear-gradient(gainsboro) fill 0 //0 100vw 0 100vw;
}

/*　● 非表示要素　 */
/* 固定の各日付非表示 */
.page .date-tags .body {
	display: none;
	background: white;
}

/* ●reCAPTCHAのロゴを非表示 */
.grecaptcha-badge {
	visibility: hidden;
}

/* ============================================================
   ▼▼▼　---　1024以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 1024px) {
	body {
		font-size: 14px;
	}
}

/* ============================================================
   ▼▼▼　---　834以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
	/* .mainの上下マージンをリセット */
	.main {
		margin: 0 !important;
	}
}




/* ============================================================
   ■ news-post-block
　　(投稿テンプレート)
   ============================================================ */
.news-post-block {
	max-width: 700px;
	margin: 0 auto;
}

/* --- タイトル(H2) --- */
.news-post-block h2 {
	font-family: "Noto Serif", "游明朝", "Yu Mincho", YuMincho, serif;
	font-size: 32px;
	text-align: center;
	letter-spacing: 1px;
	margin-bottom: 0px ;
}

/* --- サブタイトル(タイトル直後の段落) --- */
.news-post-block > p:first-of-type {
	text-align: center;
	color: #888;
	font-size: 15px;
	letter-spacing: 1px;
	margin-top: 0;
	margin-bottom: 30px;
}

/* --- アイキャッチ画像を正方形に統一 --- */
.news-post-block .wp-block-post-featured-image {
	max-width: 600px;
	margin: 0 auto 30px;
}

.news-post-block .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: solid 1px #ddd;
	display: block;
}

/* --- 本文段落 --- */
.news-post-block > p:last-of-type {
	text-align: center;
	line-height: 1.9;
	color: #333;
	font-size: 15px;
	padding-bottom: 100px;
}

/* ============================================================
   ▼▼▼　---　834以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
	.news-post-block {
		max-width: 100%;
		padding: 0 20px;
	}

	.news-post-block h2 {
		font-size: 24px;
	}

	.news-post-block .wp-block-post-featured-image {
		max-width: 100%;
	}
}


/* ============================================================
   ■　フッター

   ============================================================ */
.pz-footer {
  background: #1a1a1a;
  color: #f5f5f5;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  padding: 32px 24px;
  box-sizing: border-box;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.pz-footer * { box-sizing: border-box; }

.pz-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.pz-logo-block {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.pz-logo-img {
  height: 48px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.pz-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.15);
  flex: 0 0 auto;
}

.pz-contact-block { flex: 0 0 auto; }
.pz-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  text-decoration: none;
  color: #f5f5f5;
}
.pz-phone .icon { font-size: 18px; }
.pz-hours,
.pz-address {
  font-size: 12px;
  color: #b8b8b8;
  margin: 2px 0;
  line-height: 1.5;
}

.pz-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.pz-nav li { display: flex; align-items: center; gap: 20px; }
.pz-nav a {
  color: #f5f5f5;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pz-nav a:hover { color: #c0392b; }
.pz-nav .sep { color: rgba(255,255,255,0.25); }

.pz-social { display: flex; gap: 10px; flex: 0 0 auto; }
.pz-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 16px;
}
.pz-social a:hover { background: rgba(255,255,255,0.18); }

.pz-copyright {
  text-align: center;
  font-size: 11px;
  color: #b8b8b8;
  letter-spacing: 1px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 767px) {
  .pz-footer { padding: 28px 16px; }
  .pz-footer-inner { flex-direction: column; text-align: center; gap: 16px; }
  .pz-divider { display: none; }
  .pz-logo-img { height: 36px !important; }
  .pz-contact-block { text-align: center; }
  .pz-phone { justify-content: center; font-size: 19px; }
  .pz-nav { flex-direction: row; justify-content: center; gap: 12px; font-size: 12px; }
  .pz-nav li { gap: 12px; }
  .pz-social { justify-content: center; }
  .pz-copyright { margin-top: 16px; }
}

/*  ●　フッター領域の余白リセット */
/* 1. ウィジェット外枠・親要素の余白削除 */
.footer-widgets, 
.footer-widgets-mobile,
.footer-widgets-mobile.cf {
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. ウィジェット内部エリア（カラム）の内側余白削除 */
.footer-mobile, 
.footer-left, 
.footer-center, 
.footer-right {
  padding: 0 !important;
}

/* 3. フッター最下部（コピーライト等）の余白調整 */
.footer-bottom {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4. フッターコンテナ全体の余白調整 */
#footer-in {
  padding-bottom: 0 !important;
}

.footer-bottom {
	padding: 0;
}


/* ============================================================
   ■ 店内写真 画像 (photo-list-stylish)

   ============================================================ */
/* 外側のグループの幅制限を解除して広げる */
.photo-list.is-layout-constrained > .photo-list-stylish {
	max-width: 1200px !important;
	width: 100% !important;
}

/* PC：4列を均等grid表示 */
.photo-list-stylish.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px;
	width: 100% !important;
}

.photo-list-stylish.wp-block-columns > .wp-block-column {
	width: auto !important;
	flex-basis: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* ★修正ポイント：画像の「枠」自体に overflow: hidden を指定する */
.photo-list-stylish a,
.photo-list-item {
	display: block;
	width: 100% !important;
	height: auto !important;
	overflow: hidden !important; /* ★コレが重要！はみ出しをカットする */
}

.photo-list-item img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

/* マウスを載せた時に「枠の中で」画像だけが拡大する */
.photo-list-item:hover img,
.photo-list-stylish a:hover img {
	transform: scale(1.08);
}


/* ============================================================
   ▼▼▼　---　834以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
	.photo-list-stylish {
		width: 90%;
		margin: auto;
	}
	.photo-list-stylish.wp-block-columns {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ============================================================
   ▼▼▼　---　540以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 540px) {
	.photo-list-stylish {
		width: 100%;
	}
	.photo-list-stylish.wp-block-columns {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.5rem;
	}
}


/* ============================================================
   ■ インスタグラム ホーム

   ============================================================ */
/* --- 全体の基本設定 --- */
#sb_instagram {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* --- 画像の基本スタイル --- */
#sb_instagram img {
	border: solid 1px #111111;
	box-sizing: border-box;
	transition: transform 0.4s ease !important;
}

/* --- 画像を囲む要素からはみ出ないように設定 --- */
#sb_instagram .sbi_item {
	overflow: hidden !important;
}

/* --- ホバー時、枠内で拡大 --- */
#sb_instagram .sbi_item:hover img {
	transform: scale(1.08) !important;
}

/* ● read more ボタン */
/* ローディングアイコン非表示 */
#sb_instagram #sbi_load .sbi_loader {
	display: none !important;
}

/* ボタン本体 */
#sb_instagram #sbi_load .sbi_load_btn {
	display: block;
	max-width: 200px;
	width: 100%;
	margin: 30px auto 0 !important;
	padding: 0.8em 1em !important;
	border: 1px solid #111111 !important;
	border-radius: 0px !important;
	background: #ffffff !important;
	color: #111111 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 2px;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease !important;
	box-shadow: none !important;
	cursor: pointer;
}

/* ホバー時のアニメーション(黒に反転) */
#sb_instagram #sbi_load .sbi_load_btn:hover {
	background: #111111 !important;
	color: #ffffff !important;
	border-color: #111111 !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* --- ボタン文字を「read more」表示に強制置換 --- */
/* 1. 元の日本語「さらに読み込む」を非表示 */
#sb_instagram #sbi_load .sbi_btn_text {
	font-size: 0 !important;
	display: inline-block;
}

/* 2. ::before で "read more" を表示 */
#sb_instagram #sbi_load .sbi_btn_text::before {
	content: "read more" !important;
	text-transform: none !important;
	font-size: 14px !important;
	letter-spacing: 2px !important;
	display: inline-block;
}

/* ============================================================
   ▼▼▼　---　834以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
	#sb_instagram {
		padding: 0 20px;
	}
}

/* ============================================================
   ▼▼▼　---　545以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 545px) {
	#sb_instagram {
		padding: 0 !important;
	}

	/* ボタン調整 */
	#sb_instagram #sbi_load .sbi_load_btn {
		max-width: 160px;
		margin-top: 20px !important;
		font-size: 11px !important;
		padding: 0.7em 0.8em !important;
		letter-spacing: 1.5px;
	}

	/* ボタン文字調整 */
	#sb_instagram #sbi_load .sbi_btn_text::before {
		font-size: 11px !important;
		letter-spacing: 1.5px !important;
	}
}


/* ============================================================
   ■ ニュース ホーム (news-list-stylish)

   ============================================================ */
/* --- カードコンテナ全体 --- */
.new-entry-cards {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
}

/* --- 各カード(リンク全体) --- */
.new-entry-cards a {
  display: block;
  width: calc(25% - 15px);
  text-decoration: none;
  position: relative;      /* キャプション絶対配置の基準 */
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* a-wrap(カード全体のaタグ) のテーマ標準装飾を無効化 */
.new-entry-cards.card-large-image a.a-wrap {
  max-width: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
}

.new-entry-cards.card-large-image a.a-wrap:hover {
  background-color: transparent !important;
}

/* --- 画像ラッパー(個別カードのみ・枠線はここ) --- */
.new-entry-card-thumb {
  overflow: hidden;
  border: solid 1px #333;
  box-sizing: border-box;
}

/* --- カード画像 --- */
.new-entry-card-thumb img,
.card-large-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* --- ホバー時の拡大(個別カードの画像のみ) --- */
.new-entry-cards a:hover .new-entry-card-thumb img {
  transform: scale(1.1);
}

/* --- タイトルラベル(黒背景オーバーレイ) --- */
.widget-entry-cards.card-large-image .card-content {
  height: 25%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* --- ニュースタイトル文字 --- */
.card-title {
  color: white;
  margin: 0;
  padding: 0 5px;
  font-family: "Noto Serif", "游明朝", "Yu Mincho", YuMincho,
    "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝",
    "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
  letter-spacing: 1.8px;
  font-size: 14px;
  text-align: center;
}

/* --- スニペット非表示 --- */
.widget-entry-cards:not(.large-thumb-on) .card-snippet {
  display: none;
}

.widget-entry-card-snippet {
  color: #666;
}

/*  ● read more ボタン　 */
.more-button {
  max-width: 200px;
  margin: 30px auto 0;
  border: 1px solid #111111;
  border-radius: 0px;
  background: #ffffff;
  transition: all 0.3s ease;
  position: relative;
}

.more-button a {
  display: block;
  padding: 0.8em 1em;
  color: #111111;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.more-button:hover {
  background: #111111;
  border-color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.more-button:hover a {
  color: #ffffff;
}

/* ============================================================
   ▼▼▼　---　834以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
  .new-entry-cards {
    gap: 15px;
    padding: 0 15px;
  }

  .new-entry-cards a {
    width: calc(50% - 10px);
  }
}

/* ============================================================
   ▼▼▼　---　560以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 560px) {
  .new-entry-cards {
    gap: 10px;
    padding: 0 10px;
  }

  .new-entry-cards a {
    width: calc(50% - 5px);
  }

  .card-title {
    font-size: 11px;
  }

  .more-button {
    max-width: 160px;
    margin-top: 20px;
  }

  .more-button a {
    font-size: 11px;
    padding: 0.7em 0.8em;
    letter-spacing: 1.5px;
  }
}



/* ============================================================
   ■ ヘッダー

   ============================================================ */
/* --- 影の無効化 --- */
#header-container,
[id^="menu-mobile-"] {
	box-shadow: none !important;
}

/* ● モバイルヘッダーボックスshadow消す */
.mobile-header-menu-buttons {
  box-shadow: none !important;
}


/* --- 隙間埋め --- */
.main,
.arteicle,
.wp-block-group,
.body,
.entry-content,
.footer {
	padding-top: 0;
	padding-bottom: 0 !important;
	margin-top: -10px !important;
	margin-bottom: 0 !important;
}

.content {
	margin-top: -19px;
}

/* ● ヘッダーレイアウト(ロゴ左・メニュー中央・お問い合わせ右) */
.header-container,
.navi {
	background: black;
	box-shadow: none;
	padding-top: 0;
	padding-bottom: 0;
}

.header-container-in {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
	padding: 35px 40px !important;
}

/* ロゴ側の余白リセット */
.header {
	margin: 0 !important;
	padding: 0 !important;
}

/* メニューを中央に配置 */
.navi {
	flex: 1;
}

.navi-in {
	width: 100%;
	display: flex;
	justify-content: center;
}

.menu-header {
	display: flex;
	align-items: center;
	gap: 0;
}

.menu-header li {
	position: relative;
	padding: 0 20px;
}

/* Cocoon標準のホバー背景をリセット */
.navi a:hover,
.menu-header a:hover,
.menu-header li:hover {
	background: transparent !important;
	box-shadow: none !important;
}

/* メニューリンク：中央から伸びるアンダーラインホバー */
.menu-header a {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	color: white;
	letter-spacing: 1px;
}

.menu-header a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: white;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.menu-header a:hover {
	color: #ccc;
	transition: color 0.3s ease;
}

.menu-header a:hover::after {
	width: 100%;
}

/* ● お問い合わせボタン　 */
.contact-btn a {
	display: flex !important;
	align-items: center;
	gap: 8px;
	background: #7a1c1c;
	color: white !important;
	padding: 14px 28px !important;
	font-weight: 700;
	letter-spacing: 1px;
	transition: all 0.3s;
}

/* ホバー背景(Cocoon標準より優先) */
#navi .contact-btn a:hover {
	background: rgba(122, 28, 28, 0.7) !important;
}

.contact-btn a::before {
	content: "\f095"; /* Font Awesome 電話アイコン */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

/* 下線アニメーションは付けない */
.contact-btn a::after,
.contact-btn a:hover::after {
	content: none;
}

/* ============================================================
   ▼▼▼　---　1023以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 1023px) {
	.mobile-header-menu-buttons .logo-menu-button {
		justify-content: flex-end !important;
		padding-right: 15px !important;
	}
}

/* ============================================================
   ▼▼▼　---　834以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
	/* コンテンツ上マージン調整(全表示させる) */
	.content {
		margin-top: 19px;
	}

	/* ヘッダー内パディング調整 */
	.header-container-in {
		padding: 15px 20px !important;
	}

	/* 上下余白を追加 ＋ ロゴ右寄せ */
	.mobile-header-menu-buttons {
		height: auto;
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.logo-menu-button img {
		margin-left: 0;
	}

	/* メニュー下に余白(ファーストビューと重ならないように) */
	#content {
		padding-top: clamp(0.5rem, 1vw, 3rem) !important;
	}
}
/* ============================================================
   ▼▼▼　---　568以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 568px) {
	.mobile-header-menu-buttons {
		padding: 14px 0;
	}
}


/* ============================================================
  ■ ハンバーガー

   ============================================================ */
/* 1. 不要な要素・不要なテキストを非表示 */
.fa-times,
#navi-menu-close,
.navi-menu-caption,
.menu-caption {
	display: none !important;
}

/* 2. 親要素・ボタンのベース設定 */
.mobile-menu-buttons .menu-button,
.mobile-header-menu-buttons {
	background: black !important;
}

/* 3. ボタン本体を画面上部に固定配置 */
#navi-menu-open {
	display: block !important;
	position: fixed !important;
	top: 20px !important;
	left: 20px !important;
	right: auto !important;
	z-index: 99999 !important;
	cursor: pointer;
}

/* 4. ハンバーガー線の基本設定（中央の線） */
.mobile-menu-buttons .menu-icon {
	position: relative;
	display: inline-block;
	width: 20px;            /* 中央の線の長さ */
	height: 1px !important; /* 細さ */
	background: #ffffff;
	font-size: 0 !important;
	color: transparent !important;
	transition: all 0.35s ease;
}

/* 上下の線（共通） */
.mobile-menu-buttons .menu-icon::before,
.mobile-menu-buttons .menu-icon::after {
	content: '';
	position: absolute;
	left: 0;
	height: 1px !important; /* 細さ */
	background: #ffffff;
	transition: all 0.35s ease;
}

/* 上下の線の位置と長さ（通常時：長さ違いのアシンメトリー） */
.mobile-menu-buttons .menu-icon::before {
	width: 28px;        /* 上の線（長） */
	top: -9px;          /* 上の間隔 */
}

.mobile-menu-buttons .menu-icon::after {
	width: 14px;        /* 下の線（短） */
	top: 9px;           /* 下の間隔 */
}

/* ============================================================
   ▼▼▼　---　568以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 568px) {
	.mobile-menu-buttons .menu-icon {
		width: 16px;
	}
	.mobile-menu-buttons .menu-icon::before {
		width: 22px;
	}
	.mobile-menu-buttons .menu-icon::after {
		width: 11px;
	}
}


/* 5. メニューが開いた時（checked）の ✕ 変形処理 */
/* 真ん中の線を消す */
#navi-menu-input:checked ~ #navi-menu-open .menu-icon {
	background-color: transparent !important;
}

/* 上下の線を同じ長さにして「✕」の形に回転させる */
#navi-menu-input:checked ~ #navi-menu-open .menu-icon::before {
	width: 22px !important;   /* ✕にする時は上下同じ長さに統一 */
	top: 0 !important;
	left: 0 !important;
	transform: rotate(45deg);
}

#navi-menu-input:checked ~ #navi-menu-open .menu-icon::after {
	width: 22px !important;   /* ✕にする時は上下同じ長さに統一 */
	top: 0 !important;
	left: 0 !important;
	transform: rotate(-45deg);
}

/* 6. スライドメニュー自体の余白と重ね順 */
#navi-menu-content,
.navi-menu-content {
	background: #0a0a0a !important;
	z-index: 9990 !important;     /* ボタン（99999）より下に配置 */
	padding-top: 40px !important; /* ✕ボタンと被らないよう上余白を確保 */
}


/* ============================================================
   ★　スライドインメニュー

   ============================================================ */

.customize-partial-edit-shortcut {
	display: none;
}

.menu-drawer {
	background: #0a0a0a;
}

.menu-drawer li {
	padding: 22px 25px;
	letter-spacing: 1.8px;
	border-bottom: solid 1px rgba(255, 255, 255, 0.15);
	font-size: 14px;
	font-family: "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3",
		"Hiragino Mincho Pro", serif;
	transition: all 0.3s ease;
}

.menu-drawer a {
	color: white;
	display: block;
	transition: all 0.3s ease;
}

.menu-drawer a:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #ccc;
	padding-left: 10px; /* ホバー時に少し右へ動く演出 */
}

@media screen and (max-width: 568px) {
	.menu-drawer li {
		padding: 15px 18px;
		font-size: 12px;
	}
}



/* ============================================================
   ■　ファーストビュー カバー (fv-cover)

   ============================================================ */
/* カバー直前のスペーサーブロックを消す */
.entry-content.cf > .wp-block-spacer:first-child {
	display: none;
}

/* 画面いっぱいに広げる（PC・モバイル共通・ブレークポイント無し） */
.wp-block-cover.fv-cover {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	/* ★ここがポイント：
	   ・横長画面(PC等)  → 100vh（画面の高さ）を採用
	   ・縦長画面(モバイル等) → 62.5vw（画像の縦横比を保った高さ）を採用
	   を、境目を作らず自動でなめらかに切り替える */
	height: clamp(320px, min(100vh, 62.5vw), 100vh) !important;

	display: flex !important;
	align-items: center;
}

/* 画像を枠いっぱいに広げる */
.wp-block-cover.fv-cover img.wp-block-cover__image-background {
	width: 100% !important;
	height: 100% !important;
	object-position: top center !important;
	object-fit: cover !important;
}

/* 中の文字コンテナの余白をリセット */
.fv-cover .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}


/* ============================================================
   ▼▼▼　---　1023以下　---　▼▼▼
   ============================================================ */
@media screen and (max-width: 1023px) {
	.wp-block-cover.fv-cover {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;

		height: 62.5vw !important; /* 画像の縦横比を保ったまま高さを自動計算 */
		min-height: auto !important;
	}
}



/* ============================================================
   ■ 見出し・サブタイトル (.article h2 / .section-sub)

   ============================================================ */

/* --- 共通フォント設定 --- */
.article h2,
.article .section-sub {
	font-family: "Noto Serif", "游明朝", "Yu Mincho", YuMincho,
		"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝",
		"MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
}

/* --- H2 (見出し2) --- */
.article h2 {
	padding-top: 1rem;
	background: transparent;
	font-size: 50px;
	margin-bottom: -2rem;
}

/* --- 見出し下のサブタイトル (段落) --- */
.article .section-sub {
	border: none;
	font-weight: normal;
	letter-spacing: 1.8px;
	font-size: 16px;
	text-align: center; /* 中央寄せ */
	margin-top: 0;
	margin-bottom: 30px;
}

/* ============================================================
   ▼▼▼ --- 834px以下（タブレット等） --- ▼▼▼
   ============================================================ */
@media screen and (max-width: 834px) {
	.article h2 {
		font-size: 40px;
	}
}

/* ============================================================
   ▼▼▼ --- 545px以下（スマホ等） --- ▼▼▼
   ============================================================ */
@media screen and (max-width: 545px) {
	.article h2 {
		padding-top: 1rem;
		font-size: 35px;
		margin-bottom: -15px;
	}

	.article .section-sub {
		font-size: 14px;
		padding-top: 0;
		margin-bottom: 20px;
	}
}



/* ============================================================
   ■　カテゴリー パンくず

   ============================================================ */
.breadcrumb.sbp-main-before {
	background: transparent;
}

@media screen and (max-width: 865px) {
	.breadcrumb.sbp-main-before {
		padding-left: 2rem;
		margin-top: 7rem;
	}
}

@media screen and (max-width: 545px) {
	.breadcrumb.sbp-main-before {
		font-size: 8px;
		padding-left: 1rem;
		margin-top: 4rem;
	}
}

/* 投稿ページアイキャッチ横カテゴリー非表示 */
.cat-label {
	display: none; /* 非表示にしたいときこれ */
}




/* ============================================================
   ■　グーグルマップ

   ============================================================ */
.g-map {
	width: 100vw;
	max-width: none;
	position: relative;
	padding-top: 56.25%;
	border: 0;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.g-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* グーグルコンテンツ下部分隙間埋め */
.body .widget,
.content-bottom {
	margin-bottom: 0;
	margin-top: 0;
}