/* きょうの寄り道 オリジナルデザイン用カスタムCSS */

/*
 * サイト全体の背景色をアイボリー系に変更し、ごく薄い紙のテクスチャーを重ねる。
 * Cocoon標準では白色（--cocoon-white-color）の各パネルをそのまま上書きするため、
 * 記事ページ・アーカイブページを含むサイト全体に反映される。
 */
body,
.header-container,
.main,
.sidebar,
.footer,
.navi {
	background-color: #f2f0eb;
	background-image: url("../images/paper-texture.jpg");
	background-repeat: repeat;
	background-blend-mode: overlay;
}

/*
 * ヘッダーレイアウト「トップメニュー」用の調整。
 * メニュー項目が8個あり、Cocoon標準の1項目176px幅のままだと
 * 1列に収まらず折り返してしまうため、文字幅に合わせた可変幅にして詰める。
 */
.header-container-in.hlt-top-menu .navi-in > ul li {
	width: auto;
}

.header-container-in.hlt-top-menu .navi-in a {
	padding: 0 14px;
	white-space: nowrap;
}

#kyomichi-front {
	max-width: 1600px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}

#kyomichi-front h2 {
	font-size: 1.6rem;
	margin-bottom: 24px;
}

/*
 * 函し形の写真フレーム
 * 中の写真がどんな縦横比でも object-fit:cover で必ずこの器いっぱいに
 * 表示されるため、写真を差し替えても形やレイアウトは崩れない。
 */
.kyomichi-blob-frame {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 63% 37% 54% 46% / 42% 47% 53% 58%;
	background-color: #eee9df;
}

.kyomichi-blob-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kyomichi-blob-frame--placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #e7e2d6, #e7e2d6 10px, #f7f5ee 10px, #f7f5ee 20px);
}

/*
 * メインビジュアル：文字・イラスト・写真を含む完成画像をそのまま表示する。
 * トリミングは行わず（width:100%; height:auto）画像全体を常に表示するため、
 * 文字が切れたり不自然な位置で欠けたりしない。
 */
.kyomichi-hero {
	margin-bottom: 32px;
}

.kyomichi-hero-image {
	display: block;
	width: 100%;
	height: auto;
}

.kyomichi-hero .kyomichi-blob-frame--placeholder {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	color: #8a806e;
	border-radius: 24px;
}

/* このごろ：カテゴリー最新記事のカードグリッド */
.kyomichi-latest {
	margin-bottom: 64px;
}

.kyomichi-latest-heading {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 24px;
}

.kyomichi-latest-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}

.kyomichi-latest-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.kyomichi-latest-card .kyomichi-blob-frame {
	aspect-ratio: 3 / 2;
	border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
}

.kyomichi-category-label {
	display: inline-block;
	font-size: 0.8rem;
	color: #fff;
	padding: 2px 12px;
	border-radius: 999px;
	margin-top: 12px;
}

.kyomichi-latest-title {
	margin-top: 8px;
	font-weight: bold;
	line-height: 1.5;
}

/* 木を彫る日もあります */
.kyomichi-craft {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 64px;
}

.kyomichi-craft-photo,
.kyomichi-craft-photo-wrap .kyomichi-blob-frame--placeholder {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

/* 猫たちのきろく：円形フレーム＋名前 */
.kyomichi-cats-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.kyomichi-cats-grid .kyomichi-blob-frame {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.kyomichi-cats-grid figure {
	margin: 0;
}

.kyomichi-cats-grid figcaption {
	text-align: center;
	margin-top: 8px;
	font-size: 0.85rem;
}

/*
 * カテゴリー一覧ボタン：完成画像をそのまま表示する。
 * 正方形(1:1)の枠に object-fit:cover で収めるため、画像がぴったり
 * 正方形でなくても見た目のグリッドは崩れない。
 */
.kyomichi-category-nav {
	margin-bottom: 64px;
}

.kyomichi-category-nav-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.kyomichi-category-button {
	display: block;
	overflow: hidden;
	border-radius: 20px;
}

.kyomichi-category-button img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 木を彫る日もあります：リンク */
.kyomichi-craft-link {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 20px;
	border-radius: 999px;
	background-color: #4b7f52;
	color: #fff;
	text-decoration: none;
}

/* 外部リンク（作家ホームページ・Instagram） */
.kyomichi-links-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.kyomichi-link-box {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border-radius: 24px;
	overflow: hidden;
}

.kyomichi-link-box:not(:has(img)) {
	padding: 28px 20px;
	border: 2px solid #ccc;
	background-color: #fff;
}

.kyomichi-link-box img {
	display: block;
	width: 100%;
	height: auto;
}

.kyomichi-link-box--official:not(:has(img)) {
	border-color: #4b7f52;
}

.kyomichi-link-box--instagram-1:not(:has(img)) {
	border-color: #3f7fae;
}

.kyomichi-link-box--instagram-2:not(:has(img)) {
	border-color: #d1608a;
}

.kyomichi-link-icon {
	display: block;
	font-size: 2rem;
	margin-bottom: 8px;
}

.kyomichi-link-box--official .kyomichi-link-icon {
	color: #4b7f52;
}

.kyomichi-link-box--instagram-1 .kyomichi-link-icon {
	color: #3f7fae;
}

.kyomichi-link-box--instagram-2 .kyomichi-link-icon {
	color: #d1608a;
}

.kyomichi-link-title {
	font-weight: bold;
	margin: 0 0 12px;
}

.kyomichi-link-button {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
}

.kyomichi-link-box--official .kyomichi-link-button {
	background-color: #4b7f52;
}

.kyomichi-link-box--instagram-1 .kyomichi-link-button {
	background-color: #3f7fae;
}

.kyomichi-link-box--instagram-2 .kyomichi-link-button {
	background-color: #d1608a;
}

@media (max-width: 640px) {
	.kyomichi-links-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.kyomichi-category-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * 記事ページ・アーカイブページのカテゴリーラベル（Cocoon標準の.cat-link）を
 * カテゴリーごとの色に変更する。Cocoon本体のSEO・パンくず・関連記事などの
 * 機能はそのまま使い、見た目だけをここで上書きする。
 */
.cat-link[href*="/yama-aruki/"] { background-color: #4b7f52; }
.cat-link[href*="/niwa-shigoto/"] { background-color: #d3a415; }
.cat-link[href*="/ikimono/"] { background-color: #3f7fae; }
.cat-link[href*="/neko-tachi/"] { background-color: #d1608a; }
.cat-link[href*="/teshigoto/"] { background-color: #d97b3f; }
.cat-link[href*="/hon/"] { background-color: #7d5ba6; }

@media (max-width: 640px) {
	.kyomichi-latest-grid,
	.kyomichi-cats-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kyomichi-craft {
		grid-template-columns: 1fr;
	}
}

/*
 * ヘッダーロゴ（トップメニューレイアウト）を大きく表示する。
 * Cocoon標準では高さ60pxに固定されており、管理画面の「ヘッダーロゴサイズ」欄は
 * このレイアウトでは効かないため、CSSで直接上書きする。
 */
.header-container-in.hlt-top-menu .logo-header {
	max-height: 90px;
}

.header-container-in.hlt-top-menu .logo-header img {
	max-height: 90px;
}