@charset "utf-8";

/*
Theme Name:mrp-child
Template:mrp
Version: 1.0.0
*/
/*
DesignCode CSS: ver 0.01
*/
/*------------------------------------------------------
Theme Material
------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

:root {
	--color-background: #fff;
	--color-font: #222222;
	--color-primary: #173D9A;
	--color-primary-shade: #222222;
	--color-primary-tint: #EBF5FF;
	--color-secondary: #3062DD;
	--color-secondary-tint: #F9F9F9;
	--color-table-border: #D9D9D9;
	--body-font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem);
	--body-font-family: 'Noto Sans JP', sans-serif;
	--header-background: #fff;
	--header-color-font: #221E1F;
	--header-color-primary: #173D9A;
	--header-color-primary-shade: #222222;
	--header-color-primary-tint: #3062DD;
	--footer-background: var(--color-wt);
	--footer-color-font: #222222;
	--footer-color-primary: #173D9A;
	--color-wt: #fff;
	--color-bk: #222222;
	--content-max-width: 1280px;
	--font-family01: 'Noto Sans JP', sans-serif;
	--font-family02: 'Zen Old Mincho', serif;
	--px20: min(calc(20px + (1vw - 19.2px) * 0.1294), 20px);
	/*20px-18px*/
	--px24: min(calc(24px + (1vw - 19.2px) * 0.2589), 24px);
	/*24px-20px*/
	--px24s: min(calc(24px + (1vw - 19.2px) * 0.3883), 24px);
	/*24px-18px*/
}

body {
	font-weight: 400;
	position: relative;

	&:before {
		content: "";
		background: url(/wp-content/uploads/body_bg.jpg.webp) no-repeat bottom left;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1530px;
	}

	&:after {
		content: "";
		background: url(/wp-content/uploads/body_parts.png.webp) no-repeat;
		background-size: contain;
		position: absolute;
		top: 4%;
		left: 0;
		width: 25%;
		height: 20%;
		z-index: 0;
	}

	&:not(.home):after {
		top: calc(80px + 0.5%);
	}
}

@media print,
screen and (max-width: 700px) {
	body:not(.home) {
		&::after {
			top: 0;
			left: 0;
			height: 500px;
			width: 80%;
		}
	}
}

.fv-grad {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(76.22deg, var(--color-wt) 1.33%, rgba(255, 255, 255, 0) 62.01%);
		display: block !important;
		z-index: 1;
	}
}

@media print,
screen and (max-width: 700px) {
	.fv-grad {
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: linear-gradient(171deg, var(--color-wt) 1.33%, rgba(255, 255, 255, 0) 62.01%);
			display: block !important;
			z-index: 1;
		}
	}
}

.post p {
	line-height: 2;
}

@media print,
screen and (max-width: 768px) {
	.post p {
		line-height: 1.8;
	}

	body,
	body.mobile {
		margin-top: 0;
	}
}

@media print,
screen and (max-width: 1023px) {

	#scrollUp {
		bottom: 70px !important;
	}
}

/*----------------------------------------------------------------
animation looptxt
----------------------------------------------------------------*/

.looparea {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100vw;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: -1;
}

.loop_wrap {
	display: flex;
	animation: loop 300s linear infinite;
	width: max-content;
}

.loop_text {
	flex: 0 0 auto;
	font-size: var(--px200);
	font-weight: 500;
	font-family: var(--font-family02);
	color: var(--color-primary-tint);
	line-height: 1 !important;
	white-space: nowrap;
	letter-spacing: -0.02em;
	padding-right: var(--px20);
	/* 適度な間隔 */
}

@keyframes loop {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.looparea+.looparea .loop_wrap {
	animation: loopreverse 300s linear infinite;

	.loop_text {
		color: var(--color-primary-tint);
	}
}

@keyframes loopreverse {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}

@media only screen and (max-width: 768px) {
	.loop_text {
		font-size: var(--px160);
	}
}

/*------------------------------------------
header
------------------------------------------*/
#header,
.mobile #header {
	background: transparent;
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

@media print,
screen and (min-width: 1024px) {

	nav#mainNav {
		align-self: center;
	}

	nav#mainNav ul li a {
		padding: var(--px12);
	}

	nav#mainNav ul li a:active,
	nav#mainNav ul li a:hover,
	nav#mainNav ul li.current-menu-ancestor a,
	nav#mainNav ul li.current-menu-item a,
	nav#mainNav ul li.current-menu-parent a {
		background: transparent;
	}

	#header-layout,
	.sticky-header #header-layout,
	#header>.inner.site-header {
		height: 100px;
		transition: 0.3s all;
	}

	.sticky-header #header>.inner.site-header {
		background: var(--color-wt);
		box-shadow: 0px 10px 40px 0px rgba(94, 136, 166, 0.25);
	}

	.sticky-header #header>.inner.site-header:has(#menu-trigger.active) {
		background-color: transparent;
		box-shadow: none;
	}

	#header>.inner.site-header:has(#menu-trigger.active) .logo {
		background-color: var(--color-wt);
	}
}

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

	/* 既存CSS回避 */
	#header,
	.mobile #header {
		background: var(--color-wt);
		margin: auto;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 20;
	}

	.mobile #header {
		z-index: 999;
		position: fixed;
	}
}

#header-layout {
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: none;
	padding: 0;
	z-index: 0;
}

#header .logo {
	display: block;
	line-height: 0;
	padding: var(--px16) var(--px20);
	margin: 0;
	transition: 0.3s all;
}

#header .logo img {
	-o-object-fit: contain;
	object-fit: contain;
	width: auto;
	height: 100%;
	max-width: 330px;
	max-height: 70px;
}

#header p {
	line-height: 1.4;
	font-size: 90%;
	white-space: nowrap;
}

.header-btn {
	position: fixed;
	left: inherit;
	top: 0;
	right: 100px;
	z-index: 1;
	display: flex;
	background: var(--color-wt);
	padding-left: var(--px16);

	.header_linkbtn {
		position: relative;
		font-size: var(--px20);
		font-weight: 700;
		color: var(--color-wt);
		padding: var(--px20) var(--px30);
		-webkit-transition: .3s ease;
		-o-transition: .3s ease;
		transition: .3s ease;
		background: var(--header-color-primary-tint);
		min-height: 100px;
		line-height: 1.4;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;


		i {
			font-size: var(--px24);
		}

		&:hover {
			background: var(--color-primary);
		}
	}
}

@media print,
screen and (max-width: 1500px) {
	#header .logo img {
		width: var(--px200);
	}
}

@media print,
screen and (max-width: 1300px) {
	#header .logo img {
		width: var(--px160);
	}
}

@media print,
screen and (max-width: 1240px) {

	.header-btn {
		padding-left: 0;

		span {
			display: none;
		}
	}

	body nav#mainNav {
		display: none;
	}

	#header .logo img {
		width: auto;
	}
}

@media print,
screen and (max-width: 1023px) {

	#header-layout {
		height: 60px;
		z-index: 999;
		position: fixed;
		background: #fff;
		width: 100%;
	}

	#header .logo,
	body.mobile #header .logo {
		padding: 10px var(--px12);
		height: 60px;
	}

	#header .logo img,
	body.mobile #header .logo img {
		max-width: 100%;
	}

	.header-btn {
		display: none;
	}

	#header p {
		font-size: 11px;
	}
}

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

	body #header .logo {
		display: block;
	}
}

nav#mainNav ul li a span {
	display: none;
}


/*hamburger*/
/*menu trigger
--------------------------------------------------------*/
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	z-index: 10000;
}

.menu-trigger {
	position: fixed;
	width: 60px;
	height: 17px;
	left: inherit;
	top: 0;
	right: 0;
	margin: 27px 20px;
	text-align: center;
	z-index: 999;
}

.menu-trigger p.menutr {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0;
	font-size: 80%;
	color: var(--color-primary);
	z-index: 3;
	line-height: 1.4;
	font-family: var(--font-family02);
}

#menu-trigger.active p.menutr {
	display: none;
}

.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: var(--color-primary);
}

.menu-trigger span:nth-of-type(1) {
	top: 22px;
}

.menu-trigger span:nth-of-type(2) {
	top: 36.5px;
}

@media print,
screen and (min-width: 1024px) {

	/*既存スティッキー挙動回避*/
	.sticky-header .site-header {
		position: fixed !important;
		width: 100%;
		top: 0 !important;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
		z-index: 9999;
		-webkit-transition: 0.3s all;
		-o-transition: 0.3s all;
		transition: 0.3s all;

	}
}

@media print,
screen and (max-width: 768px) {
	.menu-trigger {
		width: 10%;
		height: 18px;
		margin: 12px 5%;
	}

	.menu-trigger span:nth-of-type(2) {
		top: 31.5px;
	}
}

/*menu trigger fix
--------------------------------------------------------*/
.menu-trigger-fix,
.menu-trigger-fix span {
	display: inline-block;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	z-index: 13;
}

.menu-trigger-fix {
	position: fixed;
	width: 30px;
	height: 27px;
	left: 83%;
	top: 65px;
}

.menu-trigger-fix span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: var(--color-primary);
	border-radius: 0px;
}

.menu-trigger-fix span:nth-of-type(1) {
	top: 0;
}

.menu-trigger-fix span:nth-of-type(2) {
	top: 11.5px;
}

.menu-trigger-fix span:nth-of-type(3) {
	bottom: 0;
}

/*menu trigger effect
--------------------------------------------------------*/
#menu-trigger::after {
	position: fixed;
	top: 0;
	right: 0;
	display: block;
	content: '';
	width: 100px;
	height: 100px;
	border: none;
	margin: 0;
	-webkit-transition: all .75s;
	-o-transition: all .75s;
	transition: all .75s;
	background: var(--color-primary-tint);
	border-radius: 0;
	cursor: pointer;
}

#menu-trigger.active span:nth-of-type(1) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	background-color: var(--color-primary);
}

#menu-trigger.active span:nth-of-type(2) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	background-color: var(--color-primary);
	top: 21.5px;
}

@media print,
screen and (max-width: 768px) {
	.menu-trigger {
		margin: 0;
		width: 40px;
		left: inherit;
		right: 0;
		margin: 10px;
	}

	#menu-trigger::after {
		width: 60px;
		height: 60px;
	}

	#menu-trigger.active span:nth-of-type(1) {
		top: 17.5px;
	}

	#menu-trigger.active span:nth-of-type(2) {
		top: 17.5px;
	}
}

/* メインコンテンツ
--------------------------------------------------------*/
#all {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
	line-height: 0;
}

/* サイドオープン時にメインコンテンツを覆う部分
--------------------------------------------------------*/
.overlay {
	content: '';
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 10;
}

.overlay::after {
	content: "";
	visibility: hidden;
	position: fixed;
	top: 40%;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	color: rgba(255, 255, 255, 0);
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.side-open .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0, 0, 0, .7);
	z-index: 10;
}

.side-open .overlay::after {
	visibility: visible;
	color: rgba(255, 255, 255, .8);
}

/* サイドメニュー ※リストのスタイルは省略
--------------------------------------------------------*/
#right-panel {
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding-top: 10px;
	text-align: left;
	background: var(--header-background);
	z-index: 12;
	-webkit-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;
	opacity: 0;
	display: none !important;
}

/* サイドメニューオープン
--------------------------------------------------------*/
.side-open #right-panel {
	width: 70%;
	overflow: auto;
	position: fixed;
	height: 100%;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	opacity: 1;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	background: var(--color-wt);
}

.scroll-logo {
	display: block;
	padding-left: 0;
	margin: 0 auto;
	text-align: center;
}

@media print,
screen and (max-width: 1023px) {
	nav div.panel {
		float: none;
		display: block !important;
	}

	.side-open #right-panel {
		width: 100%;
		height: calc(100% - 60px) !important;
	}
}

/*------ヘッダー内部メニュー調整start-------------------*/

.panelinner {
	padding: var(--px80);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	width: 100%;
	margin: 0 auto;
}

/* navlistarea */

.navlistarea {
	margin: var(--px40) auto;
	width: 100%;
}

.navlistarea>ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-wrap: wrap;
	justify-items: stretch;
	flex-wrap: wrap;
	gap: var(--px18);
	padding: 0 !important;
	flex-direction: column;
	background: var(--color-wt);
}

.navlistarea a {
	line-height: 1;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;

	&:hover {
		opacity: 1;
		color: var(--color-secondary);
	}
}

li.none>a {
	display: none;
}

.navlistarea .firstnav>a {
	font-family: var(--font-family01);
	font-size: var(--px20);
	color: var(--color-primary);
	position: relative;
	display: block;
	font-weight: 600;
	padding: var(--px12) var(--px24) var(--px12) 0;
	flex-shrink: 0;

	&::after {
		content: "\f101";
		position: static;
		font: var(--fa-font-solid);
		font-size: var(--px18);
		color: var(--color-primary);
		position: absolute;
		right: 0;
		top: calc(50% + 1px);
		transform: translateY(-50%);
	}

	&:hover {
		opacity: 1;
		color: var(--color-secondary);
	}
}

.navlistarea>ul>li>.sub-menu,
.navlistarea>ul>li>.sub-menu li {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.navlistarea .sub-menu li.firstnav>.sub-menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: start;
	-ms-flex-align: start;
	gap: 0 1em;
}

.navlistarea .sub-menu li>.sub-menu li>.sub-menu {
	padding: 0;

	li a {
		position: relative;
		font-size: var(--px12);
		padding: var(--px14);
		font-weight: 500;
		margin-top: 2px;

		&::after {
			content: "";
			width: 6px;
			height: 2px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-color: var(--color-font);
		}
	}
}

.navlistarea .sub-menu li:not(.firstnav) {
	padding: 0;
	margin: 0;
	display: flex;
}

.navlistarea .sub-menu li:not(.firstnav) a {
	padding: var(--px12) var(--px18);
	display: block;
	position: relative;
	font-size: var(--px16);
	font-weight: 600;
	margin-bottom: 4px;
	border-bottom: solid 1px #ccc;

	&::after {
		content: "\f138";
		font: var(--fa-font-solid);
		font-size: var(--px12);
		color: var(--color-primary);
		position: absolute;
		left: 0;
		top: calc(50% + 2px);
		transform: translateY(-50%);
	}
}

/* btnarea */

.post.panel_btnarea {
	width: 100%;
	margin: 0 auto;

	.c-default-btn {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: var(--px16) var(--px40);
		background-color: var(--color-primary);
		color: var(--color-wt);
		font-size: var(--px18);
		gap: var(--px12);
		font-weight: 700;
		text-decoration: none;
		transition: 0.3s all;
		min-width: 200px;
		align-self: stretch;
		width: 100%;
		max-width: none;
		min-height: 100px;
		background-color: var(--color-primary);

		&:hover {
			opacity: 1;
			color: var(--color-wt);
			background-color: var(--color-secondary);
		}
	}
}

@media only screen and (max-width: 959px) {
	#header ul {
		padding: var(--px12);
		/* 既存CSS上書き */
	}
}

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

	.panelinner {
		padding: var(--px120) var(--px16);
	}

	.navlistarea {
		margin: 0;
	}

	.navlistarea>ul {
		gap: 0;
	}

	.navlistarea>ul>li {
		width: 100%;
	}

	.navlistarea .sub-menu li:not(.firstnav) {
		display: flex;
		flex-direction: row;
	}

	.navlistarea .sub-menu li:not(.firstnav) a {
		padding: 6px 5px 6px var(--px20);
	}

	.navlistarea .sub-menu li>.sub-menu li>.sub-menu {
		padding: 2px 5px 3px var(--px12) !important;

		li a {
			padding: 6px 5px 6px var(--px20);
		}
	}

	.post.panel_btnarea {
		display: none;
	}

	#header ul {
		padding: 0;
	}

	.navlistarea>ul>li>.sub-menu,
	.navlistarea>ul>li>.sub-menu li {
		flex-direction: column;
		gap: 0;
	}

	.navlistarea .firstnav>a {
		font-size: var(--px18);
	}
}

/*----------------------------------------------------------------
PCヘッダーend
----------------------------------------------------------------*/

/*================================================
			    footer
================================================*/

#footer {
	font-size: var(--px14);
	color: var(--color-bk);

	.c-footer__inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 94%;
		margin: 0 auto;
		gap: var(--px40);
	}

	.footer__logo:not(:last-child) {
		margin-bottom: var(--px60);
		text-align: left;
	}

	.c-footer--right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: self-end;
		align-self: stretch;
		flex-shrink: 1;
	}

	.c-footer--left {
		flex-shrink: 0;
		text-align: left;

		p {
			line-height: 1.8;
		}

		p+p {
			margin-top: var(--px16);
		}
	}

	.footnav,
	.footnav:not(:last-child) {
		margin-bottom: var(--px16);

		a {
			color: var(--color-font);
			padding: 4px var(--px12);

			&:hover {
				text-decoration: none;
			}
		}

		ul {
			justify-content: flex-end;

			&>li {
				padding: 0;

				&::before,
				&::after {
					content: none;
				}
			}
		}
	}

	#copyright {
		color: var(--footer-color-font);
		font-size: var(--px12);
		letter-spacing: .1rem;
		padding: 0;
		margin: var(--px30) 0 0 auto;
		background: transparent;
		text-align: right;
	}

	.socialicon ul {
		justify-content: flex-end;
	}
}

@media screen and (max-width: 1023px) {
	#footer {
		.c-footer__inner {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.c-footer--right {
			align-items: flex-start;
			text-align: left;
		}

		.footnav:not(:last-child) {
			margin-bottom: var(--px12);
		}

		.socialicon ul {
			justify-content: flex-start;
		}
	}
}

/*================================================
			    frontpage
================================================*/

/* =======================================================
   共通ユーティリティ & ベースコンポーネント
======================================================= */

/* --- レイアウト用ラッパー --- */
.post {
	.l-section {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--px60);
		padding: var(--px120) 0;
	}

	.l-inner {
		max-width: 1280px;
		margin: 0 auto;
		width: 94%;
	}
}

@media screen and (max-width: 768px) {
	.post {
		.l-section {
			padding: var(--px100w) 0;
		}
	}
}

/* --- ユーティリティ --- */

.post {
	.u-shadow {
		box-shadow: 0px 10px 40px 0px rgba(94, 136, 166, 0.25);
	}

	.u-fullwide {
		margin-right: calc(((100vw - 100%) / 2) * -1);
		margin-left: calc(((100vw - 100%) / 2) * -1);
		position: relative;
		z-index: 1;
	}

	.u-colorbox {
		background-color: var(--color-primary-tint) !important;
	}

	.u-bg01 {
		background: url(/wp-content/uploads/bgfix.jpg.webp) no-repeat;
		background-size: cover;
		padding: var(--px120) 0;
	}

	.u-bg02 {
		background-color: var(--color-primary-tint);
		padding: var(--px120) 0;
	}
}

@media screen and (max-width: 768px) {
	.post {

		.u-bg01,
		.u-bg02 {
			padding: var(--px80) 0;
		}
	}
}

/* --- 見出しエリア (c-sec-header) --- */

.post {

	.c-sec-header {
		display: flex;
		flex-direction: column;
		gap: var(--px40);

		h2,
		p {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		h2 {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}
	}

	.c-sec-header--row {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		gap: var(--px80w);
		margin-bottom: var(--px60);
	}

	.c-sec-header__title-area {
		display: flex;
		flex-direction: column;
		gap: var(--px40);
	}

	.c-sec-header__title {
		font-size: var(--px40w);
		font-weight: 700;
		color: var(--color-primary);
		line-height: 1.4;
		text-align: left;
		padding: 0;
		background: transparent;
		border: none;
		margin-bottom: 0;

		.c-sec-header__subtitle {
			display: block;
			font-size: var(--px24s);
			margin-top: var(--px16);
			line-height: 1.2;
		}
	}

	.c-sec-header__line {
		width: var(--px80w);
		height: 1px;
		background-color: var(--color-primary);
	}

	.c-sec-header__line--primary {
		width: var(--px80w);
		height: 1px;
		background-color: var(--color-primary);
	}

	.c-sec-header__lead {
		font-size: var(--px16);
		line-height: 2;
		color: var(--color-font);
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */

@media screen and (max-width: 768px) {
	.post {
		.c-sec-header--row {
			flex-direction: column;
			gap: var(--px30);
		}
	}
}

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

		.c-sec-header,
		.c-sec-header--row {
			align-items: center;
		}

		.c-sec-header__title-area {
			align-items: center;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;
		}

		.c-sec-header__title {
			text-align: center;
		}
	}
}

/* --- ボタン (c-btn) --- */

.post {
	.c-btn {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: var(--color-primary);
		color: var(--color-wt);
		font-size: var(--px18);
		font-weight: 700;
		line-height: 1.4;
		padding: var(--px20) var(--px60);
		border-radius: var(--px80);
		text-decoration: none;
		transition: 0.3s ease;
		border: none;
		min-width: 240px;

		&:hover {
			opacity: 1;
			color: var(--color-wt);
			background-color: var(--color-secondary);
		}

		&::after {
			content: none;
			display: none;
		}
	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-btn {
			width: 100%;
			min-width: auto;
			padding: var(--px16) var(--px20);
			aspect-ratio: 5 / 1;
		}

	}
}

/* --- 矢印アイコン (c-arrow-icon) --- */

.post {

	.c-arrow-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: var(--color-primary);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		flex-shrink: 0;
		transition: 0.3s ease;

		&::after {
			content: "";
			width: 8px;
			height: 8px;
			border-right: 2px solid var(--color-wt);
			border-top: 2px solid var(--color-wt);
			transform: rotate(45deg);
			position: absolute;
			left: 14px;
		}

		&:hover {
			background-color: var(--color-secondary);
		}
	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-arrow-icon {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: var(--color-primary);
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			flex-shrink: 0;

			&::after {
				content: "";
				width: 6px;
				height: 6px;
				border-right: 2px solid var(--color-wt);
				border-top: 2px solid var(--color-wt);
				transform: rotate(45deg);
				position: absolute;
				left: 7px;
			}
		}
	}
}

.post {
	.c-arrow-icon--sm {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: var(--color-primary);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		flex-shrink: 0;
		transition: 0.3s ease;

		&::after {
			content: "";
			width: 6px;
			height: 6px;
			border-right: 2px solid var(--color-wt);
			border-top: 2px solid var(--color-wt);
			transform: rotate(45deg);
			position: absolute;
			left: 7px;
		}

		&:hover {
			background-color: var(--color-secondary);
		}

	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-arrow-icon--sm {
			width: 20px;
			height: 20px;

			&::after {
				width: 3px;
				height: 3px;
			}
		}
	}
}

/* -------------------------------------------
   Section 01 Components
------------------------------------------- */
.post {

	/* --- アイコンリスト --- */
	.c-icon-list {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		margin: 0 0 var(--px60);
		padding: 0;
		list-style: none;

		li,
		h3,
		p,
		figure {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		li {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}

		h3 {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}

		img {
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			max-height: none !important;
			object-fit: contain !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			display: block;
		}
	}

	li.c-icon-list__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--px30);
		border-right: 1px solid var(--color-table-border);
		gap: var(--px20);

		&:last-child {
			border-right: none;
		}
	}

	figure.c-icon-list__icon {
		width: var(--px100w);
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		border: 2px solid var(--color-primary);
		overflow: hidden;
		padding: var(--px20);
		background-color: var(--color-background);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.c-icon-list__title {
		font-size: var(--px20);
		font-weight: 700;
		color: var(--color-font);
		margin-bottom: var(--px20);
	}

	.c-icon-list__desc {
		font-size: var(--px16);
		line-height: 1.8;
		color: var(--color-font);
		text-align: left;
	}

	/* --- ボックス --- */

	.c-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--color-wt);
		border-radius: 16px;
		padding: var(--px50);
		gap: var(--px40);
		flex-wrap: wrap;

		h3,
		p {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		h3 {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}
	}

	.c-box__text {
		display: flex;
		flex-direction: column;
		gap: var(--px12);
	}

	.c-box__title {
		font-size: var(--px24);
		font-weight: 700;
		color: var(--color-primary);
	}

	.c-box__desc {
		font-size: var(--px16);
		color: var(--color-primary);
		text-align: left;
	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-icon-list {
			gap: var(--px20);
		}

		li.c-icon-list__item {
			width: calc(100% / 2 - var(--px20) / 2);
			border-right: none;
			border: 1px solid var(--color-table-border);
			padding: var(--px40);
			flex: auto;
		}
	}
}

@media screen and (max-width: 540px) {
	.post {
		.c-icon-list {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--px40);
		}

		li.c-icon-list__item {
			width: 100%;
			border-right: none;
			border: 1px solid var(--color-table-border);
			padding: var(--px40);
		}

		figure.c-icon-list__icon {
			width: var(--px160);
		}

		.c-box {
			flex-direction: column;
			gap: var(--px30);
			padding: var(--px80) var(--px60);
		}
	}
}

/* =========================================
   差分：.c-box--large (.c-boxサイズバリエーション)
   ========================================= */

.post {
	.c-box--large {
		padding: var(--px80) var(--px60);
		gap: var(--px40);
	}
}

/* -------------------------------------------
   Section 02 Components
------------------------------------------- */
.post {

	.l-section.l-section--egs {
		background: url(/wp-content/uploads/bgfix.jpg.webp) no-repeat;
	}

	/* --- ラッパー --- */
	.c-card-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--px40);
		justify-content: stretch;
		height: 100%;
	}

	/* --- カード --- */
	.c-card {
		flex: 1;
		background-color: var(--color-wt);
		border-radius: var(--px16);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 10px 40px 0px rgba(94, 136, 166, 0.25);

		figure,
		h3,
		ul,
		li {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		h3 {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}

		ul {
			list-style: none;
		}

		img {
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			max-height: none !important;
			object-fit: cover !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			display: block;
		}
	}

	.c-card__img {
		width: 100%;
		aspect-ratio: 3 / 2;
		overflow: hidden;
	}

	.c-card__body {
		padding: var(--px24) var(--px24) var(--px30);
		display: flex;
		flex-direction: column;
		gap: var(--px12);
		flex: 1;
	}

	.c-icon-list__icon {
		width: var(--px40);
		aspect-ratio: 1 / 1;
		border-radius: 50%;
	}

	.c-card__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px var(--px14);
		font-size: var(--px18);
		font-weight: 700;
		color: var(--color-primary);
		text-align: left;
		line-height: 1.4;
	}

	.c-card__title-ja {
		color: var(--color-font);
		font-size: var(--px24);
	}

	.c-card__title-en {
		font-size: var(--px16);
		font-weight: 700;
	}

	.u-color01 {
		.c-card__title-en {
			color: #058E05;
		}
	}

	.u-color02 {
		.c-card__title-en {
			color: #173D9A;
		}
	}

	.u-color03 {
		.c-card__title-en {
			color: #C07F02;
		}
	}

	.c-card__list {
		display: flex;
		flex-direction: column;
		gap: 8px;

		li {
			font-size: var(--px16);
			line-height: 1.6;
			color: var(--color-font);
			position: relative;
			padding-left: var(--px24);

			&::before {
				content: "\f14a";
				font: var(--fa-font-solid);
				font-weight: 500;
				position: absolute;
				left: 0;
				top: 0;
				color: var(--color-primary);
				display: block;
				line-height: 1.6;
			}

			&::after {
				content: none;
				display: none;
			}
		}
	}

	.c-card__label {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 8px;

		li.c-card__labelitem {
			background: var(--color-primary-tint);
			display: inline-flex;
			color: var(--color-primary);
			padding: 4px 8px;
			line-height: 1.2;
			font-size: var(--px16);
		}
	}

	.u-color01 {
		.c-card__list li::before {
			color: #058E05;
		}
	}

	.u-color02 {
		.c-card__list li::before {
			color: #173D9A;
		}
	}

	.u-color03 {
		.c-card__list li::before {
			color: #C07F02;
		}
	}
}

@media screen and (max-width: 1240px) {
	.post {
		.c-card {
			flex: 48%;
			max-width: 48%;
		}

		.u-col-card-wrap {
			.c-card {
				flex: 100%;
				max-width: none;
			}
		}
	}
}

@media screen and (max-width: 640px) {
	.post {
		.c-card-wrap {
			flex-direction: column;
			gap: var(--px30);
			max-width: 420px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}

		.c-card {
			flex: 1;
			max-width: none;
		}

		.c-card__body {
			padding: var(--px30) var(--px24) var(--px40);
		}

		.c-card__title {
			font-size: var(--px20);
		}
	}
}

@media screen and (max-width: 375px) {
	.post {
		.c-card-wrap {
			width: 100%;
		}
	}
}

/* =========================================
   差分:center Cards 
   ========================================= */

.post {

	/* --- カード本体の拡張 --- */
	.c-card--center {
		background-color: var(--color-wt);
	}

	/* 内部の余白と配置の調整 */
	.c-card__body--center {
		padding: var(--px40) var(--px30);
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 全体を中央揃えベースに */
		gap: 0;
	}

	/* --- タイトル（中央揃え・青文字） --- */
	.c-card__title--center {
		width: 100%;
		justify-content: center;
		text-align: center;
		color: var(--color-primary);
		font-size: var(--px24);
		margin: 0 0 10px;
		padding: 0;
		border: none;
		gap: 10px;
	}

	/* --- サブタイトル / 注釈 --- */
	.c-card__note {
		font-family: var(--font-family01);
		font-size: var(--px14);
		font-weight: 700;
		color: var(--color-primary);
		/* 濃い青 */
		margin: 0 0 var(--px24) 0;
		text-align: center;
		line-height: 1.4;
	}

	/* --- 本文（左揃え） --- */
	.c-card__text--left {
		width: 100%;
		text-align: left;
		color: var(--color-font);
		font-size: var(--px16);
		line-height: 1.8;
		margin: 0;
	}

	/* サブタイトルが無い場合の余白調整用 */
	.c-card__text--mt {
		margin-top: var(--px24);
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */
@media screen and (max-width: 640px) {
	.post {
		.c-card__body--center {
			padding: var(--px30) var(--px20);
		}
	}
}

/* =========================================
   差分: .c-card--numlist (ナンバリング付きカード)
   ========================================= */

.post {

	.c-card-wrap:has(.c-card--numlist) {
		counter-reset: card-number;
	}

	.c-card--numlist .c-card__body {
		padding: var(--px20) var(--px24) var(--px30);
	}

	/* タイトル部分をFlexboxにして数字と並べる */
	.c-card--numlist .c-card__title {
		display: flex;
		align-items: center;
		gap: var(--px12);
		font-family: var(--font-family01);
		font-size: var(--px20);
		font-weight: 700;
		color: var(--color-font);
		margin: 0;
	}

	/* 自動付与されるナンバリング（01, 02...）のスタイル */
	.c-card--numlist .c-card__title::before {
		counter-increment: card-number;
		/* カウンターを1増やす */
		content: "0" counter(card-number);
		/* 一桁前提で頭に0をつける */
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		font-family: var(--font-family02);
		border: 1px solid var(--color-primary);
		color: var(--color-primary);
		font-size: var(--px18);
		font-weight: 600;
		flex-shrink: 0;
	}
}

@media screen and (max-width: 640px) {
	.post {
		.c-card--numlist .c-card__title::before {
			font-size: var(--px20);
		}
	}
}

/*---------col02-----------*/

.post {

	.col2_list {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.col2_list>li {
		width: 48%;
		margin-bottom: 5%;
		display: flex;
		flex-direction: column;

		.imgarea {
			overflow: hidden;
			aspect-ratio: 1.414/ 1;

			img {
				-o-object-fit: cover;
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
	}

	/* ★要素数が奇数でも偶数でも、PC（2カラム）時に「最後の行」だけマージンをなくす */
	.col2_list>li:nth-child(2n+1):nth-last-child(-n+2),
	.col2_list>li:nth-child(2n+1):nth-last-child(-n+2)~li {
		margin-bottom: 0;
	}
}

@media print,
screen and (max-width: 1240px) {
	.post {
		.col2_list>li {
			width: 100%;
			margin-bottom: 5% !important;
			/* 一旦すべてのマージンをリセットして設定 */
		}

		/* ★スマホ（1カラム）時はシンプルに最後の1つだけマージンをなくす */
		.col2_list>li:last-child {
			margin-bottom: 0 !important;
		}
	}
}

/*---------col03-----------*/

.post {

	.col3_list {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0;
	}

	.col3_list>li {
		flex: inherit;
		width: 31%;
		margin-bottom: 4%;
		display: flex;
		flex-direction: column;

		.imgarea {
			overflow: hidden;
			aspect-ratio: 1.414/ 1;

			img {
				-o-object-fit: cover;
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
	}

	/* ★要素数が何個でも、PC（3カラム）時に「最後の行」だけマージンをなくす */
	.col3_list>li:nth-child(3n+1):nth-last-child(-n+3),
	.col3_list>li:nth-child(3n+1):nth-last-child(-n+3)~li {
		margin-bottom: 0;
	}

	.col3_list::before {
		content: "";
		display: block;
		width: 32%;
		height: 0;
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
	}

	.col3_list:after {
		content: "";
		display: block;
		width: 32%;
		height: 0;
	}
}

@media print,
screen and (max-width: 960px) {
	.post {
		.col3_list>li {
			width: 48%;
			margin-bottom: 5% !important;
			/* 一旦すべてのマージンをリセットして設定 */
		}

		/* 既存のPC用のマージン無効化をリセット */
		.col3_list>li:nth-child(3n+1):nth-last-child(-n+3),
		.col3_list>li:nth-child(3n+1):nth-last-child(-n+3)~li {
			margin-bottom: 5%;
		}

		/* ★要素数が何個でも、タブレット（2カラム）時に「最後の行」だけマージンをなくす */
		.col3_list>li:nth-child(2n+1):nth-last-child(-n+2),
		.col3_list>li:nth-child(2n+1):nth-last-child(-n+2)~li {
			margin-bottom: 0;
		}

		.col3_list::before,
		.col3_list:after {
			content: none;
		}
	}
}

@media print,
screen and (max-width: 640px) {
	.post {
		.col3_list>li {
			width: 100%;
			margin-bottom: 5% !important;
			/* 一旦すべてのマージンをリセットして設定 */
		}

		/* ★スマホ（1カラム）時はシンプルに最後の1つだけマージンをなくす */
		.col3_list>li:last-child {
			margin-bottom: 0 !important;
		}
	}
}

/* -------------------------------------------
   Section 03 Components
------------------------------------------- */
.post {

	.l-section--sdgs {
		background: var(--color-secondary-tint);
	}

	/* --- サイドレイアウト --- */
	.c-side-layout {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--px60);
	}

	.c-side-layout__header {
		flex-shrink: 0;
	}

	.c-side-layout__content {
		width: 68%;
	}

	/* --- ナンバーリスト --- */

	.c-top-sdgs-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--px30) var(--px24);
		margin: 0;
		padding: 0;
		list-style: none;

		li,
		figure,
		p {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		img {
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			max-height: none !important;
			object-fit: cover !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			display: block;
		}
	}

	.c-top-sdgs-list__item {
		width: calc(97% / 3 - var(--px24) / 2);
		display: flex;
		flex-direction: column;
		gap: var(--px16);
		position: relative;

		&::after {
			content: none;
			display: none;
		}
	}

	.c-top-sdgs-list__img {
		width: 100%;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		position: relative;
	}

	.c-top-sdgs-list__text {
		font-size: var(--px14);
		line-height: 1.8;
		color: var(--color-font);
	}
}

@media screen and (max-width: 960px) {
	.post {
		.c-top-sdgs-list {
			flex-wrap: wrap;
		}

		.c-side-layout {
			flex-wrap: wrap;
		}

		.c-side-layout__header {
			width: 100%;
		}

		.c-side-layout__content {
			width: 100%;
		}
	}
}

@media screen and (max-width: 640px) {
	.post {
		.c-top-sdgs-list__item {
			width: calc(100% / 2 - var(--px24) / 2);
		}
	}
}

@media screen and (max-width: 414px) {
	.post {
		.c-side-layout {
			flex-direction: column;
			gap: var(--px50);
		}

		.c-side-layout__header,
		.c-side-layout__content {
			width: 100%;
		}

		.c-top-sdgs-list {
			flex-direction: column;
		}

		.c-top-sdgs-list__item {
			width: 100%;
			flex-direction: row;
			align-items: center;
		}

		.c-top-sdgs-list__img {
			width: 160px;
			flex-shrink: 0;
		}

		.c-top-sdgs-list__text {
			font-size: var(--px16);
		}
	}
}

/* -------------------------------------------
   Section 04-01 Components
------------------------------------------- */
.post {

	/* --- ラッパー --- */
	.c-img-card-wrap {
		display: flex;
		justify-content: space-between;
		gap: var(--px30);
		margin: 0;
		padding: 0;
		list-style: none;

		li,
		h3,
		figure {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		li {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}

		h3 {

			&::before,
			&::after {
				content: none;
				display: none;
			}
		}

		a {
			text-decoration: none;
			display: block;
			color: inherit;
			border: none;
		}

		img {
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			max-height: none !important;
			object-fit: cover !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			display: block;
		}
	}

	.c-img-card-wrap__item {
		width: calc(100% / 3 - var(--px30) / 3);
		border-radius: var(--px12);
		overflow: hidden;
		transition: transform 0.3s ease;
		background-color: var(--color-background);

		&:hover {
			opacity: 1;

			img {
				opacity: 1;
				transform: scale(1.02);
			}

			.c-img-card__title {
				color: var(--color-secondary);
			}

			.c-arrow-icon--sm {
				background-color: var(--color-secondary);
			}
		}
	}

	/* --- 画像リンクカード --- */
	.c-img-card {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.c-img-card__img {
		width: 100%;
		aspect-ratio: 3 / 4;
		overflow: hidden;
	}

	.c-img-card__body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--px24) var(--px20);
		background-color: var(--color-wt);
	}

	.c-img-card__title {
		font-size: var(--px24);
		font-weight: 700;
		color: var(--color-font);
		transition: 0.3s all;
	}
}

@media screen and (max-width: 786px) {
	.post {
		.c-img-card-wrap {
			flex-direction: column;
			max-width: 420px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}

		.c-img-card-wrap__item {
			width: 100%;
		}

		.c-img-card__img {
			aspect-ratio: 16 / 9;
		}

		.c-img-card__title {
			font-size: var(--px18);
		}

		.c-img-card__body {
			padding: var(--px16) var(--px12);
		}
	}
}

/* -------------------------------------------
   Section 04-02 Components
------------------------------------------- */
.post {

	/* --- グリッド --- */
	.c-grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--px30);

		a {
			text-decoration: none;
			border: none;
		}
	}

	.c-grid__info {
		width: calc(33.333% - 20px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--px40);
		background-color: var(--color-background);
	}

	.c-grid__logo {
		width: 180px;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* --- スモールカード要素 --- */
	.c-grid__item {
		width: calc(33.333% - 20px);
		display: flex;
		flex-direction: column;
	}

	.c-card-sm {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: var(--px12);
		overflow: hidden;
		background-color: var(--color-background);
		transition: 0.3s ease;
		color: inherit;
		height: 100%;

		&:hover {
			opacity: 1;

			img {
				opacity: 1;
				transform: scale(1.02);
			}

			.c-card-sm__title {
				color: var(--color-secondary);
			}

			.c-arrow-icon--sm {
				background-color: var(--color-secondary);
			}
		}
	}

	.c-card-sm__img {
		width: 100%;
		aspect-ratio: 3 / 2;
		border-radius: var(--px12);
		overflow: hidden;
	}

	.c-card-sm__body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--px16) var(--px12);
	}

	.c-card-sm__title {
		font-size: var(--px18);
		font-weight: 700;
		color: var(--color-font);
		padding: 0;
		background: transparent;
		margin: 0;
		border: none;
		display: block;
		transition: 0.3s ease;
	}
}

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

	.c-grid__info a.c-btn {
		min-width: auto;
	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-img-card-wrap {
			flex-wrap: wrap;
		}

		.c-btn {
			padding: var(--px12) var(--px20);
		}

		.c-grid__info,
		.c-grid__item {
			width: calc(100% / 2 - var(--px30) / 2);
			gap: var(--px12);
		}

		.c-card-sm__body {
			padding: var(--px12) 4px;
		}
	}
}

@media screen and (max-width: 375px) {
	.post {
		.c-grid {
			flex-direction: column;
		}

		.c-grid__info,
		.c-grid__item {
			width: 100%;
		}

		.c-grid__info {
			margin-bottom: var(--px30);
		}

	}
}

/* -------------------------------------------
   Section 05 & 06 Components
------------------------------------------- */
.post {
	.l-section.l-section--recruit {
		padding: 0;
	}

	/* --- 分割ボックス --- */
	.c-split-box {
		display: flex;
		align-items: stretch;

		figure {
			margin: 0;
			padding: 0;
			border: none;
			background: transparent;
		}

		img {
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			max-height: none !important;
			object-fit: cover !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			display: block;
		}
	}

	.c-split-box--bg-tint {
		background-color: var(--color-secondary-tint);
	}

	.c-split-box--gap {
		justify-content: space-between;
		gap: var(--px80w);
	}

	.c-split-box--align-center {
		align-items: center;
	}

	.c-split-box__text {
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--px40);

		.c-sec-header {
			width: 100%;
			max-width: 530px;
		}
	}

	.c-split-box__text--pad {
		padding: var(--px100) var(--px60);
		background: var(--color-primary-tint);
	}

	.c-split-box--gap .c-split-box__text {
		width: 45%;
	}

	.c-split-box__btn {
		width: fit-content;
		margin-top: var(--px20);
	}

	.c-split-box__img-wrap {
		width: 60%;
		display: flex;
	}

	.c-split-box__img-wrap--single {
		width: 50%;
		display: block;
		overflow: hidden;
	}

	.c-split-box__img {
		flex: 1;
		height: 100%;
		min-height: 400px;
	}

	.c-split-box__img--aspect {
		aspect-ratio: 3 / 2;
		overflow: hidden;
		min-height: auto;
	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-split-box {
			flex-direction: column;
		}

		.c-split-box--gap {
			gap: var(--px50);
		}

		.c-split-box__text {
			width: 100%;
		}

		.c-split-box__text--pad {
			padding: var(--px100w) 6%;
		}

		.c-split-box--gap .c-split-box__text {
			width: 100%;
		}

		.c-split-box__img-wrap {
			width: 100%;
			height: 300px;
			overflow: hidden;
		}

		.c-split-box__img-wrap--single {
			height: auto;
		}

		.c-split-box__btn {
			width: 100%;
		}
	}
}

/* -------------------------------------------
   CTA Section
------------------------------------------- */

.post {
	.c-cta {
		position: relative;
		padding: var(--px120) 0;
		display: flex;
		justify-content: center;
		align-items: center;

		/* Components Reset */
		h2 {
			background: none;
			border: none;
			border-radius: 0;
			padding: 0;
			margin: 0;

			&::before,
			&::after {
				content: none;
			}
		}

		figure {
			margin: 0;
			padding: 0;
		}

		p {
			margin: 0;
			padding: 0;
		}

		/* Elements */
		.c-cta__bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				max-width: none;
				max-height: none;
				object-fit: cover;
				border: none;
				padding: 0;
				margin: 0;
				display: block;
			}
		}

		.c-cta__inner {
			position: relative;
			z-index: 2;
			width: 94%;
			max-width: 1240px;
			margin: 0 auto;
		}

		.c-cta__box {
			background-color: var(--color-background);
			border-radius: var(--px16);
			padding: var(--px100);
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		}

		.c-cta__header {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--px24);
		}

		.c-cta__title {
			font-size: var(--px40w);
			font-weight: 700;
			color: var(--color-primary);
			line-height: 1.4;
			text-align: center;
			padding-bottom: var(--px30);
			margin-bottom: var(--px40);
			position: relative;

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: var(--px80w);
				height: 1px;
				background-color: var(--color-primary);
			}
		}

		.c-cta__desc {
			text-align: center;
			color: var(--color-font);
			line-height: 1.8;
			margin-bottom: var(--px40);
		}

		.c-cta__actions {
			display: flex;
			justify-content: center;
			align-items: stretch;
			gap: var(--px30);
			width: 100%;
			max-width: 800px;
		}

		.c-cta__btn {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: var(--px12);
			padding: var(--px30) var(--px40);
			border-radius: var(--px100);
			text-decoration: none;
			font-weight: bold;
			transition: 0.3s ease;
			box-sizing: border-box;

			&:hover {
				opacity: 0.8;
			}
		}

		.c-cta__btn--tel {
			background-color: var(--color-background);
			border: 2px solid var(--color-primary);
			color: var(--color-primary);
			font-size: var(--px24);
			transition: 0.3s all;

			.c-cta__btn-text {
				font-family: var(--font-family02);
				transition: 0.3s all;
			}

			&:hover {
				opacity: 1;
				background-color: var(--color-secondary);
				border-color: var(--color-secondary);
				color: var(--color-wt);

				.c-cta__btn-text {
					color: var(--color-wt);
				}
			}
		}

		.c-cta__btn--mail {
			background-color: var(--color-primary);
			color: var(--color-wt);
			font-size: var(--px20);

			&:hover {
				opacity: 1;
				color: var(--color-wt);
				background-color: var(--color-secondary);
			}
		}

		.c-cta__note .note {
			margin-top: var(--px20);
			font-size: var(--px16);
			text-align: center;
			color: var(--color-font);

			b {
				font-weight: 400;
			}
		}

	}
}

@media screen and (max-width: 768px) {
	.post {
		.c-cta {
			padding: var(--px80) 0;

			.c-cta__box {
				gap: var(--px30);
			}

			.c-cta__desc {
				text-align: left;

				br {
					display: none;
				}
			}

			.c-cta__actions {
				flex-direction: column;
				gap: var(--px20);
			}

			.c-cta__btn {
				width: 100%;
				padding: var(--px20);
			}

			.c-cta__note {
				b {
					display: block;
				}
			}
		}
	}
}

/*================================================
					投稿
================================================*/

/* -------------------------------------------
   post list styles 2b 4b
   ------------------------------------------- */

.post2b li .post2b_contents,
.post4b li .post4b_contents {
	margin-bottom: 0;
	opacity: 1;
	color: var(--color-font);
	font-weight: 500;
}

.post ul.post4b,
#cat-post ul.post4b,
.post ul.post2b,
#cat-post ul.post2b {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--px40);

	li.clearfix {
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
		background: var(--color-wt);

		&>a {
			box-shadow: 0 0 50px rgba(0, 0, 0, .2);
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			height: 100%;
			text-align: left;
			color: var(--color-font);
			-webkit-transition: 0.3s all;
			-o-transition: 0.3s all;
			transition: 0.3s all;

			&:hover {
				box-shadow: 0 0 10px rgba(0, 0, 0, .2);

				.post2b_link,
				.post4b_link {
					color: var(--color-primary-tint);
				}
			}
		}
	}

	.post4b_text,
	.post2b_text {
		padding: var(--px20) var(--px20) var(--px14);
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-self: flex-start;
		justify-content: flex-start;
		background: var(--color-wt);
		width: 100% !important;
	}

	h2.top-loop,
	h2.bottom-loop,
	.cat-loop {
		text-align: left;
		font-size: var(--px18);
		font-weight: 700;
		display: block;
		overflow: inherit;
		text-overflow: inherit;
		white-space: inherit;
		line-height: 1.6;
		margin: 6px 0 var(--px24) !important;
		color: var(--color-font);

		&::first-letter {
			color: var(--color-font);
		}
	}

	p.post4b_contents,
	p.post2b_contents {
		display: none !important;
		color: var(--color-font);
	}

	.post2b_link,
	.post4b_link {
		position: static;
		border: none;
		text-align: right;
		margin-top: auto;
		color: var(--color-primary);
		font-size: var(--px16);
		font-weight: 700;
		letter-spacing: 0.01em;

		&:after {
			content: "\f138";
			font: var(--fa-font-solid);
			font-weight: 500;
			margin-left: var(--px16);
		}
	}

	span.ymd_in_list {
		display: none !important;
	}

	.time {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;

		a {
			padding: var(--px12) var(--px18);
			font-weight: 700;
			font-size: var(--px16);
		}
	}

	span.cat-knowledge {
		display: none;
	}
}

.post ul.post4b,
#cat-post ul.post4b {
	gap: 1%;
}

.post_img,
.post2b_img,
.post4b_img {
	max-width: none;
	overflow: hidden;
}

.post_img img,
.post2b_img img,
.post4b_img img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	aspect-ratio: 7 / 4;
	-o-object-fit: cover;
	object-fit: cover;
}

a:hover {

	.post_img img,
	.post2b_img img,
	.post4b_img img {
		opacity: 1;
		transform: scale(1.02);
	}
}

.post .time,
.postlist .time,
.post2b .time,
.post4b .time {
	background: transparent;
	padding: 0;

	a {
		padding: 4px 10px 5px;
		color: var(--color-wt);
		font-family: var(--font-family01);
		background: var(--color-primary);
		display: inline-block;
		font-weight: 500;
		font-size: var(--px14);
		-webkit-transition: 0.3s all;
		-o-transition: 0.3s all;
		transition: 0.3s all;

		&:hover {
			background: var(--color-primary);
			opacity: 1;
		}
	}
}

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

	.post4b .post4b_img,
	.post2b .post2b_img {
		width: 100%;
		margin: 0;
		padding: 0;
		float: left;
	}
}

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

	#content .post4b_img,
	#content .post2b_img {
		max-width: none;
		padding-top: 0;
	}
}

/* -------------------------------------------
   post list styles list
   ------------------------------------------- */

#front_top_content,
#front_bottom_content {
	background-color: var(--color-secondary-tint);
}

.listTitle {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--px20);

	.frontlist {
		position: static;
		transform: inherit;
	}
}

#front-sectionPost {
	max-width: var(--content-max-width);

	h1.title {
		position: relative;
		font-family: var(--font-family01);
		font-weight: 600;
		font-size: var(--px40);
		color: var(--color-primary);
		display: block;
		width: fit-content;
		margin: 0 0 var(--px24);
		padding: 0;
		text-align: left;
		line-height: 1.2;

		&::before,
		&::after {
			content: none;
		}
	}
}

.listTitle .frontlist a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-primary);
	color: var(--color-wt);
	font-size: var(--px18);
	font-weight: 700;
	padding: var(--px20) var(--px60);
	border-radius: var(--px80);
	text-decoration: none;
	transition: 0.3s ease;
	border: none;
	min-width: 320px;

	&:hover {
		opacity: 1;
		color: var(--color-wt);
		background-color: var(--color-secondary);
	}

	&::after {
		content: none;
		display: none;
	}
}

.postlist li,
.postlist li:first-child {
	border-top: 1px solid var(--color-table-border);

	&:last-child {
		border-bottom: 1px solid var(--color-table-border);
	}
}

.postlist .post_text {
	font-weight: 500;
	width: 100%;
	flex-wrap: wrap;
}

.postlist .date {
	font-family: var(--font-family01);
}

.postlist .ttls {
	font-family: var(--font-family01);
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;

	a {
		padding: 6px 0;
		display: flex;
		justify-content: space-between;
		gap: var(--px16);
		width: 100%;

		&:after {
			content: "\f101";
			font: var(--fa-font-solid);
			font-weight: 600;
			color: var(--color-primary-shade);
		}

		&:hover {
			text-decoration: none;
			color: var(--color-primary);
			opacity: 0.7;
		}
	}
}

.postlist .time {
	display: block;
	white-space: nowrap;
	margin: 0 10px 0 0;
	padding: 0;
	text-align: center;
	font-weight: 400;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
	color: var(--color-font);
	background: var(--color-primary);
	font-family: var(--font-family01);

	a {
		padding: 7px 10px;
		display: block;
		min-width: 60px;
	}

	&:hover {
		background: var(--color-font);
	}
}

@media print,
screen and (max-width: 640px) {
	.postlist li .ttls {
		margin-top: 2px;
	}

	.postlist .time {
		padding: 0;
	}

	.postlist .post_text {
		width: 100%;
		padding: var(--rem20)0 1.2rem;
	}

	.postlist .time a {
		min-width: auto;
		padding: 5px 10px;
	}
}

.single-post h1.title.first {
	border-bottom: none;
	padding-bottom: var(--rem16);
}

.dateLabel {
	padding-top: 1rem;
	margin-bottom: var(--rem30);
	border-top: 1px solid var(--color-font);
	font-family: var(--font-family01);
	font-weight: 400;
	font-style: normal;
}


/*--gallery--------------------------------------------*/

.gallery_area {
	margin: var(--px30) auto;
}

.gallery_area:first-child {
	margin-top: 0;
}

.gallery_area:last-child {
	margin-bottom: 0;
}

/* Flexboxベースでgapを使用し、元の複雑なマージン計算式をなくす */
.gallery {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
	-webkit-box-pack: start !important;
	-ms-flex-pack: start !important;
	justify-content: flex-start !important;
	/* space-betweenではなく左詰めに変更 */
	gap: var(--px20) 2% !important;
	/* 縦の隙間(20px) 横の隙間(2%) */
	margin: var(--px50) auto !important;
}

.gallery>br {
	display: none !important;
}

.gallery>*:last-child {
	display: block;
}

.gallery-item {
	float: none !important;
	line-height: 0;
	margin: 0 !important;
	/* 古いマージン指定をリセット */
}

.gallery-caption {
	font-size: var(--rem14);
	line-height: 1.6;
	text-align: center;
	margin: .5em auto !important;
	padding: 0 !important;
}

/* 画像はショートコード側のサイズに依存させる */
.gallery-item img {
	display: block;
}

/* =========================================
   元のコード通りのセレクタで設定
   ※計算誤差によるカラム落ちを防ぐため「- 0.1px」を引くハックを入れています
   ========================================= */
.gallery-columns-2 .gallery-item {
	width: calc((100% - 2%) / 2 - 0.1px) !important;
}

.gallery-columns-3 .gallery-item {
	width: calc((100% - 4%) / 3 - 0.1px) !important;
}

.gallery-columns-4 .gallery-item {
	width: calc((100% - 6%) / 4 - 0.1px) !important;
}

.gallery-columns-5 .gallery-item {
	width: calc((100% - 8%) / 5 - 0.1px) !important;
}

.gallery-columns-6 .gallery-item {
	width: calc((100% - 10%) / 6 - 0.1px) !important;
}


/* =========================================
   レスポンシブ対応
   ========================================= */
@media print,
screen and (max-width: 1023px) and (min-width: 641px) {

	/* タブレット時は、4〜6カラムの設定を3カラムに落とす */
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item {
		width: calc((100% - 4%) / 3 - 0.1px) !important;
	}
}

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

	/* スマホ時は基本的にすべて2カラムにする（1カラム指定のものはそのまま） */
	.gallery-columns-2 .gallery-item,
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item {
		width: calc((100% - 2%) / 2 - 0.1px) !important;
	}
}


/* =========================================
   レスポンシブ対応
   ========================================= */
@media print,
screen and (max-width: 1023px) and (min-width: 641px) {

	/* タブレット時は、5〜6カラムの設定を3カラムに落とす */
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item {
		width: calc((100% - 4%) / 3) !important;
	}
}

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

	/* スマホ時は基本的にすべて2カラムにする */
	.gallery-columns-2 .gallery-item,
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item {
		width: calc((100% - 2%) / 2) !important;
	}
}

/* -------------------------------------------
   インフォメーション ギャラリー出力調整
   ------------------------------------------- */

.c-info-gallery p:first-child {
	font-size: var(--px24s);
	font-family: var(--font-family01);
	font-weight: 600;
	color: var(--color-wt);
	line-height: 1.4;
	text-align: center;
	margin: 0 0 var(--px40);
	border: none;
	background: var(--color-secondary);
	padding: var(--px12);
}

.c-info-gallery .gallery-item img {
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	max-width: 100% !important;
}

@media print,
screen and (max-width: 768px) {
	.c-info-gallery p:first-child {
		text-align: left;
	}
}

/*================================================
			    subpage-parts
================================================*/

/*----------------------------
layout
-----------------------------*/

.fw_contents .page_contents_inner:nth-child(even) {
	background: #ccd6f1;
}

.fw_contents {
	.page_contents_inner {
		padding-top: var(--px100);
		padding-bottom: var(--px100);

		&+.page_contents_inner {
			margin-top: 0;
		}
	}
}

body:not(.home) #content.wide {
	padding: var(--px100w) 0;
	margin: 0 auto;

	&:has(#p-service),
	&:has(#p-company) {
		padding: var(--px100w) 0 0;
		margin: 0 auto;
	}
}

body:not(.home) {
	position: relative;
	background: var(--color-background);

	#wrapper {
		width: 94%;
	}
}

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

	/* 背景色ハンバーガーメニュー回避 */
	body:not(.home) {
		background-color: transparent;
	}
}

.post {
	.page_contents_inner+.page_contents_inner {
		margin-top: var(--px120);
	}
}

@media print,
screen and (max-width: 640px) {
	.post {
		.page_contents_inner+.page_contents_inner {
			margin-top: var(--px100w);
		}
	}
}

.content_wrap+.content_wrap {
	margin-top: var(--px80w);
}

.post {
	.l-header {
		position: relative;
		height: 720px;
		overflow: hidden;
		margin-bottom: var(--px100);
		margin-right: calc(((100vw - 100%) / 2) * -1);
		margin-left: calc(((100vw - 100%) / 2) * -1);

		&:has(.l-header__textarea) {
			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 1;
				background: linear-gradient(123.66deg, rgba(76, 101, 184, 0.33) 33.61%, rgba(255, 255, 255, 0) 119.31%);
			}
		}

		&:has(+ .u-bg01),
		&:has(+ .u-bg02) {
			margin-bottom: 0;
		}
	}

	.l-header__textarea {
		margin: var(--px80);

		.l-header__text {
			font-size: var(--px60);
			color: var(--color-wt);
			text-align: left;
			font-weight: 700;
			font-family: var(--font-family02);
			line-height: 1.4;
			background: transparent;
			padding: 0 0 var(--px60);
			margin: var(--px120) auto var(--px60);
			letter-spacing: 0;
			border: none;
			margin: 0;
			text-shadow: 0px 0px 18px #001f6b;
			z-index: 2;

			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 0.2em;
				transform: inherit;
				bottom: 0;
				background: none;
				border: none;
				height: 1px;
				width: var(--px160);
				background-color: var(--color-wt);
			}
		}
	}

	.l-header__img {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
			max-width: none;
			object-fit: cover;
		}
	}
}

@media print,
screen and (max-width: 1240px) {
	.post {
		.l-header {
			height: 540px;

			.l-header__textarea {
				margin: var(--px40);
			}
		}
	}
}

@media print,
screen and (max-width: 768px) {
	.post {
		.l-header {
			height: 300px;
		}
	}
}

@media print,
screen and (max-width: 640px) {
	.post {
		.l-header {
			height: 240px;
		}
	}
}

/*----------------------------
parts
-----------------------------*/

.post {
	.read_txt {
		font-size: var(--px20);
		font-weight: 400;
		text-align: center;
		letter-spacing: .01em;
		line-height: 2.2;
		margin: var(--px60) auto var(--px80);
	}
}

@media print,
screen and (max-width: 640px) {
	.post {
		.read_txt {
			font-size: var(--px18);
			text-align: left;
			line-height: 2;
		}
	}
}

body:not(.home) {
	#wrapper {
		width: 94%;
	}

	.post p:not([class])+p:not([class]) {
		margin-top: 1em;
	}

	b {
		color: var(--color-font);
		font-weight: 700;
		display: inline-block;
	}
}

/*================================================
   					テーブル
================================================*/

.post {
	table {
		margin: var(--px30) auto;
		border-spacing: 0;
		table-layout: fixed;
		border: 1px solid var(--color-table-border);
		text-align: center;

		td,
		th {
			padding: 20px 15px 18px;
			min-height: 40px;
			vertical-align: middle;
			border: none;
			color: var(--color-font);
			background: var(--color-wt);
		}

		th {
			background-color: var(--color-secondary-tint);
			color: var(--color-font);
			border: 1px solid var(--color-table-border);
			text-align: center;
		}

		td {
			border: 1px solid var(--color-table-border);
		}
	}
}

.post {
	table.c-table--style01 {
		border: none;

		th {
			color: var(--color-primary);
			background-color: transparent;
			border-bottom: solid 1px var(--color-primary-shade);
		}

		td {
			background-color: transparent;
			border-bottom: solid 1px #9fb7f2;
		}

	}
}

/*================================================
				リンクボタンリスト
================================================*/

.linkBtn,
.post .linkBtn {
	position: relative;
	border: none;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	min-width: 300px;
	max-width: 400px;
	border-radius: 0;
	z-index: 1;
	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
	margin: var(--px40) auto 0;
	display: flex;
	padding: var(--px24) var(--px40) var(--px24) var(--px24);
	color: var(--color-wt);
	font-family: var(--font-family01);
	font-weight: 600;
	font-size: var(--px16);
	text-align: left;
	width: 100%;
	padding-right: 60px;
	background: var(--color-primary-tint);

	&::after {
		border: none !important;
		content: "\f101";
		position: static;
		font: var(--fa-font-solid);
		font-weight: 500;
		font-size: var(--px18);
		line-height: 1.6;
		border: none;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		-webkit-transform: inherit;
		-ms-transform: inherit;
		transform: inherit;
		margin: 0 0 0 auto;
		display: inline-block;
		color: var(--color-wt);
		background: var(--color-primary-shade);
		width: 60px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 0;
	}

	&:hover {
		color: var(--color-wt);
		background: var(--color-primary);
		opacity: 1;

		&::after {
			color: var(--color-wt);
			background: var(--color-primary-tint);
		}
	}

	&.leftbtn {
		margin-left: 0;
		margin-right: auto;
	}

	&.rightbtn {
		margin-left: auto;
		margin-right: 0;
	}
}

/* -------------------------------------------
   Shared Utilities (Buttons)
   ------------------------------------------- */

.post {

	/* Buttons */
	.c-default-btn {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: var(--px16) var(--px40);
		background-color: var(--color-primary-tint);
		color: var(--color-wt);
		font-size: var(--px18);
		gap: var(--px12);
		font-weight: 700;
		text-decoration: none;
		transition: 0.3s all;
		min-width: 200px;
		align-self: stretch;

		&:hover {
			opacity: 1;
			color: var(--color-wt);
			background-color: var(--color-secondary);
		}

		&.c-default-btn--small {
			padding: 10px var(--px20);
			font-size: var(--px12);
			min-width: auto;
		}

		&.u--telbtn {
			font-family: var(--font-family01);
			font-size: var(--px24);
			font-weight: 500;
			display: flex;
			background: #4B4B4B;
			align-items: center;

			&:hover {
				opacity: 1;
			}
		}
	}

	.c-default-arrow-btn {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: var(--px50);
		height: var(--px50);
		background-color: #001441;
		color: var(--color-wt);
		text-decoration: none;
		position: relative;
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

		&::after {
			content: "\f101";
			position: static;
			font: var(--fa-font-solid);
			font-weight: 500;
			color: var(--color-wt);
			font-size: var(--px20);
		}

		&:hover {
			opacity: 0.8;
			color: var(--color-wt);
		}

		&.c-default-arrow-btn--small {
			width: var(--px80);
			height: var(--px80);
		}
	}
}

/*================================================
				リンクボタンリスト
================================================*/

.post {

	/*---ボタンリストレイアウト---*/

	.c-btnlist {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin: var(--px40) auto 0;
		gap: var(--px24);

		.c-btnlist__listitem {
			position: relative;
		}

		.c-btnlist__btn {
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
			padding: var(--px20) var(--px40);
			gap: var(--px20);
			height: 100%;
			font-family: var(--font-family01);
			font-weight: 500;
			font-size: var(--px18);
			text-align: left;
			line-height: 1.4;
			width: 100%;
			min-width: 320px;
			color: var(--color-primary);
			-webkit-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
			border-radius: 0;
			border: none;
			background: var(--color-wt);
			border: 2px solid var(--color-primary);
			border-radius: var(--px100);

			&:hover {
				background: var(--color-secondary);
				color: var(--color-wt);
				border-color: var(--color-secondary);
			}

			&.c-btnlist__btn--smallbtn {
				min-width: 240px;
			}
		}
	}
}

@media print,
screen and (max-width: 640px) {
	.post {
		.c-btnlist {

			gap: var(--px12);

			.c-btnlist__listitem {
				width: 80%;
			}

			.c-btnlist__btn,
			.c-btnlist__btn--smallbtn {
				max-width: none;
				width: 100%;
				min-width: auto;
				line-height: 1.4;
			}
		}
	}
}

/*================================================
				eyecatch
================================================*/

header#h1Header {
	background: transparent;
	z-index: -1;
	overflow: visible;
	max-width: none;
	margin: 0 auto;
	height: 600px;

	&:before {
		content: none;
	}

	#thumb {
		position: absolute;
		width: 66%;
		height: 100%;
		right: 0;
		top: 0;
		transform: translate(0, 0);
		z-index: 0;

		&:after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			right: 0;
			top: 0;
			background: linear-gradient(76.22deg, var(--color-wt) 1.33%, rgba(255, 255, 255, 0) 62.01%);
			display: block !important;
			z-index: 1;
		}
	}

	img {
		width: 100%;
		height: 100%;
		top: inherit;
		left: inherit;
		transform: inherit;
		object-fit: cover;
	}

	h1.title {
		position: relative;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		color: var(--color-font);
		font-size: var(--px40);
		font-weight: 600;
		font-family: var(--font-family02);
		line-height: 1.2;
		text-transform: lowercase;
		display: block;
		text-transform: capitalize;
		text-align: left;
		width: 94%;
		max-width: 1280px;
		margin: 0 auto;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;

		span {
			display: block;
			font-family: var(--font-family02);
			font-weight: 700;
			font-size: var(--px80);
			letter-spacing: 0;
			margin: 0;
			padding: 0 0 var(--px60);
			background: transparent;
			color: var(--color-font);
			border: none;
			line-height: 1.4;
			text-shadow: 0px 0px 20px var(--color-wt);

			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 0.2em;
				transform: inherit;
				bottom: 0;
				background: none;
				border: none;
				height: 1px;
				width: var(--px160);
				background-color: var(--color-font);
			}
		}
	}
}

@media print,
screen and (max-width: 768px) {

	/* ハンバーガーメニュー回避 */
	.mobile header#h1Header,
	header#h1Header {
		margin-top: 60px !important;
	}
}

@media print,
screen and (max-width: 1240px) {

	header#h1Header {
		height: 400px;

		h1.title {
			span {
				font-size: var(--px60);
				margin-top: var(--px60);
			}
		}
	}
}

@media print,
screen and (max-width: 1240px) {
	header#h1Header {
		height: 300px;
		margin-top: 80px;

		#thumb {
			position: absolute;
			width: auto;
			height: 100%;
			right: 0;
			top: 0;
			transform: translate(0, 0);
			z-index: 0;
			aspect-ratio: 21 / 10;
			overflow: hidden;
			text-align: right;

			img {
				height: 100%;
				margin: 0 0 0 auto;
				right: 0;
			}
		}
	}
}

@media print,
screen and (max-width: 640px) {
	header#h1Header {
		height: 240px;

		#thumb {
			width: 100%;

			#header p &:after {
				background: linear-gradient(76.22deg, var(--color-wt) 10.33%, rgba(255, 255, 255, 0) 121%);
			}
		}
	}
}

#breadcrumb ul li,
#breadcrumb ul li a {
	color: var(--color-font);
	padding: 4px;
}

#breadcrumb ul li {
	line-height: 1.2;

	br {
		display: none;
	}
}

/*---投稿アイキャッチ---*/

body.archive header#h1Header,
body.single-post header#h1Header {
	margin: calc(80px * 2) auto 0;
	height: auto;
	min-height: auto;

	h1.title {
		transform: inherit;
		top: inherit;
		padding-top: var(--px80);
		margin-bottom: var(--px80);
	}
}

/*================================================
					見出し
================================================*/

.post {

	h2,
	.c-ttl--style01 {
		position: relative;
		color: var(--color-primary);
		font-size: var(--px40w);
		font-weight: 700;
		font-family: var(--font-family01);
		line-height: 1.4;
		background: transparent;
		padding: 0 0 var(--px30w);
		margin: var(--px120) auto var(--px60);
		text-align: center;
		letter-spacing: 0;
		border: none;

		&::before {
			content: "";
			display: block;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
			background: none;
			border: none;
			height: 1px;
			width: var(--px80);
			background-color: var(--color-primary);
		}

		&::after {
			content: none;
		}

		&.u-left {
			text-align: left;
			margin-left: 0;
			margin-right: auto;

			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 0.2em;
				transform: inherit;
				bottom: 0;
				background: none;
				border: none;
				height: 1px;
				width: var(--px80);
				background-color: var(--color-primary);
			}
		}

		&.u-size-m {
			font-size: var(--px30w);
			margin-bottom: var(--px40);
		}
	}

	h3,
	.c-ttl--style02 {
		position: relative;
		font-size: var(--px24s);
		font-family: var(--font-family01);
		font-weight: 600;
		padding: var(--px18);
		margin: var(--px60) 0 var(--px40);
		border: none;
		border-left: solid 8px var(--color-primary-tint);
		background: var(--color-secondary);
		color: var(--color-wt);
		line-height: 1.4;
		text-align: left;

		&::before,
		&::after {
			content: none;
		}
	}

	h4,
	.c-ttl--style03 {
		font-family: var(--font-family01);
		font-weight: 700;
		font-size: var(--px24s);
		letter-spacing: 0;
		margin: var(--px40) 0 var(--px18);
		padding: 0;
		padding-left: var(--px16);
		border-left: double 8px;
		background: transparent;
		color: var(--color-bk);
		line-height: 1.6;
		text-align: left;

		&::before,
		&::after {
			content: none;
		}
	}

	h5,
	.c-ttl--style04 {
		display: block;
		font-family: var(--font-family01);
		font-weight: 700;
		font-size: var(--px18);
		letter-spacing: 0;
		margin: var(--px30) 0 var(--px18);
		padding: 0px 6px;
		width: fit-content;
		background: var(--color-primary);
		color: var(--color-wt);
		border: none;
		line-height: 1.6;
		text-align: left;

		&::before,
		&::after {
			content: none;
		}
	}

	.c-ttl--style06 {
		font-size: var(--px24s);
		font-family: var(--font-family01);
		font-weight: 700;
		letter-spacing: 0;
		padding: 0 0 var(--px16);
		margin: var(--px60) auto var(--px20);
		border-bottom: 3px solid var(--color-font);
		text-align: left;
		background: transparent;

		&::before,
		&::after {
			content: none;
		}
	}

	.c-ttl--style07 {
		position: relative;
		font-size: var(--px18);
		font-family: var(--font-family01);
		font-weight: 800;
		padding: 0 0 0 1.2em;
		margin: var(--px40) auto var(--px24);
		border: none;
		color: var(--color-primary);
		background: transparent;

		&::before {
			content: '';
			position: absolute;
			width: .7em;
			height: 4px;
			background: var(--color-primary);
			top: .8em;
			left: 0;
		}

		&::after {
			content: none;
		}
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */

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

		h2,
		.c-ttl--style01 {

			&.u-left {
				text-align: center;
				margin-left: auto;
				margin-right: auto;

				&::before {
					left: 50%;
					transform: translateX(-50%);
				}
			}

			&.u-size-m {
				font-size: var(--px40w);
			}
		}

	}
}

/* =========================================
   Flow Section Styles (PC First)
   ========================================= */

.post {
	.c-flow {
		display: flex;
		align-items: stretch;
		max-width: 1920px;
		/* 全画面幅ベース */
		margin: 0 auto;
		background-color: var(--color-wt);
		position: relative;
		z-index: 1;
	}

	/* --- Text Area (Left) --- */
	.c-flow__body {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		/* 右側の画像に寄せる */
		padding: var(--px120);
	}

	.c-flow__inner {
		width: 100%;
		max-width: 960px;
		/* テキストエリアの最大幅 */
	}

	/* --- Flow List --- */
	.c-flow__list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
	}

	.c-flow__item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: var(--px40) 0;
		border-bottom: 1px solid #d6d3d1;
		/* Tailwind: stone-300 */
		gap: var(--px24);
	}

	.c-flow__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		background-color: var(--color-wt);
		border-radius: 50%;
		border: 2px solid var(--color-primary);
		color: var(--color-primary);
		font-size: var(--px20);
	}

	.c-flow__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--px16);
	}

	.c-flow__item-title {
		font-size: var(--px20);
		font-weight: 700;
		color: var(--color-primary);
		margin: 0;
		border: none;
		background: none;
		padding: 0;
	}

	.c-flow__item-desc {
		font-size: var(--px16);
		color: var(--color-font);
		margin: 0;
		line-height: 2;
	}

	/* --- Flow Arrow (Right) --- */
	.c-flow__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		background-color: #eff6ff;
		/* Tailwind: blue-50 */
		border-radius: 50%;
		position: relative;
	}

	/* 下向き矢印 */
	.c-flow__arrow::after {
		content: "\f175";
		font: var(--fa-font-solid);
		font-weight: 900;
		font-size: var(--px16);
		line-height: 1;
		color: var(--color-primary);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* 最後の項目の横線（矢印なし） */
	.c-flow__arrow--end {

		&::before {
			content: "";
			width: 18px;
			height: 2px;
			background-color: var(--color-primary);
			border: none;
			transform: none;
			margin: 0;
		}

		&::after {
			content: none;
		}
	}

	/* --- Image Area (Right) --- */
	.c-flow__img {
		flex: 1;
		max-width: 45%;
		/* PC時の画像の最大幅割合 */
		display: flex;
		overflow: hidden;
	}

	.c-flow__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */

@media screen and (max-width: 1023px) {
	.post {
		.c-flow {
			flex-direction: column;
			/* 縦積みに変更 */
		}

		.c-flow__img {
			max-width: 100%;
			height: 400px;
			aspect-ratio: 4 / 3;
			/* SP時の画像の高さを固定 */
			order: -1;
			/* 画像を上に配置する場合（下にする場合は削除） */
		}

		.c-flow__body {
			padding: var(--px60) 0;
			justify-content: flex-start;
			width: 94%;
			margin: 0 auto;
		}

		.c-flow__title {
			font-size: var(--px24, 24px);
			margin-bottom: var(--px40);
		}

		.c-flow__item {
			flex-wrap: wrap;
			/* テキストと矢印のレイアウト調整用 */
			gap: 15px;
			padding: var(--px30) 0;
		}

		.c-flow__icon {
			width: 48px;
			height: 48px;
			font-size: 16px;
		}

		.c-flow__arrow {
			width: 48px;
			height: 48px;
		}
	}
}

/* =========================================
   Column List Section Styles (PC First)
   ========================================= */

.post {
	.c-columnlist {
		display: flex;
		flex-direction: column;
		gap: var(--px80);
		/* 各項目の間隔 */
		margin: 0 auto;
		padding: 0 0 var(--px80) 0;
		list-style: none;
		counter-reset: column-counter;
		/* 連番用のカウンターをリセット */
	}

	.c-columnlist__item {
		width: 100%;
		counter-increment: column-counter;
		/* カウンターを進める */
	}

	/* --- Alignment Modifiers --- */
	.c-columnlist__inner {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.c-columnlist__inner.u-left {
		align-items: flex-start;
	}

	.c-columnlist__inner.u-right {
		align-items: flex-end;
	}

	.c-columnlist__inner.u-center {
		align-items: center;
	}

	/* --- Image Area --- */
	.c-columnlist__img {
		width: 100%;
		margin: 0;
		padding: 0;
		max-width: 1400px;
		max-height: 760px;
		overflow: hidden;
	}

	.c-columnlist__img img {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

	/* --- Text Box Area --- */
	.c-columnlist__body {
		display: flex;
		align-items: flex-start;
		gap: var(--px80);
		/* タイトルとテキストの間隔 */
		width: 100%;
		max-width: 1400px;
		/* テキストボックスの幅は共通で1400px */
		background-color: var(--color-wt);
		padding: var(--px40) var(--px40);
		box-sizing: border-box;
	}

	/* --- Title Area --- */
	.c-columnlist__title {
		display: flex;
		align-items: center;
		gap: var(--px20);
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		flex-shrink: 0;
		/* タイトルエリアが潰れないようにする */
	}

	.c-columnlist__title::before,
	.c-columnlist__title::after {
		content: none;
		/* デフォルトの見出し装飾をリセット */
	}

	/* Number Icon (01, 02...) */
	.c-columnlist__icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		border: 1px solid var(--color-primary);
		/* Tailwind: blue-900 */
		color: var(--color-primary);
		font-family: var(--font-family02);
		font-size: var(--px24);
		font-weight: 700;

		/* 数字の余白微調整 */
	}

	/* CSSカウンターを使って番号を自動挿入 */
	.c-columnlist__icon::before {
		content: "0" counter(column-counter);
		margin-bottom: 0.1em;
	}

	/* JA Title */
	.c-columnlist__title-ja {
		font-family: var(--font-family01);
		font-size: var(--px30w);
		font-weight: 700;
		color: var(--color-font);
		line-height: 1.2;
	}

	/* EN Title */
	.c-columnlist__title-en {
		font-family: var(--font-family01);
		font-size: var(--px24s);
		font-weight: 700;
		color: var(--color-primary);
		letter-spacing: 0;
	}

	/* --- Text Area --- */
	.c-columnlist__text {
		font-family: var(--font-family01);
		font-size: var(--px16);
		color: var(--color-font);
		line-height: 2;
		margin: 0;
		padding-top: var(--px12);
		/* タイトルとの縦位置の微調整 */
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */

@media screen and (max-width: 1023px) {
	.post {
		.c-columnlist {
			gap: var(--px60);
		}

		.c-columnlist__body {
			flex-direction: column;
			/* タイトルとテキストを縦並びに */
			gap: var(--px20);
			padding: var(--px30) var(--px20);
		}

		.c-columnlist__title {
			flex-wrap: wrap;
			/* 画面幅が狭い場合は折り返しを許可 */
			gap: var(--px12);
		}

		.c-columnlist__icon {
			width: 48px;
			height: 48px;
			font-size: var(--px20);
		}

		.c-columnlist__text {
			padding-top: 0;
		}
	}
}

@media screen and (max-width: 640px) {
	.post {
		.c-columnlist__icon {
			width: 40px;
			height: 40px;
			font-size: var(--px20);
		}
	}
}

/* =========================================
   Area Detail Section Styles (PC First)
   ========================================= */

.post {
	.c-area-detail {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding: var(--px100) 0;
		clip-path: inset(0);
	}

	/* --- Parallax Background --- */
	.c-area-detail__bg {
		position: fixed;
		/* 固定配置 */
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: url('/wp-content/uploads/subpage_works_B-bg-01.jpg.webp') no-repeat center;
		background-size: cover;
		z-index: -1;
		pointer-events: none;
	}

	/* 背景を少し暗くするオーバーレイ */
	.c-area-detail__bg::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(18, 24, 43, 0.1);
		/* 紺色系の半透明 */
	}

	/* --- Content Area --- */
	.c-area-detail__inner {
		position: relative;
		z-index: 1;
		width: 90%;
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: var(--px80);
	}

	/* --- Top Section (Text & Map) --- */
	.c-area-detail__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--px40);
	}

	.c-area-detail__text-wrap {
		flex: 1;
		max-width: 620px;
	}

	.c-area-detail__title {
		font-family: var(--font-family02);
		font-size: var(--px40w);
		font-weight: 700;
		color: var(--color-wt);
		line-height: 1.4;
		margin: 0 0 var(--px80) 0;
		border: none;
		background: none;
		padding: 0 0 var(--px60);
		text-align: left;

		&::before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			transform: inherit;
			bottom: 0;
			background: none;
			border: none;
			height: 1px;
			width: var(--px80);
			background-color: var(--color-wt);

		}

		&::after {
			content: none;
		}
	}

	.c-area-detail__desc {
		font-family: var(--font-family01);
		font-size: var(--px18, 18px);
		color: var(--color-wt);
		line-height: 2;
		margin: 0;
	}

	.c-area-detail__map-wrap {
		width: 100%;
		max-width: 544px;
		background-color: var(--color-wt);
		border-radius: 16px;
		padding: var(--px30);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.c-area-detail__map-img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* --- Bottom Section (Grid) --- */
	.c-area-detail__bottom {
		display: flex;
		flex-direction: column;
		gap: var(--px40);
	}

	.c-area-detail__heading {
		display: inline-block;
		font-family: var(--font-family01);
		font-size: var(--px24);
		font-weight: 600;
		color: var(--color-wt);
		border: 1px solid var(--color-wt);
		background-color: transparent;
		padding: 12px 24px;
		margin: 0;
		line-height: 1.2;
		align-self: flex-start;
	}

	.c-area-detail__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--px20);
	}

	.c-area-detail__item {
		background-color: var(--color-wt);
		padding: var(--px24);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.c-area-detail__item-name {
		font-family: var(--font-family01);
		font-size: var(--px18);
		font-weight: 700;
		color: var(--color-primary);
		/* Tailwind: blue-900 */
		margin: 0;
		padding: 0 0 var(--px12) 0;
		border-bottom: 1px solid var(--color-primary);
		border-left: none;
	}

	.c-area-detail__item-name::before,
	.c-area-detail__item-name::after {
		content: none;
	}

	.c-area-detail__item-area {
		font-family: var(--font-family01);
		font-size: var(--px16, );
		color: var(--color-wty);
		margin: 0;
		line-height: 1.6;
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */

@media screen and (max-width: 1023px) {
	.post {
		.c-area-detail {
			clip-path: none;
		}

		.c-area-detail__bg {
			position: absolute;
			height: 100%;
		}

		.c-area-detail__top {
			flex-direction: column;
			gap: var(--px60);
		}

		.c-area-detail__grid {
			grid-template-columns: 1fr;
			/* 1カラムに変更 */
		}

		.c-area-detail__item-name {
			font-size: var(--px20);
			padding: 0 0 4px 0;
		}
	}
}

/* =========================================
   history Section Styles (PC First)
   ========================================= */
.post {
	.c-history {
		margin: var(--px30) auto;
		border: none;
		border-spacing: 0;
		border-collapse: separate;
		border-spacing: var(--px16) 0;

		.c-history__head {
			border-bottom: none;
			font-size: var(--px20);
			text-align: right;
			position: relative;
			min-height: 40px;
			vertical-align: middle;
			border: none;
			color: var(--color-primary);
			font-family: var(--font-family01);
			background-color: transparent;
			padding: 0 var(--px40) 0 0;
			font-weight: 600;

			&::before {
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);
				width: 12px;
				height: 12px;
				background-color: var(--color-primary);
				border-radius: 50vh;
			}

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);
				right: 5px;
				width: 2px;
				height: 100%;
				background-color: var(--color-primary);
			}
		}

		.c-history__desc {
			border: none;
			border-bottom: solid 1px #9FB7F2;
			background-color: transparent;
			font-weight: 500;
			color: var(--color-font);
		}

		.c-history__item {

			&:first-of-type,
			&:last-of-type {
				.c-history__head:after {
					content: "";
					position: absolute;
					-webkit-transform: translateY(0);
					-ms-transform: translateY(0);
					transform: translateY(0);
					right: 5px;
					width: 2px;
					height: 50%;
					background-color: var(--color-primary);
				}
			}

			&:first-of-type {
				.c-history__head:after {
					top: inherit;
					bottom: 0;
				}
			}

			&:last-of-type {
				.c-history__head:after {
					top: 0;
				}
			}
		}
	}
}

@media screen and (max-width: 640px) {
	.post {
		.c-history {
			.c-history__item {
				display: flex;
				flex-direction: column;
			}

			.c-history__head {
				font-size: var(--px18);
				text-align: left;
				line-height: 1.4;
				width: 100%;
				padding: 0 0 0 var(--px40);
				min-height: auto;

				&::before {
					right: inherit;
					left: calc(-10px /2);
				}

				&::after {
					right: inherit;
					left: 0;
					top: calc(10px /2);
					transform: inherit;
					height: 100%;
				}
			}

			.c-history__item {
				&:last-of-type {
					.c-history__head:after {
						top: 12px;
					}
				}
			}

			.c-history__desc {
				position: relative;
				border: none;
				padding: 4px 0 var(--px40) var(--px40);

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 2px;
					height: calc(100% + 10px /2);
					background-color: var(--color-primary);
				}
			}
		}
	}
}

/* =========================================
   Philosophy Section Styles (PC First)
   ========================================= */

.post {
	.c-philosophy {
		position: relative;
		width: 100%;
		/* デザイン上、右下に配置されているため右寄せにする */
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding-top: var(--px120);
		/* 上部の余白 */
		/* clip-pathを使ったパララックス */
		clip-path: inset(0);
	}

	/* --- Parallax Background --- */
	.c-philosophy__bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: url('/wp-content/uploads/subpage_company-bg-01.jpg.webp') no-repeat;
		background-size: cover;
		background-position: center;
		z-index: -1;
		pointer-events: none;
	}

	/* --- Content Area (White Box) --- */
	.c-philosophy__inner {
		position: relative;
		z-index: 1;
		width: 94%;
		max-width: 1280px;
		background-color: var(--color-wt);
		border-top-left-radius: var(--px16);
		border-bottom-left-radius: var(--px16);
		padding: var(--px100);
		margin-bottom: -1px;
	}

	/* --- Top Section (代表挨拶) --- */
	.c-philosophy__top {
		display: flex;
		gap: var(--px80);
		margin-bottom: var(--px60);
	}

	.c-philosophy__header {
		width: 200px;
		flex-shrink: 0;
	}

	.c-philosophy__title {
		font-family: var(--font-family01);
		font-size: var(--px40);
		font-weight: 700;
		color: var(--color-primary);
		margin: 0;
		border: none;
		background: none;
		padding: 0;
		text-align: left;
	}

	.c-philosophy__title::before,
	.c-philosophy__title::after {
		content: none;
	}

	.c-philosophy__title::after {
		content: "";
		display: block;
		width: var(--px80);
		height: 1px;
		background-color: var(--color-font);
		margin-top: var(--px30);
		left: 0;
		transform: inherit;
		margin-left: 0.2em;
	}

	.c-philosophy__body {
		flex: 1;
	}

	.c-philosophy__text {
		font-family: var(--font-family01);
		font-size: var(--px16);
		color: var(--color-font);
		line-height: 2;
		margin: 0;
	}

	/* --- Bottom Section (理念・スローガン) --- */
	.c-philosophy__list {
		display: flex;
		gap: var(--px24);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.c-philosophy__list-item {
		flex: 1;
		background: linear-gradient(to bottom, #eff6ff, #93c5fd);
		border-radius: var(--px16);
		padding: var(--px50) var(--px40);
		display: flex;
		flex-direction: column;
	}

	.c-philosophy__list-title {
		font-family: var(--font-family01);
		font-size: var(--px24);
		font-weight: 700;
		color: var(--color-primary);
		margin: 0 0 var(--px50) 0;
		border: none;
		background: none;
		padding: 0;
	}

	.c-philosophy__list-title::before,
	.c-philosophy__list-title::after {
		content: none;
	}

	.c-philosophy__list-text {
		font-family: var(--font-family02);
		font-size: var(--px20);
		font-weight: 700;
		color: var(--color-font);
		line-height: 2;
		margin: auto 0 0 0;
	}

	/* スローガンのみ文字サイズを大きく */
	.c-philosophy__list-text--slogan {
		font-size: var(--px40);
		line-height: 1.5;
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */

@media screen and (max-width: 1023px) {
	.post {
		.c-philosophy {
			justify-content: center;
			/* SPでは中央配置 */
			padding: var(--px80) 0;
			clip-path: none;
			/* iOS Safari等のバグ回避 */
		}

		.c-philosophy__bg {
			position: absolute;
			height: 100%;
		}

		.c-philosophy__inner {
			border-radius: var(--px16);
		}

		.c-philosophy__top {
			flex-direction: column;
			gap: var(--px30);
			margin-bottom: var(--px40);
		}

		.c-philosophy__header {
			width: 100%;
		}

		.c-philosophy__list {
			flex-direction: column;
		}
	}
}

@media screen and (max-width: 640px) {
	.post {
		.c-philosophy__inner {
			padding: var(--px80) var(--px60);
		}

		.c-philosophy__list-text,
		.c-philosophy__list-text--slogan {
			line-height: 1.4;
		}
	}
}

/*================================================
				tiktok
================================================*/
.post blockquote {
	background-color: var(--color-primary-tint);
	padding: 2em;
	position: relative;
	margin-bottom: 0;
}

.post blockquote:before {
	content: none;
}

@media screen and (max-width: 640px) {
	.post blockquote {
		margin-top: 0;
		padding: 0 2em 1em;
	}
}

/* =========================================
   Interview Section Styles (社員インタビュー)
   ========================================= */

.post {

	/* -------------------------------------------
       Tab Navigation (共通)
    ------------------------------------------- */
	.c-tab {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		gap: 2px;
	}

	.c-tab__item {
		flex: 1;
		background-color: #D9D9D9;
		color: #6D6D6D;
		font-family: var(--font-family01);
		font-size: var(--rem20, 20px);
		font-weight: 700;
		text-align: center;
		padding: 15px 10px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	/* アクティブなタブ */
	.c-tab__item.on {
		background-color: #1e3a8a;
		color: var(--color-wt);
	}

	/* -------------------------------------------
       Content Area (タブ切り替え 共通)
    ------------------------------------------- */
	.c-interview-content,
	.c-job-content {
		display: none;
		/* デフォルト非表示 */
		animation: fadeInTab 0.5s ease forwards;
	}

	/* .on クラスが付いたら表示 */
	.c-interview-content.on,
	.c-job-content.on {
		display: block;
	}

	.c-interview-content.off,
	.c-job-content.off {
		display: none;
	}

	@keyframes fadeInTab {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}


	/* =========================================
       1. 社員インタビュー固有のスタイル
       ========================================= */
	.c-interview-content__inner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: var(--px80);
		gap: var(--px60);
		background: var(--color-wt);
	}

	.c-interview-profile {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--px80);
		margin: 0 auto;
		width: fit-content;
	}

	.c-interview-profile__img-wrap {
		width: 400px;
		flex-shrink: 0;
		margin: 0;
	}

	.c-interview-profile__img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
	}

	.c-interview-profile__info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.c-interview-profile__furigana {
		color: var(--color-primary);
		font-family: var(--font-family01);
		font-size: var(--px14);
		font-weight: 700;
		margin: 0 0 5px 0;
	}

	.c-interview-profile__name {
		color: var(--color-primary);
		font-family: var(--font-family02);
		font-size: var(--px40);
		font-weight: 700;
		margin: 0 0 var(--px12) 0;
		padding: 0;
		background: transparent;
		border: none;
	}

	.c-interview-profile__name::after {
		content: none;
	}

	.c-interview-profile__meta {
		color: var(--color-font);
		font-family: var(--font-family01);
		font-size: var(--px16);
		font-weight: 700;
		margin: 0;
	}

	.c-interview-qa {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--px40);
		width: 100%;
	}

	.c-interview-qa__item {
		background-color: var(--color-primary-tint);
		padding: var(--px40);
	}

	.c-interview-qa__heading {
		line-height: 1.4;
		color: var(--color-primary);
		font-family: var(--font-family01);
		font-size: var(--px20);
		font-weight: 700;
		margin: 0 0 var(--px24) 0;
		padding: 0 0 10px 0;
		border-bottom: 1px solid var(--color-primary);
		border-left: none;
	}

	.c-interview-qa__heading::before,
	.c-interview-qa__heading::after {
		content: none;
	}

	.c-interview-qa__body p {
		margin: 0 0 15px 0;
		line-height: 1.8;
		font-family: var(--font-family01);
		font-size: var(--px16);
		color: var(--color-font);
	}

	.c-interview-qa__body p:last-child {
		margin-bottom: 0;
	}


	/* =========================================
       2. 募集要項固有のスタイル（リスト）
       ========================================= */

	.c-job-content .c-table td p {
		margin: 0 0 10px 0;
	}

	.c-job-content .c-table td p:last-child {
		margin-bottom: 0;
	}

	/* リストデザインの上書き */
	.c-job-content .list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.c-job-content .list li {
		position: relative;
		padding-left: 1.2em;
		margin-bottom: 12px;
		line-height: 1.8;
	}

	.c-job-content .list li:last-child {
		margin-bottom: 0;
	}

	/* FontAwesomeのアイコンを黒丸（・）で上書き */
	.c-job-content .list li::before {
		content: "・";
		font-family: var(--font-family02);
		position: absolute;
		left: 0;
		top: 0;
		font-size: inherit;
		font-weight: 700;
		color: #262626;
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */
@media screen and (max-width: 1023px) {
	.post {

		/* タブ共通 */
		.c-tab__item {
			font-size: 14px;
			padding: 15px 5px;
		}

		/* インタビュー用 */
		.c-interview-content__inner {
			padding: var(--px40) var(--px20);
		}

		.c-interview-profile {
			flex-direction: column;
			gap: var(--px40);
			text-align: center;
		}

		.c-interview-profile__info {
			align-items: flex-start;
		}

		.c-interview-profile__img-wrap {
			width: 100%;
			max-width: 320px;
		}

		.c-interview-qa {
			grid-template-columns: 1fr;
			gap: var(--px24);
		}
	}
}

/* =========================================
   SDGs Section Styles (パララックス対応)
   ========================================= */

.post {

	/* --- 親コンテナ --- */
	.c-fullbg-image {
		position: relative;
		margin: 0 calc(((100vw - 100%) / 2) * -1) 0 calc(((100vw - 100%) / 2) * -1);
		padding: var(--px100) 0;
		clip-path: inset(0);

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 2;
			background: linear-gradient(123.66deg, rgba(76, 101, 184, 0.33) 33.61%, rgba(255, 255, 255, 0) 119.31%);
		}
	}

	/* --- パララックス用背景 --- */

	.c-fullbg-image__bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		pointer-events: none;
	}

	.c-fullbg-image__bg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* --- ボックス --- */
	.c-fullbg-image__inner {
		position: relative;
		z-index: 3;
		background-color: var(--color-wt);
		width: 90%;
		max-width: var(--content-max-width);
		margin: 0 auto;
		border-radius: var(--px16);
		padding: var(--px80) var(--px100);
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	}

	/* --- コンテンツの中身 --- */
	.c-fullbg-image__body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--px30);
	}

	.c-fullbg-image__title {
		position: relative;
		color: var(--color-font);
		font-size: var(--px60);
		font-weight: 700;
		font-family: var(--font-family02);
		line-height: 1.4;
		background: transparent;
		padding: 0 0 var(--px30) 0;
		margin: var(--px120) auto var(--px30);
		text-align: center;
		letter-spacing: 0;
		border: none;
	}

	.c-fullbg-image__img-wrap {
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 1000px;
		/* SDGs画像の最大幅 */
	}

	.c-fullbg-image__img-wrap img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* --- 説明テキスト --- */
	.c-fullbg-image__desc {
		width: 100%;
		max-width: 1000px;
		font-family: var(--font-family01);
		font-size: var(--body-font-size);
		color: var(--color-font);
		line-height: 2;
		margin: 0;
		padding: 0;
		text-align: left;
		/* 画像に対して左揃え */
	}
}

/* =========================================
   差分：.c-fullbg-image__inner--col (.c-box横並びバリエーション)
   ========================================= */

.post {

	/* 横並びレイアウトへの変更 */
	.c-fullbg-image__inner--col {
		flex-direction: row;
		/* PC時は横並び */
		align-items: flex-start;
		padding: var(--px80);
		border-radius: 0;
		gap: var(--px50);
		/* 見出しと右側コンテンツの間の余白 */
	}

	/* 右側のコンテンツエリア（左揃えにする） */
	.c-fullbg-image__inner--col .c-fullbg-image__body {
		flex: 1;
		align-items: flex-start;
		text-align: left;
		gap: 0;
		/* gapをリセットして個別のmarginで管理 */
	}

	.c-fullbg-image__head {
		position: relative;
		color: var(--color-font);
		font-size: var(--px60);
		font-weight: 700;
		font-family: var(--font-family02);
		line-height: 1;
		background: transparent;
		padding: 0 0 var(--px30) 0;
		margin: 0 auto var(--px30) 0;
		text-align: left;
		letter-spacing: 0;
		border: none;

		&::before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			transform: inherit;
			bottom: 0;
			background: none;
			border: none;
			height: 1px;
			width: var(--px80);
			background-color: var(--color-primary);
		}
	}

	/* 青文字のタイトル */
	.c-box-col__title {
		color: var(--color-primary);
		font-family: var(--font-family01);
		font-size: var(--px24);
		font-weight: 700;
		margin: 0 0 var(--px24) 0;
		border: none;
		padding: 0;
		background: transparent;
	}

	/* 見出しリセット用 */
	.c-box-col__title::after,
	.c-box-col__title::before {
		content: none;
	}

	/* 説明テキスト */
	.c-box-col__desc {
		color: var(--color-font);
		font-family: var(--font-family01);
		font-size: var(--body-font-size);
		line-height: 2;
		margin: 0;
	}
}

/* =========================================
   SP Styles (Media Queries)
   ========================================= */
@media screen and (max-width: 1023px) {
	.post {
		.c-fullbg-image {
			padding: var(--px100) 0;
		}

		.c-fullbg-image__inner {
			padding: var(--px80) var(--px60);
		}

		.c-fullbg-image__body {
			gap: var(--px40);
		}

		/* スマホ時は縦並びに戻す */
		.c-fullbg-image__inner--col {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--px40);
		}
	}
}

/* =========================================
   SDGs Section Styles (sustainability-list)
   ========================================= */

.post {
	.c-sustainability-listarea {
		position: relative;
		margin: 0 calc(((100vw - 100%) / 2) * -1) 0 calc(((100vw - 100%) / 2) * -1);

		.c-sustainability-list {
			width: 90%;
			max-width: 1620px;
			margin-left: auto;
			margin-right: auto;

			.c-sustainability-list__item {
				display: flex;
				flex-direction: row;
				gap: var(--px20);
			}

			.c-sustainability-list__ico {
				flex-shrink: 0;
				width: var(--px120);
				height: var(--px120);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

/*================================================
				CONTACT
================================================*/

.wpcf7-form select {
	width: auto;
}

.wpcf7-form .must_fn {
	float: none;
}

.wpcf7-form table+div .wpcf7-form-control-wrap {
	display: inline;
}

/* ボタン */
.post form.wpcf7-form .linkBtn .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 0;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.post .wpcf7-form input[type=submit] {
	background: var(--color-primary);
}

.post .wpcf7-form input[type=submit]:hover {
	background-color: var(--color-secondary);
}


@media print,
screen and (max-width: 768px) {
	#contact .c-column.c-fullarea {
		gap: var(--px16);
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="url"],
input[type="number"],
select,
textarea {
	vertical-align: middle;
	line-height: 30px;
	min-height: 50px;
	padding: 10px;
	border: none;
	border-radius: 0;
	color: var(--color-bk);
	background: #f5f5f5;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.wpcf7-form {
	padding: 0;
}

.wpcf7-form a {
	border-bottom: solid 1px;
}

.wpcf7-form a:hover {
	opacity: 0.7;
}

.wpcf7-form input[type=submit] {
	display: block;
	background: var(--color-primary);
	border: none;
	border-radius: 0px;
	font-family: var(--font-family01);
	font-weight: 500;
	font-size: var(--px16);
	line-height: 1.4;
	color: var(--color-wt);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin: var(--px30) auto 0;
	max-width: 240px;
	width: 100%;
	padding: var(--px20) var(--px30);
	border-radius: var(--px80);

	&:hover {
		color: var(--color-wt);
		background: var(--color-secondary-tint);
	}
}

.submit_btn,
.post .submit_btn {
	position: relative;
	width: auto !important;
}

.submit_btn .wpcf7-spinner,
.post .submit_btn .wpcf7-spinner {
	top: inherit;
	background-color: #adadad;
}

.wpcf7-form .must {
	background: var(--color-primary);
}

/*================================================
				NOTFOUND
================================================*/

body.error404 #wrapper section h1 {
	padding: 0;
	font-family: var(--font-family01);
	background: transparent;
	margin: 20px 0 calc(40px + (1vw - 19.2px) * 1.6828) 0;
	/*40px-14px*/
	color: var(--color-bk);
	font-weight: 500;
	font-size: calc(3rem + (1vw - 1.92rem) * 0.6472);
	/*3rem-1.7rem*/
	line-height: 1.4;
	letter-spacing: -1px;
	padding-bottom: 10px;
	border-bottom: solid 1px var(--color-bk);
	width: 100%;
}

/*================================================
				sitemap
================================================*/

.post ul#sitemap_list>li {
	margin-bottom: 5px;
	padding: var(--rem24) 0 var(--rem24) 5px;
	background: none;
	border-bottom: solid 1px var(--color-table-border);
}

.post ul#sitemap_list>li a {
	font-weight: 500;
	font-family: var(--font-family01);
	color: var(--color-font);

	br {
		display: none;
	}
}

/*================================================
			subpage-number animation
================================================*/

.numbersarea .ttl {
	text-align: center;
	font-weight: 700;
	font-size: var(--px40);
	margin-bottom: var(--px24);
	line-height: 1.6;
	background: var(--color-primary);
	color: var(--color-wt);
	padding: 6px 6px 8px;
}

.numbersarea .basearea {
	position: relative;
	padding: var(--px40);
	background: var(--color-wt);
}

.numbersarea>div {
	margin-bottom: var(--px60);
}

/* ============================================================
   1. 変数定義 (Global Variables)
   すべての設定値集約
============================================================ */
:root {
	/* --- 基本カラー --- */
	--color-main: #666;
	--color-sub: #6993fd;
	--color-accent: #9e0101;
	--color-bg-light: #f7f7f7;
	--color-bg-gray: #eeeeee;

	/* --- 円グラフ用カラー --- */
	--circlegraph-color01: #3062DD;
	--circlegraph-color02: #5380f1;
	--circlegraph-color03: #6993fd;
	--circlegraph-color04: #85a7ff;
	--circlegraph-color05: #a7c0ff;
	--circlegraph-color06: #bacbf7;
	--circlegraph-color07: #dde7ff;

	/* --- 円グラフ（引き出し線タイプ）の基準値 --- */
	--graph-scale: 2.5;
	--graph-base-radius: 25;
	--graph-actual-radius: calc(var(--graph-base-radius) * var(--graph-scale));
	--graph-stroke-width: calc(var(--graph-actual-radius) * 2);
	--line-extend-length: 80;
	--line-horizontal-length: 30;

	/* --- 数字ロール（カウンター）共通設定 --- */
	--rollfont-size: 66px;
	/* デフォルトサイズ */
	--rollline-height: 1.0;
	--rolldigit-width: 0.55em;
	/* 数字1文字の幅 */
	--rolldigit-gap: -0.2em;
	/* 文字の間隔（詰め具合） */
}

/* ============================================================
   2. 棒グラフ (c-bar-graph)
============================================================ */
.c-bar-graph {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/* 1. 縦棒グラフ全体の調整 */
.c-bar-graph--vertical {
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	gap: 3%;
	width: 100%;
	box-sizing: border-box;
}

.c-bar-graph__item {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
}

.c-bar-graph--vertical .c-bar-graph__item {
	flex-direction: column-reverse;
	max-width: 20%;
	width: auto;
	height: 100%;
	flex: 1;
	/* 横に均等に並べる */
}

/* ラベルテキスト */
.c-bar-graph__label {
	min-width: 60px;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	background: #eee;
}

.c-bar-graph--vertical .c-bar-graph__label {
	width: 100%;
	min-width: auto;
	text-align: center;
	font-size: 1em;
	min-height: 3.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: break-all;
	/* 長い単語で幅が広がらないように */
}

/* グラフの土台 */
.c-bar-graph__bar-container {
	flex-grow: 1;
	background: var(--color-bg-light);
	height: 35px;
	position: relative;
	overflow: hidden;
}

.c-bar-graph--vertical .c-bar-graph__bar-container {
	width: 100%;
	height: 180px;
	margin: 0 auto;
	background: var(--color-bg-light);
	position: relative;
	overflow: hidden;
}

/* グラフ本体（アニメーション） */
.c-bar-graph__bar {
	background: var(--color-main);
	transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1),
		height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 横グラフ時 */
.c-bar-graph:not(.c-bar-graph--vertical) .c-bar-graph__bar {
	height: 100%;
	width: calc(var(--val, 0) * 1%);
	border-radius: 0 4px 4px 0;
}

/* 縦グラフ時 */
.c-bar-graph--vertical .c-bar-graph__bar {
	width: 100%;
	height: calc(var(--val, 0) * 1%);
	position: absolute;
	bottom: 0;
	border-radius: 4px 4px 0 0;
}

/* カラーバリエーション */
.c-bar-graph__bar--color-01 {
	background: #3062DD;
}

.c-bar-graph__bar--color-02 {
	background: #5380f1;
}

.c-bar-graph__bar--color-03 {
	background: #6993fd;
}

.c-bar-graph__bar--color-04 {
	background: #85a7ff;
}

.c-bar-graph__bar--color-05 {
	background: #a7c0ff;
}

.c-bar-graph__bar--color-06 {
	background: #bacbf7;
}

.c-bar-graph__bar--color-07 {
	background: #dde7ff;
}

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

	.c-bar-graph--vertical .c-bar-graph__item {
		max-width: 30%;
	}
}

/* ============================================================
   3. 数字カウンター (c-counter / startRoll)
============================================================ */
.c-counter {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 1;
	text-align: center;
}

/* 縦棒グラフ内のカウンター位置調整 */
.c-bar-graph--vertical .c-counter {
	width: 100%;
	margin-bottom: 5px;
	justify-content: center;
}

.c-counter__roll {
	font-family: var(--font-family01);
	font-size: var(--rollfont-size);
	font-weight: 700;
	overflow: hidden;
	display: inline-block;
	height: calc(1em * var(--rollline-height));
	line-height: calc(1em * var(--rollline-height));
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	display: inline-flex;
}

.c-counter__digit {
	display: inline-block;
	width: var(--rolldigit-width);
	text-align: center;
}


.c-counter__digit span {
	display: block;
	word-break: break-all;
	transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateY(calc(var(--index, 0) * -1em * var(--rollline-height)));
}

.c-counter__unit {
	font-size: 24px;
	margin-left: 4px;
	margin-bottom: 4px;
	font-weight: 900;
	color: var(--color-main);
}

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

	/* 文字の向きを強制（寝てしまうのを防ぐ） */
	.c-counter {
		transform: rotate(0deg) !important;
	}

	.c-bar-graph__label {
		font-size: var(--px16);
	}

	.c-counter__unit {
		font-size: var(--px16);
		margin-bottom: 1px;
	}

	.c-bar-graph__bar-container {
		height: var(--px24);
	}

}

/* ============================================================
   4. ID別の個別サイズ調整 (ご要望の反映箇所)
   ここで各グラフの数字サイズを自由にコントロールできます。
============================================================ */

/* 年代別 (graph-age) */
#graph-age {
	--rollfont-size: 32px;
}

#graph-age .c-bar-graph__totallabel {
	--rollfont-size: 80px;

	.c-counter__unit {
		font-size: 40px;
	}
}

/* 男女比 (graph-gender) */
#graph-gender {
	--rollfont-size: 66px;
}

/* 勤続年数 (graph-tenure) */
#graph-tenure {
	--rollfont-size: 40px;
}

#graph-tenure .c-counter__unit {
	font-size: 18px;
	margin-left: 2px;
	margin-bottom: 1px;
}

/* 交通手段 (graph-transport) */
#graph-transport {
	--rollfont-size: 40px;
}

#graph-transport .c-counter__unit {
	font-size: 18px;
	margin-left: 2px;
	margin-bottom: 1px;
}

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

	#graph-age .c-bar-graph__totallabel {
		--rollfont-size: var(--px80);
		margin-bottom: var(--px20);

		.c-counter__unit {
			font-size: var(--px24);
		}
	}

	#graph-age {
		--rollfont-size: var(--px40);
	}

	#graph-gender {
		--rollfont-size: var(--px80);
	}

}

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

	:root {
		--graph-scale: 2.5;
		--line-extend-length: 80;
	}

	#graph-tenure,
	#graph-transport {
		--rollfont-size: 20px;
	}
}

@media screen and (max-width: 414px) {
	:root {
		--line-extend-length: 30;
		--graph-base-radius: 18;
		--graph-scale: 2.2;
	}

	#graph-tenure,
	#graph-transport {
		--rollfont-size: 18px;
	}
}

/* ============================================================
   5. 円グラフ (c-circle-graph)
============================================================ */

.c-circle-graph {
	position: relative;
	width: 100%;
	max-width: 300px;
	height: auto;
}

.c-circle-graph__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

#graph-gender .c-circle-graph__svg {
	transform: rotate(270deg);
}

.c-circle-graph__bar {
	fill: none;
	stroke-width: 14px;
	stroke-dasharray: calc(var(--percent, 0) * 1.005) 100;
	stroke-linecap: butt;
	stroke-dashoffset: calc(var(--offset, 0) * -1);
	transition: stroke-dasharray 1.5s ease-in-out 0.7s, stroke-dashoffset 1.5s ease-in-out 0.7s;
}

.is-shown .c-circle-graph__bar {
	stroke-dasharray: var(--percent, 0) 100;
}

/* 円グラフパーツの色 */
.c-circle-graph__bar--01 {
	stroke: var(--circlegraph-color01);
}

.c-circle-graph__bar--02 {
	stroke: var(--circlegraph-color02);
}

.c-circle-graph__bar--03 {
	stroke: var(--circlegraph-color03);
}

.c-circle-graph__bar--04 {
	stroke: var(--circlegraph-color04);
}

.c-circle-graph__bar--05 {
	stroke: var(--circlegraph-color05);
}

.c-circle-graph__bar--06 {
	stroke: var(--circlegraph-color06);
}

.c-circle-graph__bar--07 {
	stroke: var(--circlegraph-color07);
}

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

	/* モバイルで円グラフが潰れないように高さを確保 */
	.c-circle-graph {
		height: auto;
		min-height: 100px !important;
		/* 必要に応じて調整 */
		margin: 0 auto;
	}

}

/* ============================================================
   6. その他レイアウトパーツ
============================================================ */

.c-graph-group__body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.c-target-list {
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-target-list__item {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 120px;
}

.c-bar-graph__totallabel {
	max-width: none;
	flex-shrink: 0;
	width: fit-content;
	justify-content: center;
}

.c-target-list__ico {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.c-target-list__ico img {
	width: 80px;
	margin: 0 auto 10px;
}

#tenure::after {
	position: absolute;
	left: var(--px30);
	bottom: var(--px30);
	color: #CCD6F1;
	font-size: var(--px100);
	font-weight: 400;
	font: var(--fa-font-solid);
	line-height: 1;
	content: '\f073';
	z-index: -1;
}

#transport::after {
	position: absolute;
	left: var(--px30);
	bottom: var(--px30);
	color: #CCD6F1;
	font-size: var(--px100);
	font-weight: 400;
	font: var(--fa-font-solid);
	line-height: 1;
	content: '\f70c';
	z-index: -1;
}

#headcount::after {
	position: absolute;
	left: var(--px30);
	bottom: var(--px30);
	color: #CCD6F1;
	font-size: var(--px100);
	font-weight: 400;
	font: var(--fa-font-solid);
	line-height: 1;
	content: '\f64f';
	z-index: -1;
}

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

	.c-target-list__item {
		width: 30%;
	}

	.c-target-list__ico img {
		width: var(--px80);
	}

}