@charset "UTF-8";

/*!
 * C&C — Keni80 Child / base layer
 * cos_store#31
 *
 * ------------------------------------------------------------------
 * このファイルが存在する理由（2つある）
 * ------------------------------------------------------------------
 * 1. 賢威は child テーマ利用時、keni/common/keni-setup.php:264-269 で
 *    child の base.css / advanced.css を **is_readable ガード無しで**
 *    enqueue する。ファイルが無いと毎 PV 404 が 2 本出る（実測: 404 ページ
 *    の HTML 約 44KB × 2 を余計にダウンロードしていた）。
 *
 * 2. スタイルシートの実測ロード順は以下。child の上書きを親に確実に
 *    効かせられるのは 4 / 5 / 7 だけで、1 は親の全部に負ける。
 *
 *      1. keni80-child/style.css        (get_stylesheet_uri)
 *      2. keni80_.../base.css
 *      3. keni80_.../advanced.css
 *      4. keni80-child/base.css         ← このファイル
 *      5. keni80-child/advanced.css
 *      6. keni80_.../default-style.css
 *      7. keni80-child/default-style.css
 *
 *    → 親 default-style.css(6) が持つセレクタは 4/5 では上書きできない。
 *      それらは必ず 7 (child/default-style.css) 側に書くこと。
 *
 * ------------------------------------------------------------------
 * レイヤー分担
 * ------------------------------------------------------------------
 *   base.css     … トークン / 基盤タイポグラフィ / レイアウト / クローム
 *   advanced.css … 本文コンポーネント / ウィジェット / cs-shop
 *   default-style.css … アクセント色マッピング（親と 1:1 対応）
 *
 * ------------------------------------------------------------------
 * デザイン方針: Redesign - Preserve
 * ------------------------------------------------------------------
 * ブランドのティールは変更しない。生成済みのアイキャッチ / OGP 画像が
 * 全記事に存在し、実測で #003f44 → #008288 のグラデーション +
 * アクセントバー #86e5ea を使っている。以下のトークンはその画像から
 * 導出しており、サイトのクロームを画像側の質感に合わせる方向で刷新する。
 *
 * 変更しないもの: URL / スラッグ / ナビのラベル / DOM 構造 / クラス名
 */


/*
# =================================================================
# 1. デザイントークン
# =================================================================
*/

:root {
	color-scheme: light dark;

	/* ブランド — 生成済みアイキャッチから導出 */
	--cc-brand-900: #003f44; /* アイキャッチ上端 */
	--cc-brand-800: #01565c;
	--cc-brand-700: #00666b; /* 本文リンクに使える濃さ (対白 6.7:1) */
	--cc-brand-600: #008288; /* アイキャッチ下端。塗り・罫線用 */
	--cc-brand-300: #86e5ea; /* アイキャッチのアクセントバー */
	--cc-brand-100: #d5ecee;
	--cc-brand-50:  #eef7f7;

	/* サーフェスと文字 — ブランドに合わせた寒色ニュートラルで統一 */
	--cc-canvas:    #f2f5f5;
	--cc-surface:   #ffffff;
	--cc-surface-2: #f6fafa;
	--cc-ink:       #16292b;
	--cc-ink-2:     #3d5457;
	--cc-muted:     #5c7275; /* 対白 5.0:1 */
	--cc-line:      #dde5e6;
	--cc-line-2:    #c3d1d2;

	/* 役割 */
	--cc-accent:      var(--cc-brand-600); /* 塗り・罫線 */
	--cc-accent-ink:  var(--cc-brand-700); /* テキスト（AA を満たす濃さ） */
	--cc-accent-fill: var(--cc-brand-700); /* 白文字を載せる塗り */
	--cc-on-accent:   #ffffff;
	--cc-tint:        var(--cc-brand-50);

	/* 価格。日本の EC の慣習で暖色を使うが、彩度を落として文字として成立させる。
	   cs-shop と本文の .cc-card（楽天カード生成ツールのインライン CSS）で共有する。 */
	--cc-price: #c2410c;

	/* 影はブランドの色相に寄せる（純黒の影は使わない） */
	--cc-shadow-1: 0 1px 2px rgba(0, 63, 68, .06);
	--cc-shadow-2: 0 1px 2px rgba(0, 63, 68, .05), 0 10px 28px -14px rgba(0, 63, 68, .28);

	/* 角丸は 2 段階に固定する
	   パネル / サムネイル = 12px、操作要素 (ボタン・チップ・入力) = 8px */
	--cc-r-panel: 12px;
	--cc-r-ui: 8px;

	--cc-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--cc-canvas:    #0d1416;
		--cc-surface:   #141e20;
		--cc-surface-2: #1a2528;
		--cc-ink:       #e4edee; /* 対 surface 14.6:1 */
		--cc-ink-2:     #b6c6c8;
		--cc-muted:     #8fa3a6; /* 対 surface 6.6:1 */
		--cc-line:      #263436;
		--cc-line-2:    #35494b;

		--cc-accent:      #4fc9d0; /* 対 surface 9.0:1 */
		--cc-accent-ink:  #7fdde3;
		--cc-accent-fill: #0d6e73;
		--cc-on-accent:   #ffffff;
		--cc-tint:        #17292b;

		--cc-price: #fb923c;

		--cc-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
		--cc-shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .75);
	}
}


/*
# =================================================================
# 2. 基盤
# =================================================================
*/

body {
	background-color: var(--cc-canvas);
	color: var(--cc-ink);
}

/* 和文は Yu Gothic / Hiragino のまま、欧文と数字だけ system-ui に渡す。
   ネットワーク経由の webfont は読まない（LCP と CLS を守るため）。 */
body,
input,
textarea,
select,
button {
	font-family: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans',
		'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', '游ゴシック Medium',
		'游ゴシック体', 'Yu Gothic', YuGothic, 'Noto Sans JP', Meiryo, sans-serif;
}

@media (prefers-color-scheme: dark) {
	body {
		-webkit-font-smoothing: antialiased;
	}
}

/* 本文の読みやすさ。和文は行間を広く、字間を少し開ける */
.keni-main {
	font-size: 1.7rem;
	line-height: 1.95;
	letter-spacing: .03em;
	color: var(--cc-ink);
}

.keni-main .free-area,
.keni-sub {
	font-size: 1.4rem;
	line-height: 1.8;
	letter-spacing: .02em;
}

/* リンク — 親の #0329ce（純青）はブランドのティールと衝突するので置き換える */
a {
	color: var(--cc-accent-ink);
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}

a:hover,
a:active,
a:focus {
	color: var(--cc-accent-ink);
}

/* キーボード操作の可視化。親は :focus のアウトラインを潰していないが、
   ブランド色のリングを明示して AA を確保する */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 動きは hover / focus の状態変化に限定する（MOTION_INTENSITY: 3）。
   スクロール連動やループアニメーションは持ち込まない。 */
@media (prefers-reduced-motion: reduce) {
	a,
	button,
	.btn,
	.entry-list > .entry-list_item,
	.page-top {
		transition: none !important;
	}

	.btn:hover,
	.btn:active,
	.btn:focus,
	.entry-list > .entry-list_item:hover {
		transform: none !important;
	}
}

::selection {
	background: var(--cc-brand-100);
	color: var(--cc-brand-900);
}

hr {
	border: 0;
	border-top: 1px solid var(--cc-line);
	margin: 40px 0;
}


/*
# =================================================================
# 3. レイアウト / サーフェス
# ---------------------------------------------------------------
# 親は .keni-section_wrap を「本文もサイドバーもフッターも全部白カード」
# として使っている。箱が階層情報を持たないので、本文だけをカードとして
# 残し、サイドバーとフッターは罫線と余白で区切る。
# =================================================================
*/

.keni-section_wrap {
	margin: 0 12px 20px;
	padding: 20px 16px;
	border-radius: var(--cc-r-panel);
	background: var(--cc-surface);
	box-shadow: var(--cc-shadow-1);
}

.keni-section_wrap_style02 {
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.keni-section_wrap .keni-section_wrap {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.free-area .keni-section_wrap {
	padding: 20px 16px;
}

.keni-section_outer {
	margin: 0 0 20px;
	padding: 20px 16px;
	border-radius: var(--cc-r-panel);
	background: var(--cc-surface);
	box-shadow: var(--cc-shadow-1);
}

.keni-section_outer .keni-section_wrap {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

/* サイドバー / フッターのウィジェットは箱をやめて罫線で区切る */
.keni-sub .keni-section_wrap,
.keni-footer .keni-section_wrap {
	margin: 0 12px 8px;
	padding: 20px 8px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	border-bottom: 1px solid var(--cc-line);
}

.keni-sub .keni-section_wrap:last-child,
.keni-footer .keni-section_wrap:last-child {
	border-bottom: 0;
}

.keni-sub .widget,
.keni-footer .widget {
	padding-top: 0;
}

.keni-main_inner {
	padding: 16px 0 24px;
}

.keni-sub,
.keni-footer_outer {
	padding: 8px 0 24px;
}


/*
# =================================================================
# 4. ヘッダー
# ---------------------------------------------------------------
# 斜めストライプ (linear-gradient(-45deg,...)) は親 default-style.css が
# 持っているため、無効化は child/default-style.css 側で行う。
# ここでは構造と余白だけを扱う。
# =================================================================
*/

.keni-header_wrap {
	padding-top: 0;
	background-color: var(--cc-surface);
	border-bottom: 1px solid var(--cc-line);
}

.keni-header {
	padding-right: 50px;
}

.keni-header_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.site-title {
	margin: 0;
	padding: 14px 12px;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: .01em;
	font-feature-settings: 'palt';
}

.site-title > a {
	color: var(--cc-ink);
	text-decoration: none;
}

.site-title > a:hover,
.site-title > a:active,
.site-title > a:focus {
	color: var(--cc-accent-ink);
}

.site-description,
.keni-header_cont {
	margin: 0;
	padding: 0 12px;
	color: var(--cc-muted);
	font-size: 1.3rem;
	letter-spacing: .04em;
}

.keni-header_cont .header-mail {
	margin: 0;
	border-radius: var(--cc-r-ui);
	background: var(--cc-tint);
}


/*
# =================================================================
# 5. グローバルナビ
# =================================================================
*/

.keni-gnav_wrap {
	background: var(--cc-surface);
	border-bottom: 1px solid var(--cc-line);
}

/* 親は .keni-gnav_cont に #fff を直書きしている */
.keni-gnav_cont {
	background: transparent;
}

.keni-gnav_inner li a {
	position: relative;
	padding: 14px 14px;
	color: var(--cc-ink-2);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-decoration: none;
	transition: color .2s var(--cc-ease);
}

.keni-gnav_inner li a:hover,
.keni-gnav_inner li a:active,
.keni-gnav_inner li a:focus {
	color: var(--cc-accent-ink);
}

/* 現在地はアクセントの短いバーで示す（アイキャッチのアクセントバーと同じ語彙） */
.keni-gnav_inner li.current-menu-item > a,
.keni-gnav_inner li.current-post-ancestor > a,
.keni-gnav_inner li.current-menu-ancestor > a {
	color: var(--cc-ink);
	font-weight: 700;
}

/* ハンバーガー。親は背景 #fff / バー #000 を直書きしている */
.keni-gnav_btn {
	background: var(--cc-surface);
	color: var(--cc-ink);
}

.keni-gnav_btn_icon-open,
.keni-gnav_btn_icon-open::before,
.keni-gnav_btn_icon-open::after {
	background-color: currentColor;
	border-radius: 1px;
}

.keni-gnav-child_btn {
	color: var(--cc-ink-2);
}


/*
# =================================================================
# 6. パンくず
# =================================================================
*/

.keni-breadcrumb-list_wrap {
	padding: 10px 12px;
	border-top: 0;
	border-bottom: 1px solid var(--cc-line);
	background: transparent;
}

.keni-breadcrumb-list li {
	font-size: 1.3rem;
	color: var(--cc-muted);
}

.keni-breadcrumb-list li a {
	color: var(--cc-muted);
}

.keni-breadcrumb-list li a:hover,
.keni-breadcrumb-list li a:active,
.keni-breadcrumb-list li a:focus {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 7. 見出し
# ---------------------------------------------------------------
# 退役: h1 の斜めストライプ / h2 のベタ塗り + 白文字 /
#       h3 の上下ボーダー / h4 の点線ボーダー
# 代替: 太さ・大きさ・余白で階層をつくり、h2 にだけアイキャッチ画像と
#       同じ「短いアクセントバー」を敷いてブランドの語彙を揃える。
# =================================================================
*/

.keni-main .keni-section h1,
.keni-section h1 {
	margin: 0 0 14px;
	padding: 0;
	background-image: none;
	background-color: transparent;
	color: var(--cc-ink);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	font-feature-settings: 'palt';
}

.keni-main .keni-section h1:first-child,
.keni-section h1:first-child {
	margin: 0 0 14px;
}

h2,
.keni-section h2 {
	position: relative;
	margin: 56px 0 20px;
	padding: 0 0 12px;
	border: 0;
	background: transparent;
	color: var(--cc-ink);
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
	border-bottom: 1px solid var(--cc-line);
}

h2::after,
.keni-section h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--cc-accent);
}

/* h2 の装飾を打ち消して使う見出し。
   記事一覧のタイトルは h2 要素だが「セクション見出し」ではないので、
   罫線もアクセントバーも付けない（親も .entry_title で border/background
   をリセットしている）。 */
.entry-list .entry_title,
.title_no-style,
.keni-section .title_no-style {
	margin-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.entry-list .entry_title::after,
.title_no-style::after,
.keni-section .title_no-style::after {
	content: none;
}

h3,
.keni-section h3 {
	margin: 44px 0 16px;
	padding: 0;
	border: 0;
	color: var(--cc-ink);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.65;
}

h4,
.keni-section h4 {
	margin: 32px 0 12px;
	padding: 0;
	border: 0;
	color: var(--cc-accent-ink);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.7;
}

h5,
.keni-section h5 {
	margin: 28px 0 10px;
	color: var(--cc-ink-2);
	font-size: 1.6rem;
	font-weight: 700;
}

h6,
.keni-section h6 {
	margin: 24px 0 10px;
	color: var(--cc-muted);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.keni-section h2:first-child,
.keni-section h3:first-child,
.keni-section h4:first-child,
.keni-section h5:first-child,
.keni-section h6:first-child {
	margin-top: 0;
}

.keni-section h1 a,
.keni-section h2 a,
.keni-section h3 a,
.keni-section h4 a,
.keni-section h5 a,
.keni-section h6 a {
	color: inherit;
}

/* アーカイブタイトル（背景ストライプの無効化は default-style.css 側） */
.archive_title {
	margin: 0 12px 16px;
	padding: 22px 4px 14px;
	background-color: transparent;
	color: var(--cc-ink);
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: 1px solid var(--cc-line);
}


/*
# =================================================================
# 8. 記事一覧（トップ / アーカイブ / 検索）
# =================================================================
*/

.entry-list {
	margin-bottom: 24px;
	line-height: 1.7;
}

/* カード内の余白は --cc-entry-pad 1 箇所で持つ。サムネイルを天面まで
   ふち無しで出すための負マージンがこの値に必ず追従するようにする
   （親テーマは padding と margin を別々の数値で直書きしていて、
   レイアウト種別が変わるたびにズレる）。 */
.entry-list > .entry-list_item {
	--cc-entry-pad: 20px;
	margin: 0 12px 16px;
	padding: var(--cc-entry-pad);
	border-radius: var(--cc-r-panel);
	background-color: var(--cc-surface);
	box-shadow: var(--cc-shadow-1);
	transition: box-shadow .25s var(--cc-ease), transform .25s var(--cc-ease);
}

.entry-list > .entry-list_item:hover {
	box-shadow: var(--cc-shadow-2);
	transform: translateY(-2px);
}

/* 既定（480px 未満 / style02）はサムネイルがカード天面に全幅で載る */
.entry-list .entry_thumb {
	margin: calc(var(--cc-entry-pad) * -1) calc(var(--cc-entry-pad) * -1) 16px;
	max-height: 240px;
	border-radius: var(--cc-r-panel) var(--cc-r-panel) 0 0;
	overflow: hidden;
	background: var(--cc-surface-2);
}

/* 480px 以上の style01 ではサムネイルが左フロートに変わる（親 base.css:5609）。
   全幅前提の負マージンを当てるとカードからはみ出して本文と重なるので外す。 */
@media (min-width: 480px) {

	.entry-list_style01 .entry_thumb {
		margin: 0 20px 16px 0;
		max-height: none;
		border-radius: var(--cc-r-panel);
	}
}

.entry-list .entry_title {
	margin-bottom: 8px;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
}

.entry-list .entry_title a {
	color: var(--cc-ink);
	text-decoration: none;
}

.entry-list .entry_title a:hover,
.entry-list .entry_title a:active,
.entry-list .entry_title a:focus {
	color: var(--cc-accent-ink);
	text-decoration: underline;
}

.entry_description {
	color: var(--cc-muted);
	font-size: 1.4rem;
	line-height: 1.85;
}

.entry_inner {
	font-size: 1.4rem;
}


/*
# =================================================================
# 9. ボタン
# ---------------------------------------------------------------
# 親の box-shadow: 2px 2px 0 #e9e9e9 + translateY(2px) という
# スキュ―モーフィックな押し込みは、影だけブランド色に寄せて残す。
# 触った感触は残しつつ、灰色のオフセット影はやめる。
# =================================================================
*/

.btn {
	padding: .95em 1.8em;
	border-radius: var(--cc-r-ui);
	box-shadow: var(--cc-shadow-1);
	background: var(--cc-accent-fill);
	color: var(--cc-on-accent);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: transform .18s var(--cc-ease), box-shadow .18s var(--cc-ease),
		background-color .18s var(--cc-ease), color .18s var(--cc-ease);
}

.btn:hover,
.btn:active,
.btn:focus {
	box-shadow: var(--cc-shadow-2);
	transform: translateY(-1px);
}

.btn:active {
	transform: scale(.985);
	box-shadow: var(--cc-shadow-1);
}

.btn_gray {
	background: var(--cc-ink-2);
	color: #fff;
}

.btn_bluegreen {
	background: var(--cc-brand-600);
	color: #fff;
}

.btn_orange {
	background: #b45309;
	color: #fff;
}

/* 「続きを読む」は主張しすぎない副次アクションにする */
.ently_read-more {
	margin: 18px 0 0;
	text-align: right;
}

.ently_read-more .btn {
	width: auto;
	min-width: 160px;
	padding: .7em 2.4em .7em 1.4em;
	border: 1px solid var(--cc-line-2);
	background-color: transparent;
	box-shadow: none;
	color: var(--cc-accent-ink);
	font-size: 1.3rem;
}

.ently_read-more .btn:hover,
.ently_read-more .btn:active,
.ently_read-more .btn:focus {
	border-color: var(--cc-accent);
	background-color: var(--cc-tint);
	box-shadow: none;
}


/*
# =================================================================
# 10. フッター / ページトップ
# =================================================================
*/

.keni-footer_wrap {
	background: var(--cc-surface);
	border-top: 1px solid var(--cc-line);
}

/* モバイル下部の固定パネル。親は li a に color:#000 を直書きしている */
.keni-footer-panel_wrap {
	background: var(--cc-surface);
	border-top: 1px solid var(--cc-line);
}

.keni-footer-panel li {
	border-right: 1px solid var(--cc-line);
}

.keni-footer-panel li a {
	padding: 8px 5px;
	color: var(--cc-ink-2);
}

.keni-footer-panel li a:hover,
.keni-footer-panel li a:active,
.keni-footer-panel li a:focus {
	color: var(--cc-accent-ink);
}

.footer-menu {
	padding: 8px 12px;
}

.footer-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

.footer-menu li {
	margin: 0;
}

/* 親は .keni-footer_outer .footer-menu li a に color:#000 と
   border-bottom:3px solid #fff を直書きしている（詳細度 0,3,1）。
   同じ深さで書かないと勝てない。 */
.footer-menu a,
.keni-footer_outer .footer-menu li a {
	padding: 10px 4px;
	border-bottom: 0;
	color: var(--cc-muted);
	font-size: 1.3rem;
	text-decoration: none;
	transition: color .2s var(--cc-ease);
}

.footer-menu a:hover,
.footer-menu a:active,
.footer-menu a:focus,
.keni-footer_outer .footer-menu li a:hover,
.keni-footer_outer .footer-menu li a:active,
.keni-footer_outer .footer-menu li a:focus {
	color: var(--cc-accent-ink);
	text-decoration: underline;
}

.keni-copyright_wrap {
	padding: 18px 12px 24px;
	border-top: 1px solid var(--cc-line);
	color: var(--cc-muted);
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: .04em;
}

.page-top {
	right: 16px;
	bottom: 16px;
	border-radius: var(--cc-r-ui);
	background-color: var(--cc-accent-fill);
	box-shadow: var(--cc-shadow-2);
	overflow: hidden;
	transition: transform .2s var(--cc-ease);
}

.page-top:hover {
	transform: translateY(-2px);
}

.page-top a {
	padding: 15px 17px;
}

.page-top a::before {
	color: var(--cc-on-accent);
}


/*
# =================================================================
# 11. フォーム
# =================================================================
*/

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=password],
input[type=number],
select,
textarea {
	padding: .7em .9em;
	border: 1px solid var(--cc-line-2);
	border-radius: var(--cc-r-ui);
	background: var(--cc-surface);
	color: var(--cc-ink);
	font-size: 1.5rem;
	transition: border-color .2s var(--cc-ease), box-shadow .2s var(--cc-ease);
}

input::placeholder,
textarea::placeholder {
	color: var(--cc-muted);
	opacity: 1;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
	border-color: var(--cc-accent);
	box-shadow: 0 0 0 3px rgba(0, 130, 136, .18);
}

.search-box {
	max-width: 100%;
	padding: 12px 0;
}


/*
# =================================================================
# 12. デスクトップ（768px 以上）
# =================================================================
*/

@media (min-width: 768px) {

	/* 本文カラムの実測字数を 45 字前後に収める。
	   .col2 の本文幅 856px に対し左右 48px の余白で ~760px = 和文 44 字。 */
	.col2 .keni-main {
		margin-right: -340px;
		padding-right: 340px;
	}

	.col2r .keni-main {
		margin-left: -340px;
		padding-left: 340px;
	}

	.keni-main .keni-section_wrap {
		margin: 0 0 28px;
		padding: 36px 48px;
	}

	.keni-main .keni-section_wrap_style02 {
		padding: 0;
	}

	.keni-main .keni-section_outer {
		padding: 36px 48px;
	}

	.keni-main_inner {
		padding: 24px 0 40px;
	}

	.keni-sub .keni-section_wrap,
	.keni-footer .keni-section_wrap {
		margin: 0 0 8px;
		padding: 24px 0;
	}

	.keni-sub {
		padding: 24px 0 40px;
	}

	.keni-main .keni-section h1,
	.keni-section h1 {
		margin: 0 0 18px;
		padding: 0;
		font-size: 3.0rem;
		line-height: 1.45;
	}

	.keni-main .keni-section h1:first-child,
	.keni-section h1:first-child {
		margin: 0 0 18px;
	}

	h2,
	.keni-section h2 {
		font-size: 2.3rem;
		margin-top: 68px;
	}

	h3,
	.keni-section h3 {
		font-size: 2.0rem;
		margin-top: 52px;
	}

	h4,
	.keni-section h4 {
		font-size: 1.8rem;
		margin-top: 36px;
	}

	h5,
	.keni-section h5 {
		font-size: 1.7rem;
	}

	.archive_title {
		margin: 0 0 24px;
		padding: 28px 0 16px;
		font-size: 2.6rem;
	}

	.entry-list > .entry-list_item {
		--cc-entry-pad: 24px;
		margin: 0 0 20px;
	}

	/* 2 カラムの style02 は 1 枚が狭いので余白を詰める。
	   768px の指定より後に置いて、両ブレークポイントで効かせる。 */
	.entry-list_style02 > .entry-list_item {
		--cc-entry-pad: 16px;
	}

	.entry-list .entry_title {
		font-size: 1.9rem;
	}

	.site-title {
		padding: 18px 12px;
		font-size: 2.8rem;
	}

	.keni-gnav_inner li a {
		padding: 16px 16px;
	}

	.keni-breadcrumb-list_wrap {
		padding: 12px 0;
	}

	.keni-copyright_wrap {
		padding: 24px 0 32px;
	}
}


/*
# =================================================================
# 13. モバイル（767px 以下）
# ---------------------------------------------------------------
# 高変位のレイアウトは持ち込まないが、ヘッダーとナビだけは
# 単一カラムでの収まりを明示しておく。
# =================================================================
*/

@media (max-width: 767px) {

	.keni-header_inner {
		display: block;
	}

	.site-title {
		padding: 12px;
		font-size: 2.0rem;
	}

	.keni-header_cont,
	.site-description {
		padding: 0 12px 10px;
		font-size: 1.2rem;
	}

	.keni-main {
		font-size: 1.6rem;
		line-height: 1.9;
	}

	.keni-main .keni-section h1,
	.keni-section h1 {
		font-size: 2.1rem;
	}

	h2,
	.keni-section h2 {
		font-size: 1.9rem;
		margin-top: 44px;
	}

	h3,
	.keni-section h3 {
		font-size: 1.75rem;
		margin-top: 36px;
	}

	.entry-list > .entry-list_item:hover {
		transform: none;
	}
}