@charset "utf-8";

/* @group fonts */

/*
 * Noto Sans JP（assets/fonts/ に置いたサブセット。常用漢字・人名用漢字・JIS第1水準ほか 約4,450字）
 * 9つの太さを定義しているが、読み込まれるのはページで実際に使った太さだけ
 * 使わない案件では、このグループと variables の --font-base の "Noto Sans JP", と assets/fonts/ の中身を消す
 */

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url("../fonts/NotoSansJP-Thin.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/NotoSansJP-ExtraLight.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/NotoSansJP-Light.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/NotoSansJP-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/NotoSansJP-ExtraBold.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/NotoSansJP-Black.woff2") format("woff2");
}

/*
 * Inter（英数字用。assets/fonts/ に置いたサブセット。太さ100〜900を1ファイルに収めた可変フォント）
 * unicode-range で英数字だけに使う。… や — などの約物は日本語フォント側で出す
 * 使わない案件では、この @font-face と variables の --font-base の "Inter", と Inter-Variable.woff2 を消す
 */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/Inter-Variable.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-017F, U+20AC;
}

/* @end fonts */


/* @group variables */

:root {
	--color-text: #333;
	--color-bg: #fff;
	--color-main: #333;
	--color-border: #ddd;
	--color-gray: #efefef;

	/* Inter（英数字）と Noto Sans JP（日本語）は fonts グループで定義している。使わない案件では該当する名前を消す */
	--font-base: "Inter", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;

	--inner-width: 1280px; /* コンテンツの最大幅 */
	--gutter: 40px; /* 左右の余白 */
	--header-height: 56px;
}

/*
 * ブレークポイントは2つ
 * 768px以下: タブレット・スマホ
 * 600px以下: スマホ
 * 書き方は max-width に統一（それより広い画面は not screen and (max-width: …)）
 */

@media screen and (max-width: 600px) {
	:root {
		--gutter: 6%;
	}
}

/* @end variables */


/* @group setup */

/* 1rem = 10px にする（1.6rem = 16px） */
html {
	font-size: 62.5%;
}

body {
	display: flex; /* 内容が少ないページでもフッターを下端に置く */
	flex-direction: column;
	color: var(--color-text);
	background: var(--color-bg);
	font-family: var(--font-base);
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .06em;
}

a {
	transition: opacity .3s;
}

@media (hover: hover) {
	a:hover {
		opacity: .7;
	}
}

/* 電話番号のリンクはスマホだけ有効にする */
@media not screen and (max-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/* @end setup */


/* @group typography & heading */

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.4;
}

/* kiso.css が h1 に残す上下の余白を0にする */
h1 {
	margin: 0;
}

.section-title {
	font-size: 3rem;
	margin-bottom: .5em;
}

/* セクションの中の小見出し */
.section-heading {
	font-size: 2.2rem;
	margin-bottom: .5em;
}

/* @end typography & heading */


/* @group layout */

.main {
	flex: 1;
}

.section {
	padding-block: 100px;
}

/* 背景色つきのセクション */
.section.-bg {
	background: var(--color-gray);
}

/* 背景なしのセクションが続くときは、間の余白が2倍にならないよう後ろの上の余白を消す */
.section:not(.-bg) + .section:not(.-bg) {
	padding-top: 0;
}

.l-inner {
	max-width: var(--inner-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.l-inner.-full {
	max-width: none;
}

/* 読み物用の狭い幅（お知らせの個別ページなど） */
.l-inner.-narrow {
	max-width: calc(800px + var(--gutter) * 2);
}

@media screen and (max-width: 768px) {
	.section {
		padding-block: 80px;
	}
}

@media screen and (max-width: 600px) {
	.section {
		padding-block: 60px;
	}
}

/* @group stack */

/*
 * 縦に並ぶ要素の間隔を、親がまとめて決める
 * l-stack を付けた要素の「直下の要素どうしの間」に、同じ間隔が入る（最初の上と最後の下には入らない）
 * 塊として扱いたいものは <div class="l-stack"> で包み、外側に -l を付けて塊どうしの間を広くする
 * 例: <div class="l-inner l-stack -l"> 見出し / <div class="l-stack">内容・ボタン</div> / <div class="l-stack">内容・ボタン</div> </div>
 */
.l-stack > * + * { margin-top: clamp(30px, 3.125vw, 40px); }
.l-stack.-s > * + * { margin-top: 20px; }
.l-stack.-l > * + * { margin-top: clamp(60px, 6.25vw, 80px); }

/* 見出しの直後は、見出し自身の下の余白（.section-title、.section-heading の margin-bottom）に任せる */
.l-stack > .section-title + *,
.l-stack > .section-heading + * {
	margin-top: 0;
}

/* @end */

/* @group gridlayout */

/*
 * カラム数と余白は変数で持ち、-clm2 などは変数の値だけを変える。何も付けなければ3カラム
 * 余白は画面幅に合わせて縮む: clamp(いちばん狭いとき, 画面幅に対する割合, いちばん広いとき)
 * 真ん中の値は「いちばん広いときの余白 ÷ 1280 × 100」vw（1280px幅で最大になる）
 */
.l-grid {
	--grid-columns: 3;
	--grid-gap: clamp(24px, 3.125vw, 40px);
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gap);
}

.l-grid.-clm2 { --grid-columns: 2; --grid-gap: clamp(30px, 4.6875vw, 60px); }
.l-grid.-clm4 { --grid-columns: 4; --grid-gap: clamp(16px, 2.34375vw, 30px); }
.l-grid.-no-gutters { gap: 0; }

/* タブレットは2カラム、スマホは1カラムに揃える */
@media screen and (max-width: 768px) {
	.l-grid,
	.l-grid.-clm2,
	.l-grid.-clm4 {
		--grid-columns: 2;
		--grid-gap: 30px;
	}
}

@media screen and (max-width: 600px) {
	.l-grid,
	.l-grid.-clm2,
	.l-grid.-clm4 {
		--grid-columns: 1;
		--grid-gap: 40px;
	}
}

/* @end */

/* @group block and hidden */

@media screen and (max-width: 600px) {
	.hidden-xs-down { display: none !important; }
	.block-xs-down { display: block !important; }
}

@media not screen and (max-width: 600px) {
	.hidden-sm-up { display: none !important; }
	.block-sm-up { display: block !important; }
}

@media screen and (max-width: 768px) {
	.hidden-sm-down { display: none !important; }
	.block-sm-down { display: block !important; }
}

@media not screen and (max-width: 768px) {
	.hidden-md-up { display: none !important; }
	.block-md-up { display: block !important; }
}

/* @end */

/* @group align */

/* 文字と、文字と同じように並ぶもの（inline・inline-block の要素）を寄せる */
.align-c { text-align: center; }
.align-r { text-align: right; }
.align-l { text-align: left; }

/*
 * 中の要素を、ブロックの要素（ボタン・画像・div など）も含めて寄せる
 * 例: <div class="items-c"><a class="button-main">…</a></div>
 * 子の要素は縦に並んだまま、それぞれ中身の幅になって左右の位置だけそろう。文章の行も寄せたいときは align-c などと一緒に使う
 */
.items-c,
.items-r,
.items-l {
	display: flex;
	flex-direction: column;
}

.items-c { align-items: center; }
.items-r { align-items: flex-end; }
.items-l { align-items: flex-start; }

/* @end */

/* @end layout */


/* @group header */

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: var(--header-height);
	padding-inline: var(--gutter);
}

.header-logo > * {
	font-size: 1.6rem;
	line-height: 1;
}

.header-logo a,
.header-logo img {
	display: block;
}

.header-nav-list {
	display: flex;
	gap: 2em;
}

.header-nav-item a{
	
}

/* スマホ・タブレットではヘッダーのメニューを隠し、ドロワーのボタンを使う */
@media screen and (max-width: 768px) {
	.header {
		padding-right: calc(var(--header-height) + 8px); /* ドロワーのボタンの分 */
	}

	.header-nav {
		display: none;
	}
}

/* @end header */


/* @group drawer */

/* 開いている間は背面をスクロールさせない */
.is-drawer-open {
	overflow: hidden;
}

.drawer-button {
	position: fixed;
	z-index: 1001;
	top: 0;
	right: 0;
	display: grid;
	place-content: center;
	gap: 6px;
	width: 56px;
	height: 56px;
	border: 0;
	background: #fff;
}

.drawer-button > span {
	display: block;
	width: 24px;
	height: 2px;
	background: #333;
	transition: transform .3s, opacity .3s;
}

/* 開いているときは× */
.drawer-button[aria-expanded="true"] > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.drawer-button[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.drawer-button[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.drawer-nav {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(80vw, 320px);
	padding: 72px 24px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s, visibility .3s;
}

.is-drawer-open .drawer-nav {
	transform: none;
	visibility: visible;
}

.drawer-nav-link {
	display: block;
	padding: .75em 0;
}

.drawer-overlay {
	position: fixed;
	z-index: 999;
	inset: 0;
	background: rgb(0 0 0 / .4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.is-drawer-open .drawer-overlay {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.drawer-button > span,
	.drawer-nav,
	.drawer-overlay { transition: none; }
}

/* PCではドロワーのボタンを出さない（ヘッダーのメニューを使う） */
@media not screen and (max-width: 768px) {
	.drawer-button {
		display: none;
	}
}

/* @end drawer */


/* @group mv */

.mv img {
	width: 100%;
}

/* @end mv */


/* @group page-title */

.page-title {
	padding-block: 60px;
	background: var(--color-gray);
}

.page-title-heading {
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1.4;
}

@media screen and (max-width: 600px) {
	.page-title {
		padding-block: 40px;
	}

	.page-title-heading {
		font-size: 2.4rem;
	}
}

/* @end page-title */


/* @group breadcrumb */

.breadcrumb {
	padding-block: 14px;
	color: #767676;
	font-size: 1.2rem;
	line-height: 1.5;
}

.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
}

/* 区切りの「>」 */
.breadcrumb-item + .breadcrumb-item::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 12px 2px 8px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	rotate: 45deg;
}

.breadcrumb-item a {
	text-decoration: underline;
}

/* @end breadcrumb */


/* @group entry */

/* @group nav-archive */

.nav-archive {
	margin-bottom: 40px;
}

.nav-archive-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nav-archive-link,
.nav-archive-select {
	display: block;
	width: 100%;
	min-width: 180px;
	height: 44px;
	padding-inline: 1em;
	border: 1px solid var(--color-border);
	background-color: var(--color-bg);
	font-size: 1.4rem;
	line-height: 42px;
}

.nav-archive-link {
	min-width: 100px;
	text-align: center;
}

.nav-archive-select {
	padding-right: 2.6em;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 10px 6px;
	cursor: pointer;
}

@media screen and (max-width: 600px) {
	.nav-archive-item {
		flex: 1 1 calc(50% - 5px);
	}

	.nav-archive-item:first-child {
		flex-basis: 100%;
	}

	.nav-archive-link,
	.nav-archive-select {
		min-width: 0;
	}
}

/* @end */

/* @group list */

/* カラム数と余白は l-grid（<ul class="list-entry l-grid">）。ここには中身の見た目だけを書く */

.list-entry-thumb {
	display: block;
	margin-bottom: 12px;
}

.list-entry-thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.list-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.list-entry-date {
	color: #767676;
	font-size: 1.4rem;
}

.list-entry-category {
	padding: .4em 1.2em;
	background: var(--color-gray);
	font-size: 1.2rem;
	line-height: 1;
}

.list-entry-title {
	margin-top: 8px;
	font-size: 1.6rem;
	font-weight: bold;
}

.list-entry-title a {
	display: block;
}

/* @end */

/* @group content */

.entry-header {
	margin-bottom: 40px;
}

.entry-title {
	font-size: 2.8rem;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 12px;
}

.entry-date {
	color: #767676;
	font-size: 1.4rem;
}

.entry-category {
	padding: .4em 1.2em;
	background: var(--color-gray);
	font-size: 1.2rem;
	line-height: 1;
}

/* ここから下はブロックエディターで書いた本文 */

/* 要素どうしの間隔 */
.entry-content > * + * {
	margin-top: 1.5em;
}

.entry-content > * + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 2.5em;
}

/* 見出し。エディターでも同じ見た目になるよう、editor-style.css にも同じ内容を書いている（直すときは両方） */
.entry-content h1 {
	font-size: 2.8rem;
}

.entry-content h2 {
	padding-bottom: .4em;
	border-bottom: 1px solid var(--color-border);
	font-size: 2.4rem;
}

.entry-content h3 {
	font-size: 2rem;
}

.entry-content h4 {
	font-size: 1.8rem;
}

.entry-content h5 {
	font-size: 1.6rem;
}

.entry-content h6 {
	color: #767676;
	font-size: 1.4rem;
}

/* リンクの下線（ボタンのブロックは除く） */
.entry-content a:not(.wp-block-button__link) {
	text-decoration: underline;
}

/* 箇条書きのマーカー（リストのブロックと素の ul / ol だけ） */
.entry-content :is(ul, ol):where(.wp-block-list, :not([class])) {
	padding-left: 1.5em;
}

.entry-content ul:where(.wp-block-list, :not([class])) {
	list-style: disc;
}

.entry-content ol:where(.wp-block-list, :not([class])) {
	list-style: decimal;
}

.entry-content li + li,
.entry-content li > :is(ul, ol) {
	margin-top: .4em;
}

.entry-content blockquote {
	padding: 1em 1.5em;
	border-left: 4px solid var(--color-border);
	background: var(--color-gray);
	font-size: 92%;
}

.entry-content table {
	width: 100%;
}

.entry-content :is(th, td) {
	padding: .75em 1em;
	border: 1px solid var(--color-border);
}

.entry-content th {
	background: var(--color-gray);
	font-weight: bold;
}

.entry-content figcaption {
	margin-top: .5em;
	color: #767676;
	font-size: 1.4rem;
	text-align: center;
}

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--color-border);
}

@media screen and (max-width: 600px) {
	.entry-title {
		font-size: 2.4rem;
	}

	.entry-content h1 {
		font-size: 2.4rem;
	}

	.entry-content h2 {
		font-size: 2rem;
	}

	.entry-content h3 {
		font-size: 1.8rem;
	}

	.entry-content h4 {
		font-size: 1.6rem;
	}
}

/* @end */

/* @group nav-entry */

/* お知らせ個別の下に出す、前の記事・一覧・次の記事 */
.nav-entry {
	margin-top: 80px;
	padding-top: 30px;
	border-top: 1px solid var(--color-border);
}

.nav-entry-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	font-size: 1.4rem;
}

.nav-entry-item.-list {
	text-align: center;
}

.nav-entry-item.-next {
	text-align: right;
}

.nav-entry-item a {
	display: inline-block;
	padding-block: .5em;
}

/* 前後の矢印 */
.nav-entry-item.-prev a::before,
.nav-entry-item.-next a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-bottom: 2px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

.nav-entry-item.-prev a::before {
	margin-right: 10px;
	rotate: -135deg;
}

.nav-entry-item.-next a::after {
	margin-left: 10px;
	rotate: 45deg;
}

@media screen and (max-width: 600px) {
	.nav-entry {
		margin-top: 60px;
	}
}

/* @end */

/* @end entry */


/* @group form */

/* メールフォーム（page-contact.php）。必須・任意のラベル、エラー文、送信中の表示はプログラムが書き出す */

.entry-content + .form,
.entry-content ~ .form-confirm {
	margin-top: 60px;
}

.form-list dt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	font-weight: bold;
}

.form-list dt:first-child {
	margin-top: 0;
}

.form-list dd {
	margin-top: 10px;
}

/* @group label */

.form-list dt i {
	font-style: normal;
	font-weight: normal;
}

.form-list dt span {
	display: block;
	padding: .4em .8em;
	background: var(--color-gray);
	font-size: 1.1rem;
	line-height: 1;
}

.form-list dt span.required {
	background: #c33;
	color: #fff;
}

/* @end */

/* @group input */

.form-input,
.form-textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	font-size: 1.6rem; /* 16px未満にすると、iPhoneで入力時に画面が拡大される */
	line-height: 1.5;
}

.form-input.-short {
	max-width: 320px;
}

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

.form-input:focus,
.form-textarea:focus {
	border-color: var(--color-main);
}

.form-choices {
	display: grid;
	gap: 8px;
}

.form-choices label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.form-note {
	margin-top: 8px;
	font-size: 1.4rem;
}

.form-note a {
	text-decoration: underline;
}

/* @end */

/* @group error */

.form-list .error_blank,
.form-list .error_format,
.form-list .error_match {
	display: block;
	margin-top: 6px;
	color: #c33;
	font-size: 1.4rem;
}

.form-list .error_blank:empty,
.form-list .error_format:empty,
.form-list .error_match:empty {
	display: none;
}

/* @end */

/* @group turnstile */

/* Cloudflare Turnstile のウィジェット（page-contact.php）。送信ボタンの上の中央に */
.form-turnstile {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.form-turnstile + .form-submit {
	margin-top: 24px;
}

/* @end */

/* @group submit */

.form-submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 50px;
}

.form-button {
	width: 100%;
	max-width: 280px;
	padding: 1em;
	border: 0;
	border-radius: 0;
	background: var(--color-main);
	color: #fff;
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
	cursor: pointer;
	transition: opacity .2s;
}

.form-button.-back {
	background: var(--color-gray);
	color: var(--color-text);
}

.form-button:hover {
	opacity: .7;
}

/* @end */

/* @group confirm */

.form-confirm {
	display: none; /* 確認画面。プログラムが表示を切り替える */
}

.form-confirm-title {
	margin-bottom: 30px;
	font-size: 2rem;
}

.form-confirm dl {
	padding-block: 16px;
	border-bottom: 1px solid var(--color-border);
}

.form-confirm dt {
	font-size: 1.4rem;
	font-weight: bold;
}

.form-confirm dd {
	margin-top: 4px;
	overflow-wrap: anywhere;
}

/* @end */

/* @group datepicker */

/* 日付選択のカレンダー（assets/mailform/css/jquery.datetimepicker.css）への上書き。字間があると年の表示が折り返すため */
.xdsoft_datetimepicker {
	letter-spacing: 0;
}

/* @end */

/* @group loading */

/* 送信中に画面全体を覆う表示 */
.loading-layer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-content: center;
	background: rgb(0 0 0 / .6);
}

.loading {
	width: 48px;
	height: 48px;
	border: 4px solid rgb(255 255 255 / .3);
	border-left-color: #fff;
	border-radius: 50%;
	animation: form-loading 1s linear infinite;
}

@keyframes form-loading {
	to {
		rotate: 360deg;
	}
}

/* @end */

/* @end form */


/* @group footer */

.footer {
	padding-block: 40px;
	border-top: 1px solid var(--color-border);
}

.footer-inner {
	max-width: var(--inner-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.footer-logo img {
	display: block;
}

.footer-nav {
	margin-block: 24px;
}

.footer-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 2em;
}

/* @end footer */


/* @group pagetop */

.pagetop-button {
	position: fixed;
	z-index: 900;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-content: center;
	width: 48px;
	height: 48px;
	background: #333;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.pagetop-button.is-visible {
	opacity: 1;
	visibility: visible;
}

/* 上向きの矢印 */
.pagetop-button::before {
	content: "";
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.pagetop-button { transition: none; }
}

/* @end pagetop */


/* @group loader */

.loader {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	transition: opacity .4s;
}

.loader.is-loaded {
	opacity: 0;
	pointer-events: none;
}

.loader-inner {
	text-align: center;
}

.loader-logo {
	margin-bottom: 1em;
}

.loader-spinner {
	display: flex;
	justify-content: center;
	gap: 4px;
	height: 30px;
}

.loader-spinner > span {
	width: 3px;
	height: 100%;
	background-color: #808080;
	animation: loader-stretch 1.2s infinite ease-in-out;
}

.loader-spinner > span:nth-child(2) { animation-delay: -1.1s; }
.loader-spinner > span:nth-child(3) { animation-delay: -1s; }
.loader-spinner > span:nth-child(4) { animation-delay: -.9s; }
.loader-spinner > span:nth-child(5) { animation-delay: -.8s; }

@keyframes loader-stretch {
	0%, 40%, 100% { transform: scaleY(.5); }
	20% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.loader-spinner > span { animation: none; }
}

/* @end loader */


/* @group button */

.button {
	display: inline-block;
	width: 100%;
	max-width: 280px;
	padding: 1em;
	background: var(--color-gray);
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
}

/* @end button */


/* @group fadein */

/*
 * スクロールして画面に入ったら、ふわっと表示する
 * 表示したい要素に fadein を付ける。画面に入ると main.js が is-inview を付ける
 * 遅らせたいときは -delay1 〜 -delay3 を足す（横に並んだ要素を順に出すときなど）
 * JSが動かない環境では、footer.php の <noscript> で最初から表示する
 */
.fadein {
	opacity: 0;
	translate: 0 20px;
	transition: opacity .8s ease, translate .8s ease;
}

.fadein.is-inview {
	opacity: 1;
	translate: 0 0;
}

.fadein.-delay1 { transition-delay: .15s; }
.fadein.-delay2 { transition-delay: .3s; }
.fadein.-delay3 { transition-delay: .45s; }

/* 動きを減らす設定の環境では、動かさずに最初から表示する */
@media (prefers-reduced-motion: reduce) {
	.fadein {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* @end fadein */


/* @group accordion */

/*
 * 開閉する項目（よくある質問など）。JSは使わない
 * <details class="accordion"><summary class="accordion-title">質問</summary><div class="accordion-body">答え</div></details>
 * 複数の <details> に同じ name を付けると、1つ開いたときにほかが閉じる
 */
.accordion {
	border-bottom: 1px solid var(--color-border);
}

.accordion:first-of-type {
	border-top: 1px solid var(--color-border);
}

/* 並べたときは上の余白を付けず、線でつなげる */
.accordion + .accordion {
	margin-top: 0;
}

.accordion-title {
	position: relative;
	padding: 20px 48px 20px 0;
	font-weight: bold;
	cursor: pointer;
}

/* 右端の＋（開くと−になる） */
.accordion-title::before,
.accordion-title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 16px;
	height: 1px;
	background: currentColor;
	transition: rotate .3s;
}

.accordion-title::after {
	rotate: 90deg;
}

.accordion[open] > .accordion-title::after {
	rotate: 0deg;
}

.accordion-body {
	padding-bottom: 24px;
}

/* @end accordion */


/* @group map */

/*
 * 地図の埋め込み（Googleマップの「地図を埋め込む」で出る <iframe> を中に入れる）
 * <div class="map"><iframe src="…" loading="lazy" title="地図"></iframe></div>
 */
.map {
	aspect-ratio: 16 / 9;
	background: var(--color-gray);
}

.map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media screen and (max-width: 600px) {
	.map {
		aspect-ratio: 4 / 3;
	}
}

/* @end map */


/* @group table-info */

/*
 * 会社概要などの、項目名と内容が並ぶ表。スマホでは縦に積む
 * <table class="table-info"><tr><th scope="row">会社名</th><td>…</td></tr></table>
 */
.table-info {
	width: 100%;
	border-top: 1px solid var(--color-border);
}

.table-info th,
.table-info td {
	padding: 20px 16px;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	background: none;
	text-align: left;
	vertical-align: top;
}

.table-info th {
	width: 12em;
	font-weight: bold;
}

@media screen and (max-width: 600px) {
	.table-info th,
	.table-info td {
		display: block;
		width: auto;
		padding-inline: 0;
	}

	.table-info th {
		padding-bottom: 4px;
		border-bottom: 0;
	}

	.table-info td {
		padding-top: 0;
	}
}

/* @end table-info */


/* @group wp */

/* WPが出力する読み上げ専用のテキスト（ページ送りの見出しなど）を画面から隠す */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* @group pagination */

/* WP-PageNavi（プラグインのCSSは読み込まない設定） */
.wp-pagenavi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 60px;
}

.wp-pagenavi a,
.wp-pagenavi span {
	display: grid;
	place-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: .5em;
	border: 1px solid var(--color-border);
	font-size: 1.4rem;
	line-height: 1;
}

.wp-pagenavi .pages {
	width: 100%;
	height: auto;
	border: 0;
	color: #767676;
}

.wp-pagenavi .current {
	border-color: var(--color-main);
	background: var(--color-main);
	color: #fff;
}

.wp-pagenavi .extend {
	min-width: 0;
	border: 0;
}

@media screen and (max-width: 600px) {
	.wp-pagenavi {
		gap: 6px;
		margin-top: 40px;
	}
}

/* @end */

/* @end wp */