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

/*! [content/common] common.css */

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


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

	変数

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


/*	グローバル
------------------------------------------------------------------------------*/

:root {
	--space-80: var(--space_4_2);
	--space-120: var(--space_6_4);
	--space-180: var(--space_9_6);
}


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

	ユーティリティー

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


/*	ユーティリティ 列コンテナー
------------------------------------------------------------------------------*/

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

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


/*	ユーティリティ テキスト列
------------------------------------------------------------------------------*/

.text-column > * {
	margin-top: var(--margin-line);
}


/*	明朝書体
------------------------------------------------------------------------------*/

.font-serif {
	font-family: var(--font-serif);
}

.font-serif-h {
	font-family: var(--font-serif-h);
}


/*	2倍ダーシ
------------------------------------------------------------------------------*/

.double-dash {
	display: inline-block;
	padding: 0 .25em;
	white-space: nowrap;
}

.double-dash::first-letter {
	margin-right: -.125em;
}


/*	Swiper補正
------------------------------------------------------------------------------*/

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
	z-index: auto;
}

/**/

@media (any-hover: hover) {

	.swiper-scrollbar-drag:hover {
		cursor: grab;
	}

/**/}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


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

	変数

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


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

	サイトヘッダー - MENUボタン

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

.site-header-nav > .menu-button > .menu-button-label {
	display: none;
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


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

	グローバルメニュー（サイトマップ）

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


/*	背景カバー
------------------------------------------------------------------------------*/

.menu-open .site-header-menu {
	--gmenu-bg-duration: .3s;
	--gmenu-bg-color-rgb: 255 255 255;
	--gmenu-bg-color-a: 1;
	--gmenu-text-color-rgb: var(--color-izumi-blue-rgb);
	--gmenu-text-color-a: 1;
}


/*	閉じるボタン
------------------------------------------------------------------------------*/

.menu-close-button {
	--close-button-bg-color: rgb(var(--gmenu-text-color-rgb) / 0);
	--close-button-border-color: rgb(var(--gmenu-text-color-rgb));
	--close-button-text-color: rgb(var(--gmenu-text-color-rgb));
	/**/
	--close-button-bg-invert-color: rgb(var(--gmenu-text-color-rgb));
	--close-button-border-invert-color: var(--close-button-bg-invert-color);
	--close-button-text-invert-color: var(--gmenu-bg-color);
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


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

	Swiper

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

*:not(.swiper-initialized) > .swiper-pagination,
*:not(.swiper-initialized) > .swiper-button-prev,
*:not(.swiper-initialized) > .swiper-button-next,
*:not(.swiper-initialized) > .swiper-scrollbar {
	display: none;
}


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

	セクション目次

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


/*	ページ目次ナビゲーション
------------------------------------------------------------------------------*/

.section-toc {
	--swiper-scrollbar-sides-offset: 0;
	--swiper-scrollbar-bottom: 3px;
	--swiper-scrollbar-size: 5px;
	/**/
	position: sticky;
	z-index: 9;
	top: calc(var(--wp-adminbar-height, 0px) + var(--gnav-height));
	/**/
	display: flex;
	flex-direction: column;
	justify-content: center;
	/**/
	overflow: hidden;
	margin-left: calc(var(--section-padding-x) * -1);
	padding: 1em 0;
	width: calc(100% + var(--section-padding-x) * 2);
	background: rgb(var(--color-bg-body-rgb) / .5);
	/**/
	--blur-radius: 9px;
	-webkit-backdrop-filter: blur(var(--blur-radius));
	backdrop-filter: blur(var(--blur-radius));
}

.section-toc > .swiper-wrapper {
	margin: 0 auto;
	padding: 0;
	width: auto;
}

.section-toc.swiper-initialized > .swiper-scrollbar {
	z-index: 1;
	left: 1em;
	width: calc(100% - 2em);
}

/**/

.site-main > .section-toc {
	margin-left: 0;
	width: 100%;
}

/**/

.section-toc-list {
	--toc-line-height: 1.5;
	--toc-font-size: calc(var(--font-size) * .75);
	--toc-padding-x: 1em;
	--toc-padding-y: calc(var(--toc-padding-x) - (var(--toc-line-height) - 1) * var(--toc-font-size) / 2);
	--toc-bg-color-rgb: var(--color-bg-body-rgb);
	--toc-bg-color-a: 1;
	--toc-border-width: var(--btn-border-width);
	--toc-border-color-rgb: var(--color-text-link-rgb);
	--toc-border-color-a: .3;
	--toc-border-radius: 5px;
	--toc-text-color-rgb: var(--color-text-link-rgb);
	--toc-text-color-a: 1;
	/**/
	display: inline-flex;
	align-items: stretch;
	/**/
	overflow: hidden;
	list-style: none;
	margin: 0 auto;
	padding: 0 1em;
	max-width: 100%;
	width: auto;
	line-height: var(--toc-line-height);
	font-size: var(--toc-font-size);
}

/**/

.section-toc-item {
	margin: 0;
	padding: var(--toc-border-width) 0;/* ※下線が表示されないため上下余白を追加 */
}

/**/

.section-toc-link {
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: var(--toc-padding-y) var(--toc-padding-x);
	background: rgb(var(--toc-bg-color-rgb) / var(--toc-bg-color-a));
	border: var(--toc-border-width) solid rgb(var(--toc-border-color-rgb) / var(--toc-border-color-a));
	border-radius: 0;
	border-right: none;
	white-space: nowrap;
	color: rgb(var(--toc-text-color-rgb) / var(--toc-text-color-a));
	fill: rgb(var(--toc-text-color-rgb) / var(--toc-text-color-a));
	transition: border-color .2s ease-out;
}

/*
.section-toc-item:first-child > .section-toc-link {
	border-top-left-radius: var(--toc-border-radius);
	border-bottom-left-radius: var(--toc-border-radius);
}

.section-toc-item:last-child > .section-toc-link {
	border-right: 1px solid rgb(var(--toc-border-color-rgb) / var(--toc-border-color-a));
	border-top-right-radius: var(--toc-border-radius);
	border-bottom-right-radius: var(--toc-border-radius);
}
*/

/**/

.section-toc-link.intersection {
	--toc-text-color-rgb: var(--color-text-link-rgb);
	/**/
	box-shadow: inset 0 -2px 0 rgb(var(--color-text-link-rgb) / 1);
}

/**/

.section-toc-label {
	font-weight: bold;
	font-feature-settings: "palt";
}

.section-toc-icon {
	margin-right: .25em;
}

.section-toc-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/**/

@media (any-hover: hover) {

	.section-toc-link:hover {
		--toc-border-color-rgb: var(--color-text-link-rgb);
		--toc-border-color-a: 1;
		--toc-text-color-rgb: var(--color-text-link-rgb);
	}

	.section-toc-item:has(.section-toc-link:hover)+.section-toc-item > .section-toc-link {
		border-left-color: rgb(var(--color-text-link-rgb) / 1);
	}

/**/}
@media (any-hover: none) {

	.section-toc-link:active {
		--toc-border-color-rgb: var(--color-text-link-rgb);
		--toc-border-color-a: 1;
		--toc-text-color-rgb: var(--color-text-link-rgb);
	}

	.section-toc-item:has(.section-toc-link:hover)+.section-toc-item > .section-toc-link {
		border-left-color: rgb(var(--color-text-link-rgb) / 1);
	}

/**/}


/*	アーカイブTOP戻るボタン
------------------------------------------------------------------------------*/

button.back-to-top a {
	grid-gap: 0;
	padding-right: calc(var(--btn-padding-x) - .5em);
}

button.back-to-top .icon {
	margin-left: calc(var(--btn-icon-gap) - .5em);
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


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

	[独自] セクション目次＋

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

/*	コンテナー
------------------------------------------------------------------------------*/

.section-toc {
	background: rgb(var(--color-izumi-blue-rgb) / .1);
}

.section-toc .swiper-slide {
	display: flex;
	align-items: center;
	gap: 1em;
	/**/
	padding: 0 1em;
}

.section-toc svg {
	width: 1em;
	height: 1em;
}


/*	ページの目次
------------------------------------------------------------------------------*/

.toc-selector {
	--btn-width: 12em;
	--btn-border-width: 2px;
	--btn-bg-color: #FFF;
	/**/
	position: relative;
	min-width: var(--btn-width);
}

/**/

.toc-selector-label,
.toc-selector-select {
	margin: 0;
	padding: 1em;
	padding-left: 1.25em;
	width: 100%;
	background: var(--btn-bg-color);
	border: var(--btn-border-width) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	border-radius: 2em;
	/**/
	text-align: center;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0;
	font-size: 100% !important;
	font-feature-settings: "palt";
}

@media (max-width: 720px) {

	.toc-selector,
	.toc-shortcuts {
		font-size: 2.5vw !important;
	}

	.toc-selector {
		--btn-width: 6.5em;
	}

	.toc-selector-label,
	.toc-selector-select {
		width: var(--btn-width);
	}

/**/}

/**/

.toc-selector-label {
	position: absolute;
	z-index: 1;
	/**/
	display: flex;
	align-items: center;
	justify-content: space-between;
	/**/
	font-weight: bold;
	color: var(--color-izumi-blue);
	fill: var(--color-izumi-blue);
	transition: background-color .2s ease-out;
}

.toc-selector-label .l:nth-child(1) {
	margin: 0 0 0 auto;
}

.toc-selector-label .l:nth-child(2) {
	margin: 0 auto 0 0;
}

.toc-selector-label svg {
	flex: none;
	margin-left: .5em;
	margin-right: 0;
	rotate: 90deg;
}

@media (max-width: 720px) {

	.toc-selector-label .l:nth-child(1) {
		display: none;
	}

/**/}

/**/

.toc-selector-select {
	cursor: pointer;
	position: relative;
	z-index: 2;
	opacity: 0;
	/**/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
}

.toc-selector-select option {
	text-align: left;
}

@media (any-hover: hover) {

	.toc-selector:hover {
		--btn-border-color-a: 1;
		--btn-bg-color: #FF0;
	}

/**/}
@media (any-hover: none) {

	.toc-selector:active {
		--btn-border-color-a: 1;
		--btn-bg-color: #FF0;
	}

/**/}


/*	ショートカットボタン
------------------------------------------------------------------------------*/

.toc-shortcuts {
	--btn-border-width: 2px;
	/**/
	display: flex;
	align-items: center;
	gap: .5em;
	/**/
	list-style: none;
	margin: 0;
	padding: 0;
}

.section-toc-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/**/
	padding: .75em;
	padding-left: 1em;
	border-radius: 2em !important;
	border: var(--toc-border-width) solid rgb(var(--toc-border-color-rgb) / var(--toc-border-color-a)) !important;
	line-height: 1;
	font-weight: bold;
	font-feature-settings: "palt";
	transition: background-color .2s ease-out, filter .2s ease-out;
}

.section-toc-link svg {
	margin-left: .5em;
	rotate: 0deg;
}

.section-toc-link.intersection {
	--toc-border-color-a: 1;
	/**/
	box-shadow: inset -1px -1px var(--color-izumi-blue),
	            inset 1px -1px var(--color-izumi-blue),
				inset 1px 1px var(--color-izumi-blue),
				inset -1px 1px var(--color-izumi-blue);
}

/**/

.toc-shortcuts .section-toc-link[href*="lin.ee"],
.toc-shortcuts .section-toc-link[href^="https://page.line.me/"] {
    --toc-border-color-rgb: var(--color-line-rgb);
    --toc-bg-color-rgb: var(--color-line-rgb);
    --toc-text-color-rgb: 255 255 255;
}

/**/

.section-toc-link:not([href^="#"]) {
	--toc-border-color-rgb: var(--color-izumi-blue-rgb);
	--toc-bg-color-rgb: var(--color-izumi-blue-rgb);
	--toc-text-color-rgb: 255 255 255;
}

.section-toc-link[href^="#"] svg {
	rotate: 90deg;
}

/**/

@media (any-hover: hover) {

	.section-toc-link:hover {
		--toc-bg-color-rgb: 255 255 0;
		--toc-text-color-rgb: var(--color-izumi-blue-rgb);
	}

	.toc-shortcuts .section-toc-link[href*="lin.ee"]:hover ,
	.toc-shortcuts .section-toc-link[href^="https://page.line.me/"]:hover {
		filter: brightness(125%);
	}

/**/}
@media (any-hover: none) {

	.section-toc-link:active {
		--toc-bg-color-rgb: 255 255 0;
		--toc-text-color-rgb: var(--color-izumi-blue-rgb);
	}

	.toc-shortcuts .section-toc-link[href*="lin.ee"]:active ,
	.toc-shortcuts .section-toc-link[href^="https://page.line.me/"]:active {
		filter: brightness(125%);
	}

/**/}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


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

	[独自] セパレーター

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

.yarn-separator {
	position: relative;
}

.yarn-separator svg {
	aspect-ratio: 1920 / 160;
	display: block;
	width: 100%;
}


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

	[独自] 書式調整

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


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

.section-title {
	display: flex;
	flex-direction: column;
	/**/
	font-family: var(--font-serif-h);
	font-size: calc(var(--font-size-h1));/* ★ */
}

.section-title-intro {
	display: block;
	margin: 0 auto .75em;
	font-family: var(--font-sans);
	font-size: calc(var(--font-size) * 1.25);
	color: var(--color-izumi-blue);
	font-feature-settings: "palt";
}

.section-title br {
	display: none;
}

.section-title-sub {
	margin-top: .5em;
	font-family: var(--font-serif-h);
	font-size: 62.5%;
}

@media (max-width: 720px) {

	.section-title-intro {
		font-size: calc(var(--font-size) * 1);
	}

/**/}


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

	[独自] メッセージボックス

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


/*	コンテナー
------------------------------------------------------------------------------*/

.message-box {
	--icon-size-line-height: var(--message-line-height, var(--line-height-p));
	--icon-size-lines: 2;
	--icon-size: calc(var(--icon-size-line-height) * var(--icon-size-lines) * 1em);
	--icon-gap: var(--space_2_1);
	/**/
	position: relative;
	margin-bottom: var(--space-80);
	padding-left: calc(var(--icon-size) + var(--icon-gap));
	line-height: var(--message-line-height, var(--line-height-p));
	font-size: var(--message-font-size, 100%);
}


/*	アイコン
------------------------------------------------------------------------------*/

.message-box::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	aspect-ratio: 1 / 1;
	width: var(--icon-size);
	overflow: hidden;
	background: var(--icon);
	background-size: cover;
	background-position: center center;
	border-radius: 50%;
	transition: width .2s ease-out,
	            height .2s ease-out;
}


/*	テキスト
------------------------------------------------------------------------------*/

.message-box > * {
	margin-top: var(--margin-line-h);
}

.message-box > p {
	line-height: var(--message-line-height, var(--line-height-p));
}

.message-box.message-no-margin p + p:not(.btn) {
	margin-top: 0;
}

.message-box > *:first-child {
	margin-top: 0;
}

.message-box > *:last-child {
	margin-bottom: 0;
}

.message-box > .message-heading {
	margin: 0 0 var(--margin-line-h);
	font-size: var(--font-size-h4);
}

.message-box > .message-heading {
	margin-bottom: var(--margin-line-q);
}


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

	[独自] ページ下端CTA誘導セクション

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

#cta-guide {
	padding: var(--space_6_4) var(--section-padding-x) var(--space_6);
	margin-bottom: -3.5em;
	background: var(--color-izumi-yellow);
}

#cta-guide .message-cta-heading {
	margin: 0 0 var(--margin-line-q);
	font-size: var(--font-size-h4);
}