@charset "UTF-8";
/**
Theme CSS
File: assets/css/theme.css
Description: サイト全体の共通スタイルシート
*/

/* =====================================================
□ 共通（PC・スマホ共通）
===================================================== */
:root {
	/* フォント：本文は通常、見出し・強調は太字 */
	--font-body: 'Noto Sans JP', sans-serif;
	--font-heading: 'Mulish', var(--font-body);
	--font-display: 'Poppins', var(--font-body);
	--font-latin: 'Jost', var(--font-body);
	--font-system: Arial, var(--font-body);
	--font-chinese: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
	--font-rounded: 'Zen Maru Gothic', var(--font-body);
	--font-size-body: 1rem;
	--font-size-caption: .75rem;
	--font-size-small: .875rem;
	--font-size-lead: 1.125rem;
	--font-size-h4: 1.25rem;
	--font-size-h3: 1.5rem;
	--font-size-h2: 1.75rem;
	--font-size-title: 2rem;
	--font-size-page-title: 2.5rem;
	--font-size-display-title: 2.4rem;
	--font-size-card-title: 1.25rem;
	--line-height-body: 1.9;
	--line-height-display: 1.2;
	--font-weight-light: 300;
	--font-weight-body: 450;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-heading: 700;
	--font-weight-extra-semibold: 750;
	--font-weight-heavy: 800;
	--font-weight-display: 900;

	/* カラー変数 */
	--color-blue: #096fc8;
	--color-orange: #F39800;
	--color-green: #7AC143;
	--color-red: #ef4444;
	--color-gray-100: #f4f5f8;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #ccc;
	--color-gray-400: #c5cbd1;
	--color-gray-500: #888;
	--color-gray-800: #444;
	--color-gray-900: #333;

	/* ボタン共通 */
	--btn-radius: 9999px;
	--transition: 0.3s ease;

	/* ボタン */
	--color-button-gray: #e0e0e0;
	--color-button-white: #fff;
	--color-button-white-border: #ddd;
	--color-button-white-text: #222;
}

/* ============================================================
ボタン統合スタイル
------------------------------------------------------------
種別          色       クラス構成
本文リンク      グレー   button--default (祖先divにクラスなし)
ページ大枠      ブルー   button--default + 祖先div.button--blue
CTA(フッター)  オレンジ button--cta
送信(CF7)      みどり   button--submit

矢印なしにしたい場合は、
上記に加えて button--no-arrow を追加
============================================================ */

/* WordPress 管理バー表示時のヘッダー位置調整 */
body.admin-bar .site-header {
	top: 32px;
}

body {
	background-color: #fff;
}
/* LP（Fab）は独自の文字設定を使用する。 */
body:not(.page-fab, .fab-lp) {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
}
button, input, select, textarea {
	font-family:inherit;
}
:where(body:not(.page-fab, .fab-lp)) :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
	font-weight:var(--font-weight-heading);
}
:where(body:not(.page-fab, .fab-lp)) :is(h1, h2, h3, h4, h5, h6) {
	font-family:var(--font-body);
	line-height:1.5;
}
:where(body:not(.page-fab, .fab-lp)) h1 { font-size:var(--font-size-page-title); }
:where(body:not(.page-fab, .fab-lp)) h2 { font-size:var(--font-size-h2); }
:where(body:not(.page-fab, .fab-lp)) h3 { font-size:var(--font-size-h3); }
:where(body:not(.page-fab, .fab-lp)) h4 { font-size:var(--font-size-h4); }
:where(body:not(.page-fab, .fab-lp)) h5 { font-size:var(--font-size-lead); }
:where(body:not(.page-fab, .fab-lp)) h6 { font-size:var(--font-size-body); }
:where(body:not(.page-fab, .fab-lp)) .entry-title:not(h1) {
	font-family:var(--font-body);
	font-size:var(--font-size-card-title);
	font-weight:var(--font-weight-heading);
	line-height:1.5;
}
:where(body:not(.page-fab, .fab-lp)) .entry-content {
	font-size: var(--font-size-body);
	font-weight:var(--font-weight-body);
	line-height:var(--line-height-body);
}


/* レイアウト共通 */
.grid-container {
	max-width: 100%;
}

#content {
	display: block;
	width: 100%;
}

:where(body:not(.page-fab, .fab-lp)) #primary {
	max-width: 1000px;
	margin: 4% auto;	
}

/* ヘッダー固定 */
.site-header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	width: 100%;
	min-width: fit-content;
	background-color: #fff;
}

/* ヘッダー内側 */
.inside-header {
	padding: 0 25px;
}

/* グローバルナビゲーション */
.main-navigation .main-nav ul li a {
	white-space: nowrap;
	padding-left: 16px;
	padding-right: 16px;
	line-height: 1.8;
}

.main-navigation a {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-small);
}

.menu-toggle {
	line-height: 45px;
}

/* メニュー dot */
#menu-header-main a .dot,
#menu-footer-main a .dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.4rem;
	background-color: var(--color-orange);
}

#menu-header-main a {
	display: flex;
	align-items: center;
}

#menu-header-main a .dot {
	order: -1;
	flex-shrink: 0;
	margin-left: 0;
	margin-right: .3rem;
}

/* 現在地（アクティブ） */
#menu-header-main li.current-menu-item > a .dot,
#menu-footer-main li.current-menu-item > a .dot {
	background-color: var(--color-green);
}

/* 2行テキストメニュー */
.main-navigation .main-nav ul li.menu-text-only a {
	display: flex;
	align-items: center;
	height: 100%;
	line-height: 1.2;
	text-align: center;
	pointer-events: none;
	cursor: default;
}

.small-text {
	display: block;
	margin-top: 2px;
	font-size: 0.8em;
	opacity: 0.8;
}

/* 現在地表示 */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li a:active,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: inherit !important;
	text-decoration: none !important;
}

/* 固定ヘッダー分だけ下げる */
:where(body:not(.page-fab, .fab-lp)) #page {
	padding-top: 65px;
}

/* サブタイトル */
:where(body:not(.page-fab, .fab-lp)) h1 {
	margin-bottom: 40px !important;
	letter-spacing: 0.1rem;
}

/* Back to Top ボタン */
.generate-back-to-top {
	bottom: 40px;
}

/* フッター */
#footer {
	padding-top:3%;
	background:var(--color-blue);
}

.footer-widgets {
	max-width: 1280px;
	margin: 0 auto;
	background:transparent;
}

.inside-footer-widgets > div {
	flex: auto;
}

#menu-footer-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
}

#menu-footer-main li:nth-child(6) {
	grid-column: 2;
	grid-row: 1;
}

#menu-footer-main li:nth-child(7) {
	grid-column: 2;
	grid-row: 2;
}

#menu-footer-main li:nth-child(8) {
	grid-column: 2;
	grid-row: 3;
}

/* リンク */
.footer-widgets aside a {
	display: block;
	color: #fff;
	text-decoration: none;
}
.footer-widgets aside a:hover {
	opacity:0.6;
}

/* li のデフォルト表示を解除 */
.footer-widgets aside ul,
.footer-widgets aside li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.footer-widget-2 aside a {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-body);
	line-height: 2.4;
}
.footer-widget-3 aside a {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-body);	
	line-height: 2.0;
}

/* フッターバー */
footer.site-info {
	margin-top: 3%;
	background:transparent;
}

footer.site-info .inside-site-info {
	display:block;
	max-width: 1280px;
	margin:0 auto;
	justify-content: flex-end;
}

footer .copyright-bar {
	margin:0;
	font-size: 0.6875rem;
	text-decoration: none;
	color: var(--color-dark-900);
	text-align:right !important;
}

/* =====================================================
□ PC（641px以上）
===================================================== */

/* =====================================================
□ スマホ（640px以下）
===================================================== */

@media screen and (max-width: 640px) {

	:root {
		/* 本文の左右余白。ページ別CSSでもこの値を参照する。 */
		--content-gutter: 20px;
	}

	body:not(.page-fab, .fab-lp) {
		--content-gutter: max(1.5rem, 5vw);
	}

	.main-navigation.toggled .main-nav > ul {
		padding: 12px 0;
	}

	.main-navigation.toggled .main-nav ul li a {
		display: flex;
		padding: 14px 20px;
		line-height: 1.6;
		white-space: normal;
	}

	.site-header {
		min-width: 0;
	}

	.inside-header {
		padding: 8px 16px;
		align-items: center;
	}

	.site-logo img {
		width: 64px;
		max-width: 64px;
		height: auto;
	}

	.site-header .header-widget {
		display: none;
	}

	.mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-control-wrapper .menu-bar-item > a {
		padding: 0 14px;
		line-height: 44px;
	}

	:where(body:not(.page-fab, .fab-lp)) #page {
		padding-top: 80px;
	}

	:where(body:not(.page-fab, .fab-lp)) #primary,
	:where(body:not(.page-fab, .fab-lp)) #main,
	:where(body:not(.page-fab, .fab-lp)) .entry-content,
	:where(body:not(.page-fab, .fab-lp)) .wp-block-column {
		min-width: 0;
		box-sizing: border-box;
	}

	:where(body:not(.page-fab, .fab-lp)) .entry-content {
		overflow-wrap: anywhere;
	}

	.entry-content iframe,
	.entry-content video {
		max-width: 100%;
	}

	.footer-widgets {
		padding: 24px var(--content-gutter) 32px;
	}

	.footer-widgets .inside-footer-widgets {
		padding: 0;
	}

	.footer-widgets .inside-footer-widgets > div {
		margin: 0;
		padding: 0;
	}

	.footer-widgets .widget {
		margin-bottom: 0;
		padding: 0;
	}

	footer.site-info {
		margin-top: 0;
	}

	footer.site-info .inside-site-info {
		padding: 16px var(--content-gutter) 24px;
	}

	.inside-footer-widgets {
		flex-direction: column;
		gap: 24px;
	}

	/* WordPress 管理バー表示時のヘッダー位置調整 */
	body.admin-bar .site-header {
		top: 46px;
	}

	/* 2行テキストメニュー */
	.main-navigation .main-nav ul li.menu-text-only {
		display: none;
	}

	/* スマホでも見出し階層は共通。サイズの基準だけ変更する。 */
	:root {
		--font-size-page-title:2rem;
		--font-size-h2:1.5rem;
		--font-size-h3:1.25rem;
		--font-size-h4:1.125rem;
	}

	/* レイアウト */
	:where(body:not(.page-fab, .fab-lp)) #primary {
		width: calc(100% - var(--content-gutter) * 2);
		margin: 6% var(--content-gutter);
	}

	/* フッター */
	#footer {
		padding-top: 0;
	}

	.inside-footer-widgets > div {
		width: 100%;
	}

	.footer-widgets .inside-footer-widgets > .footer-widget-3 {
		margin-top: 16px;
	}

	footer .copyright-bar {
		color: #fff;
	}

	.footer-widget-1 img {
		width: 80px;
		height: auto;
	}

	.footer-widget-2 {
		display: block;
	}

	#menu-footer-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: 4px 16px;
	}

	#menu-footer-main li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	#menu-footer-main a {
		position: relative;
		padding: 6px 0;
		font-size: var(--font-size-small);
		font-weight: var(--font-weight-heading);
		color: #fff;
		line-height: 1.6;
	}

	#menu-footer-main a .dot {
		position: absolute;
		left: -12px;
		top: calc(50% - 3px);
		margin: 0;
	}

	.footer-widgets .widget figure,
	.footer-widgets .widget p {
		margin: 0;
	}

	.footer-widget-3 aside a {
		padding: 6px 0;
		font-size: var(--font-size-caption);
		font-weight: var(--font-weight-body);
		color: #fff;
		line-height: 1.6;
	}

	.footer-widget-3 .widget_nav_menu ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.footer-bar .widget_nav_menu > div > ul {
		flex-wrap: nowrap;
	}

	/* Back to Top ボタン */
	.back-to-top {
		padding: 8px 10px;
		font-size: var(--font-size-caption);
	}

}