/*////////////////////////////////////////////////////////////////////////////*/

/*! common.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	for WordPress

------------------------------------------------------------------------------*/

#wpadminbar {
	position: fixed !important;
}


/*------------------------------------------------------------------------------

	セクションブロック

------------------------------------------------------------------------------*/


/*	親コンテナ
------------------------------------------------------------------------------*/

.page-section {
	position: relative;
	padding: var(--section-padding-y) var(--section-padding-x);
}

/* 内容の先頭上マージンと末尾の下マージン削除 */

.page-section > *:first-child {
	margin-top: 0 !important;
}

.page-section > *:last-child {
	margin-bottom: 0 !important;
}

/* パディングクリアユーティリティ */

.page-section.clear-padding {
	padding: 0;
}

.page-section.clear-padding-x {
	padding-left: 0;
	padding-right: 0;
}

.page-section.clear-padding-y {
	padding-top: 0;
	padding-bottom: 0;
}

.page-section.clear-padding-top {
	padding-top: 0;
}

.page-section.clear-padding-bottom {
	padding-bottom: 0;
}

.page-section.clear-padding-left {
	padding-left: 0;
}

.page-section.clear-padding-right {
	padding-right: 0;
}


/*	セクションタイトル
------------------------------------------------------------------------------*/

.section-title {
	/* FONTPLUS： https://fontplus.jp/usage/services/chws-vchw */
	--font-serif-h: 'TsukuAOldMinPr6-M{pm}', YakuHanMPs, 'Noto Serif JP', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif;
	font-feature-settings: "chws" 1;
	/**/
	text-align: center;
	text-wrap: balance;
	line-height: var(--line-height-h);
	font-size: var(--font-size-h2);
}


/*	セクション本文
------------------------------------------------------------------------------*/

.section-content {
	margin: var(--section-content-gap) auto;
}

.section-content > *:first-child {
	margin-top: 0;
}

.section-content > *:last-child {
	margin-bottom: 0;
}


/*	主に投稿一覧下のブロック
------------------------------------------------------------------------------*/

.page-section > .layout-limited-width:not(.section-content) {
	margin: 0 auto;
}


/*------------------------------------------------------------------------------

	ブログ幅

------------------------------------------------------------------------------*/

.limited-width {
	max-width: 48em;/* 960px÷文字サイズ:20px */
}

.limited-width-960px {
	max-width: 960px;
}

.limited-width,
.limited-width-960px {
	margin-left: auto;
	margin-right: auto;
}


/*------------------------------------------------------------------------------

	Gridレイアウト

------------------------------------------------------------------------------*/

.grid-layout {
	--grid-columns: 1fr;
	--grid-gap: var(--space_4_2);
	/**/
	display: grid;
	grid-template-columns: var(--grid-columns);
	grid-gap: var(--grid-gap);
}

ul.grid-layout,
ol.grid-layout {
	list-style: none;
	padding-left: 0;
}

.grid-layout.cols1 {--grid-columns: 1fr;}
.grid-layout.cols1_2 {--grid-columns: 1fr 2fr;}
.grid-layout.cols2_1 {--grid-columns: 2fr 1fr;}
.grid-layout.cols1_3 {--grid-columns: 1fr 3fr;}
.grid-layout.cols3_1 {--grid-columns: 3fr 1fr;}
.grid-layout.cols1_4 {--grid-columns: 1fr 4fr;}
.grid-layout.cols4_1 {--grid-columns: 4fr 1fr;}
.grid-layout.cols1_2_1 {--grid-columns: 1fr 2fr 1fr;}
.grid-layout.cols2 {--grid-columns: repeat(2,1fr);}
.grid-layout.cols3 {--grid-columns: repeat(3,1fr);}
.grid-layout.cols4 {--grid-columns: repeat(4,1fr);}

.grid-layout > .full-span {grid-column: 1 / -1;}

.gap6 {--grid-gap: 6rem;}
.gap6_4 {--grid-gap: var(--space_6_4);}
.gap6_3 {--grid-gap: var(--space_6_3);}
.gap6_2 {--grid-gap: var(--space_6_2);}
.gap4 {--grid-gap: 4rem;}
.gap4_1 {--grid-gap: var(--space_4_1);}
.gap4_1h {--grid-gap: var(--space_4_1h);}
.gap3 {--grid-gap: 3rem;}
.gap3_1 {--grid-gap: var(--space_3_1);}
.gap3_2 {--grid-gap: var(--space_3_2);}
.gap2 {--grid-gap: 2rem;}
.gap2_1 {--grid-gap: var(--space_2_1);}
.gap1h {--grid-gap: 1.5rem;}
.gap1 {--grid-gap: 1rem;}
.gaph {--grid-gap: .5rem;}
.gap0 {--grid-gap: 0;}

/* BP */

@media (max-width: 1440px) {

	.grid-layout.cols1_1440px {--grid-columns: 1fr;}
	.grid-layout.cols2_1440px {--grid-columns: repeat(2,1fr);}
	.grid-layout.cols3_1440px {--grid-columns: repeat(3,1fr);}
	.grid-layout.cols4_1440px {--grid-columns: repeat(4,1fr);}
	.grid-layout.cols1_2_1440px {--grid-columns: 1fr 2fr;}
	.grid-layout.cols1_3_1440px {--grid-columns: 1fr 3fr;}
	.grid-layout.cols2_1_1440px {--grid-columns: 2fr 1fr;}
	.grid-layout.cols3_1_1440px {--grid-columns: 3fr 1fr;}
	.grid-layout.cols1_4_1440px {--grid-columns: 1fr 4fr;}
	.grid-layout.cols4_1_1440px {--grid-columns: 4fr 1fr;}

	.grid-layout > .full-span_1440px {grid-column: 1 / -1;}
	.grid-layout > .reset-full-span_1440px {grid-column: initial;}

	.gap4_1440px {--grid-gap: 4rem;}
	.gap3_1440px {--grid-gap: 3rem;}
	.gap2_1440px {--grid-gap: 2rem;}
	.gap1h_1440px {--grid-gap: 1.5rem;}
	.gap1_1440px {--grid-gap: 1rem;}
	.gaph_1440px {--grid-gap: .5rem;}
	.gap0_1440px {--grid-gap: 0;}

/**/}
@media (max-width: 1280px) {

	.grid-layout.cols1_1280px {--grid-columns: 1fr;}
	.grid-layout.cols2_1280px {--grid-columns: repeat(2,1fr);}
	.grid-layout.cols3_1280px {--grid-columns: repeat(3,1fr);}
	.grid-layout.cols4_1280px {--grid-columns: repeat(4,1fr);}
	.grid-layout.cols1_2_1280px {--grid-columns: 1fr 2fr;}
	.grid-layout.cols1_3_1280px {--grid-columns: 1fr 3fr;}
	.grid-layout.cols2_1_1280px {--grid-columns: 2fr 1fr;}
	.grid-layout.cols3_1_1280px {--grid-columns: 3fr 1fr;}
	.grid-layout.cols1_4_1280px {--grid-columns: 1fr 4fr;}
	.grid-layout.cols4_1_1280px {--grid-columns: 4fr 1fr;}

	.grid-layout > .full-span_1280px {grid-column: 1 / -1;}
	.grid-layout > .reset-full-span_1280px {grid-column: initial;}

	.gap4_1280px {--grid-gap: 4rem;}
	.gap3_1280px {--grid-gap: 3rem;}
	.gap2_1280px {--grid-gap: 2rem;}
	.gap1h_1280px {--grid-gap: 1.5rem;}
	.gap1_1280px {--grid-gap: 1rem;}
	.gaph_1280px {--grid-gap: .5rem;}
	.gap0_1280px {--grid-gap: 0;}

/**/}
@media (max-width: 1024px) {

	.grid-layout.cols1_1024px {--grid-columns: 1fr;}
	.grid-layout.cols2_1024px {--grid-columns: repeat(2,1fr);}
	.grid-layout.cols3_1024px {--grid-columns: repeat(3,1fr);}
	.grid-layout.cols4_1024px {--grid-columns: repeat(4,1fr);}
	.grid-layout.cols1_2_1024px {--grid-columns: 1fr 2fr;}
	.grid-layout.cols1_3_1024px {--grid-columns: 1fr 3fr;}
	.grid-layout.cols2_1_1024px {--grid-columns: 2fr 1fr;}
	.grid-layout.cols3_1_1024px {--grid-columns: 3fr 1fr;}
	.grid-layout.cols1_4_1024px {--grid-columns: 1fr 4fr;}
	.grid-layout.cols4_1_1024px {--grid-columns: 4fr 1fr;}

	.grid-layout > .full-span_1024px {grid-column: 1 / -1;}
	.grid-layout > .reset-full-span_1024px {grid-column: initial;}

	.gap4_1024px {--grid-gap: 4rem;}
	.gap3_1024px {--grid-gap: 3rem;}
	.gap2_1024px {--grid-gap: 2rem;}
	.gap1h_1024px {--grid-gap: 1.5rem;}
	.gap1_1024px {--grid-gap: 1rem;}
	.gaph_1024px {--grid-gap: .5rem;}
	.gap0_1024px {--grid-gap: 0;}

/**/}
@media (max-width: 1023px) {

	.grid-layout.cols1_1023px {--grid-columns: 1fr;}
	.grid-layout.cols2_1023px {--grid-columns: repeat(2,1fr);}
	.grid-layout.cols3_1023px {--grid-columns: repeat(3,1fr);}
	.grid-layout.cols4_1023px {--grid-columns: repeat(4,1fr);}
	.grid-layout.cols1_2_1023px {--grid-columns: 1fr 2fr;}
	.grid-layout.cols1_3_1023px {--grid-columns: 1fr 3fr;}
	.grid-layout.cols2_1_1023px {--grid-columns: 2fr 1fr;}
	.grid-layout.cols3_1_1023px {--grid-columns: 3fr 1fr;}
	.grid-layout.cols1_4_1023px {--grid-columns: 1fr 4fr;}
	.grid-layout.cols4_1_1023px {--grid-columns: 4fr 1fr;}

	.grid-layout > .full-span_1023px {grid-column: 1 / -1;}
	.grid-layout > .reset-full-span_1023px {grid-column: initial;}

	.gap4_1023px {--grid-gap: 4rem;}
	.gap3_1023px {--grid-gap: 3rem;}
	.gap2_1023px {--grid-gap: 2rem;}
	.gap1h_1023px {--grid-gap: 1.5rem;}
	.gap1_1023px {--grid-gap: 1rem;}
	.gaph_1023px {--grid-gap: .5rem;}
	.gap0_1023px {--grid-gap: 0;}

/**/}
@media (max-width: 720px) {

	.grid-layout.cols1_720px {--grid-columns: 1fr;}
	.grid-layout.cols2_720px {--grid-columns: repeat(2,1fr);}
	.grid-layout.cols3_720px {--grid-columns: repeat(3,1fr);}
	.grid-layout.cols4_720px {--grid-columns: repeat(4,1fr);}
	.grid-layout.cols1_2_720px {--grid-columns: 1fr 2fr;}
	.grid-layout.cols1_3_720px {--grid-columns: 1fr 3fr;}
	.grid-layout.cols2_1_720px {--grid-columns: 2fr 1fr;}
	.grid-layout.cols3_1_720px {--grid-columns: 3fr 1fr;}
	.grid-layout.cols1_4_720px {--grid-columns: 1fr 4fr;}
	.grid-layout.cols4_1_720px {--grid-columns: 4fr 1fr;}

	.grid-layout > .full-span_720px {grid-column: 1 / -1;}
	.grid-layout > .reset-full-span_720px {grid-column: initial;}

	.gap4_720px {--grid-gap: 4rem;}
	.gap3_720px {--grid-gap: 3rem;}
	.gap2_720px {--grid-gap: 2rem;}
	.gap1h_720px {--grid-gap: 1.5rem;}
	.gap1_720px {--grid-gap: 1rem;}
	.gaph_720px {--grid-gap: .5rem;}
	.gap0_720px {--grid-gap: 0;}

/**/}


/*------------------------------------------------------------------------------

	リード文ボックス

------------------------------------------------------------------------------*/

.lead-container {
	max-width: 48em;/* 20px×48=960px */
	margin-left: auto;
	margin-right: auto;
}

.lead-container > *:first-child {
	margin-top: 0 !important;
}

.lead-container > *:last-child {
	margin-bottom: 0 !important;
}


/*------------------------------------------------------------------------------

	折り畳みボックス

------------------------------------------------------------------------------*/
/*
<x class="accordion" aria-expanded="(boolean)">
	<x class="accordion-header" aria-controls="acordion-target-id">
		[textNode]
		<x class="accordion-icon">
		</x>
	</x>
	<x id="acordion-target-id" class="accordion-content" aria-hidden="(boolean)">
		<x class="accordion-content-inner">
		</x>
	</x>
</x>

※accordion-content 要素の id 属性は必須。定義されていなかったら、JSで自動連番を付与する。
*/


/*	折り畳みボタン
------------------------------------------------------------------------------*/
/*
・アコーディオンをJSにてコントロールしている場合、.accordion.is-active とする。
・アイコン要素 .accordion-icon があれば、.accordion-header.has-icon とする。
・アイコン要素 .accordion-icon がないなら、.accordion-header.has-icon.icon-bordered とする。
*/

.accordion.is-active .accordion-header.has-icon {
	display: grid;
	align-items: var(--header-align-items, center);
	grid-template-columns: 1fr auto;
	grid-gap: var(--header-grid-gap, 1em);
}

.accordion:not(.is-active) .accordion-icon {
	display: none;
}


/* 開閉アイコン */

.accordion-icon {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	/**/
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--header-icon-size, 1em);
	height: var(--header-icon-size, 1em);
	transition: opacity var(--transition-duration, .2s) ease-out;
	opacity: 0;
}

.accordion.is-active .accordion-icon {
	opacity: 1;
}

.accordion-icon > svg {
	display: inline-block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

.accordion-header.icon-bordered .accordion-icon::before,
.accordion-header.icon-bordered .accordion-icon::after {
	content: '';
	width: 100%;
	height: var(--header-boarder-width, 2px);
	background-color: var(--text-color, #333);
}

.accordion-header.icon-bordered .accordion-icon::after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--header-boarder-width, 2px);
	height: 100%;
	transform: translateX(-50%) translateY(-50%);
	transition: height var(--transition-duration, .2s) ease-out;
}

.accordion[aria-expanded="true"] > .accordion-header.icon-bordered .accordion-icon::after {
	height: 0;
}

@media (any-hover: hover) {

	.accordion.is-active .accordion-header:hover {
		cursor: pointer;
	}

/**/}


/*	折り畳み本体コンテナー
------------------------------------------------------------------------------*/

.accordion.is-active .accordion-content {
	/* JSで display を切り替える想定。ここに transition を置かない */
	display: block; /* ← 初期表示時の計測用。JSがclosedならdisplay:noneにする */
}

.accordion:not([aria-expanded]).default-closed .accordion-content {
	/* デフォルトを閉じた状態にするクラス付与。aria-expanded 属性はJSで付与する。 */
	display: none;
}

/**/

.accordion-content-inner {
	overflow: hidden;/* 直接の子要素に必須 */
}

/**/

.accordion-content > *:first-child,
.accordion-content-inner > *:first-child {
	margin-top: 0 !important;
}

.accordion-content > *:last-child,
.accordion-content-inner > *:last-child {
	margin-bottom: 0 !important;
}


/*------------------------------------------------------------------------------

	曜日アイコン

------------------------------------------------------------------------------*/

.weekday {
	position: relative;
	display: inline-block;
	vertical-align: -.12em;
	width: 1em;
	height: 1em;
	margin: 0 .1em;
	background: rgb(var(--color-text-p-rgb) / var(--color-text-p-a, 1));
	border-radius: 50%;
	text-align: center;
	line-height: 1.1;
	font-weight: bold;
	color: rgb(var(--color-bg-body-rgb) / var(--color-bg-body-a, 1));
}

.weekday > span {
	display: none;
}

.weekday > em {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) scale(.6);
}